volunteer-4/src/pages-sub/home/city/index.vue

61 lines
1.5 KiB
Vue

<route lang="json5" type="page">
{
layout: 'page',
style: {
navigationStyle: 'custom',
},
}
</route>
<template>
<view class="wraper overflow-hidden flex flex-col" :bordered="false">
<wd-navbar title="城市列表" left-arrow @click-left="navigatorBack" safeAreaInsetTop></wd-navbar>
<wd-index-bar sticky class="overflow-y h-0 flex-auto">
<view v-for="item in cities" :key="item.letter">
<wd-index-anchor :index="item.letter" />
<wd-cell
border
clickable
v-for="city in item.provinces"
:key="city.id"
:title="city.provincename"
@click.stop="chooseCity(city)"
></wd-cell>
</view>
</wd-index-bar>
</view>
</template>
<script lang="ts" setup>
import { useCityStore } from '@/store/city'
import { useUserStore } from '@/store/user'
import { City } from '@/types/app-type'
const cityStore = useCityStore()
const userStore = useUserStore()
const cities = cityStore.userCity.cities ?? []
const navigatorBack = () => {
uni.navigateBack()
}
const chooseCity = (city: City) => {
userStore.setUserCity(city)
if (
userStore.userInfo.estimatedAchievement.cityCode &&
userStore.userInfo.estimatedAchievement.cityCode !== city.code
) {
userStore.clearUserEstimatedAchievement()
}
navigatorBack()
}
</script>
<style lang="scss">
.wraper {
height: calc(100vh - var(--window-top));
height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
</style>