239 lines
11 KiB
Vue
239 lines
11 KiB
Vue
<script lang="ts" setup>
|
|
import MxSearch from "@/pages-sub/components/search/index.vue"
|
|
import MxCheckbox from "@/pages-sub/components/checkbox/index.vue?async"
|
|
import MxRadio from "@/pages-sub/components/radio/index.vue?async"
|
|
import { getAreaList, getBusSchoolAdmission, getSchoolNature } from "@/service"
|
|
import { useWishlistStore } from "@/store"
|
|
|
|
const tableData = ref([])
|
|
const tableColumns = [
|
|
{ title: '院校名称', prop: 'schoolName', width: '40%', align: 'left' },
|
|
{ title: '冲稳保', prop: 'tags', width: "15%", align: "center" },
|
|
{ title: '计划数', prop: 'planCount', width: '15%', align: "center" },
|
|
{ title: '分数线', prop: 'score', width: '15%', align: "center" },
|
|
] as const
|
|
|
|
const chooseData = ref([])
|
|
const chooseDataMap = new Map()
|
|
const wishlistStore = useWishlistStore()
|
|
|
|
const handleChoose = (val) => {
|
|
|
|
if (chooseData.value.includes(val.schoolId)) {
|
|
const index = chooseData.value.indexOf(val.schoolId);
|
|
if (index > -1) {
|
|
chooseData.value.splice(index, 1);
|
|
chooseDataMap.delete(val.schoolId)
|
|
}
|
|
} else {
|
|
if (chooseData.value.length > 2) {
|
|
uni.showToast({ title: "第三志愿最多只能3个", icon: "none" })
|
|
return;
|
|
}
|
|
chooseData.value.push(val.schoolId);
|
|
chooseDataMap.set(val.schoolId, val)
|
|
}
|
|
let tempSchool = []
|
|
chooseDataMap.forEach((val, key) => {
|
|
tempSchool.push({ ...val, type: "thirdBatch" })
|
|
})
|
|
|
|
wishlistStore.setSchool(JSON.stringify({ schools: tempSchool }))
|
|
}
|
|
|
|
const popVisible = ref(false)
|
|
const cwbs = ref([{ value: '冲', label: '冲' }, { value: '稳', label: '稳' }, { value: '保', label: '保' }])
|
|
const natureList = ref([])
|
|
const totalCount = ref(0)
|
|
const regions = ref([])
|
|
|
|
const searchParams = ref({
|
|
cwb: null,
|
|
cwbLabel: "",
|
|
nature: null,
|
|
natureLabel: "",
|
|
region: [],
|
|
keyword: ""
|
|
})
|
|
|
|
const popType = ref("")
|
|
const handleOpenPop = (type: string) => {
|
|
popVisible.value = true;
|
|
popType.value = type
|
|
}
|
|
|
|
const handleChangeSchool = () => {
|
|
getBusSchoolAdmission({
|
|
data: {
|
|
schoolName: searchParams.value.keyword,
|
|
schoolNature: searchParams.value.nature,
|
|
region: searchParams.value.region,
|
|
tags: searchParams.value.cwb
|
|
}
|
|
}).then(resp => {
|
|
popVisible.value = false;
|
|
tableData.value = resp.result.rows;
|
|
cwbs.value = cwbs.value.map((item) => {
|
|
return {
|
|
value: item.value,
|
|
label: `${item.value}(${item.value === '冲' ? resp.result.chongCount : item.value === '稳' ? resp.result.wenCount : resp.result.baoCount})`
|
|
}
|
|
})
|
|
totalCount.value = Number(resp.result.chongCount) + Number(resp.result.wenCount) + Number(resp.result.baoCount)
|
|
})
|
|
}
|
|
const handleCancel = () => {
|
|
searchParams.value.region = []
|
|
popVisible.value = false;
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
getAreaList().then(resp => {
|
|
if (resp.code === 200) {
|
|
regions.value = resp.result
|
|
}
|
|
})
|
|
|
|
getSchoolNature().then(resp => {
|
|
if (resp.code === 200) {
|
|
natureList.value = resp.result
|
|
}
|
|
})
|
|
|
|
handleChangeSchool()
|
|
})
|
|
</script>
|
|
<template>
|
|
<view class="">
|
|
|
|
<view class="mb-[14rpx] flex gap-[10rpx]">
|
|
|
|
<view
|
|
class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
|
|
@click="handleOpenPop('school')">
|
|
<view class="mr-[10rpx]">全部({{ totalCount }})</view>
|
|
<view class="w-[18rpx] h-[18rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[18rpx]" />
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
|
|
@click="handleOpenPop('nature')">
|
|
<view class="mr-[10rpx]">办学性质</view>
|
|
<view class="w-[18rpx] h-[18rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[18rpx]" />
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
|
|
@click="handleOpenPop('region')">
|
|
<view class="mr-[10rpx]">所在地区</view>
|
|
<view class="w-[18rpx] h-[18rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
|
|
class="w-[18rpx] h-[18rpx]" />
|
|
</view>
|
|
</view>
|
|
|
|
<MxSearch root-class="py-[14rpx]! px-[20rpx]! w-[166rpx] rounded-[12rpx]!" :clear-icon="false"
|
|
placeholder="请输入" />
|
|
</view>
|
|
<view v-if="tableData.length === 0"
|
|
class="flex flex-col items-center justify-center bg-[#F7F7F7] min-h-[240rpx] rounded-[16rpx]">
|
|
<view class="w-[148rpx] h-[148rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_moren.png" mode="scaleToFill"
|
|
class="w-[148rpx] h-[148rpx]" />
|
|
</view>
|
|
<view class="text-[26rpx] text-[#B2B2B2]">没用匹配数据</view>
|
|
</view>
|
|
|
|
<view class="min-h-[240rpx]" v-if="tableData.length > 0">
|
|
<sar-table root-style="--sar-table-bg:transparent;">
|
|
<sar-table-row root-class="rounded-[12rpx] px-[20rpx] bg-[#F3F4F8] py-[20rpx] text-[#333] text-[24rpx]">
|
|
<sar-table-cell v-for="item in tableColumns" :key="item.prop" bold :width="item.width">
|
|
<view :style="{ textAlign: item.align }">{{ item.title }}</view>
|
|
</sar-table-cell>
|
|
<sar-table-cell bold width="15%">
|
|
<view class="text-center">选择</view>
|
|
</sar-table-cell>
|
|
</sar-table-row>
|
|
|
|
<sar-table-row v-for="(record, index) in tableData" :key="index"
|
|
:root-class="`py-[18rpx] px-[20rpx] text-[26rpx] ${index % 2 === 0 ? 'bg-white' : 'bg-[#FAFAFA]'}`">
|
|
<sar-table-cell v-for="item in tableColumns" :key="item.prop" :width="item.width">
|
|
<view class="flex items-center justify-center" v-if="item.prop === 'tags'">
|
|
<view
|
|
class="w-[44rpx] h-[44rpx] rounded-[8rpx] text-[26rpx] font-600 flex items-center justify-center"
|
|
:class="`${tableData[index].tags === '稳' ? 'text-[#FA8E23] bg-[#ffeede]' : tableData[index].tags === '保' ? 'bg-[#dcf6f0] text-[#15C496]' : 'bg-[#fce5e3] text-[#EB5241]'}`">
|
|
{{ tableData[index].tags }}</view>
|
|
</view>
|
|
<view :style="{ textAlign: item.align }" v-else>{{ record[item.prop] }}</view>
|
|
</sar-table-cell>
|
|
|
|
<sar-table-cell width="15%">
|
|
<view class="flex items-center justify-center" @click="handleChoose(record)">
|
|
<view class="w-[36rpx] h-[36rpx] flex items-center"
|
|
v-if="chooseData.includes(record.schoolId)">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_duoxuan.png" mode="scaleToFill"
|
|
class="w-[36rpx] h-[36rpx]" />
|
|
</view>
|
|
<sar-icon name="square" size="36rpx" color="#CCC" v-else></sar-icon>
|
|
</view>
|
|
</sar-table-cell>
|
|
</sar-table-row>
|
|
</sar-table>
|
|
</view>
|
|
|
|
<sar-popup :visible="popVisible" effect="slide-bottom" root-class="min-h-[560rpx]" @leave="handleChangeSchool">
|
|
<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>{{ popType === 'school' ? '全部学校' : (popType === 'nature' ?
|
|
'请选择办学性质' : '请选择所在区(可多选)') }}</view>
|
|
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="popVisible = false">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
|
|
class="w-[36rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
<MxRadio v-model:value="searchParams.cwb" v-model:label="searchParams.cwbLabel" :options="cwbs"
|
|
label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]" custom-root-class=" pb-[16rpx]"
|
|
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]!"
|
|
v-if="popType === 'school'" @change="popVisible = false" />
|
|
<MxRadio v-model:value="searchParams.nature" v-model:label="searchParams.natureLabel"
|
|
:options="natureList" label-key="label" value-key="value"
|
|
custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]" custom-root-class=" pb-[16rpx]"
|
|
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]!"
|
|
v-if="popType === 'nature'" @change="popVisible = false" />
|
|
<MxCheckbox v-model:value="searchParams.region" :options="regions" label-key="label" value-key="value"
|
|
custom-root-class=" pb-[16rpx]" custom-item-class="w-full py-[16rpx] text-center"
|
|
v-if="popType === 'region'" />
|
|
|
|
<view
|
|
class="grid grid-cols-2 gap-[20rpx] border-t-[1rpx] border-t-solid border-t-[#eee] pt-[16rpx] px-[30rpx]"
|
|
v-if="popType === 'region'">
|
|
<view class="text-[34rpx] font-500 text-[#333] bg-[#F5F5F5] rounded-[12rpx] py-[20rpx] text-center"
|
|
@click="handleCancel">
|
|
取消</view>
|
|
<view class="text-[34rpx] font-500 text-white bg-[#1580FF] rounded-[12rpx] py-[20rpx] text-center"
|
|
@click="handleChangeSchool">
|
|
确定</view>
|
|
</view>
|
|
</view>
|
|
</sar-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.submit-btn[disabled] {
|
|
background-color: #a1cbff;
|
|
color: #fff;
|
|
}
|
|
</style>
|