158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup
|
|
:show="show"
|
|
closeOnClickOverlay
|
|
round="20rpx"
|
|
@close="onClose"
|
|
>
|
|
<view>
|
|
<view class="popup_title">
|
|
<view class="popup_label" @click="onClose">取消</view>
|
|
<view class="popup_label color_blue" @click="onOk">确认</view>
|
|
</view>
|
|
<!-- indicator-style="height: 50px;" style="width: 100%; height: 500rpx;" -->
|
|
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="value" @change="bindChange">
|
|
<picker-view-column>
|
|
<view v-for="(item, index) in provList" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view v-for="(item, index) in defaultCity" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view v-for="(item, index) in defaultDist" :key="index" style="line-height: 50px; text-align: center;">{{item.business_name}}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
|
|
|
|
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
apiArr
|
|
} from '../../api/area';
|
|
import { request } from '../../utils';
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
provList: [], // 省
|
|
cityList: [], //市
|
|
distList: [], // 区
|
|
|
|
defaultCity: [], // 默认展示的市区数据
|
|
defaultDist: [], // 默认展示的县/区数据
|
|
|
|
confirmProv: {}, // 默认选中省
|
|
confirmCity: {}, // 默认选中市
|
|
confirmDist: {}, // 默认选中区/县
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 获取省份信息
|
|
async getProvList () {
|
|
const res = await request(apiArr.city, 'POST', {}, { silent: false });
|
|
return res;
|
|
},
|
|
|
|
// 获取市区信息
|
|
async getCityList () {
|
|
const res = await request(apiArr.area, 'POST', {}, { silent: false });
|
|
return res;
|
|
},
|
|
|
|
// 获取 县/区 信息
|
|
async getDistList () {
|
|
const res = await request(apiArr.business, 'POST', {}, { silent: false });
|
|
return res;
|
|
},
|
|
|
|
async init() {
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
});
|
|
try {
|
|
const [provRes, cityRes, distRes] = await Promise.all([
|
|
this.getProvList(),
|
|
this.getCityList(),
|
|
this.getDistList(),
|
|
])
|
|
|
|
uni.hideLoading();
|
|
// 默认展示第一条数据 的市区 和 城区
|
|
let defaultCity = cityRes.rows.filter((item) => {
|
|
return item.city_id === provRes.rows[0].city_id
|
|
});
|
|
let defaultDist = distRes.rows.filter((item) => {
|
|
return item.area_id === cityRes.rows[0].area_id
|
|
});
|
|
|
|
this.provList = provRes?.rows; // 全部省信息
|
|
this.cityList = cityRes?.rows; // 全部市信息
|
|
this.distList = distRes?.rows; // 全部区信息
|
|
|
|
this.defaultCity = defaultCity; // 默认展示 市区
|
|
this.defaultDist = defaultDist; // 默认展示 县/区
|
|
|
|
this.confirmProv = provRes.rows[0];
|
|
this.confirmCity = defaultCity[0];
|
|
this.confirmDist = defaultDist[0];
|
|
} catch (error) {
|
|
uni.hideLoading();
|
|
console.log('获取省市区信息异常', error);
|
|
}
|
|
},
|
|
|
|
// 切换省市区时联动改变参数值
|
|
bindChange (e) {
|
|
console.log('[1231331], e', e);
|
|
const {value } = e.detail;
|
|
const {provList, cityList, distList} = this;
|
|
|
|
// 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
|
|
let newCrty = cityList.filter((item) => item.city_id === provList[value[0]].city_id);
|
|
let newDist = distList.filter((item) => item.area_id === newCrty[value[1]].area_id);
|
|
|
|
this.defaultCity = newCrty;
|
|
this.defaultDist = newDist;
|
|
|
|
// 更改默认选中数据
|
|
this.confirmProv = provList[value[0]];
|
|
this.confirmCity = newCrty[value[1]];
|
|
this.confirmDist = newDist[value[2]];
|
|
},
|
|
|
|
// 关闭弹窗
|
|
onClose() {
|
|
this.$emit('close');
|
|
},
|
|
|
|
// 点击确定传递当前选中省市区信息给父方法
|
|
onOk() {
|
|
const { confirmProv, confirmCity, confirmDist } = this;
|
|
this.$emit('selectArea', {confirmProv, confirmCity, confirmDist});
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./areaPopup.css');
|
|
</style> |