mall4pc-bbc/components/write-logistics-info.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="this.returnMoneySts != 3">{{$t('applyReturn.fillLogisticsInformation')}}</div>
          <div class="text" v-if="this.returnMoneySts == 3">{{$t('applyReturn.modifyLogisticsInformation')}}</div>
          <div class="close" @click="hidePop"></div>
        </div>
        <div class="con">
          <div class="edit logistics-msg">
            <div class="item">
              <div class="label">{{$t('applyReturn.logisticsCompany')}}：</div>
              <div class="select-box">
                <!-- 物流公司 -->
                <el-select :placeholder="$t('applyReturn.select')" class="area" v-model="dvyName" @change="selectCompany">
                  <el-option
                    v-for="company in deliveryList"
                    :key="company.dvyId"
                    :label="company.dvyName"
                    :value="company"
                  ></el-option>
                </el-select>
                <!-- <div v-if="errTip==1" class="error-text">请选择物流公司</div> -->
              </div>
            </div>
            <div :class="['item', (errLnTip || errLnTip1)? 'error':'']">
              <div class="label">{{$t('applyReturn.shipmentNumber')}}：</div>
              <div class="text-box">
                <input type="text" maxlength="30" v-model="LogisticsNumber" :placeholder="$t('applyReturn.fillLogisticsBillNumber')" class="input" />
                <div v-if="errLnTip" class="error-text">{{$t('applyReturn.logisticsCannotBeEmpty')}}</div>
                <div v-if="errLnTip1" class="error-text">{{$t('applyReturn.logisticsOrderNoSucced')}}</div>
              </div>
            </div>
            <!-- <div :class="['item', errMobileTip? 'error':'']">
              <div class="label">{{$t('applyReturn.mobileNumber')}}：</div>
              <div class="text-box">
                <input
                  type="text"
                  maxlength="11"
                  v-model="mobile"
                  :placeholder="$t('applyReturn.mobileNumberTips')"
                  class="input"
                />
                <div v-if="errMobileTip" class="error-text">{{$t('applyReturn.correctPhoneNumber')}}</div>
              </div>
            </div> -->
            <div :class="['item', errLnReMark? 'error':'']">
              <div class="label">{{$t('applyReturn.notes')}}：</div>
              <div class="text-box">
                <input type="text" maxlength="200" class="input" v-model="remarks" :placeholder="$t('submitOrder.numberLength200')" />
                <div v-if="errLnReMark" class="error-text">{{$t('inputAllSpace')}}</div>
                <!-- <div v-if="errTip==4" class="error-text">请您填写详细地址</div> -->
              </div>
            </div>
            <div class="item">
              <div class="label">{{$t('applyReturn.logisticsVouchers')}}：</div>
              <div class="text-box">
                <mul-pic-upload class="img-upload" v-model="imgs" :limit="5" :isLogist="true" :fileList="fileList" @imgPreview="imgPreview"/>
                <div class="img-des">（ {{$t('applyReturn.uploadFiveVouchers')}} ）</div>
              </div>
            </div>

            <div class="item">
              <div class="label-btn">&nbsp;</div>
              <a href="javascript:void(0)" class="btn-r" @click="writeLogisticsMsg">{{$t('submit')}}</a>
            </div>
          </div>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img class="dialog-img" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>


<script>
import util from '../plugins/util'
import MulPicUpload from '~/components/mul-pic-upload'
import config from '../plugins/config'
export default {
  components: {
    MulPicUpload
  },
  props: ['refundSn', 'orderNumber', 'refundDelivery', 'returnMoneySts'],
  data () {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      deliveryList: [],  //物流公司
      dvyName: '', //快递公司名字
      dvyId: 0, //物流公司id
      LogisticsNumber: '',  //物流单号
      // mobile: '',  //手机号码
      remarks: '', //备注
      imgs: '',
      errLnTip: false,
      errLnTip1: false,
      errLnReMark: false,
      errMobileTip: false,
      fileList: [], // 已上传的凭证图片列表(用于回显)
    }
  },
  created () {
    this.loadDeliveryData()
    //根据物流单号判断回填信息
    if (this.refundDelivery.deyNu) {
      this.dvyName = this.refundDelivery.deyName
      this.LogisticsNumber = this.refundDelivery.deyNu
      // this.mobile = this.refundDelivery.receiverMobile
      this.remarks = this.refundDelivery.senderRemarks
      this.imgs = this.refundDelivery.imgs
      if (this.refundDelivery.imgs) {
        let temp = this.refundDelivery.imgs.split(',')
        temp.forEach(el => {
          this.fileList.push({url: config.picDomain + el})
        });
      }
    }
  },
  methods: {
    /**
     * 图片预览弹窗
     */
    imgPreview(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    /**
     * 加载物流公司
     */
    loadDeliveryData () {
      this.$axios.get('/p/delivery/list')
        .then(({ data }) => {
          this.deliveryList = data
        })
    },
    /**
     * 选择物流公司
     */
    selectCompany (val) {
      this.dvyName = val.dvyName
      this.dvyId = val.dvyId
    },
    /**
     * 提交 || 修改物流信息
     */
    writeLogisticsMsg () {
      // var myreg = /^1(3|4|5|6|7|8|9)\d{9}$/;  //手机号验证正则
      if (this.LogisticsNumber.length == 0 || /^\s+$/g.test(this.LogisticsNumber)) {
        this.errLnTip = true
      // } else if (this.mobile.length !== 11 || !myreg.test(this.mobile)) {
      //   this.errMobileTip = true
        return
      }
      if ( !/^[0-9a-zA-Z]+$/.test(this.LogisticsNumber) ) {
        this.errLnTip1 = true
        return
      } 
      if (/^\s+$/g.test(this.remarks)) {
        this.errLnReMark = true
        return
      }
      let orderRefundExpressParam = {
        expressId: this.dvyId,
        expressName: this.dvyName,
        expressNo: this.LogisticsNumber,
        imgs: this.imgs,
        senderRemarks: this.remarks,
        mobile: this.mobile,
        refundSn: this.refundSn,
      }
      //当物流单号长度为0时，请求添加物流信息的接口
      if (this.returnMoneySts != 3) {
        this.$axios.post('/p/orderRefund/submitExpress', orderRefundExpressParam)
          .then(({ data }) => {
            this.$message({
              message: this.$t('applyReturn.fillInSuccessfully')+'！',
              duration: 1000,
              type: 'success'
            });
            this.$router.push({ path: '/order-detail?orderNumber=' + this.orderNumber })
          })
      } else if (this.returnMoneySts == 3) {
        //当物流单号不为空时，请求修改物流信息的接口
        this.$axios.put('/p/orderRefund/reSubmitExpress', orderRefundExpressParam)
          .then(({ data }) => {
            this.$message({
              message: this.$t('applyReturn.modifiedSuccessfully')+'！',
              duration: 1000,
              type: 'success'
            });
            this.$router.push({ path: '/order-detail?orderNumber=' + this.orderNumber })
          })
      }
    },

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



<style scoped>
.dialog-img {
  display: block;
  object-fit: contain;
  margin: 0 auto;
  max-width: 100%;
}
.logistics-msg .select-box {
  width: 300px;
  height: 30px;
  line-height: 32px;
  border: 1px solid #eee;
  padding: 5px 10px;
}
.popup-box .con .edit .item {
  display: flex;
}
.popup-box .con .edit .item .label {
  width: 100px;
  height: 40px;
  line-height: 20px;
  font-size: 13px;
}
.popup-box .con .edit .item .text-box {
  flex: 1;
  margin-left: auto;
}
.logistics-msg .area >>> .el-input__inner {
  width: 288px;
  margin: 0;
  padding: 0;
  height: unset;
  line-height: unset;
}
.area .el-scrollbar {
  width: 97px;
}
.logistics-msg .area >>> .el-input__suffix-inner {
  position: absolute;
  top: -4px;
  right: -10px;
}
.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;
}
.popup-box .con .edit .item .text-box .input {
  height: 25px;
  line-height: 25px;
  padding: 8px 10px;
}

/* 修复transform导致弹窗内容模糊问题 */
.fix-transform-blur {
  /* z-index: 10000; */
  z-index: 1998;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}

/* 上传图片 */
.con .logistics-msg .img-upload {
  display: block;
}
.logistics-msg >>> .el-upload--picture-card {
  width: 70px;
  height: 70px;
}
.logistics-msg .item >>> .el-upload--picture-card {
  line-height: 83px;
}
.logistics-msg .img-des {
  margin-top: 15px;
  color: #aaa;
}
/* 缩略图 */
.logistics-msg >>> .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
}

/* 提交 */
.popup-box .con .logistics-msg .item .label-btn {
  width: 100px;
}
.logistics-msg .item .btn-r {
  width: 291px;
  text-align: center;
  margin-top: 12px;
  height: 2em;
  line-height: 2em;
  font-size: 13px;
  letter-spacing: 2px;
}
div /deep/ .el-icon-plus {
  width: 70px;
  height: 70px;
}
</style>