271 lines
10 KiB
Vue
271 lines
10 KiB
Vue
<script lang="ts" setup>
|
|
import { safeAreaInsets } from '@/utils/systemInfo'
|
|
import MxRadio from "@/pages-sub/components/radio/index.vue"
|
|
import MxInput from "@/pages-sub/components/input/index.vue"
|
|
import { getAreaList, getGradeList, getStudentTalentedDetail, getTalentAreaList, saveUserInfo } from '@/service'
|
|
import { useUserStore } from '@/store';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
// #ifdef MP-WEIXIN
|
|
definePage({
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
excludeLoginPath: true,
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef MP-WEIXIN
|
|
definePage({
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
transparentTitle: 'always',
|
|
navigationBarTitleText: ''
|
|
},
|
|
excludeLoginPath: true,
|
|
})
|
|
// #endif
|
|
|
|
const handleBack = () => {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
|
|
const formData = ref({
|
|
genderLabel: '',
|
|
|
|
})
|
|
|
|
const userStore = useUserStore()
|
|
const { userInfo } = storeToRefs(userStore)
|
|
|
|
const handleSubmit = () => {
|
|
|
|
}
|
|
|
|
const activeType = ref("")
|
|
const visible = ref(false)
|
|
|
|
const onOverlayClick = () => {
|
|
visible.value = false
|
|
}
|
|
|
|
const genderClassification = [{ label: '男', value: "1" }, { label: '女', value: "2" }]
|
|
const gradeClassification = ref([])
|
|
const areaList = ref([])
|
|
const artList = ref([])
|
|
|
|
const handleOpenPopup = (type: string) => {
|
|
visible.value = true
|
|
activeType.value = type
|
|
}
|
|
|
|
const getTitle = (type: string) => {
|
|
const title = { "gender": '请选择性别', "grade": '请选择年级', "examinationArea": '请选择中考所在地', "artDirection": '请选择艺术方向' }
|
|
return title[type];
|
|
}
|
|
|
|
const navigateToSchool = () => {
|
|
uni.navigateTo({ url: '/pages-sub/wishlist/school' })
|
|
}
|
|
|
|
const navigateToNext = () => {
|
|
if (!userInfo.value.nickName || !userInfo.value.sex || !userInfo.value.userExtend.schoolName || !userInfo.value.userExtend.gradeId || !userInfo.value.talentExtend.specialtyDirection) {
|
|
uni.showToast({ title: "完善所需信息", icon: "error" })
|
|
return
|
|
}
|
|
let params = {
|
|
nickName: userInfo.value.nickName,
|
|
gradeId: userInfo.value.userExtend.gradeId,
|
|
gradeName: userInfo.value.userExtend.gradeName,
|
|
schoolName: userInfo.value.userExtend.schoolName,
|
|
sex: userInfo.value.sex,
|
|
}
|
|
saveUserInfo({ data: params }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
uni.navigateTo({ url: '/pages-sub/talented/create/artSecond' })
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
getAreaList().then(resp => {
|
|
if (resp.code === 200) {
|
|
areaList.value = resp.result
|
|
}
|
|
})
|
|
|
|
getGradeList().then(resp => {
|
|
if (resp.code === 200) {
|
|
gradeClassification.value = resp.result
|
|
}
|
|
})
|
|
|
|
getStudentTalentedDetail({ query: { Type: 2 } }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
if (resp.result) {
|
|
userInfo.value.talentExtend = resp.result
|
|
} else {
|
|
userStore.initUserTalent()
|
|
}
|
|
}
|
|
userInfo.value.talentExtend.type = 2
|
|
})
|
|
|
|
getTalentAreaList({ query: { typeId: '738227662864453' } }).then((resp) => {
|
|
artList.value = resp.result
|
|
})
|
|
|
|
formData.value.genderLabel = genderClassification.filter(item => item.value == userInfo.value.sex)[0]?.label
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex flex-col custom-background h-screen">
|
|
<sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
|
|
:root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'black', 'padding-top': `${safeAreaInsets?.top}px` }">
|
|
<template #title>
|
|
<view class="flex justify-center">艺术特长生</view>
|
|
</template>
|
|
</sar-navbar>
|
|
|
|
<view class="flex items-center mx-[30rpx]">
|
|
<view class="w-[112rpx] h-[104rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_01.png" mode="scaleToFill"
|
|
class="w-[112rpx] h-[104rpx]" />
|
|
</view>
|
|
<view class="flex flex-col ml-[10rpx]">
|
|
<view class="text-[44rpx] font-500 mb-[14rpx]">完善基础信息</view>
|
|
<view class="text-[#B0B3B8] text-[30rpx]">详细的信息获取精准推荐</view>
|
|
</view>
|
|
<view class="w-[160rpx] h-[160rpx] ml-auto">
|
|
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_ys01.png" mode="scaleToFill"
|
|
class="w-[160rpx] h-[160rpx]" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<form @submit="handleSubmit" class="flex-1 pb-safe">
|
|
<view class="flex flex-col h-full">
|
|
<view
|
|
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
|
|
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">学生姓名</view>
|
|
<view class="flex-1">
|
|
<input type="text" v-model="userInfo.nickName" placeholder="请输入姓名" confirm-type="done"
|
|
placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;" class="text-left">
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
|
|
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">性别</view>
|
|
<view class="flex-1 flex items-center" @click="handleOpenPopup('gender')">
|
|
<MxInput v-model:value="formData.genderLabel" placeholder="请选择您的性别" root-class="text-left"
|
|
:readonly="true" />
|
|
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
|
|
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">年级</view>
|
|
<view class="flex-1 flex items-center" @click="handleOpenPopup('grade')">
|
|
<MxInput type="text" v-model:value="userInfo.userExtend.gradeName" placeholder="请选择您的年级" :readonly="true"
|
|
root-class="text-left" />
|
|
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
|
|
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">就读学校</view>
|
|
<view class="flex-1 flex items-center" @click="navigateToSchool">
|
|
<view class="flex-1">
|
|
<MxInput type="text" v-model:value="userInfo.userExtend.schoolName" placeholder="请选择您的就读学校"
|
|
:readonly="true" root-class="text-left" />
|
|
</view>
|
|
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view
|
|
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
|
|
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">艺术方向</view>
|
|
<view class="flex-1 flex items-center" @click="handleOpenPopup('artDirection')">
|
|
<MxInput type="text" v-model:value="userInfo.talentExtend.specialtyDirection" placeholder="请选择艺术方向"
|
|
:readonly="true" root-class="text-left" />
|
|
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="px-[30rpx] py-[16rpx] border-t-solid border-t-[#ededed] border-t-1 mt-auto">
|
|
<button form-type="submit" class="rounded-[16rpx] bg-[#1580FF] text-[#fff] submit-btn"
|
|
@click="navigateToNext">下一步</button>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
|
|
<sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
|
|
<view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
|
|
<view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
|
|
<view>{{ getTitle(activeType) }}</view>
|
|
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
|
|
class="w-[36rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
<MxRadio v-model:value="userInfo.sex" v-model:label="formData.genderLabel" v-if="activeType == 'gender'"
|
|
:options="genderClassification" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
<MxRadio v-model:value="userInfo.userExtend.gradeId" v-model:label="userInfo.userExtend.gradeName"
|
|
v-if="activeType == 'grade'" :options="gradeClassification" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
<MxRadio v-model:value="userInfo.talentExtend.specialtyDirection" v-if="activeType == 'artDirection'"
|
|
:options="artList" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
|
|
custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
|
|
active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />
|
|
|
|
</view>
|
|
</sar-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-background {
|
|
background: linear-gradient(180deg, #D7E4FF 0%, #fff 556rpx);
|
|
background-position: 50% 50%;
|
|
background-origin: padding-box;
|
|
background-clip: border-box;
|
|
background-size: auto auto;
|
|
}
|
|
|
|
.submit-btn[disabled] {
|
|
background-color: #a1cbff;
|
|
color: #fff;
|
|
}
|
|
</style>
|