nherp-shop/pages/commponent/public/setCity/nyz_area_picker.vue

<template>
<view>
<!--自定义地址选择器-->
<view class="nyz_area_mask" v-if="show == true"></view>
<view :class="'nyz_area_view ' + (show ? 'show':'hide')">
  <view class="nyz_area_view_btns">
    <text class="nyz_area_view_btn_cancle" @tap="handleNYZAreaCancle">取消</text>
    <text class="nyz_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province" :data-city="city" :data-area="area">确定</text>
  </view>
  <picker-view class="nyz_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange" :value="value">
    <picker-view-column>
      <view v-for="(item, index) in provinces" :key="index" class="nyz_area_colum_view">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in citys" :key="index" class="nyz_area_colum_view">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in areas" :key="index" class="nyz_area_colum_view">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>
</view>
</template>

<script>
var areaTool = require("@/utils/area.js");
var index = [0, 0, 0];
var provinces = areaTool.getProvinces();
var citys = areaTool.getCitys(index[0]);
var areas = areaTool.getAreas(index[0], index[1]);

export default {
  data() {
    return {
      provinces: provinces,
      citys: areaTool.getCitys(index[0]),
      areas: areaTool.getAreas(index[0], index[1]),
      value: [0, 0, 0],
      province: '北京市',
      city: '北京市',
      area: '东城区'
    };
  },

  components: {},
  props: {
    show: {
      //控制area_select显示隐藏
      type: Boolean,
      default: false
    },
    maskShow: {
      //是否显示蒙层
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleNYZAreaChange: function (e) {
      var that = this;
      console.log("e:" + JSON.stringify(e));
      var value = e.detail.value;
      /**
       * 滚动的是省
       * 省改变 市、区都不变
       */

      if (index[0] != value[0]) {
        index = [value[0], 0, 0];
        let selectCitys = areaTool.getCitys(index[0]);
        let selectAreas = areaTool.getAreas(index[0], 0);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], 0, 0],
          province: provinces[index[0]],
          city: selectCitys[0],
          area: selectAreas[0]
        });
      } else if (index[1] != value[1]) {
        /**
         * 市改变了 省不变 区变
         */
        index = [value[0], value[1], 0];
        let selectCitys = areaTool.getCitys(index[0]);
        let selectAreas = areaTool.getAreas(index[0], value[1]);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], index[1], 0],
          province: provinces[index[0]],
          city: selectCitys[index[1]],
          area: selectAreas[0]
        });
      } else if (index[2] != value[2]) {
        /**
         * 区改变了
         */
        index = [value[0], value[1], value[2]];
        let selectCitys = areaTool.getCitys(index[0]);
        let selectAreas = areaTool.getAreas(index[0], value[1]);
        that.setData({
          citys: selectCitys,
          areas: selectAreas,
          value: [index[0], index[1], index[2]],
          province: provinces[index[0]],
          city: selectCitys[index[1]],
          area: selectAreas[index[2]]
        });
      }
    },

    /**
     * 确定按钮的点击事件
     */
    handleNYZAreaSelect: function (e) {
      var myEventDetail = e; // detail对象，提供给事件监听函数
      var myEventOption = {}; // 触发事件的选项
      this.$emit('sureSelectArea', {
        detail: myEventDetail
      }, myEventOption);
    },

    /**
     * 取消按钮的点击事件
     */
    handleNYZAreaCancle: function (e) {
      var that = this;
      console.log("e:" + JSON.stringify(e));
      this.$emit('hideShow', {
        detail: false
      });
    }
  }
};
</script>
<style scoped lang="scss">
.nyz_area_view{
  width: 100%;
  position: fixed;
  bottom:-1000px;
  left: 0px;
  background-color: #fff;
  z-index: 21;
  transition: all 0.3s;
}

.nyz_area_pick_view{
  height: 200px;
  width: 100%;
  
}
.nyz_area_colum_view{
  line-height: 35px;
  text-align: center;
  font-size: 28upx;
}

.hide{
  bottom: -1000upx;
  transition: all 0.3s;
}

.show{
  bottom: 0upx;
  transition: all 0.3s;
}

.nyz_area_view_btns{
  background-color: #fff;
  border-bottom: 1px solid #eeeeee;
  font-size: 30upx;
  padding: 18upx 0upx;
}

.nyz_area_view_btns>text{
  display: inline-block;
  word-spacing: 4upx;
  letter-spacing: 4upx;
}

.nyz_area_view_btn_cancle{
  color: #939393;
  padding-right: 20upx;
  padding-left: 25upx;
}

.nyz_area_view_btn_sure{
  float: right;
  padding-left: 20upx;
  padding-right: 25upx;
}

.nyz_area_mask{
  width: 100%;
  height: 100vh;
  background-color: rgba(8, 8, 8, 0.8);
  position: absolute;
  top: 0upx;
  left: 0upx;
  z-index: 20;
}
</style>