live-telecast-ui-h5/src/views/address/view.vue

<template>
  <div class="addressView" style="padding-top: 46px">
    <van-nav-bar
      class="van-nav-bar-my-fixed"
      :title="title"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-edit
      v-loading="loading"
      :area-list="areaList"
      :show-postal="false"
      :show-delete="false"
      :tel-validator="validator"
      :address-info="addressInfo"
      :show-set-default="false"
      :show-search-result="false"
      :search-result="[]"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      default-tag-text="默认"
      @save="onSave"
    />
  </div>
</template>

<script>
import asyncRequest from "@/apis/address/index";
import resToken from "@/mixins/resToken";
import { areaList } from "@vant/area-data";
export default {
  mixins: [resToken],
  data() {
    return {
      // /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(s)
      id: "0",
      title: "",
      areaList: areaList,
      addressInfo: {
        id: "",
        name: "",
        tel: "",
        addressDetail: "",
        areaCode: "",
      },
      loading: false,
      isDefault: false,
    };
  },
  async created() {
    if (this.$route.query.id) {
      this.title = "编辑地址";
      this.id = this.$route.query.id;
      await this.initData();
    } else {
      this.title = "新建地址";
      this.id = "0";
    }
  },
  methods: {
    validator(e) {
      let myreg1 = /^[1][3,4,5,7,8][0-9]{9}$/;
      let myreg2 = /^[2][3,4,5,7,8][0-9]{6}$/;
      if (!myreg1.test(e) && !myreg2.test(e)) {
        return false;
      } else {
        return true;
      }
    },

    onClickLeft() {
      window.history.back(-1);
    },
    async onSave(e) {
      if (!this.loading) {
        this.loading = true;
        let code = e.areaCode;
        let model = {
          contector: e.name,
          mobile: e.tel,
          provice: code.substr(0, 2) + "0000",
          city: code.substr(0, 4) + "00",
          area: e.areaCode,
          addr: e.addressDetail,
        };
        let res = {};
        if (this.id === "0") {
          res = await asyncRequest.add(model);
        } else {
          model.id = this.id;
          res = await asyncRequest.update(model);
        }

        this.loading = false;
        if (res && res.code == 0) {
          this.show_title(`${this.title}成功！`);
          setTimeout(() => {
            this.onClickLeft();
          }, 1500);
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.show_title(res.msg);
        }
      }
    },

    async initData() {
      if (!this.loading) {
        this.loading = true;
        const res = await asyncRequest.detail({ id: this.id });
        this.loading = false;
        if (res && res.code === 0 && res.data) {
          let formData = res.data;
          this.addressInfo = {
            id: formData.id,
            name: formData.contector,
            tel: formData.mobile,
            addressDetail: formData.addr,
            areaCode: formData.area,
          };
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.show_title(res.msg);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.addressView {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgb(230, 230, 220)!important;
  .van-address-edit__buttons {
    button {
      float: right;
      width: 42.5%;
      &:first-child {
        margin: 0 5% 0 2.5%;
        background: linear-gradient(0deg, #ff6680 0%, #ffd490 100%);
        border: 0;
      }
      &:last-child {
        margin: 0 2.5% 0 5%;
        border-color: rgb(255, 131, 39);
        color: rgb(255, 131, 39);
      }
    }
  }
  .van-address-edit__buttons::after,
  .van-address-edit__buttons::before {
    content: "";
    display: block;
    clear: both;
  }
  //新增地址栏和顶部的间距
  .van-address-edit {
    // margin-top: 15px;
  }
}
</style>