You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

203 lines
4.9 KiB

<template>
<view>
<!--自定义地址选择器-->
<view class="nyz_area_mask" v-if="show == true"></view>
<view :class="'nyz_area_view ' + (show ? 'show':'hide')">
<view class="nyz_area_view_btns">
<text class="nyz_area_view_btn_cancle" @tap="handleNYZAreaCancle"></text>
<text class="nyz_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province" :data-city="city" :data-area="area">确定</text>
</view>
<picker-view class="nyz_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange" :value="value">
<picker-view-column>
<view v-for="(item, index) in provinces" :key="index" class="nyz_area_colum_view">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in citys" :key="index" class="nyz_area_colum_view">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in areas" :key="index" class="nyz_area_colum_view">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
var areaTool = require("@/utils/area.js");
var index = [0, 0, 0];
var provinces = areaTool.getProvinces();
var citys = areaTool.getCitys(index[0]);
var areas = areaTool.getAreas(index[0], index[1]);
export default {
data() {
return {
provinces: provinces,
citys: areaTool.getCitys(index[0]),
areas: areaTool.getAreas(index[0], index[1]),
value: [0, 0, 0],
province: '北京市',
city: '北京市',
area: '东城区'
};
},
components: {},
props: {
show: {
//控制area_select显示隐藏
type: Boolean,
default: false
},
maskShow: {
//是否显示蒙层
type: Boolean,
default: true
}
},
methods: {
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 = areaTool.getCitys(index[0]);
let selectAreas = areaTool.getAreas(index[0], 0);
that.setData({
citys: selectCitys,
areas: selectAreas,
value: [index[0], 0, 0],
province: provinces[index[0]],
city: selectCitys[0],
area: selectAreas[0]
});
} else if (index[1] != value[1]) {
/**
* 市改变了 省不变 区变
*/
index = [value[0], value[1], 0];
let selectCitys = areaTool.getCitys(index[0]);
let selectAreas = areaTool.getAreas(index[0], value[1]);
that.setData({
citys: selectCitys,
areas: selectAreas,
value: [index[0], index[1], 0],
province: provinces[index[0]],
city: selectCitys[index[1]],
area: selectAreas[0]
});
} else if (index[2] != value[2]) {
/**
* 区改变了
*/
index = [value[0], value[1], value[2]];
let selectCitys = areaTool.getCitys(index[0]);
let selectAreas = areaTool.getAreas(index[0], value[1]);
that.setData({
citys: selectCitys,
areas: selectAreas,
value: [index[0], index[1], index[2]],
province: provinces[index[0]],
city: selectCitys[index[1]],
area: selectAreas[index[2]]
});
}
},
/**
* 确定按钮的点击事件
*/
handleNYZAreaSelect: function (e) {
var myEventDetail = e; // detail对象提供给事件监听函数
var myEventOption = {}; // 触发事件的选项
this.$emit('sureSelectArea', {
detail: myEventDetail
}, myEventOption);
},
/**
* 取消按钮的点击事件
*/
handleNYZAreaCancle: function (e) {
var that = this;
console.log("e:" + JSON.stringify(e));
this.$emit('hideShow', {
detail: false
});
}
}
};
</script>
<style scoped lang="scss">
.nyz_area_view{
width: 100%;
position: fixed;
bottom:-1000px;
left: 0px;
background-color: #fff;
z-index: 21;
transition: all 0.3s;
}
.nyz_area_pick_view{
height: 200px;
width: 100%;
}
.nyz_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;
}
.nyz_area_view_btns{
background-color: #fff;
border-bottom: 1px solid #eeeeee;
font-size: 30upx;
padding: 18upx 0upx;
}
.nyz_area_view_btns>text{
display: inline-block;
word-spacing: 4upx;
letter-spacing: 4upx;
}
.nyz_area_view_btn_cancle{
color: #939393;
padding-right: 20upx;
padding-left: 25upx;
}
.nyz_area_view_btn_sure{
float: right;
padding-left: 20upx;
padding-right: 25upx;
}
.nyz_area_mask{
width: 100%;
height: 100vh;
background-color: rgba(8, 8, 8, 0.8);
position: absolute;
top: 0upx;
left: 0upx;
z-index: 20;
}
</style>