128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"needLogin": true,
|
||
"layout": "tabbar",
|
||
"style": {
|
||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||
"navigationStyle": "default",
|
||
"navigationBarTitleText": "选择城市"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="">
|
||
<view class="search-box mx-30rpx mt-30rpx">
|
||
<wd-search
|
||
placeholder="请输入城市名称"
|
||
placeholder-left></wd-search>
|
||
</view>
|
||
|
||
<view class="mt-52rpx mx-30rpx">
|
||
<view class="text-[#333] leading-42rpx text-30rpx font-bold">当前定位</view>
|
||
<view class="mt-40rpx">
|
||
<view class="bg-[#F8F9FA] rounded-28rpx w-162rpx h-56rpx text-[#606266] flex items-center justify-center">
|
||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||
<view class="text-26rpx text-[#606266] leading-36rpx">{{ city || LOCATION_DEFAULT_CITY }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-50rpx mx-30rpx">
|
||
<view class="text-[#333] leading-42rpx text-30rpx font-bold">已开通城市</view>
|
||
<view class="mt-40rpx grid grid-cols-4 gap-20rpx w-full">
|
||
<view class="bg-[#F8F9FA] rounded-28rpx h-56rpx text-[#606266] flex items-center justify-center"
|
||
v-for="(item, index) in openCityList" :key="index"
|
||
@click="City.handleChooseCity(item)"
|
||
>
|
||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||
<view class="text-26rpx text-[#606266] leading-36rpx">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { router } from '@/utils/tools'
|
||
import { getOpenCityList } from '@/api/tea-room'
|
||
import { LOCATION_CITY_KEY, LOCATION_LAT_KEY, LOCATION_LNG_KEY } from '@/hooks/useLocation'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 经纬度
|
||
const latitude = ref<number>(0)
|
||
const longitude = ref<number>(0)
|
||
const city = ref<string>('')
|
||
|
||
// 已开通城市列表
|
||
const openCityList = ref<Array<any>>([])
|
||
|
||
onLoad((args) => {
|
||
if (args.lat && args.lng) {
|
||
latitude.value = Number(args.lat)
|
||
longitude.value = Number(args.lng)
|
||
}
|
||
|
||
City.handleInit()
|
||
})
|
||
|
||
const City = {
|
||
handleInit: async () => {
|
||
city.value = uni.getStorageSync(LOCATION_CITY_KEY)
|
||
const res = await getOpenCityList()
|
||
openCityList.value = res.list
|
||
},
|
||
|
||
/**
|
||
* 选择城市
|
||
*/
|
||
handleChooseCity: (item: any) => {
|
||
|
||
const params = {
|
||
latitude: item.latitude,
|
||
longitude: item.longitude,
|
||
city: item.name
|
||
}
|
||
uni.$emit('locationUpdate', params)
|
||
|
||
uni.setStorageSync(LOCATION_LAT_KEY, item.latitude)
|
||
uni.setStorageSync(LOCATION_LNG_KEY, item.longitude)
|
||
uni.setStorageSync(LOCATION_CITY_KEY, item.name)
|
||
router.navigateBack()
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
height: 100%;
|
||
margin-right: 32px;
|
||
--wot-search-padding: 0;
|
||
--wot-search-side-padding: 0;
|
||
|
||
:deep() {
|
||
.wd-search {
|
||
background: transparent !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.wd-search__block {
|
||
height: 72rpx;
|
||
background-color: #F8F9FA !important;
|
||
}
|
||
|
||
.wd-search__input {
|
||
// #ifndef MP
|
||
padding-right: 0 !important;
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
</style>
|