w-front-end / select_good · Files

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

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

      <!-- navBar -->
      <nav-bar @back="back"
               :navs="navs">
      </nav-bar>
    </div>
    <div class="pl"></div>
    <address-select-layer ref="selectLayer"
                          :addressInfo="addressInfo">
    </address-select-layer>

    <div class="box">
      <form class="address-create-form">
        <label class="label">
          <div class="text">收件人：</div>
          <input type="text"
                 placeholder-style="color: #C8C8C8;"
                 placeholder="请输入收货人姓名(不超过20个字)"
                 maxlength="20"
                 v-model="addressInfo.contactName"
                 class="address-item"
                 @blur="onBlur('contactName')"
                 v-focus="contactNameFocus" />
        </label>
        <label class="label">
          <div class="text">手机号码：</div>
          <input type="number"
                 placeholder-style="color: #C8C8C8;"
                 placeholder="请输入手机号"
                 v-model="addressInfo.contactPhone"
                 class="address-item"
                 @blur="onBlur('contactPhone')"
                 v-focus="contactPhoneFocus" />
        </label>
        <label class="label"
               @click="showSelectLayer">
          <div class="text">所在地区：</div>
          <div class="address-item"
               v-if="addressInfo.city_name">{{addressInfo.city_name}}</div>
          <div class="address-item address-pl-text"
               v-else>请选择省份、城市、区县</div>
        </label>
        <label class="label">
          <div class="text">详细地址：</div>
          <input type="text"
                 placeholder-style="color: #C8C8C8;"
                 placeholder="填写详细地址"
                 v-model="addressInfo.address"
                 class="address-item"
                 @blur="onBlur('address')"
                 v-focus="addressFocus" />
        </label>
      </form>
    </div>

    <!-- 提交新增地址按钮 -->
    <div class="address-create-btn">
      <div class="placeholder-box"></div>
      <div class="box">
        <div class="buttons">
          <div class="btn btn-bright"
               @click="checkAddressCreate(addressInfo)"
               :disabled="isDisabled">
            <div class="text">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

// 引入组件
import navBar from '@/components/navBar/navBar';
import addressSelectLayer from "@/components/addressSelectLayer/addressSelectLayer.vue";
import Vue from "vue";
import { Toast, Indicator } from "mint-ui";
export default {
  name: 'addressCreatePage',
  data () {
    return {
      title: "",
      query: {},
      isDisabled: false,			// 防止重复点击
      navs: null,					// navBar配置参数
      contactNameFocus: false,	// 姓名获得焦点
      contactPhoneFocus: false,	// 手机号码获得焦点
      cityNameFocus: false,		// 城市获得焦点
      addressFocus: false,		// 详细地址获得焦点
      addressInfo: {				// 地址信息对象
        uid: null,
        contactName: "",
        contactPhone: "",
        address: "",
        province_id: "0",
        city_id: "0",
        area_id: "0",
        city_name: ""
      }
    }
  },
  components: {
    navBar,
    addressSelectLayer
  },
  created () {

    // 设置标题
    this.$set(this, 'title', '新增收货地址');

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

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

    // 设置uid属性
    this.$set(this.addressInfo, 'uid', this.getStore("uid"));

    // #ifdef H5 || APP-PLUS

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

    // #endif
  },
  mounted () {
  },

  methods: {

    /**
     * 显示 选择省市县层
     */
    showSelectLayer () {

      // 调用组件内函数，处理层的显示
      this.$refs.selectLayer.showSelectLayer();
    },

    /**
     * 检查收货地址
     * @param {Object} addressInfo [地址信息对象]
     */
    checkAddressCreate (addressInfo) {

      /* 检查地址参数 开始 */

      if (!addressInfo.contactName.trim()) {
        this.$set(addressInfo, 'contactName', '');
        Toast('请输入收货人姓名');
        return false;
      }

      if (!addressInfo.contactPhone.trim()) {
        Toast('请输入手机号');
        return false;
      }

      if (addressInfo.contactPhone.trim()) {

        // 校验手机号格式
        let valid_rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;	// 手机号码校验规则

        if (!valid_rule.test(addressInfo.contactPhone)) {
          Toast('手机号格式错误');
          return false;
        }
      }

      if (!addressInfo.city_name || addressInfo.province_id == "0" || addressInfo.city_id == "0" || addressInfo.area_id == "0") {
        Toast('请选择所在地区');
        return false;
      }

      if (!addressInfo.address.trim()) {
        Toast('请填写详细地址');
        return false;
      }

      /* 检查地址参数 结束 */

      // 新增地址操作
      this.doAddressCreate(addressInfo);
    },

    /**
     * 新增地址操作
     * @param {Object} addressInfo [地址信息对象]
     */
    doAddressCreate (addressInfo) {
      console.log(addressInfo);
      // 校验必选参数
      if (addressInfo.uid && addressInfo.contactName && addressInfo.contactPhone && addressInfo.address && addressInfo.province_id != "0" && addressInfo.city_id != "0" && addressInfo.area_id != "0") {

        // 禁止按钮点击
        this.$set(this, 'isDisabled', true);

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

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().index) + "/addAddress", addressInfo, this.doAddressCreateCallback, {
          method: "POST"
        });
      } else {

        // 参数错误
        Toast("请完整填写收货地址信息");
      }
    },

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

      // 返回处理
      if (res.code == 200) {
        Indicator.close();
        // Toast("添加地址成功");
        // 先返回列表页，在列表页显示操作结果（Storage传输）
        window.localStorage.setItem("addressOption", "添加地址成功");

        // 后退
        this.back();
      } else if (res.code == 400) {

        // 添加地址出错
        Toast(res.message);
      } else {

        // 添加地址出错
        Toast("添加地址出错");
      }

      // 允许按钮点击
      this.$set(this, 'isDisabled', false);
    },

    /**
     * 失去焦点事件，处理微信端页面滚动条不归位的问题
     * @param {String} what [具体输入框控制变量]
     */
    onBlur (what) {

      if (!this.contactNameFocus && !this.contactPhoneFocus && !this.addressFocus) {

        // #ifdef H5 || APP-PLUS

        // 设置滚动条位置
        window.scrollTo(0, 0);

        // #endif
      }

      // 设置变量
      switch (what) {
        case "contactName":
          this.contactNameFocus = false;
          break;
        case "contactPhone":
          this.contactPhoneFocus = false;
          break;
        case "city_name":
          this.cityNameFocus = false;
          break;
        case "address":
          this.addressFocus = false;
          break;
      }
    },

    /**
     * 返回
     */
    back () {
      window.history.go(-1);
      // 判断是否有返回函数
      // if (typeof this.helper.$Apps2 === 'object' && typeof this.helper.$Apps2.back === 'function') {

      //   // 调用返回
      //   this.helper.$Apps2.back();
      // } else {

      //   // 后退
      //   uni.navigateBack({
      //     delta: 1
      //   });
      // }
    }
  },
  directives: {
    focus: {
      update: function (el, { value }) {
        if (value) {
          el.children[0].children[0].focus();
        }
      }
    }
  },
  head: {
    title () {
      return {
        inner: this.title
      }
    }
  },
  watch: {

    /**
   * 设置页面标题
   * @param {Object} newVal [标题新值]
   */
    title (newVal) {

      /* 设置页面标题 开始 */
      // this.setTitle(newVal);
      /* 设置页面标题 结束 */
    }
  }
}
</script>

<style rel="stylesheet/less" lang="less">
@import './addressCreate';
</style>