1.0
This commit is contained in:
solosw
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list" :style="{width:width+'rpx',height:height+'rpx'}">
|
||||
|
||||
<picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
|
||||
@columnchange="pickerColumnchange">
|
||||
<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
|
||||
<view>{{regionStr}}</view>
|
||||
<text class="iconfont icon-you"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import region from './pca-code.json';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 原数组
|
||||
oldRegion: region,
|
||||
// 处理后的数组
|
||||
region: [
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
],
|
||||
// 选择省市区的下标Index 传则默认选中传递的
|
||||
regionIndex: [0, 0, 0],
|
||||
|
||||
// 选择的id
|
||||
// previnceId: 11,
|
||||
// cityId: 1101,
|
||||
// countyId: 110101,
|
||||
|
||||
// 省市区字符串
|
||||
regionStr: '请选择省/市/区'
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 组件高度
|
||||
height: {
|
||||
type: [Number],
|
||||
default: 92
|
||||
},
|
||||
// 组件宽度
|
||||
width: {
|
||||
type: [Number],
|
||||
default: 710
|
||||
},
|
||||
// 省id
|
||||
previnceId: {
|
||||
type: [Number],
|
||||
default: 11
|
||||
},
|
||||
// 城市id
|
||||
cityId: {
|
||||
type: [Number],
|
||||
default: 1101
|
||||
},
|
||||
// 县区id
|
||||
countyId: {
|
||||
type: [Number],
|
||||
default: 110101
|
||||
},
|
||||
// 是否是为修改(true为修改)
|
||||
isRevise: {
|
||||
type: [Boolean],
|
||||
default: true
|
||||
},
|
||||
// 是否显示"全部区"选项
|
||||
showAllDistrict: {
|
||||
type: [Boolean],
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickerChange(e) {
|
||||
// console.log(e, '1');
|
||||
this.regionIndex = e.detail.value;
|
||||
|
||||
const provinceName = this.region[0][this.regionIndex[0]].name;
|
||||
const cityName = this.region[1][this.regionIndex[1]].name;
|
||||
let countyName = '';
|
||||
|
||||
// 如果开启了全部区功能且选择的是第一项"全部"
|
||||
if (this.showAllDistrict && this.regionIndex[2] === 0 && this.region[2][0] && this.region[2][0].name === '全部') {
|
||||
countyName = '全部';
|
||||
this.regionStr = provinceName + ' ' + cityName + ' ' + countyName;
|
||||
} else {
|
||||
// 正常情况下直接使用选择的项
|
||||
if (this.region[2][this.regionIndex[2]]) {
|
||||
countyName = this.region[2][this.regionIndex[2]].name;
|
||||
this.regionStr = provinceName + ' ' + cityName + ' ' + countyName;
|
||||
}
|
||||
}
|
||||
|
||||
// 组件传值 - 如果选择了"全部"，则传递空字符串给区
|
||||
const emitCountyName = countyName === '全部' ? '' : countyName;
|
||||
this.$emit('region', [provinceName, cityName, emitCountyName]);
|
||||
},
|
||||
pickerColumnchange(e) {
|
||||
// console.log(e);
|
||||
// 第几列滑动
|
||||
// console.log(e.detail.column);
|
||||
// 第几列滑动的下标
|
||||
// console.log(e.detail.value)
|
||||
|
||||
if (e.detail.column === 0) {
|
||||
// 声明城市数组
|
||||
let cityArr = [];
|
||||
let countyArr = [];
|
||||
// 设置下标
|
||||
this.regionIndex = [e.detail.value, 0, 0];
|
||||
// 改变城市列表
|
||||
this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
|
||||
cityArr.push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
})
|
||||
this.$set(this.region, 1, cityArr);
|
||||
// 改变县区列表 - 如果开启了全部区功能，首先添加"全部"选项
|
||||
if (this.showAllDistrict) {
|
||||
countyArr.push({
|
||||
name: '全部',
|
||||
code: -1
|
||||
});
|
||||
}
|
||||
this.oldRegion[e.detail.value].children[0].children.map(item => {
|
||||
countyArr.push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
})
|
||||
this.$set(this.region, 2, countyArr);
|
||||
}
|
||||
if (e.detail.column === 1) {
|
||||
this.regionIndex[1] = e.detail.value;
|
||||
this.regionIndex[2] = 0;
|
||||
let countyArr = [];
|
||||
// 如果开启了全部区功能，首先添加"全部"选项
|
||||
if (this.showAllDistrict) {
|
||||
countyArr.push({
|
||||
name: '全部',
|
||||
code: -1
|
||||
});
|
||||
}
|
||||
this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
|
||||
countyArr.push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
})
|
||||
this.$set(this.region, 2, countyArr);
|
||||
}
|
||||
if (e.detail.column === 2) {
|
||||
this.regionIndex[2] = e.detail.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let provinceArr = [];
|
||||
let cityArr = [];
|
||||
|
||||
this.oldRegion.map((item, index) => {
|
||||
this.region[0].push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
if (this.previnceId == item.code) {
|
||||
provinceArr = item.children;
|
||||
this.regionIndex[0] = index;
|
||||
}
|
||||
})
|
||||
// console.log(provinceArr);
|
||||
provinceArr.map((item, index) => {
|
||||
this.region[1].push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
if (this.cityId == item.code) {
|
||||
cityArr = item.children;
|
||||
this.regionIndex[1] = index;
|
||||
}
|
||||
})
|
||||
// 如果开启了全部区功能，首先添加"全部"选项到区列表
|
||||
if (this.showAllDistrict) {
|
||||
this.region[2].push({
|
||||
name: '全部',
|
||||
code: -1
|
||||
});
|
||||
}
|
||||
|
||||
cityArr.map((item, index) => {
|
||||
this.region[2].push({
|
||||
name: item.name,
|
||||
code: item.code
|
||||
});
|
||||
if (this.countyId == item.code) {
|
||||
// 如果开启了全部区功能，index要+1，因为前面插入了"全部"
|
||||
this.regionIndex[2] = this.showAllDistrict ? index + 1 : index;
|
||||
}
|
||||
})
|
||||
|
||||
// 如果传入的countyId为-1且开启了全部区功能，则选中"全部"
|
||||
if (this.countyId == -1 && this.showAllDistrict) {
|
||||
this.regionIndex[2] = 0;
|
||||
}
|
||||
if (this.isRevise) {
|
||||
this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
|
||||
this.region[2][this.regionIndex[2]].name;
|
||||
} else {
|
||||
this.regionStr = '请选择省市区';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
|
||||
// border-bottom: 1rpx solid #eee;
|
||||
padding: 0 8rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.picker {
|
||||
flex: 1;
|
||||
height: 92rpx;
|
||||
|
||||
.pbox {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #808080;
|
||||
view{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.icon-you {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pbox_hover {
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 168rpx;
|
||||
font-size: 32rpx;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 92rpx;
|
||||
color: #9080A1;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user