222 lines
8.1 KiB
Vue
222 lines
8.1 KiB
Vue
<script lang="ts" setup>
|
||
import { systemInfo } from '@/utils/systemInfo'
|
||
import MxRadio from "@/pages-sub/components/radio/index.vue"
|
||
import MxInput from "@/pages-sub/components/input/index.vue"
|
||
import { getMyScore, getTalentAreaList, saveMyScore } from '@/service'
|
||
|
||
// #ifdef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
},
|
||
excludeLoginPath: false,
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
definePage({
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
transparentTitle: 'always',
|
||
navigationBarTitleText: ''
|
||
},
|
||
excludeLoginPath: false,
|
||
})
|
||
// #endif
|
||
|
||
const handleBack = () => {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
|
||
const formData = ref({
|
||
chinese: "",
|
||
math: '',
|
||
english: '',
|
||
physics: '',
|
||
chemistry: '',
|
||
sports: '',
|
||
})
|
||
|
||
const cToE = {
|
||
'chinese': '语文',
|
||
"math": '数学',
|
||
'english': '英语',
|
||
physics: '物理',
|
||
chemistry: '化学',
|
||
sports: '体育'
|
||
}
|
||
|
||
const degreeFormData = ref({
|
||
geography: '',
|
||
politics: '',
|
||
biology: '',
|
||
history: '',
|
||
})
|
||
|
||
const ctoEWithDegree = {
|
||
geography: '地理',
|
||
politics: '政治',
|
||
biology: '生物',
|
||
history: '历史'
|
||
}
|
||
|
||
|
||
const handleSubmit = () => {
|
||
saveMyScore({data:{
|
||
...formData.value,
|
||
...degreeFormData.value
|
||
}}).then(resp => {
|
||
if(resp.code === 200){
|
||
uni.navigateTo({ url: "/pages-sub/wishlist/create/third" })
|
||
}
|
||
})
|
||
}
|
||
|
||
const activeType = ref("")
|
||
const visible = ref(false)
|
||
|
||
const onOverlayClick = () => {
|
||
visible.value = false
|
||
}
|
||
|
||
const gradeClassification = ref([])
|
||
|
||
|
||
const handleOpenPopup = (type: string) => {
|
||
visible.value = true
|
||
activeType.value = type
|
||
}
|
||
|
||
|
||
const handleNumberChange = (event, key) => {
|
||
const value = +event.detail.value
|
||
if (['chinese', 'math', 'english'].includes(key) && value > 150) {
|
||
formData.value[key] = '150'
|
||
} else if (['physics', 'chemistry'].includes(key) && value > 100) {
|
||
formData.value[key] = '100'
|
||
} else if (key === 'sports' && value > 60) {
|
||
formData.value[key] = '60'
|
||
}
|
||
}
|
||
|
||
onLoad(() => {
|
||
|
||
getTalentAreaList({ query: { typeId: '738657273081925' } }).then((resp) => {
|
||
gradeClassification.value = resp.result
|
||
})
|
||
|
||
getMyScore().then(resp => {
|
||
if (resp.code === 200 && resp.result) {
|
||
formData.value.chinese = resp.result.chinese
|
||
formData.value.math = resp.result.math
|
||
formData.value.english = resp.result.english
|
||
formData.value.chemistry = resp.result.chemistry
|
||
formData.value.sports = resp.result.sports
|
||
formData.value.physics = resp.result.physics
|
||
degreeFormData.value.biology = resp.result.biology
|
||
degreeFormData.value.history = resp.result.history
|
||
degreeFormData.value.geography = resp.result.geography
|
||
degreeFormData.value.politics = resp.result.politics
|
||
}
|
||
})
|
||
|
||
})
|
||
</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': `${systemInfo?.statusBarHeight}px` }">
|
||
<template #title>
|
||
<view class="flex justify-center">志愿填报</view>
|
||
</template>
|
||
</sar-navbar>
|
||
|
||
<view class="flex items-center mx-[30rpx] mb-[20rpx]">
|
||
<view class="w-[112rpx] h-[104rpx] flex items-center">
|
||
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_02.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/tianbao/tb_zk02.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"
|
||
v-for="(val, key) of cToE" :key="key">
|
||
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">{{ val }}</view>
|
||
<view class="flex-1">
|
||
<input type="number" input-mode="numeric" v-model="formData[key]"
|
||
:placeholder="['chinese', 'math', 'english'].includes(key) ? '满分150分，请输入您的分数' : ['physics', 'chemistry'].includes(key) ? '满分100分，计算90%分数' : '满分60分'"
|
||
confirm-type="done" placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;"
|
||
class="text-left" @blur="(event) => handleNumberChange(event, key)">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-[34rpx] mt-[40rpx] ml-[40rpx] font-700">等级考成绩</view>
|
||
<view class="grid grid-cols-2 gap-[0_50rpx] mx-[40rpx]">
|
||
<view
|
||
class="flex items-center text-[30rpx] justify-between py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid"
|
||
v-for="(val, key) of ctoEWithDegree" :key="key">
|
||
<view class="text-[#404142] text-left mr-[34rpx] ">{{ val }}</view>
|
||
<view class="flex-1 flex items-center" @click="handleOpenPopup(key)">
|
||
<MxInput v-model:value="degreeFormData[key]" placeholder="请选择" root-class="text-left w-[92rpx]!"
|
||
:readonly="true" />
|
||
|
||
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto mr-[30rpx]">
|
||
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png"
|
||
mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
|
||
</view>
|
||
</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">下一步</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>请选择{{ ctoEWithDegree[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="degreeFormData[activeType]" :options="gradeClassification" label-key="label"
|
||
value-key="label" custom-root-cols-class="grid grid-cols-3 items-center gap-[20rpx]"
|
||
custom-root-class="pb-[20rpx]"
|
||
custom-item-class="py-[12rpx] text-center border-1 border-solid border-[#F3F4F8]"
|
||
active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!" @change="visible = false"/>
|
||
</view>
|
||
</sar-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-background {
|
||
background: linear-gradient( 177deg, #E4EDFF 0%, #F0F5FF 180rpx, #FEFEFF 360rpx);
|
||
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>
|