volunteer-4/src/pages-sub/home/college/components/EnrollmentPlan.vue

140 lines
4.2 KiB
Vue

<template>
<view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff] h-full">
<view class="flex flex-wrap justify-between items-center">
<text class="font-semibold text-[#303030] text-[32rpx] w-full text-center mb-[20rpx]">
招生计划({{ provinceName }})
</text>
<view
@click="handleShow(1)"
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
v-show="year"
>
{{ year }}
<view class="i-carbon-chevron-down rotate-270"></view>
</view>
<view
@click="handleShow(2)"
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
v-show="batches.length > 0"
>
{{ batche }}
<view class="i-carbon-chevron-down rotate-270"></view>
</view>
</view>
<scroll-view class="mt-[38rpx] flex-1 pb-safe">
<WXXTable :data="tableData">
<WXXTableCol prop="universityName" label="院校名称" width="25%"></WXXTableCol>
<WXXTableCol prop="major" label="招生专业" width="37%"></WXXTableCol>
<WXXTableCol prop="plancount" label="计划数" width="13%"></WXXTableCol>
<WXXTableCol prop="academic" label="学制" width="10%"></WXXTableCol>
<WXXTableCol prop="fee" label="学费" width="15%"></WXXTableCol>
</WXXTable>
</scroll-view>
<ActionSheet v-model:show="show" title="">
<view class="px-[32rpx]">
<CustomPickerView :list="pickList" v-model:modelValue="pickValue" />
</view>
<template #footer>
<view class="flex items-center justify-between px-[32rpx] gap-[20rpx]">
<view class="cancel-btn" @click="show = false">取消</view>
<view class="submit-btn" @click="handleConfirm"></view>
</view>
</template>
</ActionSheet>
</view>
</template>
<script lang="ts" setup>
import WXXTable from '@/pages-sub/components/table/Table.vue'
import WXXTableCol from '@/pages-sub/components/table/TableCol.vue'
import { getPlanProList } from '@/service/index/api'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
import { useUserStore } from '@/store'
const props = defineProps({
id: {
type: Number,
default: 0,
},
})
const userStore = useUserStore()
const batchList = []
const batche = ref(batchList[0])
const batches = ref(batchList)
const provinceName = userStore.userInfo.estimatedAchievement.provinceName
const year = ref('')
const yearList = ref([])
const pickList = ref([])
const pickValue = ref('')
let pickType = 1
const tableData = ref([])
let isFirst = true
watch(
() => props.id,
(newVal) => {
getPlanProListData(newVal)
},
)
const show = ref(false)
const handleShow = (type: number) => {
show.value = true
pickType = type
if (type === 1) {
pickList.value = yearList.value
pickValue.value = year.value
} else if (type === 2) {
pickList.value = batches.value
}
}
const getPlanProListData = async (newVal) => {
getPlanProList({
years: year.value === '全部年份' ? '' : year.value,
_uid: newVal,
batchName: batche.value === '全部分类' ? '' : batche.value,
locationCode: userStore.userInfo.estimatedAchievement.provinceCode,
}).then((resp) => {
if (resp.code === 200) {
const _res = resp.result as {
batches: { batchName: string }[]
yearsDtos: string[]
plans: any[]
}
yearList.value = ['全部年份', ..._res.yearsDtos]
batches.value = ['全部分类', ..._res.batches.map((item) => item.batchName)]
tableData.value = _res.plans
if (isFirst) {
year.value = yearList.value[0]
batche.value = batches.value[0]
}
isFirst = false
}
})
}
const handleConfirm = () => {
if (pickType === 1) {
year.value = pickValue.value ? pickValue.value : yearList.value[0]
} else if (pickType === 2) {
batche.value = pickValue.value ? pickValue.value : batches.value[0]
}
show.value = false
getPlanProListData(props.id)
}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>