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

<template>
  <div class="addr-pop-con">
    <!-- 弹窗 -->
    <div class="popup-mask" />
    <div class="fix-transform-blur">
      <div class="popup-box" style="width: 610px">
        <!-- 新增地址 -->
        <div class="tit">
          <div class="text">{{ $t('invoice.invoiceInfo') }}</div>
          <div class="close" @click="hidePop" />
        </div>
        <div class="con invoice-con">
          <div class="edit">
            <div class="item error">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceType') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceType === 1 }"
                  @click="selectInvoiceType(1)"
                >
                  <div class="text">
                    {{ $t('invoice.generalInvoice') }}
                  </div>
                </div>
                <div
                  v-if="!orderInvoiceId"
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceType === 2 }"
                  @click="selectInvoiceType(2)"
                >
                  <div class="text">
                    {{ $t('invoice.noInvoice') }}
                  </div>
                </div>
              </div>
            </div>
            <div v-if="dataFrom.invoiceType === 1" class="item">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceTitle') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.headerType === 2 }"
                  @click="selectheaderType(2)"
                >
                  <div class="text">
                    {{ $t('invoice.personal') }}
                  </div>
                </div>
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.headerType === 1 }"
                  @click="selectheaderType(1)"
                >
                  <div class="text">
                    {{ $t('invoice.unit') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 2 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.personalName') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.headerName"
                  maxlength="11"
                  :placeholder="$t('invoice.inputTips1')"
                  type="text"
                  class="input"
                />
                <!-- <div v-if="errTip===1" class="error-text">请输入个人名称</div> -->
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 1 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                <span style="color: red">*</span>
                {{ $t('invoice.unitName') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.headerName"
                  maxlength="50"
                  :placeholder="$t('invoice.inputTips2')"
                  type="text"
                  class="input"
                />
                <div v-if="errTip === 1" class="error-text">
                  {{ $t('invoice.inputTips2') }}
                </div>
              </div>
            </div>
            <div
              v-if="dataFrom.headerType === 1 && dataFrom.invoiceType === 1"
              class="item"
            >
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                <span style="color: red">*</span>
                {{ $t('invoice.TaxpayerIDNumber') }}：
              </div>
              <div class="button-box text-box">
                <input
                  v-model="dataFrom.invoiceTaxNumber"
                  maxlength="20"
                  :placeholder="$t('invoice.inputTips3')"
                  type="text"
                  class="input"
                />
                <div v-if="errTip === 2" class="error-text">
                  {{ $t('invoice.inputTips3') }}
                </div>
                <div v-if="errTip === 5" class="error-text">
                  {{ $t('invoice.inputTips4') }}
                </div>
              </div>
            </div>
            <div v-if="dataFrom.invoiceType === 1" class="item">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceContent') }}：
              </div>
              <div class="button-box">
                <div
                  class="button-box-item"
                  :class="{ active: dataFrom.invoiceContext === 1 }"
                >
                  <div class="text">
                    {{ $t('invoice.productDetails') }}
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div
                class="label"
                :class="{ 'invoice-en': $t('language') === 'en' }"
              >
                {{ $t('invoice.invoiceInstructions') }}：
              </div>
              <div class="description-box">
                <div>1、{{ $t('invoice.invoiceTips1') }}</div>
                <div>2、{{ $t('invoice.invoiceTips2') }}</div>
                <div>3、{{ $t('invoice.invoiceTips3') }}</div>
                <div>4、{{ $t('invoice.invoiceTips4') }}</div>
              </div>
            </div>
            <div class="item item-btn">
              <div class="label-btn">&nbsp;</div>
              <a
                href="javascript:void(0)"
                class="btn-r"
                @click="submitDataForm"
                >{{ $t('invoice.saveInvoiceInformation') }}</a
              >
              <a href="javascript:void(0)" class="btn-close" @click="hidePop">{{
                $t('cancel')
              }}</a>
            </div>
          </div>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
  </div>
</template>

<script>
// import util from '../plugins/util'
export default {
  data() {
    return {
      dataFrom: {
        invoiceType: 2, // 发票类型 1、普通电子发票 2、不开具发票
        headerType: 2, // 抬头类型 2、个人 1、企业
        invoiceContext: 1,
        headerName: ''
      },
      errTip: 0, // 错误提示: 1收件人 2手机号 3地区数据 4详细地址 5纳税人识别号
      type: 0,
      shopId: '',
      orderNumber: '',
      orderInvoiceId: null,
      TaxNumberReg: /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{17})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/
    }
  },
  mounted() {},
  methods: {
    init(type, data, orderNumber, shopId, orderInvoiceId) {
      this.type = type
      this.shopId = shopId || ''
      this.orderNumber = orderNumber || ''
      this.orderInvoiceId = orderInvoiceId || null
      if (this.orderInvoiceId) {
        this.dataFrom.invoiceType = 1
      }
      if (data) {
        this.dataFrom = JSON.parse(JSON.stringify(data))
      }
    },
    /**
     * 隐藏新增地址弹窗
     */
    hidePop() {
      this.$emit('hidePop', false)
    },
    selectInvoiceType(type) {
      this.dataFrom.invoiceType = type
      this.dataFrom.headerType = 2
    },
    selectheaderType(headerType) {
      // this.dataFrom.headerName = ''
      this.errTip = -1
      this.dataFrom.headerType = headerType
    },
    submitDataForm() {
      // if (!this.dataFrom.headerName || !this.dataFrom.headerName.trim()) {
      //   this.errTip = 1
      //   return
      // }
      if (this.dataFrom.headerType === 1) {
        if (!this.dataFrom.headerName || !this.dataFrom.headerName.trim()) {
          this.errTip = 1
          return
        }
        if (
          !this.dataFrom.invoiceTaxNumber ||
          !this.dataFrom.invoiceTaxNumber.trim()
        ) {
          this.errTip = 2
          return
        }
        if (!this.TaxNumberReg.test(this.dataFrom.invoiceTaxNumber)) {
          this.errTip = 5
          return
        }
      }
      if (!this.type) {
        if (this.shopId) {
          this.dataFrom.shopId = this.shopId
        }
        this.$emit('getInvoiceData', this.dataFrom)
      } else {
        const orderInvoiceDTO = {
          headerName: this.dataFrom.headerName,
          headerType: this.dataFrom.headerType,
          invoiceContext: this.dataFrom.invoiceContext,
          invoiceTaxNumber: this.dataFrom.invoiceTaxNumber,
          invoiceType: this.dataFrom.invoiceType,
          shopId: this.shopId,
          orderNumber: this.orderNumber,
          orderInvoiceId: this.orderInvoiceId
        }
        if (this.dataFrom.headerType === 2) {
          delete orderInvoiceDTO.invoiceTaxNumber
        }
        if (this.dataFrom.invoiceType === 2) {
          this.hidePop()
        } else if (this.orderInvoiceId) {
          this.$axios
            .put('/p/orderInvoice', orderInvoiceDTO)
            .then(({ data }) => {
              this.$message({
                message: this.$t('applyReturn.modifiedSuccessfully'),
                type: 'success',
                duration: 1000,
                onClose: () => {
                  // this.$emit('updateData')
                  this.$emit('updateData', false)
                }
              })
            })
        } else {
          this.$axios
            .post('/p/orderInvoice', orderInvoiceDTO)
            .then(({ data }) => {
              this.$message({
                message: this.$t('invoice.successTip'),
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.$emit('updateData', false)
                  // this.hidePop()
                }
              })
            })
        }
      }
    }
  }
}
</script>

<style scoped>
.area .el-input__inner {
  margin: 0;
  padding: 0;
  height: 20px;
  line-height: 20px;
}
.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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.empty {
  color: #acacac;
  padding: 10px 0 10px;
}
.addr-pop-con .con .button-box {
  display: flex;
  justify-content: flex-start;
}
.addr-pop-con .con .button-box .button-box-item {
  margin-right: 20px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  opacity: 1;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 0 20px;
}
.addr-pop-con .con .button-box .button-box-item.active {
  border: 1px solid #e1251b;
}
.addr-pop-con .con .button-box .active ::after {
  position: absolute;
  bottom: 2px;
  right: 1px;
  display: block;
  width: 10px;
  height: 8px;
  content: ' ';
  background: url(../assets/images/icons.png) no-repeat 0 -19px;
  background-position: -21px -750px;
}
.addr-pop-con .con .button-box .active ::before {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  content: ' ';
  border: 10px solid transparent;
  border-right: 10px solid #e1251b;
  border-bottom: 10px solid #e1251b;
}
.addr-pop-con .con .button-box .button-box-item .text {
  min-width: 56px;
  height: 16px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #333333;
  opacity: 1;
  text-align: center;
}
.addr-pop-con .con .description-box {
  width: 396px;
  min-height: 80px;
  padding: 10px;
  background: #f9f9f9;
  opacity: 1;
  border-radius: 2px;
  line-height: 20px;
  color: #999999;
}
.addr-pop-con .invoice-con .edit .item .label {
  width: 95px;
  text-align: right;
  margin-right: 10px;
}
.addr-pop-con .invoice-con .edit .item .label.invoice-en {
  width: 155px;
}
.popup-box .invoice-con .edit .item .btn-r {
  padding: 6px 15px 5px 15px;
  background: #e1251b;
  color: #fff;
  border-radius: 2px;
}
.popup-box .invoice-con .edit .item .btn-close {
  margin-left: 12px;
  padding: 6px 15px 5px 15px;
  background: #ffffff;
  color: #333333;
  border-radius: 2px;
  border: 1px solid #dcdcdc;
}
.popup-box .invoice-con .edit .item .label-btn {
  width: 95px;
  margin-right: 10px;
}
</style>