w-front-end / select_good · Files

<template>
  <div class="address-list-page">

    <!-- 导航栏 -->
    <div class="nav">

    <!-- navBar -->
      <nav-bar
               @back="back"
               :navs="navs">
      </nav-bar>
    </div>

    <!-- <div class="pl"
         :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
         :style="{'paddingTop': top.value + 'px'}"></div> -->

    <!-- 收货地址列表 -->
    <address-list @doSelect="doSelect"
                  @doEdit="doEdit"
                  @doDelete="doDelete"
                  @setDefaultContact="setDefaultContact"
                  :addresss="addresss">
    </address-list>

    <!-- 添加地址按钮 -->
    <address-create-bar v-if="!query.mode || query.mode.toLowerCase() != 'select'"
                        @doCreate="doCreate"></address-create-bar>
  </div>
</template>

<script>

// 引入组件
import navBar from '@/components/navBar/navBar';
import addressList from "@/components/addressList/addressList.vue";
import addressCreateBar from "@/components/addressCreateBar/addressCreateBar.vue";
import Vue from "vue";
import { Toast, Indicator } from "mint-ui";
import { Dialog } from 'vant';
export default {
  name: 'addressListPage',
  data () {
    return {
      title: "",
      query: {},
      navs: null,							// navBar配置参数
      showToasting: false,				// 显示操作结果
      addresss: null,						// 地址列表数据
      creates: {							// 创建按钮对象
        create: {
          func: this.doCreate
        }
      }
    }
  },
  components: {
    navBar,
    addressList,
    addressCreateBar
  },
  created () {
    // 设置标题
    this.$set(this, 'title', '收货地址');

    // 设置地址栏请求参数
    this.$set(this, "query", this.$route.query);

    this.$set(this, "navs", {
      back: {
        img: "/static/img/icon_back.png"
      },
      title: this.title
    });

    // #ifdef H5 || APP-PLUS

    // 更新页面title
    this.$emit("updateHead");

    // #endif

    // 获取地址列表
    this.getMyAddress();

    // 获取地址操作结果，如果有，输出结果
    const value = window.localStorage.getItem('addressOption');

    if (value) {

      // 输出地址操作结果
      Toast(value);

      // showToasting
      this.$set(this, 'showToasting', true);

      // 删除地址操作结果
      window.localStorage.removeItem('addressOption');
    }
  },
  mounted () {


  },
  // #endif
  methods: {

    /**
     * 获取地址列表
     */
    getMyAddress () {

      // 必要参数
      if (this.getStore("uid")) {

        // 显示loading
       Indicator.open('加载中...');

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().index) + "/myAddress", {
          uid: this.getStore("uid"),
        }, this.getMyAddressCallback, {
            method: "POST"
          });
      }
    },

    /**
     * 获取地址列表回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} res [扩展参数]
     */
    getMyAddressCallback (res, ext) {
      // 返回处理
      if (res.code == 200) {
        Indicator.close();
        // 解构数据
        let datas = res.data;
        // 添加加星电话号码
        for (let i = 0; i < datas.length; i++) {
          this.$set(datas[i], "phoneS", this.formatPhoneNumber(datas[i].phone, 3, 4));
        }

        // 设置地址列表对象
        this.addresss = {};
        this.addresss.list = datas;
        this.addresss.options = {
          select: {},
          edit: {},
          delete: {},
          defaultContact: {}
        };
        console.log(this.addresss);
        /**
         * 列表功能模式配置
         * mode:
         * select: 仅可选择地址，不能做其它操作
         * select_edit: 选择地址，可编辑操作
         */

        // 根据参数判断是否要隐藏部分功能
        if (this.query.mode) {

          // 判断来源页面
          switch (this.query.mode) {
            case 'select':

              // 设置地址簿显示隐藏功能按钮
              this.$set(this.addresss.options.defaultContact, 'hide', true);		// 隐藏“设为默认”按钮
              this.$set(this.addresss.options.delete, 'hide', true);				// 隐藏“删除”按钮
              this.$set(this.addresss.options.edit, 'hide', true);				// 隐藏“编辑”按钮
              break;
          }
        }

        // 没有提示内容
        // if (!Toasting) {

        //   // 隐藏loading
        //   uni.hideLoading();
        // } else {

        //   // showToasting
        //   this.$set(this, 'showToasting', false);
        // }
      } else if (res.code == 400) {

        // 清空现有地址列表数据
        this.$set(this, 'addresss', null);

        // 获取地址列表出错
        Toast(res.message);
      } else {

        // 获取地址列表出错
        Toast("获取地址列表出错");
      }
    },

    /**
     * 我的首选地址
     */
    getMyFirstAddress () {

      // 校验必要参数
      if (this.getStore("uid")) {

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().index) + "/myFirstAddress", {
          uid: this.getStore("uid")
        }, this.getMyFirstAddressCallback, {
            method: "POST"
          })
      }
    },

    /**
     * 我的首选地址回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    getMyFirstAddressCallback (res, ext) {

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

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


        if (datas.uid === this.getStore("uid")) {

          // 同步当前选中的地址信息
          window.localStorage.setItem('currentAddress', JSON.stringify(datas));
        }
      }
    },

    /**
     * 跳转添加收货地址页面
     */
    doCreate () {
      // 跳转添加收货地址页面
      this.$router.push({
        path: "addressCreate"
      })
    },

    /**
     * 选择地址
     * @param {Object} item [地址对象]
     */
    doSelect (item) {
      // 判断来源页面
      switch (this.query.mode) {
        case 'select':			// 选择状态，只可选择地址，不能编辑
        case "select_edit":		// 选择状态，可选择地址，可以编辑

          // 验证工具类是否存在
          // 设置选择的地址到Storage（当前选择的地址）
          window.localStorage.setItem('currentAddress', JSON.stringify(item));

          // 后退
          this.back();
          break;
        default:

          // 编辑地址
          this.doEdit(item);
      }
    },

    /**
     * 编辑地址
     * @param {Object} item [地址对象]
     */
    doEdit (item) {
      // 跳转编辑收货地址页面
      this.$router.push({
        path: "addressEdit",
        query: {
          id: item.id
        }
      })
    },

    /**
     * 删除地址操作
     * @param {Object} item [地址信息对象]
     */
    doDelete (item) {
      Dialog.confirm({
        title: '标题',
        message: '确定删除收件人？',
      }).then((res) => {
        // 用户点击确定
        if (res) {

          // 执行删除操作，校验必选参数
          if (item.uid && item.id) {

            // 显示loading
           Indicator.open('加载中...');
            // 请求接口
            this.http("/Api/" + (this.getApiVersion().index) + "/delAddress", {
              uid: item.uid,
              id: item.id
            }, this.doDeleteCallback, {
                method: "POST",
                uid: item.uid,
                id: item.id
              })
          } else {

            // 参数错误
            Toast("删除收件人参数错误");
          }
        }
      });
    },

    /**
     * 删除地址操作回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} res [扩展参数]
     */
    doDeleteCallback (res, ext) {

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

        /* 判断如果被删除地址是当前设置地址处理 开始 */

        let tempCurrentAddress = JSON.parse(window.localStorage.getItem('currentAddress'));

        if (tempCurrentAddress && tempCurrentAddress.id === ext.id) {

          // 删除刷新Storage
          window.localStorage.removeItem('currentAddress');

          // 设置首选地址
          this.getMyFirstAddress();
        }

        /* 判断如果被删除地址是当前设置地址处理 结束 */

        // 获取地址列表
        this.getMyAddress();

        // 删除成功提醒
        Toast('删除收货地址成功');

        // showToasting
        this.$set(this, 'showToasting', true);
      } else if (res.statusCode === 200 && res.data.code == 400) {

        // 删除收件人失败
        Toast(res.message);
      } else {

        // 删除收件人失败
        Toast("删除收件人失败");
      }
    },

    /**
     * 设置默认联系人（实时调用）
     * @param {Object} item [联系人对象]
     */
    setDefaultContact (item) {

      // 判断是否可设置为默认联系人，如果已经是默认联系人，不能取消
      if (item.state == 2) {

        // 已是默认联系人
        Toast("已是默认联系人，无需设置。");
      } else {

        // 显示loading
       Indicator.open('加载中...');

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().index) + "/editAddress", {
          uid: item.uid,
          id: item.id,
          state: "2"
        }, this.setDefaultContactCallback, {
            method: "POST",
            item
          })
      }
    },

    /**
     * 编辑地址操作回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} res [扩展参数]
     */
    setDefaultContactCallback (res, ext) {

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

        // 获取地址列表
        this.getMyAddress();

        // 输出地址操作结果
        Toast('设置默认地址成功');

        // showToasting
        this.$set(this, 'showToasting', true);
      } else if (res.statusCode === 200 && res.data.code == 400) {

        // 设置默认联系人出错
        Toast(res.message);
      } else {

        // 设置默认联系人出错
        Toast("设置默认联系人出错");
      }
    },

    /**
     * 返回
     */
    back () {
      // 后退
      window.history.go(-1);
    },
    /**
      * 设置start -> end位置内容为 “ * ” 号代替
      * @param {Object} value
      * @param {Object} start
      * @param {Object} end
      */
    formatPhoneNumber (value, start, end) {

      // 返回值
      let result = Array();

      // 判断号码长度，确定处理方式
      if (value.length <= start + end) {
        return value;
      }

      for (let i = 0; i < value.length; i++) {
        if (i >= start && i < value.length - end) {
          result.push("*");
        } else {
          result.push(value[i].toString());
        }
      }

      return result.join("");
    },
  },
  //对象内部的属性监听，也叫深度监听
  head: {
    title () {
      return {
        inner: this.title
      }
    }
  },
  watch: {
    // 设置页面标题
    title (newVal) {
      if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
        this.$iFrame.insertIFrame(newVal);
      } else {
        this.$emit("updateHead");
      }
    }
  },
}
</script>

<style rel="stylesheet/less" lang="less">
@import './addressList';
.van-dialog{
width: 640px;
font-size: 32px;
}
.van-dialog__header {
    padding-top: 52px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
}
.van-dialog__message {
    max-height: 72px;
    padding: 26px 24px;
    overflow-y: auto;
    font-size: 28px;
    line-height: 40px;
}
.van-dialog{
    font-size: 32px;
}
.van-button{
    font-size: 32px;
    padding: 40px 0;
}
</style>