volunteer-secondary/src/pages-sub/wishlist/school.vue

94 lines
3.0 KiB
Vue

<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import MxSearch from "@/pages-sub/components/search/index.vue"
import { getHightSchool } from '@/service'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
// #ifdef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
},
excludeLoginPath: false,
})
// #endif
// #ifndef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
transparentTitle: 'always',
navigationBarTitleText: ''
},
excludeLoginPath: false,
})
// #endif
const userStore = useUserStore();
const {userInfo} = storeToRefs(userStore)
const handleBack = () => {
uni.navigateBack({ delta: 1 })
}
const keywords = ref("")
const region = ref("")
const schools = ref([])
const handleActiveSchool = (name:string) => {
userInfo.value.userExtend.schoolName = name;
uni.navigateBack()
}
const handleChange = () => {
getHightSchool({data:{searchKey:keywords.value,region:region.value}}).then(resp => {
if(resp.code === 200){
schools.value = resp.result
}
})
}
onLoad((options) => {
region.value = options.area
handleChange()
})
</script>
<template>
<view class="flex flex-col custom-background h-screen">
<sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
:root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'black', 'padding-top': `${systemInfo?.statusBarHeight}px` }">
<template #title>
<view class="flex justify-center">选择就读中学</view>
</template>
</sar-navbar>
<view class="mx-[30rpx] pb-safe flex-1 flex flex-col overflow-hidden">
<MxSearch v-model:searchText="keywords" root-class="bg-white! border-solid border-1 border-[#1580FF] p-[20rpx_20rpx_20rpx_30rpx]" placeholder="输入高中名称" @complete="handleChange" />
<view class="flex-1 overflow-y-auto">
<view class="py-[29rpx] border-b border-b-solid border-b-[#EDEDED] text-[30rpx] text-[#333] flex items-center justify-between" v-for="(val,index) in schools" :key="val.id" @click="handleActiveSchool(val.schoolName)">
<view :class="`${userInfo.userExtend.schoolName === val.schoolName ? 'text-[#1580FF]' : ''}`">{{ val.schoolName }}</view>
<view class="w-[40rpx] h-[40rpx] flex items-center" v-if="userInfo.userExtend.schoolName === val.schoolName">
<image
src="https://lwzk.ycymedu.com/img/tianbao/tb_danxuan.png"
mode="scaleToFill"
class="w-[40rpx] h-[40rpx]"
/>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.custom-background {
background: linear-gradient(180deg, #D7E4FF 0%, #fff 176rpx);
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
}
</style>