hlm_pl_mall_h5/pages/RegionPicker.vue

<template>
	<uni-popup background-color="#fff" ref="currentValue" type="bottom">
		<view class="picker">
			<view class="div toolbar">
				<text class="button toolbar-item cancel-item" @click="cancel">取消</text>
				<view class="div picker-header">请选择地区</view>
				<text class="button toolbar-item confirm-item" @click="confirm">确定</text>
			</view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onValuesChange" :value="areaPicker">
        <picker-view-column v-for="(item,index) in buildItems" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.area_name}}</text></view>
        </picker-view-column>
      </picker-view>
		</view>
	</uni-popup>
</template>

<script>
import { getAreaTree } from '../api/area'
export default {
  name: 'RegionPicker',
  props: {
    modal: {
      default: true
    },
    modalFade: {
      default: false
    },
    lockScroll: {
      default: false
    },
    closeOnClickModal: {
      default: true
    }
  },
  data () {
    return {
      areaPicker: [],
      items: false
    }
  },
  created: function () {
    getAreaTree().then(res => {
      this.items = res.result.area_list
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
  },
  computed: {
    buildItems: function () {
      if (!this.items) {
        return []
      }
      let items = new Array()

      this.getDefaultItems(this.items, items)
      return items
    }
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    getDefaultItems(_item, defaultItems) {
        if (_item[0].child && _item[0].child.length > 0) {
          let index = 1
          if (defaultItems && defaultItems.length == 0) {
            defaultItems.push({
              flex: 1,
              values: _item,
              textAlign: 'center'

            })
            this.areaPicker.push(0)
            this.getDefaultItems(_item, defaultItems)
          } else if (defaultItems && defaultItems.length > 0) {
            defaultItems.push({
              flex: 1,
              values: _item[0].child,
              textAlign: 'center'

            })
            this.areaPicker.push(0)
            this.getDefaultItems(_item[0].child, defaultItems)
          }
        }
      },

      onValuesChange(e) {
        let value=e.detail.value
        let areaPicker=this.areaPicker
        for(var i in value){
          areaPicker[i]=value[i]
          i=parseInt(i)
          if(i<(value.length-1)){
            if(!this.buildItems[i]['values'].length || !this.buildItems[i]['values'][value[i]]['child'] || !this.buildItems[i]['values'][value[i]]['child'].length){
              this.buildItems[i+1]['values']=[]
              areaPicker[i+1]=0
            }else if(!this.buildItems[i+1]['values'].length || this.buildItems[i]['values'][value[i]]['child'][0]['area_id']!=this.buildItems[i+1]['values'][0]['area_id']){
              this.buildItems[i+1]['values']=this.buildItems[i]['values'][value[i]]['child']
              areaPicker[i+1]=0
            }
          }
        }
        this.areaPicker=areaPicker
        this.$forceUpdate()
      },
      show(){
        this.showPopup('currentValue')
      },
    cancel () {
      this.hidePopup('currentValue')
    },
    confirm() {
        this.cancel()
        let values = []
        for(var i in this.areaPicker){
          values[i]=this.buildItems[i]['values'][this.areaPicker[i]]
          if(!values[i]){
            values[i]={
              area_id:0,
              area_name:''
            }
          }
        }
        this.$emit('onConfirm', values)
      }
  }
}
</script>

<style lang="scss" scoped>
.picker {
	background-color: #ffffff;
}
.toolbar {
        height: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #f0f2f5;
        .toolbar-item {
            font-size:$fontSize;
            border: none;
            border-radius: 0;
            background-color: #f0f2f5;
        }
        .cancel-item {
            margin-left: 0.5rem;
            color: #4e545d;
        }
        .confirm-item {
            margin-right: 0.5rem;
            color: red;
        }
        .picker-header {
            color: #4e545d;
            line-height: 2rem;
            font-size:$h2;
        }
    }
.popup-item-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
	.popup-item {
		font-size: 30rpx;
    line-height:80rpx;
		text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}

	.popup-content {
		padding: 0 40rpx;
		height: 300rpx;
	}
</style>