volunteer-secondary/src/pages-sub/information/quota.vue

117 lines
4.1 KiB
Vue

<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'
import MxSearch from "@/pages-sub/components/search/index.vue?async"
import MxRadioGroup from "@/pages-sub/components/radio/index.vue?async"
import { getAreaList, getSchoolQuotaScores } from "@/service"
// #ifdef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
},
excludeLoginPath: false,
})
// #endif
// #ifndef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
transparentTitle: 'always',
navigationBarTitleText: ''
},
excludeLoginPath: false,
})
// #endif
const handleBack = () => {
uni.navigateBack({ delta: 1 })
}
const regionVisible = ref(false)
const regions = ref([])
const schools = ref([])
const searchParams = ref({
keyword: "",
region: "",
regionLabel: ''
})
const navigateToDetail = (schoolName: string) => {
uni.navigateTo({ url: `/pages-sub/information/quotaDetail?schoolName=${schoolName}` })
}
const handleChange = () => {
getSchoolQuotaScores({ query: { SchoolName: searchParams.value.keyword, Region: searchParams.value.region } }).then(resp => {
if (resp.code === 200) {
schools.value = resp.result
}
})
}
onLoad(() => {
getAreaList().then(resp => {
if (resp.code === 200) {
regions.value = [{ label: '不限', value: '' }, ...resp.result]
}
})
handleChange()
})
</script>
<template>
<view class="gradient-custom h-screen flex flex-col">
<sar-navbar title="指标生分配" :show-back="true" @back="handleBack"
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, 0)`, 'padding-top': `${safeAreaInsets?.top}px`, '--sar-navbar-item-color': 'black' }">
</sar-navbar>
<view class="flex">
<view class="flex items-center ml-[30rpx]" @click="regionVisible = true">
<text class="text-[#666] text-[30rpx]">{{ searchParams.regionLabel === '' || searchParams.regionLabel === '不限' ?
'区域' : searchParams.regionLabel }}</text>
<view class="w-[24rpx] h-[24rpx] ml-[10rpx] flex items-center">
<image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill" class="w-[24rpx] h-[24rpx]" />
</view>
</view>
<view class="flex-1 ml-[30rpx]">
<mx-search root-class="mr-[40rpx]" placeholder="输入学校名称" v-model:searchText="searchParams.keyword"
@complete="handleChange" />
</view>
</view>
<scroll-view scroll-y class="flex-1">
<view v-for="(val, index) in schools" :key="index"
class="flex items-center justify-between py-[28rpx] mx-[30rpx] border-b-1 border-b-solid border-[#f5f5f5]"
@click="navigateToDetail(val.schoolName)">
<view class="text-[#333] text-[30rpx]">{{ val.schoolName }}</view>
<view class="w-[18rpx] h-[36rpx]">
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
class="w-[18rpx] h-[36rpx]" />
</view>
</view>
<view class="pb-safe"></view>
</scroll-view>
<sar-popup :visible="regionVisible" effect="slide-bottom" root-class="min-h-[560rpx]" @leave="handleChange">
<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>请选择中考所在地</view>
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="regionVisible = false">
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
class="w-[36rpx] h-[36rpx]" />
</view>
</view>
<MxRadioGroup v-model:value="searchParams.region" v-model:label="searchParams.regionLabel" :options="regions"
label-key="label" value-key="value" custom-root-class=""
custom-item-class="w-full py-[16rpx] text-center border-[1rpx] border-solid"
active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!"
default-item-class="bg-[#F3F4F8] border-[#F3F4F8]" @change="regionVisible = false" />
</view>
</sar-popup>
</view>
</template>
<style lang="scss" scoped></style>