first commit
This commit is contained in:
编码猿
1
金壶/appV1/components/uni-ui/mpvue-citypicker/.pydio
Normal file
1
金壶/appV1/components/uni-ui/mpvue-citypicker/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
656ee796-dee3-44d8-a2ef-e9fc70c09fc3
|
||||
@@ -0,0 +1 @@
|
||||
e55843df-e145-4072-819b-737b0fe512b1
|
||||
12542
金壶/appV1/components/uni-ui/mpvue-citypicker/city-data/area.js
Normal file
12542
金壶/appV1/components/uni-ui/mpvue-citypicker/city-data/area.js
Normal file
File diff suppressed because it is too large
Load Diff
1503
金壶/appV1/components/uni-ui/mpvue-citypicker/city-data/city.js
Normal file
1503
金壶/appV1/components/uni-ui/mpvue-citypicker/city-data/city.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,139 @@
|
||||
/* eslint-disable */
|
||||
var provinceData = [{
|
||||
"label": "北京市",
|
||||
"value": "11"
|
||||
},
|
||||
{
|
||||
"label": "天津市",
|
||||
"value": "12"
|
||||
},
|
||||
{
|
||||
"label": "河北省",
|
||||
"value": "13"
|
||||
},
|
||||
{
|
||||
"label": "山西省",
|
||||
"value": "14"
|
||||
},
|
||||
{
|
||||
"label": "内蒙古自治区",
|
||||
"value": "15"
|
||||
},
|
||||
{
|
||||
"label": "辽宁省",
|
||||
"value": "21"
|
||||
},
|
||||
{
|
||||
"label": "吉林省",
|
||||
"value": "22"
|
||||
},
|
||||
{
|
||||
"label": "黑龙江省",
|
||||
"value": "23"
|
||||
},
|
||||
{
|
||||
"label": "上海市",
|
||||
"value": "31"
|
||||
},
|
||||
{
|
||||
"label": "江苏省",
|
||||
"value": "32"
|
||||
},
|
||||
{
|
||||
"label": "浙江省",
|
||||
"value": "33"
|
||||
},
|
||||
{
|
||||
"label": "安徽省",
|
||||
"value": "34"
|
||||
},
|
||||
{
|
||||
"label": "福建省",
|
||||
"value": "35"
|
||||
},
|
||||
{
|
||||
"label": "江西省",
|
||||
"value": "36"
|
||||
},
|
||||
{
|
||||
"label": "山东省",
|
||||
"value": "37"
|
||||
},
|
||||
{
|
||||
"label": "河南省",
|
||||
"value": "41"
|
||||
},
|
||||
{
|
||||
"label": "湖北省",
|
||||
"value": "42"
|
||||
},
|
||||
{
|
||||
"label": "湖南省",
|
||||
"value": "43"
|
||||
},
|
||||
{
|
||||
"label": "广东省",
|
||||
"value": "44"
|
||||
},
|
||||
{
|
||||
"label": "广西壮族自治区",
|
||||
"value": "45"
|
||||
},
|
||||
{
|
||||
"label": "海南省",
|
||||
"value": "46"
|
||||
},
|
||||
{
|
||||
"label": "重庆市",
|
||||
"value": "50"
|
||||
},
|
||||
{
|
||||
"label": "四川省",
|
||||
"value": "51"
|
||||
},
|
||||
{
|
||||
"label": "贵州省",
|
||||
"value": "52"
|
||||
},
|
||||
{
|
||||
"label": "云南省",
|
||||
"value": "53"
|
||||
},
|
||||
{
|
||||
"label": "西藏自治区",
|
||||
"value": "54"
|
||||
},
|
||||
{
|
||||
"label": "陕西省",
|
||||
"value": "61"
|
||||
},
|
||||
{
|
||||
"label": "甘肃省",
|
||||
"value": "62"
|
||||
},
|
||||
{
|
||||
"label": "青海省",
|
||||
"value": "63"
|
||||
},
|
||||
{
|
||||
"label": "宁夏回族自治区",
|
||||
"value": "64"
|
||||
},
|
||||
{
|
||||
"label": "新疆维吾尔自治区",
|
||||
"value": "65"
|
||||
},
|
||||
{
|
||||
"label": "台湾",
|
||||
"value": "66"
|
||||
},
|
||||
{
|
||||
"label": "香港",
|
||||
"value": "67"
|
||||
},
|
||||
{
|
||||
"label": "澳门",
|
||||
"value": "68"
|
||||
}
|
||||
]
|
||||
export default provinceData;
|
||||
341
金壶/appV1/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue
Normal file
341
金壶/appV1/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<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">取消</div>
|
||||
<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</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.label}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.area_name}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
|
||||
</picker-view-column>
|
||||
</block> -->
|
||||
<block>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in sheng" :key="index">{{item.area_name}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in shi" :key="index">{{item.area_name}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in qu" :key="index">{{item.area_name}}</div>
|
||||
</picker-view-column>
|
||||
</block>
|
||||
</picker-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import provinceData from './city-data/province.js';
|
||||
import cityData from './city-data/city.js';
|
||||
import areaData from './city-data/area.js';
|
||||
|
||||
import shippingAddress from '../../../utils/models/shop.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerValue: [0, 0, 0], //返回省市区
|
||||
provinceDataList: provinceData, //省 //this.sheng
|
||||
cityDataList: cityData[0], //市 //this.shi
|
||||
areaDataList: areaData[0][0], //区县 //this.qu
|
||||
/* 是否显示控件 */
|
||||
showPicker: false,
|
||||
sheng: [],
|
||||
shi: [],
|
||||
qu: [],
|
||||
sheng_id: '',
|
||||
shi_id: '',
|
||||
qu_id: '',
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
props: {
|
||||
/* 默认值 */
|
||||
pickerValueDefault: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [0, 0, 0]
|
||||
}
|
||||
},
|
||||
/* 主题色 */
|
||||
themeColor: String
|
||||
},
|
||||
watch: {
|
||||
pickerValueDefault() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
//返回数据
|
||||
let res = await shippingAddress.shippingAddress();
|
||||
this.handleError(res, res => {
|
||||
console.log("地区三级地址")
|
||||
console.log(res)
|
||||
|
||||
for (let i in res.data) {
|
||||
var item = res.data[i]
|
||||
if (item.id && !item.parent_area_id && !item.grand_pa_id) {
|
||||
this.sheng.push(item)
|
||||
}
|
||||
if (item.id && item.parent_area_id && !item.grand_pa_id) {
|
||||
this.shi.push(item)
|
||||
}
|
||||
if (item.id && item.parent_area_id && item.grand_pa_id) {
|
||||
this.qu.push(item)
|
||||
}
|
||||
}
|
||||
console.log(this.sheng, '省')
|
||||
console.log(this.shi, '市')
|
||||
console.log(this.qu, '区')
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
// this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
||||
|
||||
const pickerValueDefault = this.pickerValueDefault //默认值
|
||||
console.log(this.shi[0], 'pickerValueDefault')
|
||||
this.shi.push(this.shi[0])
|
||||
console.log(this.shi, 'this.shi')
|
||||
|
||||
this.qu.push(this.qu[0])
|
||||
console.log(this.qu, 'this.qu')
|
||||
console.log(cityData, ' cityData')
|
||||
|
||||
this.cityDataList = cityData[pickerValueDefault[0]]; //市
|
||||
this.areaDataList = areaData[pickerValueDefault[0]][pickerValueDefault[1]]; //区
|
||||
this.pickerValue = pickerValueDefault; //省
|
||||
console.log(this.cityDataList, 1)
|
||||
console.log(this.areaDataList, 2)
|
||||
console.log(this.pickerValue, 3)
|
||||
console.log(2)
|
||||
},
|
||||
// 显示控件
|
||||
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() {
|
||||
// const pickerValueDefault = this.pickerValueDefault
|
||||
|
||||
// let provinceIndex = pickerValueDefault[0]
|
||||
// let cityIndex = pickerValueDefault[1]
|
||||
// const areaIndex = pickerValueDefault[2]
|
||||
// if (
|
||||
// provinceIndex !== 0 ||
|
||||
// cityIndex !== 0 ||
|
||||
// areaIndex !== 0
|
||||
// ) {
|
||||
// if (provinceIndex > provinceData.length - 1) {
|
||||
// this.pickerValueDefault[0] = provinceIndex = provinceData.length - 1;
|
||||
// }
|
||||
// if (cityIndex > cityData[provinceIndex].length - 1) {
|
||||
// this.pickerValueDefault[1] = cityIndex = cityData[provinceIndex].length - 1;
|
||||
// }
|
||||
// if (areaIndex > areaData[provinceIndex][cityIndex].length - 1) {
|
||||
// this.pickerValueDefault[2] = areaData[provinceIndex][cityIndex].length - 1;
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
|
||||
// 改变地址
|
||||
pickerChange(e) {
|
||||
// 改变当前省市区
|
||||
let changePickerValue = e.mp.detail.value;
|
||||
console.log(e, 'changePickerValue')
|
||||
if (this.pickerValue[0] !== changePickerValue[0]) {
|
||||
|
||||
// 第一级发生滚动
|
||||
console.log('第一级发生滚动')
|
||||
this.sheng.forEach(item => {
|
||||
|
||||
this.sheng_id = item.id
|
||||
for (var i = 0; i < this.shi.length; i++) {
|
||||
if (item.id == this.shi[i].parent_area_id) {
|
||||
console.log('xiangtong')
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
this.shi.forEach(item => {
|
||||
|
||||
this.shi_id = item.parent_area_id
|
||||
})
|
||||
console.log(this.sheng_id)
|
||||
console.log(this.shi_id)
|
||||
if (this.sheng_id == this.shi_id) {
|
||||
console.log('kkk')
|
||||
}
|
||||
return
|
||||
|
||||
this.sheng = this.sheng[changePickerValue[0]];
|
||||
this.shi = this.shi[changePickerValue[0]];
|
||||
if (this.sheng.id == this.shi.parent_area_id) {
|
||||
console.log(this.shi.area_name, 6)
|
||||
}
|
||||
console.log(this.sheng, 7)
|
||||
console.log(this.shi, 8)
|
||||
// this.shi = [{
|
||||
// id: 2,
|
||||
// parent_area_id: 1,
|
||||
// area_name: "xrx"
|
||||
// }];
|
||||
// this.qu = this.qu[changePickerValue[0]][0];
|
||||
// console.log(this.shi,2)
|
||||
// console.log(this.qu,3)
|
||||
|
||||
this.cityDataList = cityData[changePickerValue[0]];
|
||||
this.areaDataList = areaData[changePickerValue[0]][0];
|
||||
changePickerValue[1] = 0;
|
||||
changePickerValue[2] = 0;
|
||||
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
||||
// 第二级滚动
|
||||
console.log('第2级发生滚动')
|
||||
this.areaDataList =
|
||||
areaData[changePickerValue[0]][changePickerValue[1]];
|
||||
changePickerValue[2] = 0;
|
||||
}
|
||||
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 =
|
||||
this.provinceDataList[this.pickerValue[0]].label + //省
|
||||
'-' +
|
||||
this.cityDataList[this.pickerValue[1]].label + //市
|
||||
'-' +
|
||||
this.areaDataList[this.pickerValue[2]].label; //区
|
||||
return pcikerLabel;
|
||||
},
|
||||
_getCityCode() {
|
||||
return this.areaDataList[this.pickerValue[2]].value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</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: #1aad19;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user