xjs
/
volunteer-4
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 职业查询页面，增加picker-view组件，增加tab组件

master
xjs 2025-03-08 17:34:22 +08:00
parent 790fdf4114
commit 8d0e7ebcd0
30 changed files with 961 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/login-sub/components/LoginMask.vue
View File

@ -29,7 +29,9 @@
<wd-radio :value="true" shape="dot"></wd-radio>
</wd-radio-group>
<view class="flex items-center">
<text class="text-[24rpx]">已阅读并同意《服务条款》和《隐私条款》</text>
<text class="text-[24rpx] whitespace-nowrap">
已阅读并同意《服务条款》和《隐私条款》
</text>
</view>
</view>
</view>

35
src/login-sub/components/navbar/Navbar.vue
View File

@ -10,10 +10,7 @@
<!-- 导航栏主体 -->
<view
class="navbar-content"
:class="{
'navbar-fixed': fixed,
'navbar-border': bordered,
}"
:class="[contentClass, fixed ? 'navbar-fixed' : '', bordered ? 'navbar-border' : '']"
:style="{
backgroundColor: bgColor,
height: navHeight + 'px',
@ -23,7 +20,7 @@
<!-- 左侧区域 -->
<view class="navbar-left" @click="handleClickLeft">
<view v-if="leftArrow" class="back-icon">
<image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
<view class="i-carbon-chevron-left text-[48rpx] text-[#333] font-semibold" />
</view>
<slot name="left"></slot>
</view>
@ -49,6 +46,7 @@
backgroundColor: bgColor,
}"
></view>
<slot name="background"></slot>
</view>
</template>
@ -84,6 +82,10 @@ const props = defineProps({
type: String,
default: '#ffffff',
},
contentClass: {
type: String,
default: 'justify-between',
},
})
const emit = defineEmits(['clickLeft'])
@ -129,7 +131,7 @@ const handleClickLeft = () => {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
/* justify-content: space-between; */
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
@ -149,7 +151,6 @@ const handleClickLeft = () => {
.navbar-left {
display: flex;
align-items: center;
min-width: 100rpx;
height: 100%;
}
@ -161,9 +162,8 @@ const handleClickLeft = () => {
}
.navbar-title {
flex: 1;
/* flex: 1; */
text-align: center;
padding: 0 100rpx;
overflow: hidden;
height: 100%;
display: flex;
@ -172,7 +172,7 @@ const handleClickLeft = () => {
}
.title-text {
font-size: 32rpx;
font-size: 36rpx;
color: #333;
font-weight: 500;
overflow: hidden;
@ -187,4 +187,19 @@ const handleClickLeft = () => {
justify-content: flex-end;
height: 100%;
}
@font-face {
font-family: 'iconfont';
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABlAAAAJMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApcdgE2AiQDCAsGAAQgBYRnBzYbmQXIHpIkBQQKkYCABBEPz2/t/XN3twEbowBkQTxQEQ1RKaKSxEOi0agkJKF5Qvj/f037IFKwlZ2dWU2tJu0EhPwHkBwgOVAclKcvAQpI/v/fz/08XECy+YBymmPQiwIcSmhAY4uSFcgJ+IaxC1zCYwLtRjWSnZ2rGgQWBowLxCPrVBBYllQqNTQ0VISaBXEHtTRNUwW4jb4f/xYEC0kqMzDx6CGrQuKXxKc6Zf7POYQgQHs5kIwjYwEoxK3G/DpRwbi0dlNwKKjAL4lf6vw/R2zVWvTPIwuiCnp2wCRUZ3yJX5pJFVDfByyAFR2AblMAX/OR3t7+zOJi8GyyfzC1uQXLZvtnk/0zyfTy+PvH0/Xp5OzR98/H797/+/fDu3d/3739+/fd+/+nmxvLc5vrS+sry2vz84tLs9Mzc4vzs9NTM/Ozc1OzM3MzU/Mz0wvTU4vTk0tTE8uTEyuT4yv/G0E3XUxv7wwNbu/s9G8fbO9v7+3sb+3ubW4dbO4dbO3vbu4dbO3JzqPFtRE4gEGAX0NBkL+hpCZALkEp5FKUQqE0NHlXJIGrDNAOcEQBCHU+kXT5QNblC7kEv1EK9Y9SB/8o7YYu2m0YXrJLouNIjQJhH+QbVkVZrUQ+YuqzUJdzxPMHhdIj0+hg4o0D8ogj5r5bSoQUxjADz+A8hBDQFEYwh3mommXTul7Vm5ZtqAqJHIdoKCDYDyQ3mCqUG1YKn5+C0s0yiJ/qKVAQedKAhg6Y3mEHJBQaWKnvLVMiiEIxGAY8Aw6HIAhAJmEIzIIOUjLTTAB1taL1QvNq+fYN7QDjcc2okeioaOmy5LFXt3QAAAAA')
format('woff2');
}
.back-text {
font-family: 'iconfont' !important;
font-size: 48rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
}
</style>

BIN
src/login-sub/components/navbar/left.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

8
src/login-sub/index.vue
View File

@ -14,13 +14,15 @@
:bordered="false"
:fixed="true"
:placeholder="true"
left-arrow
bgColor="transparent"
@click-left="handleClickLeft"
>
<template #title>
<text class="text-[#1F2329] text-[36rpx] font-medium">新高考选科</text>
</template>
</Navbar>
<view class="flex flex-col justify-center items-center flex-1 pb-safe">
<view class="flex flex-col justify-center items-center flex-1 pb-safe mt-[-100px]">
<image
class="w-[424rpx] h-[424rpx]"
src="https://api.static.ycymedu.com/images/logo.png"
@ -51,4 +53,8 @@ const handleLogin = () => {
const handleAuthReady = () => {
uni.navigateBack()
}
const handleClickLeft = () => {
uni.navigateBack()
}
</script>

194
src/pages-sub/components/CustomPickerView.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<view class="custom-picker">
<view class="picker-mask" @touchmove.stop.prevent></view>
<picker-view
:value="currentIndex"
:indicator-style="indicatorStyle"
:style="{
border: 'none',
'border-top': 'none',
'border-bottom': 'none',
}"
@change="handleChange"
class="picker-view"
:mask-class="'picker-mask'"
:indicator-class="'picker-indicator'"
>
<picker-view-column class="border-none">
<view
v-for="(item, index) in formattedList"
:key="index"
class="picker-item"
:class="{ 'picker-item-selected': currentIndex[0] === index }"
>
{{ item }}
</view>
</picker-view-column>
</picker-view>
<!-- <view class="picker-indicator-line"></view> -->
</view>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
const props = defineProps({
modelValue: {
type: [String, Number, Object],
default: '',
},
list: {
type: Array,
required: true,
default: () => [],
},
valueKey: {
type: String,
default: '',
},
labelKey: {
type: String,
default: '',
},
indicatorStyle: {
type: String,
default: 'height: 50px;',
},
})
const emit = defineEmits(['update:modelValue', 'change'])
// 格式化列表数据
const formattedList = computed(() => {
if (!props.list.length) return []
// 处理简单数组 ['123', '456']
if (typeof props.list[0] !== 'object') {
return props.list
}
// 处理对象数组，使用labelKey
if (props.labelKey) {
return props.list.map((item) => item[props.labelKey])
}
// 处理对象数组，使用valueKey作为显示
if (props.valueKey) {
return props.list.map((item) => item[props.valueKey])
}
// 默认显示整个对象
return props.list
})
// 计算当前选中项的索引
const currentIndex = computed(() => {
if (!props.modelValue || !props.list.length) return [0]
let targetValue = props.modelValue
if (typeof props.list[0] === 'object' && props.valueKey) {
targetValue = props.modelValue[props.valueKey]
}
const index = props.list.findIndex((item) => {
if (typeof item === 'object' && props.valueKey) {
return item[props.valueKey] === targetValue
}
return item === targetValue
})
return [index > -1 ? index : 0]
})
// 处理选择变化
const handleChange = (e: any) => {
const index = e.detail.value[0]
const selectedItem = props.list[index]
let value = selectedItem
if (typeof selectedItem === 'object' && props.valueKey) {
value = selectedItem[props.valueKey]
}
emit('update:modelValue', value)
emit('change', {
value,
index,
item: selectedItem,
})
}
</script>
<style scoped>
.custom-picker {
width: 100%;
height: 400rpx;
position: relative;
background-color: #fff;
}
.picker-view {
width: 100%;
height: 100%;
}
/* 覆盖picker-view的默认边框 */
.picker-view :deep(.uni-picker-view-indicator),
.picker-view :deep(.uni-picker-view-column),
.picker-view :deep(.uni-picker-view-group) {
border: none !important;
border-top: none !important;
border-bottom: none !important;
}
.picker-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 2;
}
.picker-indicator {
height: 112rpx;
}
.picker-indicator-line {
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -40rpx;
height: 112rpx;
pointer-events: none;
z-index: 1;
}
.picker-item {
text-align: center;
font-size: 34rpx;
color: #7c7c7c;
transition: all 0.2s;
display: flex;
justify-content: center;
align-items: center;
}
.picker-item-selected {
color: #000;
font-weight: 500;
transform: scale(1.05);
}
/* 添加触摸反馈 */
.picker-view :deep(.uni-picker-view-wrapper) {
-webkit-overflow-scrolling: touch;
}
.picker-view :deep(.uni-picker-view-content) {
touch-action: pan-y;
}
</style>

35
src/pages-sub/components/navbar/Navbar.vue
View File

@ -10,10 +10,7 @@
<!-- 导航栏主体 -->
<view
class="navbar-content"
:class="{
'navbar-fixed': fixed,
'navbar-border': bordered,
}"
:class="[contentClass, fixed ? 'navbar-fixed' : '', bordered ? 'navbar-border' : '']"
:style="{
backgroundColor: bgColor,
height: navHeight + 'px',
@ -23,7 +20,7 @@
<!-- 左侧区域 -->
<view class="navbar-left" @click="handleClickLeft">
<view v-if="leftArrow" class="back-icon">
<image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
<view class="i-carbon-chevron-left text-[48rpx] text-[#333] font-semibold" />
</view>
<slot name="left"></slot>
</view>
@ -49,6 +46,7 @@
backgroundColor: bgColor,
}"
></view>
<slot name="background"></slot>
</view>
</template>
@ -84,6 +82,10 @@ const props = defineProps({
type: String,
default: '#ffffff',
},
contentClass: {
type: String,
default: 'justify-between',
},
})
const emit = defineEmits(['clickLeft'])
@ -129,7 +131,7 @@ const handleClickLeft = () => {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
/* justify-content: space-between; */
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
@ -149,7 +151,6 @@ const handleClickLeft = () => {
.navbar-left {
display: flex;
align-items: center;
min-width: 100rpx;
height: 100%;
}
@ -161,9 +162,8 @@ const handleClickLeft = () => {
}
.navbar-title {
flex: 1;
/* flex: 1; */
text-align: center;
padding: 0 100rpx;
overflow: hidden;
height: 100%;
display: flex;
@ -172,7 +172,7 @@ const handleClickLeft = () => {
}
.title-text {
font-size: 32rpx;
font-size: 36rpx;
color: #333;
font-weight: 500;
overflow: hidden;
@ -187,4 +187,19 @@ const handleClickLeft = () => {
justify-content: flex-end;
height: 100%;
}
@font-face {
font-family: 'iconfont';
src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABlAAAAJMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApcdgE2AiQDCAsGAAQgBYRnBzYbmQXIHpIkBQQKkYCABBEPz2/t/XN3twEbowBkQTxQEQ1RKaKSxEOi0agkJKF5Qvj/f037IFKwlZ2dWU2tJu0EhPwHkBwgOVAclKcvAQpI/v/fz/08XECy+YBymmPQiwIcSmhAY4uSFcgJ+IaxC1zCYwLtRjWSnZ2rGgQWBowLxCPrVBBYllQqNTQ0VISaBXEHtTRNUwW4jb4f/xYEC0kqMzDx6CGrQuKXxKc6Zf7POYQgQHs5kIwjYwEoxK3G/DpRwbi0dlNwKKjAL4lf6vw/R2zVWvTPIwuiCnp2wCRUZ3yJX5pJFVDfByyAFR2AblMAX/OR3t7+zOJi8GyyfzC1uQXLZvtnk/0zyfTy+PvH0/Xp5OzR98/H797/+/fDu3d/3739+/fd+/+nmxvLc5vrS+sry2vz84tLs9Mzc4vzs9NTM/Ozc1OzM3MzU/Mz0wvTU4vTk0tTE8uTEyuT4yv/G0E3XUxv7wwNbu/s9G8fbO9v7+3sb+3ubW4dbO4dbO3vbu4dbO3JzqPFtRE4gEGAX0NBkL+hpCZALkEp5FKUQqE0NHlXJIGrDNAOcEQBCHU+kXT5QNblC7kEv1EK9Y9SB/8o7YYu2m0YXrJLouNIjQJhH+QbVkVZrUQ+YuqzUJdzxPMHhdIj0+hg4o0D8ogj5r5bSoQUxjADz+A8hBDQFEYwh3mommXTul7Vm5ZtqAqJHIdoKCDYDyQ3mCqUG1YKn5+C0s0yiJ/qKVAQedKAhg6Y3mEHJBQaWKnvLVMiiEIxGAY8Aw6HIAhAJmEIzIIOUjLTTAB1taL1QvNq+fYN7QDjcc2okeioaOmy5LFXt3QAAAAA')
format('woff2');
}
.back-text {
font-family: 'iconfont' !important;
font-size: 48rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
}
</style>

BIN
src/pages-sub/components/navbar/left.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

26
src/pages-sub/home/career/components/CareerInfo.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<view class="flex flex-col">
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">简介</text>
<text class="text-[22rpx] text-[#636363]">
{{ careerInfo.intro }}
</text>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">职业定义</text>
<text class="text-[22rpx] text-[#636363]">
{{ careerInfo.definition }}
</text>
</view>
</view>
</template>
<script lang="ts" setup>
defineProps({
careerInfo: {
type: Object,
default: () => ({}),
},
})
</script>

68
src/pages-sub/home/career/components/DevelopmentProspect.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<view class="flex flex-col">
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">发展前景</text>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">行业发展前景</view>
<text class="text-[22rpx] text-[#636363]">
{{ prospect.industry }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">个人发展路径</view>
<text class="text-[22rpx] text-[#636363]">
{{ prospect.person }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">职业的就业趋势</view>
<text class="text-[22rpx] text-[#636363]">
{{ prospect.career }}
</text>
</view>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">薪资待遇</text>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">薪资结构</view>
<text class="text-[22rpx] text-[#636363]">
{{ salary.structure }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">满意度</view>
<text class="text-[22rpx] text-[#636363]">
{{ salary.satisfaction }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">福利制度</view>
<text class="text-[22rpx] text-[#636363]">
{{ salary.welfare }}
</text>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
defineProps({
prospect: {
type: Object,
default: () => ({
career: '',
industry: '',
person: '',
}),
},
salary: {
type: Object,
default: () => ({
structure: '',
satisfaction: '',
welfare: '',
}),
},
})
</script>

50
src/pages-sub/home/career/components/KnowledgeBackground.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view class="flex flex-col">
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">学历要求</text>
<text class="text-[22rpx] text-[#636363]">
{{ knowledgeInfo.diplomas }}
</text>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">行业知识</text>
<text class="text-[22rpx] text-[#636363]">
{{ knowledgeInfo.trade }}
</text>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">专业知识</text>
<text class="text-[22rpx] text-[#636363]">
{{ knowledgeInfo.pro }}
</text>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">大学课程</text>
<text class="text-[22rpx] text-[#636363]">
{{ jsonCurriculum.important }}
</text>
</view>
</view>
</template>
<script lang="ts" setup>
defineProps({
knowledgeInfo: {
type: Object,
default: () => ({
diplomas: '',
pro: '',
trade: '',
}),
},
jsonCurriculum: {
type: Object,
default: () => ({
important: '',
}),
},
})
</script>

69
src/pages-sub/home/career/components/LeftMenu.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<view class="bg-white flex w-full flex-1">
<view class="w-[260rpx] bg-[#F7F8FA] flex flex-col items-center">
<view
v-for="item in menus"
:key="item._id"
:class="[
'flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold',
currentMenuObj?._id === item._id ? 'active' : '',
]"
@click="changeMenu(item)"
>
{{ item.rootName }}
</view>
</view>
<view class="flex-1 mt-[40rpx] flex flex-col">
<MajorTreeList v-if="currentMenuObj" :sub-major-list="currentMenuObj" />
</view>
</view>
</template>
<script lang="ts" setup>
import { getBaseProfession } from '@/service/index/api'
import MajorTreeList from './TreeList.vue'
const props = defineProps({
keyword: {
type: String,
default: '',
},
})
const menus = ref([])
const currentMenuObj = ref(null)
const changeMenu = (item: any) => {
currentMenuObj.value = item
}
const getProfessionList = ({ KeyWord }) => {
getBaseProfession({ KeyWord }).then((resp) => {
if (resp.code === 200) {
menus.value = resp.result as any[]
currentMenuObj.value = menus.value[0]
}
})
}
watch(
() => props.keyword,
(newV) => {
getProfessionList({ KeyWord: newV })
},
)
onBeforeMount(() => {
getProfessionList({ KeyWord: props.keyword })
})
</script>
<style lang="scss" scoped>
.active {
background-color: #fff;
color: #1580ff;
}
.view-block {
width: calc(100% - 32rpx);
}
</style>

56
src/pages-sub/home/career/components/TreeList.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<scroll-view class="h-full">
<view class="font-semibold text-[#303030] text-[28rpx] mb-[32rpx] px-[32rpx]">
{{ subMajorList.rootName }}
<text class="text-[22rpx] text-[#bfbfbf] font-normal">
({{ subMajorList?.itemDtos.length || 0 }}个)
</text>
</view>
<view class="px-[32rpx] flex flex-col gap-[48rpx] mt-[52rpx]">
<view
v-for="item in subMajorList.itemDtos"
class="text-[#303030] text-[24rpx]"
@click="navigatorToCareerInfo(item)"
>
{{ item.name }}
</view>
</view>
</scroll-view>
</template>
<script lang="ts" setup>
const props = defineProps({
subMajorList: {
type: Object as () => {
rootName: string
_id: string
itemDtos: any[]
},
default: () => ({
rootName: '',
_id: '',
itemDtos: [],
}),
},
})
const navigatorToCareerInfo = (item: unknown) => {
const _item = item as { id: string }
uni.navigateTo({
url: `/pages-sub/home/career/info?id=${_item.id}`,
})
}
</script>
<style lang="scss" scoped>
:deep(.custom-collapse-item) {
padding: 16rpx 0 !important;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>

65
src/pages-sub/home/career/components/VocationalSkill.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<view class="flex flex-col">
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">职业技能</text>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">专业技能</view>
<text class="text-[22rpx] text-[#636363]">
{{ proSkill.skill_pro }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">通用技能</view>
<text class="text-[22rpx] text-[#636363]">
{{ proSkill.skill_general }}
</text>
</view>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">从业资格</text>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">必须项</view>
<text class="text-[22rpx] text-[#636363]">
{{ qualification.necessary }}
</text>
</view>
<view class="mb-[36rpx]">
<view class="text-[24rpx] text-[#333] font-semibold">附加项</view>
<text class="text-[22rpx] text-[#636363]">
{{ qualification.addition }}
</text>
</view>
</view>
<view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">职业道德</text>
<text class="text-[22rpx] text-[#636363]">
{{ ethics }}
</text>
</view>
</view>
</template>
<script lang="ts" setup>
defineProps({
proSkill: {
type: Object,
default: () => ({
skill_general: '',
skill_pro: '',
}),
},
qualification: {
type: Object,
default: () => ({
necessary: '',
addition: '',
}),
},
ethics: {
type: String,
default: '',
},
})
</script>

44
src/pages-sub/home/career/index.vue
View File

@ -1,5 +1,45 @@
<route lang="json5" type="page">
{
layout: 'page',
style: {
navigationStyle: 'custom',
},
}
</route>
<template>
<text>查职业</text>
<view class="flex flex-col h-screen">
<view class="relative">
<Navbar
safeAreaInsetTop
bg-color="transparent"
:bordered="false"
left-arrow
title="查职业"
@click-left="navigatorBack"
content-class="justify-between"
></Navbar>
<view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
</view>
<view class="flex-1 h-[0] overflow-auto pb-safe">
<LeftMenu />
</view>
</view>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import LeftMenu from './components/LeftMenu.vue'
const navigatorBack = () => {
uni.navigateBack()
}
const searchValue = ref('')
const handleChange = () => {}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/navbar-background.scss';
@import '@/pages-sub/home/styles/navbar-custom.scss';
</style>

176
src/pages-sub/home/career/info.vue Normal file
View File

@ -0,0 +1,176 @@
<route lang="json5" type="page">
{
layout: 'page',
style: {
navigationStyle: 'custom',
},
}
</route>
<template>
<view class="h-screen flex flex-col">
<view class="relative">
<Navbar
safeAreaInsetTop
bg-color="transparent"
:bordered="false"
left-arrow
title="职业详情"
@click-left="navigatorBack"
></Navbar>
<view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
</view>
<scroll-view :scroll-y="true" class="pb-safe flex-1">
<view class="flex flex-col px-32rpx">
<text class="text-[36rpx] text-[#000] font-bold mt-[24rpx] mb-[22rpx]">
{{ professionInfo.career }}
</text>
<image
class="w-full h-[264rpx] rounded-[8rpx]"
:src="professionInfo.img_url"
mode="aspectFill"
/>
</view>
<view class="h-[18rpx] bg-[#F8F8F8] mt-[24rpx] mb-[16rpx]"></view>
<view class="">
<z-tabs
:current="currentTab"
:list="tabsList"
:scrollCount="4"
inactive-color="#BFBFBF"
active-color="#303030"
:bar-style="{ backgroundColor: '#1580FF', width: '500rpx' }"
:tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
bottom-space="1rpx"
@change="handleTabChange"
v-bind="{} as any"
/>
<CareerInfo
:career-info="{ intro: professionInfo.intro, definition: professionInfo.definition }"
v-show="currentTab === 0"
/>
<KnowledgeBackground
:knowledge-info="professionInfo.json_knowledge"
:jsonCurriculum="professionInfo.json_curriculum"
v-show="currentTab === 1"
/>
<VocationalSkill
:pro-skill="professionInfo.json_skill"
:qualification="professionInfo.json_qualification"
:ethics="professionInfo.ethics"
v-show="currentTab === 2"
/>
<DevelopmentProspect
:prospect="professionInfo.json_prospect"
:salary="professionInfo.json_salary"
v-show="currentTab === 3"
/>
</view>
</scroll-view>
</view>
</template>
<script lang="ts" setup>
import { getProfessionInfo } from '@/service/index/api'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import CareerInfo from './components/CareerInfo.vue'
import KnowledgeBackground from './components/KnowledgeBackground.vue'
import VocationalSkill from './components/VocationalSkill.vue'
import DevelopmentProspect from './components/DevelopmentProspect.vue'
const navigatorBack = () => {
uni.navigateBack()
}
const tabsList = ['职业概况', '知识背景', '职业技能', '发展前景']
const currentTab = ref(0)
const handleTabChange = (index: number) => {
currentTab.value = index
}
type ProfessionInfo = {
career: string
img_url: string
intro: string
definition: string
json_knowledge: {
diplomas: string
pro: string
trade: string
}
json_curriculum: {
important: string
}
json_skill: {
skill_general: string
skill_pro: string
}
json_qualification: {
necessary: string
addition: string
}
ethics: string
json_prospect: {
career: string
industry: string
person: string
}
json_salary: {
structure: string
satisfaction: string
welfare: string
}
}
const professionInfo = ref<ProfessionInfo>({
career: '',
img_url: '',
intro: '',
definition: '',
json_knowledge: {
diplomas: '',
pro: '',
trade: '',
},
json_curriculum: {
important: '',
},
json_skill: {
skill_general: '',
skill_pro: '',
},
json_qualification: {
necessary: '',
addition: '',
},
ethics: '',
json_prospect: {
career: '',
industry: '',
person: '',
},
json_salary: {
structure: '',
satisfaction: '',
welfare: '',
},
})
const professionId = ref('')
onLoad((options) => {
professionId.value = options.id
getProfessionInfo({ id: professionId.value }).then((resp) => {
if (resp.code === 200) {
professionInfo.value = resp.result as ProfessionInfo
}
})
})
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/navbar-background.scss';
@import '@/pages-sub/home/styles/navbar-custom.scss';
</style>

32
src/pages-sub/home/college/components/EnrollmentMark.vue
View File

@ -23,7 +23,7 @@
<wd-action-sheet v-model="show" title="">
<view class="px-[32rpx]">
<wd-picker-view :columns="pickList" v-model="pickValue" custom-class="picker-wrapper" />
<CustomPickerView :list="pickList" v-model="pickValue" />
</view>
<view class="flex items-center justify-between px-[32rpx]">
<view class="cancel-btn" @click="show = false">取消</view>
@ -37,6 +37,7 @@
import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getAdmissionMark } from '@/service/index/api'
import { useUserStore } from '@/store'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
const props = defineProps({
id: {
@ -129,32 +130,5 @@ const handleConfirm = () => {
}
</script>
<style lang="scss" scoped>
.submit-btn {
width: 332rpx;
height: 80rpx;
background: #1580ff;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.cancel-btn {
width: 332rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #1580ff;
display: flex;
justify-content: center;
align-items: center;
}
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>

32
src/pages-sub/home/college/components/EnrollmentPlan.vue
View File

@ -26,7 +26,7 @@
<wd-action-sheet v-model="show" title="">
<view class="px-[32rpx]">
<wd-picker-view :columns="pickList" v-model="pickValue" custom-class="picker-wrapper" />
<CustomPickerView :list="pickList" v-model="pickValue" />
</view>
<view class="flex items-center justify-between px-[32rpx]">
<view class="cancel-btn" @click="show = false">取消</view>
@ -39,6 +39,7 @@
<script lang="ts" setup>
import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getPlanProList } from '@/service/index/api'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import { useUserStore } from '@/store'
const props = defineProps({
@ -128,32 +129,5 @@ const handleConfirm = () => {
}
</script>
<style lang="scss" scoped>
.submit-btn {
width: 332rpx;
height: 80rpx;
background: #1580ff;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.cancel-btn {
width: 332rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #1580ff;
display: flex;
justify-content: center;
align-items: center;
}
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>

37
src/pages-sub/home/college/components/Situation.vue
View File

@ -23,12 +23,7 @@
<wd-action-sheet v-model="show" title="">
<view class="px-[32rpx]">
<wd-picker-view
:columns="pickList"
v-model="pickValue"
custom-class="picker-wrapper"
v-if="pickType === 1"
/>
<CustomPickerView :list="pickList" v-model="pickValue" v-if="pickType === 1" />
</view>
<view class="py-[32rpx] flex flex-col items-center justify-center">
<text class="text-[#303030] text-[36rpx] font-bold mb-[50rpx]">省份</text>
@ -53,6 +48,7 @@ import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getPlanProList } from '@/service/index/api'
import { useUserStore } from '@/store'
import Region from '@/pages-sub/home/components/Region.vue'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
const props = defineProps({
id: {
@ -147,32 +143,5 @@ const handleRegionChangeName = (val) => {
}
</script>
<style lang="scss" scoped>
.submit-btn {
width: 332rpx;
height: 80rpx;
background: #1580ff;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.cancel-btn {
width: 332rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #1580ff;
display: flex;
justify-content: center;
align-items: center;
}
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>

8
src/pages-sub/home/inputScore/index.vue
View File

@ -108,7 +108,6 @@
保存
</wd-button>
<view class="bg-white pb-safe" hover-class="none"></view>
<wd-toast />
</view>
</template>
@ -120,9 +119,6 @@ import {
requireSubjectList,
optionalSubjectList,
} from '@/pages-sub/home/inputScore/useRules'
import { useToast } from 'wot-design-uni'
const toast = useToast()
const userStore = useUserStore()
@ -167,7 +163,9 @@ onBeforeMount(() => {
const saveScore = () => {
if (score.value === '') {
toast.warning('请检查分数')
uni.showToast({
title: '请检查分数',
})
return
}
const data = {

40
src/pages-sub/home/major/components/MajorList.vue
View File

@ -2,16 +2,19 @@
<view class="bg-white flex w-full flex-1">
<view class="w-[260rpx] bg-[#F7F8FA] flex flex-col items-center">
<view
:class="`flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold ${item.key === currentMenu ? 'active' : ''}`"
v-for="item in menus"
:key="item.key"
:class="[
'flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold',
currentMenuObj?.key === item.key ? 'active' : '',
]"
@click="changeMenu(item)"
>
{{ item.name }}
</view>
</view>
<view class="flex-1 mt-[40rpx] flex flex-col">
<MajorTreeList :sub-major-list="currentMenuObj" />
<MajorTreeList v-if="currentMenuObj" :sub-major-list="currentMenuObj" />
</view>
</view>
</template>
@ -32,43 +35,16 @@ const props = defineProps({
})
const menus = ref([])
const currentMenuObj = ref(null)
const currentMenu = ref('')
const currentMenuObj = ref<{
name: string
key: string
count: number
itemsCount: number
items: any[]
}>({
name: '',
key: '',
count: 0,
itemsCount: 0,
items: [],
})
const subMajorList = ref([])
const changeMenu = (item: {
name: string
key: string
count: number
itemsCount: number
items: any[]
}) => {
currentMenu.value = item.key
const changeMenu = (item: any) => {
currentMenuObj.value = item
}
const getMajorList = ({ Type, KeyWord }) => {
getMajorLevelList({ Type, KeyWord }).then((resp) => {
if (resp.code === 200) {
menus.value = resp.result[0].rootDtos as { key: string; name: string; items: any[] }[]
currentMenu.value = menus.value[0].key
subMajorList.value = menus.value[0].items
menus.value = resp.result[0].rootDtos
currentMenuObj.value = menus.value[0]
}
})

8
src/pages-sub/home/major/components/MajorTreeList.vue
View File

@ -67,8 +67,11 @@ const value = ref<string>('')
watch(
() => props.subMajorList,
(newV) => {
value.value = newV.items[0].key.toString()
if (newV?.items?.length > 0) {
value.value = newV.items[0].key
}
},
{ immediate: true },
)
const navigatorToMajorInfo = (item: unknown) => {
@ -82,9 +85,8 @@ const navigatorToMajorInfo = (item: unknown) => {
<style lang="scss" scoped>
:deep(.custom-collapse-item) {
padding: 16rpx 0 !important;
:deep(.wd-collapse-item__header) {
}
}
.header {
display: flex;
align-items: center;

39
src/pages-sub/home/major/components/MajorUniversity.vue
View File

@ -25,7 +25,7 @@
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
<text class="text-[32rpx] font-semibold text-[#303030]">专业院校分布</text>
<view
@click="handleShow(2)"
@click="handleShow"
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx] w-[144rpx] mt-[30rpx]"
>
{{ provinceName || '不限' }}
@ -34,7 +34,7 @@
<scroll-view :scroll-x="true" class="">
<view
class="flex gap-[24rpx] py-[40rpx] border-bt"
v-for="item in universityList"
v-for="item in subUniversityList"
:key="item"
>
<image class="w-[112rpx] h-[112rpx]" :src="item.logo" mode="scaleToFill" />
@ -42,18 +42,34 @@
<text class="text-[32rpx] font-semibold">[{{ item.yxdm }}]{{ item.yxmc }}</text>
<text class="text-[22rpx] text-[#505050]">{{ item.cityname }}·{{ item.ulevel }}</text>
<text class="text-[#8F959E] text-[22rpx] my-[6rpx]">
{{ item.featuretag.split('/').slice(0, 4).join('/') }}/ 排名68
{{ item.featuretag?.split('/').slice(0, 4).join('/') }}/ 排名68
</text>
</view>
</view>
</scroll-view>
</view>
<wd-action-sheet v-model="show" title="">
<view class="px-[32rpx]">
<custom-picker-view
v-model="provinceCode"
:list="provinceList"
value-key="code"
label-key="ssmc"
/>
</view>
<view class="flex items-center justify-between px-[32rpx]">
<view class="cancel-btn" @click="show = false">取消</view>
<view class="submit-btn" @click="handleConfirm">确认</view>
</view>
</wd-action-sheet>
</view>
</template>
<script lang="ts" setup>
import { getMajorUniversityList } from '@/service/index/api'
import ProgressBar from '../../components/ProgressBar.vue'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import { useUserStore } from '@/store'
const userStore = useUserStore()
@ -82,6 +98,7 @@ watch(
}
})
universityList.value = result.schSpecList
subUniversityList.value = universityList.value
}
})
},
@ -90,15 +107,27 @@ watch(
const provinceName = ref('')
const provinceList = ref([])
const provinceTotal = ref(0)
const provinceCode = ref('')
const show = ref(false)
const universityList = ref([])
const subUniversityList = ref([])
const handleShow = (type: number) => {
console.log(type)
const handleShow = () => {
show.value = true
}
const handleConfirm = () => {
show.value = false
subUniversityList.value = universityList.value.filter((item) => {
return item.ssdm === provinceCode.value
})
provinceName.value = provinceList.value.find((item) => item.code === provinceCode.value)?.ssmc
}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
.border-bt {
border-bottom: 1rpx solid #f8f8f8;
}

53
src/pages-sub/home/major/index.vue
View File

@ -8,14 +8,13 @@
}
</route>
<template>
<scroll-view :scroll-y="true" class="flex flex-col pb-safe">
<wd-navbar
<view class="flex flex-col h-screen">
<Navbar
safeAreaInsetTop
custom-class="bg-white!"
bg-color="transparent"
:bordered="false"
left-arrow
placeholder
fixed
title="查职业"
@click-left="navigatorBack"
>
<template #title>
@ -26,34 +25,36 @@
@confirm="handleChange"
no-border
prefixIcon="search"
custom-class="rounded-[48rpx]! bg-[#F7F7F7]! flex items-center border-none! px-[24rpx] py-[12rpx]"
custom-class="rounded-[48rpx]! bg-[#F7F7F7]! flex items-center border-none! px-[24rpx] py-[12rpx] ml-[32rpx]!"
custom-input-class="h-full flex items-center"
/>
</template>
</wd-navbar>
</Navbar>
<scroll-view class="flex-1 pb-safe flex flex-col" :scroll-y="true">
<z-tabs
:current="currentTab"
:list="tabsList"
:scrollCount="4"
inactive-color="#BFBFBF"
active-color="#303030"
:bar-style="{ backgroundColor: '#1580FF' }"
:tabsStyle="{ position: 'sticky', top: '0', zIndex: '99' }"
@change="handleTabChange"
v-bind="{} as any"
/>
<z-tabs
:current="currentTab"
:list="tabsList"
:scrollCount="4"
inactive-color="#BFBFBF"
active-color="#303030"
:bar-style="{ backgroundColor: '#1580FF' }"
:tabsStyle="{ position: 'sticky', top: '98px', zIndex: '99' }"
@change="handleTabChange"
v-bind="{} as any"
/>
<view class="">
<MajorList :type="1050" :keyword="searchValue" v-show="currentTab === 0"></MajorList>
<MajorList :type="1070" :keyword="searchValue" v-show="currentTab === 1"></MajorList>
<MajorList :type="1060" :keyword="searchValue" v-show="currentTab === 2"></MajorList>
</view>
</scroll-view>
</scroll-view>
</view>
</template>
<script lang="ts" setup>
import MajorList from './components/MajorList.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
const searchValue = ref('')
@ -73,13 +74,5 @@ const handleTabChange = (index: number) => {
<style lang="scss" scoped>
@import '../styles/navbar_search.scss';
:deep(.tabs-wrapper) {
--wot-tabs-nav-fs: 28rpx;
--wot-tabs-nav-height: 80rpx;
flex: 1 1 auto;
}
:deep(.wd-tab__body) {
// height: 100%;
}
@import '@/pages-sub/home/styles/navbar-custom.scss';
</style>

17
src/pages-sub/home/major/info.vue
View File

@ -8,22 +8,20 @@
</route>
<template>
<view class="pb-safe flex flex-col">
<view class="pb-safe flex flex-col h-screen">
<view class="relative">
<wd-navbar
<Navbar
safeAreaInsetTop
custom-class="bg-transparent! custom-background"
bg-color="transparent"
:bordered="false"
left-arrow
fixed
placeholder
title="专业详情"
@click-left="navigatorBack"
></wd-navbar>
<view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[1]"></view>
></Navbar>
<view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
</view>
<scroll-view class="flex-1 flex flex-col" :scroll-y="true">
<scroll-view class="flex-1 flex flex-col pb-safe" :scroll-y="true">
<view class="flex items-start p-[32rpx]" hover-class="none">
<view class="flex flex-col">
<text class="text-[40rpx] text-[#303030] font-semibold">{{ majorDetail.zymc }}</text>
@ -79,6 +77,7 @@ import MajorBaseInfo from './components/MajorBaseInfo.vue'
import MajorUniversity from './components/MajorUniversity.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import EmploymentProspects from './components/EmploymentProspects.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import { getMajorDetail } from '@/service/index/api'
@ -107,8 +106,6 @@ const navigatorBack = () => {
uni.navigateBack()
}
const starFlag = ref(false)
const handleStar = () => {}
const majorDetail = ref<CollegeInfo>({
xk: '',
zydm: '',

13
src/pages-sub/home/styles/navbar-background.scss Normal file
View File

@ -0,0 +1,13 @@
.custom-background {
background-image: linear-gradient(
173deg,
rgb(177, 221, 250) 0,
rgb(177, 221, 250) 13%,
rgba(255, 255, 255, 1) 80%,
rgba(255, 255, 255, 1) 100%
);
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
}

3
src/pages-sub/home/styles/navbar-custom.scss Normal file
View File

@ -0,0 +1,3 @@
:deep(.z-tabs-bottom) {
border-bottom: 1px solid #f8f8f8;
}

28
src/pages-sub/home/styles/picker-view-btn.scss Normal file
View File

@ -0,0 +1,28 @@
.submit-btn {
width: 332rpx;
height: 80rpx;
background: #1580ff;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.cancel-btn {
width: 332rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 8rpx;
font-weight: 400;
font-size: 32rpx;
color: #1580ff;
display: flex;
justify-content: center;
align-items: center;
}

14
src/pages.json
View File

@ -134,7 +134,19 @@
},
{
"path": "home/career/index",
"type": "page"
"type": "page",
"layout": "page",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "home/career/info",
"type": "page",
"layout": "page",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "home/city/index",

8
src/service/index/api.ts
View File

@ -170,3 +170,11 @@ export const getMajorUniversityList = (params: { SpecId: string }) => {
export const getCareerProspects = (params: { zydm: string }) => {
return http.get('/api/zhiYuan/careerProspects', params)
}
// 职业方向
export const getBaseProfession = (params: { KeyWord: string }) => {
return http.get('/api/zhiYuan/baseProfession', params)
}
export const getProfessionInfo = (params: { id: string }) => {
return http.get('/api/zhiYuan/professiondetails', params)
}

1
src/types/uni-pages.d.ts vendored
View File

@ -13,6 +13,7 @@ interface NavigateToOptions {
"/pages-sub/home/aiAutoFill/index" |
"/pages-sub/home/autoFill/index" |
"/pages-sub/home/career/index" |
"/pages-sub/home/career/info" |
"/pages-sub/home/city/index" |
"/pages-sub/home/college/enrollmentIntroDetail" |
"/pages-sub/home/college/index" |