168 lines
4.2 KiB
Vue
168 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="flex-center h-44px text-white">
|
|
<view class="flex-center flex-1" @click="openCity">
|
|
<view>{{ selected.area_text }}</view>
|
|
<uv-icon
|
|
color="white"
|
|
class="ml-10rpx"
|
|
size="20rpx"
|
|
name="arrow-down-fill"
|
|
></uv-icon>
|
|
</view>
|
|
<view class="flex-center flex-1" @click="openStore">
|
|
<view>{{ selected.store_text }}</view>
|
|
<uv-icon
|
|
color="white"
|
|
class="ml-10rpx"
|
|
size="20rpx"
|
|
name="arrow-down-fill"
|
|
></uv-icon>
|
|
</view>
|
|
</view>
|
|
<uv-picker
|
|
ref="cityRef"
|
|
keyName="name"
|
|
:columns="cityList"
|
|
:loading="cityLoading"
|
|
cancelText="重置"
|
|
@confirm="cityConfirm"
|
|
@change="cityChange"
|
|
@cancel="cityReset"
|
|
/>
|
|
|
|
<uv-picker
|
|
ref="storeRef"
|
|
keyName="title"
|
|
:columns="storeList"
|
|
:loading="storeLoading"
|
|
@confirm="storeConfirm"
|
|
></uv-picker>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { http } from '@/utils/request'
|
|
|
|
export default {
|
|
name: 'StoreDropDown',
|
|
data() {
|
|
return {
|
|
cityData: {},
|
|
// 已选择的地区 {province: {code, name}, city: {code, name}, area_text: '全部区域', store: {id, name}, store_text: '全部门店'}
|
|
selected: {
|
|
area_text: '全部区域',
|
|
store_text: '全部门店',
|
|
},
|
|
cityLoading: false,
|
|
cityList: [],
|
|
storeLoading: false,
|
|
storeList: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.cityLoading = true
|
|
http
|
|
.get('/region')
|
|
.then((res) => {
|
|
this.cityLoading = false
|
|
this.cityData = res
|
|
const firstProvince = this.cityData.province[0]
|
|
this.cityList = [
|
|
this.cityData.province,
|
|
this.findCityByProvince(firstProvince.code),
|
|
]
|
|
this.findStoreList()
|
|
})
|
|
.catch((error) => {
|
|
this.cityLoading = false
|
|
})
|
|
},
|
|
findStoreList() {
|
|
const params = {}
|
|
if (this.selected.province) {
|
|
params.province_code = this.selected.province.code
|
|
}
|
|
if (this.selected.city) {
|
|
params.city_code = this.selected.city.code
|
|
}
|
|
this.storeLoading = true
|
|
http
|
|
.get('/auth/stores', { params })
|
|
.then((res) => {
|
|
this.storeLoading = false
|
|
res.unshift({ title: '全部门店', id: 'all' })
|
|
this.storeList = [res]
|
|
})
|
|
.catch((error) => {
|
|
this.storeLoading = false
|
|
})
|
|
},
|
|
loadData() {
|
|
console.log('加载数据....', this.selected)
|
|
this.$emit('refresh', this.selected)
|
|
},
|
|
openCity() {
|
|
this.$refs.cityRef.open()
|
|
},
|
|
cityReset() {
|
|
this.selected = { area_text: '全部区域', store_text: '全部门店' }
|
|
this.loadData()
|
|
},
|
|
cityConfirm(e) {
|
|
const province = e.value[0]
|
|
const city = e.value[1]
|
|
if (province && city) {
|
|
if (province.code != 'all') {
|
|
this.selected.province = province
|
|
}
|
|
if (city.code != 'all') {
|
|
this.selected.city = city
|
|
}
|
|
this.selected.area_text = city.code == 'all' ? province.name : city.name
|
|
this.storeReset()
|
|
this.findStoreList()
|
|
this.loadData()
|
|
}
|
|
},
|
|
cityChange(e) {
|
|
const { columnIndex, index } = e
|
|
if (columnIndex == 0) {
|
|
const province = this.cityData.province[index]
|
|
this.$refs.cityRef.setColumnValues(
|
|
1,
|
|
this.findCityByProvince(province.code)
|
|
)
|
|
}
|
|
},
|
|
openStore() {
|
|
this.$refs.storeRef.open()
|
|
},
|
|
storeConfirm(e) {
|
|
const store = e.value[0]
|
|
if (store) {
|
|
if (store.id != 'all') {
|
|
this.selected.store = store
|
|
}
|
|
this.selected.store_text = store.title
|
|
this.loadData()
|
|
}
|
|
},
|
|
storeReset() {
|
|
this.selected.store_text = '全部门店'
|
|
this.selected.store = null
|
|
},
|
|
findCityByProvince(provinceCode) {
|
|
const cityList = this.cityData.city[provinceCode]
|
|
if (cityList.length > 1 && cityList[0].code != 'all') {
|
|
cityList.unshift({ name: '全部', code: 'all' })
|
|
}
|
|
return cityList
|
|
},
|
|
},
|
|
}
|
|
</script>
|