136 lines
4.2 KiB
Vue
136 lines
4.2 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="mt-[24rpx] px-[32rpx]">
|
||
<view class="flex mb-[30rpx] items-center">
|
||
<text class="text-[32rpx] font-semibold text-[#303030]">专业点分布</text>
|
||
<text class="text-[22rpx] text-[#636363]">
|
||
（全国针对{{ userStore.userInfo.estimatedAchievement.provinceName }}招生情况）
|
||
</text>
|
||
</view>
|
||
<view
|
||
class="flex items-center gap-[16rpx] text-[24rpx] text-[#303030] mb-[30rpx]"
|
||
v-for="item in provinceList"
|
||
:key="item.code"
|
||
>
|
||
<text class="">{{ item.ssmc }}</text>
|
||
<ProgressBar
|
||
class="flex-1 h-[16rpx]"
|
||
:progress="Math.floor((item.count / provinceTotal) * 100)"
|
||
/>
|
||
<text>{{ item.count }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="h-[16rpx] bg-[#f8f8f8]"></view>
|
||
<view class="flex flex-col px-[32rpx] mt-[40rpx]">
|
||
<text class="text-[32rpx] font-semibold text-[#303030]">专业院校分布</text>
|
||
<view
|
||
@click="handleShow"
|
||
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx] w-[144rpx] mt-[30rpx]"
|
||
>
|
||
{{ provinceName || '不限' }}
|
||
<view class="i-carbon-chevron-down text-[16rpx]"></view>
|
||
</view>
|
||
<scroll-view :scroll-x="true" class="">
|
||
<view
|
||
class="flex gap-[24rpx] py-[40rpx] border-bt"
|
||
v-for="item in subUniversityList"
|
||
:key="item"
|
||
>
|
||
<image class="w-[112rpx] h-[112rpx]" :src="item.logo" mode="scaleToFill" />
|
||
<view class="flex flex-col">
|
||
<text class="text-[32rpx] font-semibold">[{{ item.yxdm }}]{{ item.yxmc }}</text>
|
||
<text class="text-[22rpx] text-[#505050]">{{ item.cityname }}·{{ item.ulevel }}</text>
|
||
<text class="text-[#8F959E] text-[22rpx] my-[6rpx]">
|
||
{{ item.featuretag?.split('/').slice(0, 4).join('/') }}/ 排名68
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<ActionSheet v-model:show="show" title="">
|
||
<view class="px-[32rpx]">
|
||
<CustomPickerView
|
||
v-model:modelValue="provinceCode"
|
||
:list="provinceList"
|
||
value-key="code"
|
||
label-key="ssmc"
|
||
/>
|
||
</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 { getMajorUniversityList } from '@/service/index/api'
|
||
import ProgressBar from '../../components/ProgressBar.vue'
|
||
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
|
||
import { useUserStore } from '@/store'
|
||
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const props = defineProps({
|
||
specId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
})
|
||
|
||
watch(
|
||
() => props.specId,
|
||
(newV) => {
|
||
getMajorUniversityList({ SpecId: newV }).then((resp) => {
|
||
if (resp.code === 200) {
|
||
let result = resp.result as {
|
||
schSpecList: { yxmc; string }[]
|
||
ssdmList: { ssmc: string; code: string; count: number }[]
|
||
}
|
||
provinceList.value = result.ssdmList.filter((item) => {
|
||
if (item.code) {
|
||
return item
|
||
} else {
|
||
provinceTotal.value = item.count
|
||
}
|
||
})
|
||
universityList.value = result.schSpecList
|
||
subUniversityList.value = universityList.value
|
||
}
|
||
})
|
||
},
|
||
)
|
||
|
||
const provinceName = ref('')
|
||
const provinceList = ref([])
|
||
const provinceTotal = ref(0)
|
||
const provinceCode = ref('')
|
||
|
||
const show = ref(false)
|
||
|
||
const universityList = ref([])
|
||
const subUniversityList = ref([])
|
||
|
||
const handleShow = () => {
|
||
show.value = true
|
||
}
|
||
const handleConfirm = () => {
|
||
show.value = false
|
||
subUniversityList.value = universityList.value.filter((item) => {
|
||
return item.ssdm === provinceCode.value
|
||
})
|
||
provinceName.value = provinceList.value.find((item) => item.code === provinceCode.value)?.ssmc
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/pages-sub/home/styles/picker-view-btn.scss';
|
||
.border-bt {
|
||
border-bottom: 1rpx solid #f8f8f8;
|
||
}
|
||
</style>
|