addressModify.vue

<template>
  <div class="addressEdit">
    <div>
      <mt-field label="收货人" v-model="receiveName" placeholder="请填写收货人"></mt-field>
      <mt-field
        label="手机号"
        type="tel"
        v-model="receiveMobile"
        placeholder="请填写手机号"
        :attr="{maxlength: 13}"
      ></mt-field>
      <mt-field
        label="所在地区"
        v-model="addressArea"
        placeholder="请填写所在地区"
        :readonly="true"
        :disableClear="true"
      >
        <mt-cell is-link style="position:absolute;width: 40px;height:100%;right:0;top:-24px;"></mt-cell>
        <div class="stbox" style="position:absolute;right: 0;top: -24px;left: 0;bottom: 0;">
          <mt-cell
            id="mtcell"
            :value="addressArea"
            @click.native="showPicker"
            style="opacity:0;position:absolute;width:300px;height: 100%;right:10%;top:0;"
          ></mt-cell>
        </div>
      </mt-field>
      <mt-field label="详细地址" placeholder="请填写详细地址" v-model="address"></mt-field>
      <div @click="onSave();buttonClick('保存地址')" class="btn">
        <van-button round size="large" type="info">保存</van-button>
      </div>
    </div>
    <my-address
      :showAddressPicker="showAddressPicker"
      @save-address="saveAddress"
      @hide-picker="hidePicker"
      :init="addressArea"
    ></my-address>
  </div>
</template>

<script>
import MyAddress from "@/components/address-picker/Address.vue";
import {
  saveActivityAddressApi,
  getActivityAddressApi,
  modifyAddressApi
} from "../../service/api";
import addressList from "../address-picker/addr";
import { Toast } from "vant";
import { Field, Cell } from "mint-ui";
export default {
  name: "",
  components: {
    MyAddress,
    [Cell.name]: Cell,
    [Field.name]: Field
  },
  data() {
    return {
      addressData: null,
      receiveName: "",
      receiveMobile: "",
      addressDetail: "",
      showAddressPicker: false,
      addressArea: "",
      addressAreaCode: "",
      address: "",
      deliverId: ""
    };
  },
  mounted() {
    if (this.$route.params && this.$route.params.data) {
      let addressData = JSON.parse(this.$route.params.data);
      this.addressData = addressData;
      this.receiveName = addressData.receive_name;
      this.receiveMobile = addressData.receive_mobile;
      this.address = addressData.address;
      this.deliverId = addressData.id;
      this.addressArea =
        addressData.province_name +
        "-" +
        addressData.city_name +
        "-" +
        addressData.area_name;
    }
    this.getAddressCode();
  },
  methods: {
    closeAdd() {
      this.$emit("closeAdd", false);
    },
    buttonClick(buttonName) {
      this.$sa.track("buttonClick", {
        tabTitle: "商品",
        moduleTitle: "地址填写",
        buttonType: "功能",
        buttonName: buttonName
      });
    },
    getAddressCode() {
      let provinceName = this.addressData.province_name;
      let cityName = this.addressData.city_name;
      let areaName = this.addressData.area_name;
      let provinceCode, cityCode, areaCode;
      for (let i = 0, len = addressList.length; i < len; i++) {
        let item = addressList[i];
        if (cityName == item.label) {
          provinceCode = item.value;
          let secondArr = item.children;
          for (let j = 0, long = secondArr.length; j < long; j++) {
            let secondItem = secondArr[j];
            if (cityName == secondItem.label) {
              cityCode = secondItem.value;
              let thirdArr = secondItem.children;
              for (let k = 0, l = thirdArr.length; k < l; k++) {
                if ((areaName = thirdArr[k].label)) {
                  areaCode = thirdArr[k].value;
                  break;
                }
              }
            }
          }
        }
      }
      this.addressAreaCode = provinceCode + "-" + cityCode + "-" + areaCode;
    },
    onSave: function() {
      let values = this.addressAreaCode.split("-");
      let labels = this.addressArea.split("-");
      if (!this.receiveName) {
        Toast("收货人不能为空");
        return false;
      } else if (!this.receiveMobile) {
        Toast("手机号不能为空");
        return false;
      } else if (!/^1\d{10,12}$/.test(this.receiveMobile)) {
        Toast("手机号格式不正确");
        return false;
      } else if (!this.addressArea) {
        Toast("所在地区不能为空");
        return false;
      } else if (!this.address) {
        Toast("详细地址不能为空");
        return false;
      }
      let param = {};
      // param.deliver_id = this.deliverId;
      param.receive_name = this.receiveName;
      param.receive_mobile = this.receiveMobile;
      param.address = this.address;
      param.province_id = values[0];
      param.province_name = labels[0];
      param.city_id = values[1];
      param.city = labels[1];
      param.area_id = values[2];
      param.area = labels[2];
      modifyAddressApi(param)
        .then(res => {
          this.closeAdd();
          Toast("修改成功");
          this.$router.replace({
            name: "Address"
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    onValuesChange: function(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },
    hidePicker() {
      // 接受子组件关闭popup事件
      this.showAddressPicker = false;
    },
    showPicker() {
      this.showAddressPicker = !this.showAddressPicker;
    },
    saveAddress(labels, values) {
      console.log(labels);
      // 从子组件接受返回所选值 val
      this.addressArea = labels;
      this.addressAreaCode = values;
      this.showAddressPicker = !this.showAddressPicker;
    }
  }
};
</script>

<style  lang="less">
@import "../../util/public";

.addressEdit {
  background: #f5f5f9;

  // .mint-cell-wrapper{border-bottom: 1px solid #E2E2E2;width: 94%;}
  .stbox {
    position: relative;
  }
  input::-webkit-input-placeholder {
    color: #cccccc;
  }
  .van-popup {
    background: white;
  }
  .gray {
    background: #cccccc;
    border: none;
  }
  .mint-cell {
    color: #333333;
  }
  .btn {
    margin-top: 50 * @toVw;
    padding: 0 34 * @toVw;
  }
  #mtcell {
    //  background: red;
    span {
      color: #333333;
    }
    .mint-cell-title {
      width: 105px;
      flex: none;
    }
    .mint-cell-value {
      flex: 1;
      text-align: left;
      //  background: red;
      span {
        text-indent: 0;
        margin-left: 4px;
      }
    }
  }
  .mint-field-core {
    //  background: red;
    text-indent: 2px;
  }
  .holder {
    color: rgb(204, 204, 204);
    position: absolute;
    top: 10 * @toVw;
    left: 108 * @toVw;
  }
  // .mint-cell-value{color: #333333;}
  .head {
    i {
      display: inline-block;
      border-radius: 50%;
      width: 11 * @toVw;
      height: 11 * @toVw;
    }
    padding: 13 * @toVw;
    background: white;
    border-bottom: 1px solid #e2e2e2;
    color: #666666;
    font-size: 14 * @toVw;
  }
  .now {
    i {
      background: #60adf0;
    }
  }
  .item {
    margin-top: 10px;
  }
  .next {
    i {
      background: #ffd454;
    }
  }
  .content {
    background: white;
    padding: 13 * @toVw 0 13 * @toVw 33 * @toVw;
    .top {
      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
      font-size: 14 * @toVw;
      line-height: 20 * @toVw;
    }
    .timeInfo {
      display: flex;
      .text {
        color: #999999;
        font-size: 12 * @toVw;
        margin-left: 0;
        line-height: 26 * @toVw;
      }
      .right {
        margin-top: 43 * @toVw;
      }
      .van-button--info {
        background: white;
        width: 74 * @toVw;
        color: #60adf0;
        border-color: #60adf0;
      }
    }
  }
  .linebox {
    background: white;
  }
  .line {
    width: 100%;
    display: block;
    border-bottom: 1px solid #e2e2e2;
    margin: 12 * @toVw 0;
  }
  .tip {
    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
    font-size: 12 * @toVw;
    line-height: 23 * @toVw;
  }
}
@media screen and (orientation: landscape) {
}
</style>