326 lines
8.0 KiB
Vue
326 lines
8.0 KiB
Vue
<template>
|
|
<div class="mpvue-picker">
|
|
<div
|
|
:class="{ pickerMask: showPicker }"
|
|
@click="maskClick"
|
|
catchtouchmove="true"
|
|
></div>
|
|
<div
|
|
class="mpvue-picker-content"
|
|
:class="{ 'mpvue-picker-view-show': showPicker }"
|
|
>
|
|
<div class="mpvue-picker__hd" catchtouchmove="true">
|
|
<div class="mpvue-picker__action" @click="pickerCancel">
|
|
{{ $t("MN_F_31") }}
|
|
</div>
|
|
<div
|
|
class="mpvue-picker__action"
|
|
:style="{ color: themeColor }"
|
|
@click="pickerConfirm"
|
|
>
|
|
{{ $t("MN_F_32") }}
|
|
</div>
|
|
</div>
|
|
<picker-view
|
|
indicator-style="height: 40px;"
|
|
class="mpvue-picker-view"
|
|
:value="pickerValue"
|
|
@change="pickerChange"
|
|
>
|
|
<block>
|
|
<picker-view-column>
|
|
<div
|
|
class="picker-item"
|
|
v-for="(item, index) in provinceDataList"
|
|
:key="index"
|
|
>
|
|
{{ item && item.name ? item.name : "" }}
|
|
</div>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<div
|
|
class="picker-item"
|
|
v-for="(item, index) in cityDataList"
|
|
:key="index"
|
|
>
|
|
{{ item && item.name ? item.name : "" }}
|
|
</div>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<div
|
|
class="picker-item"
|
|
v-for="(item, index) in areaDataList"
|
|
:key="index"
|
|
>
|
|
{{ item && item.name ? item.name : "" }}
|
|
</div>
|
|
</picker-view-column>
|
|
</block>
|
|
</picker-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerValue: [0, 0, 0],
|
|
provinceDataList: [],
|
|
cityDataList: [],
|
|
areaDataList: [],
|
|
/* 是否显示控件 */
|
|
showPicker: false,
|
|
provinceData: [],
|
|
cityData: [],
|
|
areaData: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
props: {
|
|
/* 默认值 */
|
|
pickerValueDefault: {
|
|
type: Array,
|
|
default() {
|
|
return [0, 0, 0];
|
|
},
|
|
},
|
|
/* 主题色 */
|
|
themeColor: String,
|
|
province: {
|
|
type: Array,
|
|
},
|
|
city: {
|
|
type: Array,
|
|
},
|
|
area: {
|
|
type: Array,
|
|
},
|
|
},
|
|
watch: {
|
|
pickerValueDefault() {
|
|
this.init();
|
|
},
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.provinceData = this.province;
|
|
this.cityData = this.city;
|
|
this.areaData = this.area;
|
|
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
|
this.provinceDataList = this.provinceData;
|
|
// 判断省份数据是否加载成功
|
|
if (this.provinceDataList.length > 0) {
|
|
this.cityDataList =
|
|
this.provinceDataList[this.pickerValueDefault[0]].children || [];
|
|
// 判断当前城市下是否有区域数据
|
|
if (this.cityDataList.length > 0) {
|
|
this.areaDataList = this.cityDataList[this.pickerValueDefault[1]]
|
|
.children
|
|
? this.cityDataList[this.pickerValueDefault[1]].children
|
|
: [];
|
|
}
|
|
}
|
|
this.pickerValue = this.pickerValueDefault;
|
|
},
|
|
show() {
|
|
setTimeout(() => {
|
|
this.showPicker = true;
|
|
}, 0);
|
|
},
|
|
maskClick() {
|
|
//this.pickerCancel();
|
|
},
|
|
pickerCancel() {
|
|
this.showPicker = false;
|
|
this._$emit("onCancel");
|
|
},
|
|
pickerConfirm(e) {
|
|
this.showPicker = false;
|
|
this._$emit("onConfirm");
|
|
},
|
|
showPickerView() {
|
|
this.showPicker = true;
|
|
},
|
|
handPickValueDefault() {
|
|
console.log(this.cityDataList.length);
|
|
if (this.pickerValueDefault !== [0, 0, 0]) {
|
|
if (this.pickerValueDefault[0] > this.provinceData.length - 1) {
|
|
this.pickerValueDefault[0] = this.provinceData.length - 1;
|
|
}
|
|
if (
|
|
this.cityDataList.length > 0 &&
|
|
this.pickerValueDefault[1] > this.cityDataList.length - 1
|
|
) {
|
|
this.pickerValueDefault[1] = this.cityDataList.length - 1;
|
|
}
|
|
if (
|
|
this.areaDataList &&
|
|
this.areaDataList.length > 0 &&
|
|
this.pickerValueDefault[2] > this.areaDataList.length - 1
|
|
) {
|
|
this.pickerValueDefault[2] = this.areaDataList.length - 1;
|
|
}
|
|
}
|
|
},
|
|
pickerChange(e) {
|
|
let changePickerValue = e.mp.detail.value;
|
|
if (this.pickerValue[0] !== changePickerValue[0]) {
|
|
// 第一级发生滚动
|
|
this.cityDataList =
|
|
this.provinceData[changePickerValue[0]].children || [];
|
|
this.areaDataList =
|
|
(this.cityDataList[0] && this.cityDataList[0].children) || [];
|
|
changePickerValue[1] = this.cityDataList.length > 0 ? 0 : -1;
|
|
changePickerValue[2] = this.areaDataList.length > 0 ? 0 : -1;
|
|
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
|
// 第二级滚动
|
|
this.areaDataList =
|
|
(this.cityDataList[changePickerValue[1]] &&
|
|
this.cityDataList[changePickerValue[1]].children) ||
|
|
[];
|
|
changePickerValue[2] = this.areaDataList.length > 0 ? 0 : -1;
|
|
}
|
|
this.pickerValue = changePickerValue;
|
|
this._$emit("onChange");
|
|
},
|
|
_$emit(emitName) {
|
|
let pickObj = {
|
|
label: this._getLabel(),
|
|
value: this.pickerValue,
|
|
cityCode: this._getCityCode(),
|
|
};
|
|
this.$emit(emitName, pickObj);
|
|
},
|
|
_getLabel() {
|
|
let pcikerLabel = "";
|
|
if (
|
|
this.provinceDataList[this.pickerValue[0]] &&
|
|
this.provinceDataList[this.pickerValue[0]].name
|
|
) {
|
|
pcikerLabel += this.provinceDataList[this.pickerValue[0]].name;
|
|
}
|
|
if (
|
|
this.cityDataList[this.pickerValue[1]] &&
|
|
this.cityDataList[this.pickerValue[1]].name
|
|
) {
|
|
pcikerLabel += this.cityDataList[this.pickerValue[1]].name;
|
|
}
|
|
if (
|
|
this.areaDataList[this.pickerValue[2]] &&
|
|
this.areaDataList[this.pickerValue[2]].name
|
|
) {
|
|
pcikerLabel += this.areaDataList[this.pickerValue[2]].name;
|
|
}
|
|
return pcikerLabel;
|
|
},
|
|
_getCityCode() {
|
|
let pcikerCode = [0, 0, 0];
|
|
if (
|
|
this.provinceDataList[this.pickerValue[0]] &&
|
|
this.provinceDataList[this.pickerValue[0]].id
|
|
) {
|
|
pcikerCode[0] = this.provinceDataList[this.pickerValue[0]].id;
|
|
}
|
|
if (
|
|
this.cityDataList[this.pickerValue[1]] &&
|
|
this.cityDataList[this.pickerValue[1]].id
|
|
) {
|
|
pcikerCode[1] = this.cityDataList[this.pickerValue[1]].id;
|
|
}
|
|
if (
|
|
this.areaDataList[this.pickerValue[2]] &&
|
|
this.areaDataList[this.pickerValue[2]].id
|
|
) {
|
|
pcikerCode[2] = this.areaDataList[this.pickerValue[2]].id;
|
|
} else {
|
|
pcikerCode[2] = 0;
|
|
}
|
|
return pcikerCode;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.pickerMask {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.mpvue-picker-content {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
transform: translateY(100%);
|
|
z-index: 3000;
|
|
}
|
|
|
|
.mpvue-picker-view-show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.mpvue-picker__hd {
|
|
display: flex;
|
|
padding: 9px 15px;
|
|
background-color: #fff;
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.mpvue-picker__hd:after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
color: #e5e5e5;
|
|
transform-origin: 0 100%;
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.mpvue-picker__action {
|
|
display: block;
|
|
flex: 1;
|
|
color: #fb3024;
|
|
}
|
|
|
|
.mpvue-picker__action:first-child {
|
|
text-align: left;
|
|
color: #888;
|
|
}
|
|
|
|
.mpvue-picker__action:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.picker-item {
|
|
text-align: center;
|
|
line-height: 40px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.mpvue-picker-view {
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 238px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
</style>
|