305 lines
8.2 KiB
Vue
305 lines
8.2 KiB
Vue
<route lang="json5" type="page">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
},
|
||
needLogin: true,
|
||
}
|
||
</route>
|
||
<template>
|
||
<view class="h-screen overflow-hidden flex flex-col bg-[#F8F8F8]" :bordered="false">
|
||
<Navbar
|
||
title="成绩填写"
|
||
left-arrow
|
||
@click-left="navigatorBack"
|
||
safeAreaInsetTop
|
||
:bordered="false"
|
||
/>
|
||
<view class="px-[32rpx] pt-[47rpx] flex flex-col" hover-class="none">
|
||
<text class="text-[24rpx] text-[#636363] text-normal" :selectable="false" :decode="false">
|
||
为了使推荐更准确，请您认真填写
|
||
</text>
|
||
<text
|
||
class="text-[28rpx] text-[#000] text-medium mt-[47rpx]"
|
||
:selectable="false"
|
||
:decode="false"
|
||
>
|
||
预估总分
|
||
</text>
|
||
<view class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx]">
|
||
<input
|
||
v-model="score"
|
||
placeholder="请输入分数"
|
||
@confirm="handleChange"
|
||
input-mode="numeric"
|
||
type="number"
|
||
:focus="true"
|
||
class="flex-1"
|
||
confirm-type="done"
|
||
/>
|
||
<text class="" :selectable="false" :decode="false">分</text>
|
||
</view>
|
||
|
||
<view
|
||
class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx] justify-between"
|
||
@click="show = true"
|
||
>
|
||
<view>{{ term }}</view>
|
||
<view class="i-carbon-chevron-down rotate-270"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-[32rpx] px-[32rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
|
||
<view class="mb-[16rpx]" hover-class="none">
|
||
<text class="" :selectable="false" :decode="false">首选科目</text>
|
||
<text class="text-[24rpx] text-gray">({{ requireSubjectList.length }}选1)</text>
|
||
</view>
|
||
<RadioGroup
|
||
v-model="requireSubject"
|
||
cell
|
||
inline
|
||
class="custom-radio-group"
|
||
checked-color="#1580FF"
|
||
>
|
||
<Radio
|
||
v-for="item in requireSubjectList"
|
||
:key="item.code"
|
||
:name="item.code"
|
||
shape="button"
|
||
class="custom-radio"
|
||
>
|
||
{{ item.name }}
|
||
</Radio>
|
||
</RadioGroup>
|
||
</view>
|
||
|
||
<view class="mt-[32rpx] px-[32rpx]" hover-class="none">
|
||
<view class="mb-[16rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
|
||
<text class="" :selectable="false" :decode="false">次选科目</text>
|
||
<text class="text-[24rpx] text-gray">
|
||
({{ optionalSubjectList.length }}选{{ requireSubjectList.length > 0 ? 2 : 3 }})
|
||
</text>
|
||
</view>
|
||
<CheckboxGroup v-model="optionalSubject" :max="3">
|
||
<Checkbox
|
||
v-for="item in optionalSubjectList"
|
||
:key="item.code"
|
||
:name="item.code"
|
||
class="custom-checkbox"
|
||
>
|
||
{{ item.name }}
|
||
</Checkbox>
|
||
</CheckboxGroup>
|
||
</view>
|
||
<button
|
||
block
|
||
:class="`mt-auto mb-[32rpx] rounded-[8rpx] mx-[32rpx] text-[32rpx] text-[#fff]! font-normal ${btnFlag < 3 ? 'bg-[#BFBFBF]!' : 'bg-[#1580FF]!'}`"
|
||
@click="saveScore"
|
||
:disabled="btnFlag < 3"
|
||
>
|
||
保存
|
||
</button>
|
||
<view class="pb-safe" hover-class="none"></view>
|
||
|
||
<ActionSheet v-model:show="show" title="">
|
||
<view class="px-[32rpx]">
|
||
<CustomPickerView
|
||
:list="termList"
|
||
v-model:modelValue="term"
|
||
value-key="code"
|
||
label-key="name"
|
||
/>
|
||
</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>
|
||
</ActionSheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useUserStore } from '@/store/user'
|
||
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
|
||
import CheckboxGroup from '@/pages-sub/components/check-group/CheckboxGroup.vue'
|
||
import Checkbox from '@/pages-sub/components/check-group/Checkbox.vue'
|
||
import RadioGroup from '@/pages-sub/components/radio-group/RadioGroup.vue'
|
||
import Radio from '@/pages-sub/components/radio-group/Radio.vue'
|
||
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
|
||
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
|
||
|
||
import {
|
||
useRules,
|
||
requireSubjectList,
|
||
optionalSubjectList,
|
||
} from '@/pages-sub/home/inputScore/useRules'
|
||
|
||
import { savePerfectInfo } from '@/service/index/api'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const show = ref(false)
|
||
|
||
const handleConfirm = () => {
|
||
show.value = false
|
||
}
|
||
|
||
// 学期
|
||
const term = ref(userStore.userInfo.estimatedAchievement.year || new Date().getFullYear())
|
||
const termList = ref<{ name: string; code: number }[]>(userStore.userInfo.city.lizations)
|
||
|
||
const navigatorBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
// 输入成绩
|
||
const score = ref<number | string>(userStore.userInfo.estimatedAchievement.expectedScore || '')
|
||
const handleChange = (e: any) => {
|
||
const _score = Number(score.value) || 0
|
||
if (_score > userStore.userInfo.city.allscore) {
|
||
score.value = userStore.userInfo.city?.allscore
|
||
}
|
||
}
|
||
|
||
// 单选 必选学科
|
||
const requireSubject = ref<number | string>('')
|
||
|
||
// 任意选择科目
|
||
const optionalSubject = ref<any[]>([])
|
||
|
||
// 判断是否关闭按钮
|
||
const btnFlag = computed(() => {
|
||
let num = 0
|
||
if (requireSubject.value !== '') {
|
||
num++
|
||
}
|
||
num = num + optionalSubject.value.length
|
||
return num
|
||
})
|
||
|
||
onShow(() => {
|
||
userStore.$subscribe(() => {
|
||
requireSubject.value = userStore.userInfo.estimatedAchievement.requireSubject[0].code ?? ''
|
||
optionalSubject.value = userStore.userInfo.estimatedAchievement.optionalSubject.map(
|
||
(item) => item.code,
|
||
)
|
||
})
|
||
useRules()
|
||
})
|
||
|
||
const saveScore = () => {
|
||
if (score.value === '') {
|
||
uni.showToast({
|
||
title: '请检查分数',
|
||
})
|
||
return
|
||
}
|
||
const data = {
|
||
year: term.value, // 学期
|
||
expectedScore: score.value, // 成绩
|
||
optionalSubject: optionalSubjectList.value.filter((item) =>
|
||
optionalSubject.value.includes(item.code),
|
||
), // 任意选择科目
|
||
requireSubject: requireSubjectList.value.filter((item) => requireSubject.value === item.code), // 必选科目
|
||
cityCode: userStore.userInfo.city.code, // 城市code
|
||
}
|
||
|
||
const subjects = data.optionalSubject
|
||
.map((item) => item.simplename)
|
||
.concat(data.requireSubject ? data.requireSubject[0].simplename : [])
|
||
.join(',')
|
||
|
||
console.log(subjects, data.requireSubject)
|
||
userStore.setEstimatedAchievement({
|
||
...data,
|
||
subjectGroup: subjects,
|
||
provinceName: userStore.userInfo.city.provincename,
|
||
provinceCode: userStore.userInfo.city.code,
|
||
})
|
||
|
||
savePerfectInfo({
|
||
year: term.value,
|
||
score: Number(score.value),
|
||
subjectGroup: subjects,
|
||
provinceCode: userStore.userInfo.city.code,
|
||
provinceName: userStore.userInfo.city.provincename,
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none',
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
fail: () => {
|
||
// 如果无法返回，说明可能已在首页
|
||
uni.switchTab({
|
||
url: '/pages/home/index/index',
|
||
})
|
||
},
|
||
})
|
||
}, 500)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/pages-sub/home/styles/picker-view-btn.scss';
|
||
|
||
:deep(.custom-checkbox) {
|
||
.checkbox {
|
||
width: 152rpx;
|
||
height: 76rpx;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #fff;
|
||
}
|
||
.checkbox__icon {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
:deep(.checkbox-active) {
|
||
background-color: rgba(21, 128, 255, 0.1) !important;
|
||
border-color: #1580ff !important;
|
||
.checkbox__label,
|
||
.radio__label {
|
||
color: #1580ff !important;
|
||
}
|
||
}
|
||
|
||
:deep(.custom-radio-group) {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 32rpx;
|
||
justify-items: center;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
:deep(.custom-radio) {
|
||
width: 152rpx;
|
||
height: 76rpx;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #fff;
|
||
|
||
.radio__icon {
|
||
display: none;
|
||
}
|
||
|
||
.radio-active {
|
||
background-color: rgba(21, 128, 255, 0.1) !important;
|
||
border-color: #1580ff !important;
|
||
border: 2rpx solid #1580ff;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
</style>
|