volunteer-4/src/pages-sub/home/components/Phase.vue

98 lines
2.5 KiB
Vue

<template>
<view class="">
<RadioGroup
v-model="choosePhase"
class="custom-radio-group"
@change="handleChange"
v-bind="$attrs"
>
<Radio v-for="item in phaseList" :key="item.batch" :name="item.batch" class="custom-radio">
{{ item.batch }}
</Radio>
</RadioGroup>
<view
class="px-[24rpx] py-[12rpx] rounded-[8rpx] bg-[rgba(255,96,68,0.1)] flex flex-col gap-[8rpx] text-[#FF6044] text-[24rpx] w-max mt-[82rpx]"
>
<text class="" v-for="item in phaseList" :key="item.batch">
{{ item.batch }}:批次线{{ item.score }}分,线高{{ item.pressureScore }}分
</text>
</view>
</view>
</template>
<script lang="ts" setup>
import { getBatchDynamicData } from '@/service/index/api'
import RadioGroup from '@/pages-sub/components/radio-group/RadioGroup.vue'
import Radio from '@/pages-sub/components/radio-group/Radio.vue'
import { useUserStore } from '@/store/user'
import { useRules } from '@/pages-sub/home/inputScore/useRules'
const userStore = useUserStore()
const phaseList = ref<any[]>([])
const choosePhase = ref('')
const emits = defineEmits(['changeName', 'change'])
const fetchBatchData = () => {
let _provinceCode = userStore.userInfo.estimatedAchievement.provinceCode
let _requireSubject = userStore.userInfo.estimatedAchievement.requireSubject
getBatchDynamicData({
LocationCode: _provinceCode,
Course: _requireSubject.length > 0 ? _requireSubject[0].name : '',
}).then((res) => {
if (res.code === 200) {
phaseList.value = (res.result as { batches: any[] }).batches
choosePhase.value = userStore.userInfo.batchName
handleChange(choosePhase.value)
}
})
}
onLoad(() => {
useRules(fetchBatchData)
})
const handleChange = (val: string) => {
const phase = phaseList.value.find((item) => item.batch === val)
choosePhase.value = val
emits('changeName', val)
emits('change', phase)
}
</script>
<style lang="scss">
:deep(.custom-radio-group) {
display: flex;
flex-wrap: wrap;
gap: 32rpx;
background-color: #fff;
justify-content: center;
}
:deep(.custom-radio) {
width: 240rpx;
height: 60rpx;
background-color: #f7f8fa;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #f7f8fa;
color: #333;
.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>