w-front-end / select_good · Files

<template>
  <div class="address-select-layer"
       v-if="isShow && cityList.list.length">
    <div class="layer-box"
         @click="hideLayer">
      <div class="box"
           @click="stopPropagation">
        <div class="bar-box">
          <div class="bar-box-center">
            <div class="now-city">
              <div class="now-item"
                   :class="{'selected': nowCity.province.id != 0, 'active': cityList.activityLevel == 1}"
                   @click="changeCity('1')">{{nowCity.province.nowName || nowCity.province.name}}</div>
              <div class="now-item"
                   :class="{'selected': nowCity.city.id != 0, 'active': cityList.activityLevel == 2}"
                   @click="changeCity('2')">{{nowCity.city.nowName || nowCity.city.name}}</div>
              <div class="now-item"
                   :class="{'selected': nowCity.area.id != 0, 'active': cityList.activityLevel == 3}"
                   @click="changeCity('3')">{{nowCity.area.nowName || nowCity.area.name}}</div>
            </div>
            <div class="buttons-box">
              <div class="func-button"
                   :class="{'active': cityList.activityLevel == 4}"
                   :disabled="nowCity.province.id == 0 || nowCity.city.id == 0 || nowCity.area.id == 0"
                   @click="doSubmit">确定</div>
            </div>
          </div>
        </div>
        <scroll-div class="select-view-box"
                    scroll-y
                    scroll-with-animation>
          <div class="item"
               v-if="cityList && cityList.list && cityList.list.length"
               v-for="(item, index) in cityList.list"
               :key="index"
               @click="selectCity(item)">
            {{item.name}}
          </div>
        </scroll-div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  data: function () {
    return {
      isShow: false,
      stop: false,
      cityList: {
        activityLevel: "0",
        list: []
      },
      nowCity: {
        province: {
          id: "0",
          pid: "0",
          level: "1",
          name: "省份",
          nowName: ""
        },
        city: {
          id: "0",
          pid: "0",
          level: "2",
          name: "城市",
          nowName: ""
        },
        area: {
          id: "0",
          pid: "0",
          level: "3",
          name: "区县",
          nowName: ""
        }
      }
    }
  },
  props: ["addressInfo"],
  methods: {

    /**
     * 显示省市县层，初始化信息等
     */
    showSelectLayer () {

      // 获取目前设置的省市县名称
      this.getCityName();

      // 设置初始化列表参数
      let id = this.nowCity.area.pid;
      let level = this.nowCity.area.id && this.nowCity.area.id != "0" ? this.nowCity.area.level : "0";

      // 获取地址列表项目
      this.getCityList(id, level);
    },

    /**
     * 隐藏省市县选择层
     */
    hideLayer () {

      // 判断是否阻止事件冒泡
      if (!this.stop) {
        this.isShow = false;
      } else {
        this.stop = false;
      }
    },

    /**
     * 阻止事件冒泡
     */
    stopPropagation () {
      this.stop = true;
    },

    /**
     * 获取省市县列表
     * @param {number} id [列表id]
     * @param {number} level [活动项目级别，1 省 2 室 3 区县]
     */
    getCityList (id = 0, level = 0) {

      /* 获取省列表 开始 */

      // 请求接口（获取省列表）
      this.http("/Api/" + (this.getApiVersion().index) + "/getCityList", {
        id: id
      }, this.getCityListCallback, {
          method: "POST",
          level
        })

      /* 获取省列表 结束 */
    },

    /**
     * 初始化省市县列表回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    getCityListCallback (res, ext) {

      // 返回处理
      if (res.code == 200) {

        // 解构数据
        let datas = res.data;

        // 设置初始化省列表
        this.$set(this.cityList, "activityLevel", parseInt(ext.level) + 1);
        this.$set(this.cityList, "list", datas.list);

        // 显示选择省市县浮层
        this.isShow = true;

        // 隐藏loading
        Toast.clear();
        // uni.hideLoading();
      } else if (res.code == 400) {

        // 获取列表失败
        Toast(res.message);
      } else {

        // 获取列表失败
        Toast("获取列表失败");
      }
    },

    /**
     * 获取目前设置的省市县名称
     */
    getCityName () {

      /* 获取目前设置的省市县名称信息 开始 */

      // 判断是否设置了省市县地址
      if (this.addressInfo.province_id && this.addressInfo.city_id && this.addressInfo.area_id) {

        // 拆分省市县名称
        let cityNameArr = this.addressInfo.city_name.split(" ");

        // 判断数组长度，赋值给相关变量
        if (cityNameArr.length === 3) {

          // 赋值
          this.$set(this.nowCity.province, "id", this.addressInfo.province_id);
          this.$set(this.nowCity.province, "pid", "0");
          this.$set(this.nowCity.province, "nowName", cityNameArr[0]);
          this.$set(this.nowCity.city, "id", this.addressInfo.city_id);
          this.$set(this.nowCity.city, "pid", this.addressInfo.province_id);
          this.$set(this.nowCity.city, "nowName", cityNameArr[1]);
          this.$set(this.nowCity.area, "id", this.addressInfo.area_id);
          this.$set(this.nowCity.area, "pid", this.addressInfo.city_id);
          this.$set(this.nowCity.area, "nowName", cityNameArr[2]);
        }
      }
      /* 获取目前设置的省市县名称信息 结束 */

    },

    /**
     * 设置用户修改后的省市县数据
     */
    setCityName () {

      /* 获取目前设置的省市县名称信息 开始 */

      // 判断是否设置了省市县地址
      if (this.nowCity.province.id && this.nowCity.city.id && this.nowCity.area.id) {

        // 拆分省市县名称
        let cityNameString = this.nowCity.province.nowName + " " + this.nowCity.city.nowName + " " + this.nowCity.area.nowName;

        // 判断数组长度，赋值给相关变量
        if (cityNameString) {

          // 赋值
          this.$set(this.addressInfo, "province_id", this.nowCity.province.id);
          this.$set(this.addressInfo, "city_id", this.nowCity.city.id);
          this.$set(this.addressInfo, "area_id", this.nowCity.area.id);
          this.$set(this.addressInfo, "city_name", cityNameString);
        }
      }
      /* 获取目前设置的省市县名称信息 结束 */

    },

    /**
     * 设置nowCity的值，该值在确定后会被赋值给addressInfo的相关属性
     * @param {object} nowCityItem [nowCity相关对象值]
     */
    setNowCity (nowCityItem) {

      // 判断项目，设置nowCity值
      switch (nowCityItem.level) {
        case "1":

          // 设置新数据
          this.$set(this.nowCity.province, "id", nowCityItem.id);
          this.$set(this.nowCity.province, "pid", nowCityItem.pid);
          this.$set(this.nowCity.province, "nowName", nowCityItem.name);

          // 清除下级数据
          this.$set(this.nowCity.city, "id", "0");
          this.$set(this.nowCity.city, "pid", "0");
          this.$set(this.nowCity.city, "nowName", "");

          this.$set(this.nowCity.area, "id", "0");
          this.$set(this.nowCity.area, "pid", "0");
          this.$set(this.nowCity.area, "nowName", "");
          break;
        case "2":

          // 设置新数据
          this.$set(this.nowCity.city, "id", nowCityItem.id);
          this.$set(this.nowCity.city, "pid", nowCityItem.pid);
          this.$set(this.nowCity.city, "nowName", nowCityItem.name);

          // 清除下级数据
          this.$set(this.nowCity.area, "id", "0");
          this.$set(this.nowCity.area, "pid", "0");
          this.$set(this.nowCity.area, "nowName", "");
          break;
        case "3":
          this.$set(this.nowCity.area, "id", nowCityItem.id);
          this.$set(this.nowCity.area, "pid", nowCityItem.pid);
          this.$set(this.nowCity.area, "nowName", nowCityItem.name);
          break;
      }
    },

    /**
     * 选择地址列表项目
     * @param {object} item [地址项对象]
     */
    selectCity (item) {

      // 设置nowCity值
      this.setNowCity(item);

      if (item.level < 3) {

        // 显示loading
        Toast.loading({
          duration: 0, // 持续展示 toast
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
        });
        // uni.showLoading({
        //   title: "",
        //   mask: true
        // })

        // 获取省市县列表
        this.getCityList(item.id, item.level);
      } else {

        // 设置activityLevel=4，可以确定了
        this.$set(this.cityList, "activityLevel", parseInt(item.level) + 1);
      }
    },

    /**
     * 选择地址列表项目
     * @param {object} nowCity [需要切换的数据对象]
     */
    changeCity (level) {

      // 如果是空的，点击无效
      switch (level) {
        case "1":
          if (this.nowCity.province.id == "0") {
            return false;
          }
          break;
        case "2":
          if (this.nowCity.city.id == "0") {
            return false;
          }
          break;
        case "3":
          if (this.nowCity.area.id == "0") {
            return false;
          }
          break;
      }

      // 需要读取的列表id
      let id = "0";

      // 根据级别，获取参数，做相应设置
      switch (level) {
        case "1":
          id = this.nowCity.province.pid;
          break;
        case "2":
          id = this.nowCity.city.pid;
          break;
        case "3":
          id = this.nowCity.area.pid;
          break;
      }

      // 显示loading
      Toast.loading({
        duration: 0, // 持续展示 toast
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      });
      // uni.showLoading({
      //   title: "",
      //   mask: true
      // })

      // 获取省市县列表
      this.getCityList(id, parseInt(level) - 1);
    },

    /**
     * 点击确定，修改地址的相关地址设置参数
     */
    doSubmit () {

      // 设置用户修改后的省市县数据
      this.setCityName();

      // 隐藏选择省市县浮层
      this.isShow = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less">
@import './addressSelectLayer';
</style>