|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <view class="pupop">
|
|
|
+ <view class="popup-box" :animation="animationData">
|
|
|
+ <view class="pupop-btn">
|
|
|
+ <view @tap="cancel">取消</view>
|
|
|
+ <view @tap="confirm" style="color: #2979ff;">确定</view>
|
|
|
+ </view>
|
|
|
+ <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column v-if="column == 3">
|
|
|
+ <view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
|
|
|
+ </picker-view-column>
|
|
|
+ </picker-view>
|
|
|
+ </view>
|
|
|
+ <view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ addressList
|
|
|
+ } from './cityData.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: [],
|
|
|
+ addressList,
|
|
|
+ provinceList: [],
|
|
|
+ cityList: [],
|
|
|
+ areaList: [],
|
|
|
+ indicatorStyle: `height: 50px;`,
|
|
|
+ provinceIndex: 0,
|
|
|
+ cityIndex: 0,
|
|
|
+ areaIndex: 0,
|
|
|
+ animationData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ column: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ },
|
|
|
+ defaultValue: {
|
|
|
+ default: () => ''
|
|
|
+ },
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => false
|
|
|
+ },
|
|
|
+ maskCloseAble: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible (val) {
|
|
|
+ this.changeActive()
|
|
|
+ },
|
|
|
+ defaultValue() {
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init () {
|
|
|
+ var provinceList = []
|
|
|
+ addressList.filter(item => {
|
|
|
+ provinceList.push({
|
|
|
+ code: item.code,
|
|
|
+ name: item.name
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.provinceList = [...provinceList]
|
|
|
+ if (!this.defaultValue) {
|
|
|
+ this.cityList = addressList[0].children
|
|
|
+ this.areaList = addressList[0].children[0].children
|
|
|
+ } else {
|
|
|
+ var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
|
|
|
+ if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
|
|
|
+ console.log(this.defaultValue)
|
|
|
+ var province = this.defaultValue[0]
|
|
|
+ var city = this.defaultValue[1]
|
|
|
+ this.provinceIndex = 0
|
|
|
+ this.cityIndex = 0
|
|
|
+ this.areaIndex = 0
|
|
|
+ this.provinceIndex = addressList.findIndex(obj => {
|
|
|
+ return obj.name == province
|
|
|
+ })
|
|
|
+ this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
|
|
|
+ this.cityList = addressList[this.provinceIndex].children
|
|
|
+ this.cityIndex = this.cityList.findIndex(obj => {
|
|
|
+ return obj.name == city
|
|
|
+ })
|
|
|
+ this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
|
|
|
+ this.areaList = this.cityList[this.cityIndex].children
|
|
|
+ if (this.defaultValue.length > 2) {
|
|
|
+ this.areaIndex = this.areaList.findIndex(obj => {
|
|
|
+ return obj.name == this.defaultValue[2]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.column == 3) {
|
|
|
+ this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
|
|
|
+ } else if (this.column == 2) {
|
|
|
+ this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (/^\d{6}$/.test(this.defaultValue)) {
|
|
|
+ var province = this.defaultValue.substr(0, 2)
|
|
|
+ var city = this.defaultValue.substr(0, 4)
|
|
|
+ this.provinceIndex = 0
|
|
|
+ this.cityIndex = 0
|
|
|
+ this.areaIndex = 0
|
|
|
+ this.provinceIndex = addressList.findIndex(obj => {
|
|
|
+ return obj.code == province
|
|
|
+ })
|
|
|
+ this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
|
|
|
+ this.cityList = addressList[this.provinceIndex].children
|
|
|
+ this.cityIndex = this.cityList.findIndex(obj => {
|
|
|
+ return obj.code == city
|
|
|
+ })
|
|
|
+ this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
|
|
|
+ this.areaList = this.cityList[this.cityIndex].children
|
|
|
+ this.areaIndex = this.areaList.findIndex(obj => {
|
|
|
+ return obj.code == this.defaultValue
|
|
|
+ })
|
|
|
+ this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.column == 3) {
|
|
|
+ this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
|
|
|
+ } else if (this.column == 2) {
|
|
|
+ this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '地区编码格式不正确',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ console.log('地区编码格式不正确')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.changeActive()
|
|
|
+ },
|
|
|
+ confirm () {
|
|
|
+ if (this.column == 3) {
|
|
|
+ this.$emit('confirm', {
|
|
|
+ code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
|
|
|
+ name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name + addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
|
|
|
+ provinceName: addressList[this.provinceIndex].name,
|
|
|
+ cityName: addressList[this.provinceIndex].children[this.cityIndex].name,
|
|
|
+ areaName: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
|
|
|
+ })
|
|
|
+ } else if (this.column == 2) {
|
|
|
+ this.$emit('confirm', {
|
|
|
+ code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
|
|
|
+ name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name,
|
|
|
+ provinceName: addressList[this.provinceIndex].name,
|
|
|
+ cityName: addressList[this.provinceIndex].children[this.cityIndex].name
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '目前column只能传2和3',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel () {
|
|
|
+ this.$emit('cancel')
|
|
|
+ },
|
|
|
+ // 动画
|
|
|
+ changeActive () {
|
|
|
+ var active = '-415px'
|
|
|
+ if (this.visible) {
|
|
|
+ active = 0
|
|
|
+ }
|
|
|
+ var animation = uni.createAnimation({
|
|
|
+ duration: 400,
|
|
|
+ timingFunction: 'linear'
|
|
|
+ })
|
|
|
+ animation.bottom(active).step()
|
|
|
+ this.animationData = animation.export()
|
|
|
+ },
|
|
|
+ bindChange(e) {
|
|
|
+ e.detail.value[0] = e.detail.value[0] || 0
|
|
|
+ e.detail.value[1] = e.detail.value[1] || 0
|
|
|
+ e.detail.value[2] = e.detail.value[2] || 0
|
|
|
+ if (e.detail.value[0] != this.provinceIndex) {
|
|
|
+ // console.log('监听第一列')
|
|
|
+ this.provinceChange(e.detail.value[0])
|
|
|
+ } else if (e.detail.value[1] != this.cityIndex) {
|
|
|
+ // console.log('监听第二列')
|
|
|
+ this.cityChange(e.detail.value[1])
|
|
|
+ } else if (e.detail.value[2] != this.areaIndex) {
|
|
|
+ // console.log('监听第三列')
|
|
|
+ this.areaChange(e.detail.value[2])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听第一列变化
|
|
|
+ provinceChange (e) {
|
|
|
+ this.provinceIndex = e
|
|
|
+ this.cityIndex = 0
|
|
|
+ this.areaIndex = 0
|
|
|
+ this.value = [...[e, 0, 0]]
|
|
|
+ this.cityList = addressList[e].children
|
|
|
+ this.areaList = addressList[e].children[0].children
|
|
|
+ },
|
|
|
+ // 监听第二列变化
|
|
|
+ cityChange (e) {
|
|
|
+ this.cityIndex = e
|
|
|
+ this.areaIndex = 0
|
|
|
+ // console.log(this.cityIndex, this.areaIndex)
|
|
|
+ this.value = [...[this.provinceIndex, e, 0]]
|
|
|
+ this.cityList = addressList[this.provinceIndex].children
|
|
|
+ this.areaList = addressList[this.provinceIndex].children[e].children
|
|
|
+ },
|
|
|
+ // 监听第三列变化
|
|
|
+ areaChange (e) {
|
|
|
+ this.areaIndex = e
|
|
|
+ },
|
|
|
+ // 点击模态框
|
|
|
+ close () {
|
|
|
+ if (this.maskCloseAble) {
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pupop {
|
|
|
+ .popup-box {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: -315px;
|
|
|
+ z-index: 99999;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ .pupop-btn{
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30upx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pupop-model {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+ }
|
|
|
+ .pupop-models{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .picker-view {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 225px;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ height: 50px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
