339 lines
10 KiB
Vue
339 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!--自定义地址选择器-->
|
|||
|
|
<view class="cc_area_mask" v-show="show == true"></view>
|
|||
|
|
<view :class="'cc_area_view ' + (show ? 'show' : 'hide')">
|
|||
|
|
<view class="cc_area_view_btns">
|
|||
|
|
<text class="cc_area_view_btn_cancle" @click="handleNYZAreaCancle">取消</text>
|
|||
|
|
<text class="cc_area_view_btn_sure" @click="handleNYZAreaSelect" :data-province="province"
|
|||
|
|
:data-city="city" :data-area="area">确定</text>
|
|||
|
|
</view>
|
|||
|
|
<picker-view class="cc_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange"
|
|||
|
|
:value="value">
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view v-for="(item, index) in provinces" :key="index" class="cc_area_colum_view">{{ item }}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view v-for="(item, index) in citys" :key="index" class="cc_area_colum_view">{{ item }}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view v-for="(item, index) in areas" :key="index" class="cc_area_colum_view">{{ item }}</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getProvinces, getMyCity, getAreas, getAreasCode } from "./area.js"
|
|||
|
|
|
|||
|
|
let index = [0, 0, 0];
|
|||
|
|
let provinces = getProvinces();
|
|||
|
|
let citys = getMyCity(index[0]);
|
|||
|
|
let areas = getMyCity(index[0], index[1]);
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
mixins: [{
|
|||
|
|
methods: {
|
|||
|
|
setData: function (obj, callback) {
|
|||
|
|
let that = this;
|
|||
|
|
const handleData = (tepData, tepKey, afterKey) => {
|
|||
|
|
tepKey = tepKey.split('.');
|
|||
|
|
tepKey.forEach(item => {
|
|||
|
|
if (tepData[item] === null || tepData[item] === undefined) {
|
|||
|
|
let reg = /^[0-9]+$/;
|
|||
|
|
tepData[item] = reg.test(afterKey) ? [] : {};
|
|||
|
|
tepData = tepData[item];
|
|||
|
|
} else {
|
|||
|
|
tepData = tepData[item];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return tepData;
|
|||
|
|
};
|
|||
|
|
const isFn = function (value) {
|
|||
|
|
return typeof value == 'function' || false;
|
|||
|
|
};
|
|||
|
|
Object.keys(obj).forEach(function (key) {
|
|||
|
|
let val = obj[key];
|
|||
|
|
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
|||
|
|
let front, after;
|
|||
|
|
let index_after = key.lastIndexOf('.');
|
|||
|
|
if (index_after != -1) {
|
|||
|
|
after = key.slice(index_after + 1);
|
|||
|
|
front = handleData(that, key.slice(0, index_after), after);
|
|||
|
|
} else {
|
|||
|
|
after = key;
|
|||
|
|
front = that;
|
|||
|
|
}
|
|||
|
|
if (front.$data && front.$data[after] === undefined) {
|
|||
|
|
Object.defineProperty(front, after, {
|
|||
|
|
get() {
|
|||
|
|
return front.$data[after];
|
|||
|
|
},
|
|||
|
|
set(newValue) {
|
|||
|
|
front.$data[after] = newValue;
|
|||
|
|
that.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
enumerable: true,
|
|||
|
|
configurable: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
that.$set(front, after, val);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
Reflect.set(front, after, val);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
// #ifndef VUE3
|
|||
|
|
that.$set(front, after, val);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef VUE3
|
|||
|
|
Reflect.set(front, after, val);
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
isFn(callback) && this.$nextTick(callback);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
provinces: getProvinces(),
|
|||
|
|
citys: getMyCity(index[0]),
|
|||
|
|
areas: getAreas(index[0], index[1]),
|
|||
|
|
value: [0, 0, 0]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
components: {},
|
|||
|
|
props: {
|
|||
|
|
// 省
|
|||
|
|
province: {
|
|||
|
|
//控制area_select显示隐藏
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 市
|
|||
|
|
city: {
|
|||
|
|
//控制area_select显示隐藏
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 区
|
|||
|
|
area: {
|
|||
|
|
//控制area_select显示隐藏
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
show: {
|
|||
|
|
//控制area_select显示隐藏
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
maskShow: {
|
|||
|
|
//是否显示蒙层
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
province() {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
city() {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
area() {
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// let provinceIndex = this.provinces.indexOf(this.province);
|
|||
|
|
// this.citys = getMyCity(provinceIndex);
|
|||
|
|
// let cityIndex = this.citys.indexOf(this.city);
|
|||
|
|
// this.areas = getAreas(provinceIndex, cityIndex);
|
|||
|
|
// let areaIndex = this.areas.indexOf(this.area);
|
|||
|
|
|
|||
|
|
// // 设置选择序列
|
|||
|
|
// this.value = [provinceIndex, cityIndex, areaIndex];
|
|||
|
|
// let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
|
|||
|
|
|
|||
|
|
this.init();
|
|||
|
|
|
|||
|
|
//console.log(areaCode)
|
|||
|
|
//console.log("this.value = " + JSON.stringify(this.value));
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init() {
|
|||
|
|
//console.log(this.area)
|
|||
|
|
let provinceIndex = this.provinces.indexOf(this.province);
|
|||
|
|
this.citys = getMyCity(provinceIndex);
|
|||
|
|
let cityIndex = this.citys.indexOf(this.city);
|
|||
|
|
this.areas = getAreas(provinceIndex, cityIndex);
|
|||
|
|
let areaIndex = this.areas.indexOf(this.area);
|
|||
|
|
|
|||
|
|
// 设置选择序列
|
|||
|
|
this.value = [provinceIndex, cityIndex, areaIndex];
|
|||
|
|
let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
|
|||
|
|
},
|
|||
|
|
handleNYZAreaChange: function (e) {
|
|||
|
|
var that = this;
|
|||
|
|
//console.log("e:" + JSON.stringify(e));
|
|||
|
|
var value = e.detail.value;
|
|||
|
|
/**
|
|||
|
|
* 滚动的是省
|
|||
|
|
* 省改变 市、区都不变
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
if (index[0] != value[0]) {
|
|||
|
|
index = [value[0], 0, 0];
|
|||
|
|
let selectCitys = getMyCity(index[0]);
|
|||
|
|
let selectAreas = getAreas(index[0], 0);
|
|||
|
|
that.setData({
|
|||
|
|
citys: selectCitys,
|
|||
|
|
areas: selectAreas,
|
|||
|
|
value: [index[0], 0, 0],
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let areaCode = getAreasCode(index[0], index[1], index[2]);
|
|||
|
|
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]], areaCode);
|
|||
|
|
|
|||
|
|
} else if (index[1] != value[1]) {
|
|||
|
|
/**
|
|||
|
|
* 市改变了 省不变 区变
|
|||
|
|
*/
|
|||
|
|
index = [value[0], value[1], 0];
|
|||
|
|
let selectCitys = getMyCity(index[0]);
|
|||
|
|
let selectAreas = getAreas(index[0], value[1]);
|
|||
|
|
that.setData({
|
|||
|
|
citys: selectCitys,
|
|||
|
|
areas: selectAreas,
|
|||
|
|
value: [index[0], index[1], 0],
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let areaCode = getAreasCode(index[0], index[1], index[2]);
|
|||
|
|
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]], areaCode);
|
|||
|
|
|
|||
|
|
} else if (index[2] != value[2]) {
|
|||
|
|
/**
|
|||
|
|
* 区改变了
|
|||
|
|
*/
|
|||
|
|
index = [value[0], value[1], value[2]];
|
|||
|
|
let selectCitys = getMyCity(index[0]);
|
|||
|
|
let selectAreas = getAreas(index[0], value[1]);
|
|||
|
|
that.setData({
|
|||
|
|
citys: selectCitys,
|
|||
|
|
areas: selectAreas,
|
|||
|
|
value: [index[0], index[1], index[2]],
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let areaCode = getAreasCode(index[0], index[1], index[2]);
|
|||
|
|
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]], areaCode);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 确定按钮的点击事件
|
|||
|
|
*/
|
|||
|
|
handleNYZAreaSelect: function (e) {
|
|||
|
|
var myEventDetail = e; // detail对象，提供给事件监听函数
|
|||
|
|
var myEventOption = {}; // 触发事件的选项
|
|||
|
|
this.$emit('sureSelectArea', {
|
|||
|
|
detail: myEventDetail
|
|||
|
|
}, myEventOption);
|
|||
|
|
|
|||
|
|
index = [0, 0, 0];
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 取消按钮的点击事件
|
|||
|
|
*/
|
|||
|
|
handleNYZAreaCancle: function (e) {
|
|||
|
|
var that = this;
|
|||
|
|
//console.log("e:" + JSON.stringify(e));
|
|||
|
|
this.$emit('hideShow', {
|
|||
|
|
detail: false
|
|||
|
|
});
|
|||
|
|
// 复原初始状态
|
|||
|
|
index = [0, 0, 0];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.cc_area_view {
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: -1000px;
|
|||
|
|
left: 0px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 21;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_pick_view {
|
|||
|
|
height: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_colum_view {
|
|||
|
|
line-height: 35px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hide {
|
|||
|
|
bottom: -1000upx;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.show {
|
|||
|
|
bottom: 0upx;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_view_btns {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
padding: 18upx 0upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_view_btns>text {
|
|||
|
|
display: inline-block;
|
|||
|
|
word-spacing: 4upx;
|
|||
|
|
letter-spacing: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_view_btn_cancle {
|
|||
|
|
color: #939393;
|
|||
|
|
padding-right: 20upx;
|
|||
|
|
padding-left: 25upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_view_btn_sure {
|
|||
|
|
float: right;
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
padding-right: 25upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cc_area_mask {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: rgba(28, 28, 28, 0.6);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0upx;
|
|||
|
|
left: 0upx;
|
|||
|
|
z-index: 20;
|
|||
|
|
}
|
|||
|
|
</style>
|