mall4pc-bbc/components/add-or-edit-address.vue

<template>
  <div class="addr-pop-con">
    <!-- 弹窗 -->
    <div class="popup-mask"></div>
    <div class="fix-transform-blur">
      <div class="popup-box">
        <!-- 新增地址 -->
        <div class="tit">
          <div class="text" v-if="editAddrId">{{$t('address.modifyAddress')}}</div>
          <div class="text" v-else>{{$t('address.addRecipientInformation')}}</div>
          <div class="close" @click="hidePop"></div>
        </div>
        <div class="con">
          <div class="edit">
            <div class="item error">
              <div class="label" :class="['label',$t('language')=='en' ? 'labelEn' : '']">{{$t('address.recipient')}}：</div>
              <div class="text-box">
                <input type="text" class="input" v-model="addressForm.receiver" maxlength="15"/>
                <div v-if="errTip==1" class="error-text">{{$t('address.addRecipientInformation')}}</div>
              </div>
            </div>
            <div class="item">
              <div :class="['label',$t('language')=='en' ? 'labelEn' : '']">{{$t('applyReturn.mobileNumber')}}：</div>
              <div class="text-box">
                <input type="text" class="input" v-model="addressForm.mobile" maxlength="11" />
                <div v-if="errTip==2" class="error-text">{{$t('address.cellPhoneNumberCannotBeEmpty')}}</div>
                <div v-if="errTip==5" class="error-text">{{$t('address.cellPhoneNumberRightFormat')}}</div>
              </div>
            </div>
            <div class="item">
              <div :class="['label',$t('language')=='en' ? 'labelEn' : '']">{{$t('freeShop.area')}}：</div>
              <div class="text-box">
                <div class="area-box">
                  <!-- 省 -->
                  <el-select
                    v-model="addressForm.province"
                    prop="province"
                    :placeholder="this.$t('applyReturn.select')"
                    class="area"
                    @change="selectProvince"
                  >
                    <el-option
                      v-for="province in provinceList"
                      :key="province.areaId"
                      :label="province.areaName"
                      :value="province"
                    >{{ province.areaName }}</el-option>
                  </el-select>
                  <!-- 市 -->
                  <el-select
                    v-model="addressForm.city"
                    prop="city"
                    class="area"
                    :placeholder="this.$t('applyReturn.select')"
                    @change="selectCity"
                  >
                    <el-option
                      v-for="city in cityList"
                      :key="city.areaId"
                      :label="city.areaName"
                      :value="city"
                    >{{ city.areaName }}</el-option>
                  </el-select>
                  <!-- 区 -->
                  <el-select
                    v-model="addressForm.area"
                    class="area"
                    prop="area"
                    @change="selectArea"
                   :placeholder="this.$t('applyReturn.select')"
                  >
                    <el-option
                      v-for="area in areaList"
                      :key="area.areaId"
                      :label="area.areaName"
                      :value="area"
                    >{{ area.areaName }}</el-option>
                  </el-select>
                </div>
                <div v-if="errTip==3" class="error-text">{{$t('address.pleaseYourCompleteRegionalInformation')}}</div>
              </div>
            </div>
            <div class="item">
              <div :class="['label',$t('language')=='en' ? 'labelEn' : '']">{{$t('freeShop.detailedAddress')}}：</div>
              <div class="text-box">
                <input type="text" class="input" v-model="addressForm.addr" maxlength="50"/>
                <div v-if="errTip==4" class="error-text">{{$t('freeShop.detailedAddressTips')}}</div>
              </div>
            </div>
            <div class="item item-btn" :style="{marginLeft:$t('language')=='en'?'35px':'0'}">
              <div class="label-btn">&nbsp;</div>
              <a href="javascript:void(0)" class="btn-r" @click="submitAddress">{{$t('address.saveRecipientInformation')}}</a>
            </div>
          </div>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
  </div>
</template>

<script>
import util from '../plugins/util'
export default {
  props: ['editAddrId'],
  data () {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      addressForm: {
        receiver: '', // 收货人
        mobile: '', // 手机号
        addr: '', // 详细地址
        addrId: 0, // 地址ID
        province: '',
        provinceId: null,
        postCode: '',
        city: '',
        cityId: null,
        area: '',
        areaId: null
      },
      errTip: 0, // 错误提示: 1收件人 2手机号 3地区数据 4详细地址
    }
  },
  mounted () {
    this.init()
    if (this.editAddrId) {
      this.getAddrInfo(this.editAddrId)
    }
  },
  methods: {
    // 页面加载获取数据:省份数据
    init () {
      this.listAreaByParentId().then(({ data }) => {
        this.provinceList = data
      })
    },
    /**
     * 省市区
     */
    listAreaByParentId (pid) {
      if (!pid) { pid = 0 }
      return this.$axios.get('/p/area/listByPid', { params: { pid } })
    },
    /**
     * 选择省
     */
    selectProvince (val) {
      // 设置省id
      this.addressForm.provinceId = val.areaId
      this.addressForm.province = val.areaName
      // 将市和区的值清除
      this.addressForm.cityId = null
      this.addressForm.city = ''
      this.addressForm.areaId = null
      this.addressForm.area = ''
      // 获取城市的select
      this.listAreaByParentId(this.addressForm.provinceId).then(({ data }) => {
        this.cityList = data
      })
    },
    /**
     * 选择市
     */
    selectCity (val) {
      // 设置市id
      this.addressForm.cityId = val.areaId
      this.addressForm.city = val.areaName
      // 将区域的值清除
      this.addressForm.areaId = null
      this.addressForm.area = ''
      // 获取区域的select
      this.listAreaByParentId(this.addressForm.cityId).then(({ data }) => {
        this.areaList = data
      })
    },
    /**
     * 选择区
     */
    selectArea (val) {
      // 设置区id
      this.addressForm.areaId = val.areaId
      this.addressForm.area = val.areaName
    },


    /**
     * 根据地址id获取地址信息
     */
    getAddrInfo (addrId) {
      this.$axios.get('/p/address/addrInfo/' + addrId).then(({ data }) => {
        this.addressForm = data
        this.listAreaByParentId(data.provinceId).then(({ data }) => {
          this.cityList = data
        })
        this.listAreaByParentId(data.cityId).then(({ data }) => {
          this.areaList = data
        })
      })
    },

    /**
     * 更新/添加地址
     */
    submitAddress () {
      if (!this.addressForm.receiver.trim()) {
        this.errTip = 1
        return
      } else if (!this.addressForm.mobile.trim()) {
        this.errTip = 2
        return
      } else if (!util.checkPhoneNumber(this.addressForm.mobile)) {
        this.errTip = 5
        return
      } else if (!this.addressForm.provinceId || !this.addressForm.cityId || !this.addressForm.areaId) {
        this.errTip = 3
        return
      } else if (!this.addressForm.addr.trim() || this.addressForm.addr.length<5) {
        this.errTip = 4
        return
      } else {
        this.errTip = 0
      }
      let addrParam = {
        addrId: this.editAddrId ? this.editAddrId : 0,
        addr: this.addressForm.addr,
        area: this.addressForm.area,
        areaId: this.addressForm.areaId,
        city: this.addressForm.city,
        cityId: this.addressForm.cityId,
        mobile: this.addressForm.mobile,
        postCode: this.addressForm.postCode || '',
        province: this.addressForm.province,
        provinceId: this.addressForm.provinceId,
        receiver: this.addressForm.receiver
      }
      this.$axios({
        method: this.editAddrId ? 'put' : 'post',
        url: this.editAddrId ? '/p/address/updateAddr' : '/p/address/addAddr',
        data: addrParam,
      }).then(({ data }) => {
        this.$message({
          message: data,
          type: 'success',
          duration: 1000
        })
        this.$emit('getAddrList')
        this.$emit('toggleAddrPop', false)
        this.$emit('reloadOrderInfo')
      })
    },

    /**
     * 隐藏新增地址弹窗
     */
    hidePop () {
      this.$emit('toggleAddrPop', false);
    },

  }
}
</script>

<style>
.area .el-input__inner {
  margin: 0;
  padding: 0;
  height: unset;
  line-height: unset;
}
.area .el-scrollbar {
  width: 97px;
}
.area .el-input__suffix-inner {
  position: absolute;
  top: -10px;
  left: -18px;
}
.el-select-dropdown {
  z-index: 20005 !important;
}
.el-select-dropdown__item.selected {
  color: unset;
  font-weight: unset;
}
.el-select .area .el-select > .el-input {
  overflow: hidden;
}

/* 修复transform导致弹窗内容模糊问题 */
.fix-transform-blur {
  z-index: 10000;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}
/* 国际化样式修整 */
.labelEn {
  width: 110px !important;
  text-align: center !important;
}
</style>