mall-web-ssr/components/mobile/center/addinvoice.vue

<template>
  <div class="addinvoice-wrapper">
    <div class="mobile-nav">
      <div class="mobile-header mobile-center-header">
        <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
        <p>{{joinType === 'update' ? '修改': '新增'}}发票信息</p>
        <p class="en-name">
          <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">
          {{currentEnName}}
        </p>
      </div>
    </div>
    <div class="addinvoice-content-wrapper">
      <div class="addinvoice-title" v-if="joinType !== 'add'">{{chooseItem.kind === 1206 ? '增值税普票' : '增值税专票'}}</div>
      <div class="addinvoice-ul" :style="joinType === 'add' ? 'margin-top: 0.2rem' : ''">
        <div class="addinvoice-focus clearfix" v-if="joinType === 'add'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票类型：</div>
          <div class="pull-left clearfix">
            <div class="normal pull-left" style="margin-right: 0.2rem;" @click="isSaveinvoiceType === 0 ? invoiceType = 'speci' : ''">
              <div class="icon" :class="invoiceType === 'speci' ? 'active' : ''">
                <div class="icon-next"></div>
              </div>
              增值税专票
            </div>
            <div class="normal pull-left" @click="isSaveinvoiceType === 0 ? invoiceType = 'normal' : ''">
              <div class="icon" :class="invoiceType === 'normal' ? 'active' : ''">
                <div class="icon-next"></div>
              </div>
              增值税普票
            </div>
          </div>
        </div>
        <div class="addinvoice-focus clearfix">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票抬头：</div>
          <div class="pull-left input">
            <input placeholder="请输入发票抬头" type="text" v-model="chooseItem.head" />
          </div>
        </div>
        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位地址：</div>
          <div class="pull-left input">
            <input placeholder="请输入单位地址" type="text" v-model="chooseItem.companyAddress" maxlength="50" />
          </div>
        </div>

        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位电话：</div>
          <div class="pull-left input">
            <input placeholder="区号和号码用“-”隔开" type="text" v-model="chooseItem.companyPhone"/>
          </div>
        </div>

        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>税务登记号：</div>
          <div class="pull-left input">
            <input placeholder="请输入税务登记号" type="text" v-model="chooseItem.companyTaxNumber" maxlength="20"/>
          </div>
        </div>

        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行：</div>
          <div class="pull-left input">
            <input placeholder="请输入开户银行" type="text" v-model="chooseItem.bankName" maxlength="30"/>
          </div>
        </div>

        <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行账号：</div>
          <div class="pull-left input">
            <input placeholder="请输入开户银行账号" type="number" v-model="chooseItem.bankAccount" maxlength="30" />
          </div>
        </div>

        <div class="addinvoice-focus clearfix">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>收票人：</div>
          <div class="pull-left input">
            <input placeholder="请输入收票人" type="text" maxlength="10" v-model="chooseItem.name" />
          </div>
        </div>

        <div class="addinvoice-focus clearfix">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>联系电话：</div>
          <div class="pull-left input">
            <input placeholder="请输入联系电话" type="text" maxlength="11" v-model="chooseItem.telephone" />
          </div>
        </div>

        <div class="addinvoice-focus clearfix">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>所在地区：</div>
          <div class="pull-left input" @click="addressShow = true">
            <span v-text="chooseItem.area || '选择地区'">选择地区</span>
            <i class="iconfont icon-xiangyou"></i>
            <!--<input placeholder="省/市/区" type="text" />-->
          </div>
        </div>

        <div class="addinvoice-focus clearfix">
          <div class="pull-left addinvoice-focus-name"><a class="red">*</a>详细地址：</div>
          <div class="pull-left input">
            <input placeholder="建议您填写详细发件地址，如街道名，门牌号楼层和房间号等信息" type="text" v-model="chooseItem.detailAddress" />
          </div>
        </div>

        <div class="addinvoice-agree" v-if="joinType === 'add'">
          <input type="checkbox" id="awesome" :checked="agreeInfo" @click="agreeInfo = !agreeInfo"/>
          <label for="awesome">我已阅读并同意<a>《发票须知》</a></label>
        </div>

        <div class="addinvoice-controll clearfix">
          <div class="pull-left" @click="goBack()">取消</div>
          <div class="pull-right" @click="goBack(true)">确认</div>
        </div>
      </div>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <select-address :className="''" :isShow="addressShow" @closeAction="addressData"></select-address>
  </div>
</template>

<script>
  import { RemindBox } from '~components/mobile/common'
  import SelectAddress from '~components/mobile/base/SelectAddress.vue'
  export default {
    name: 'addinvoice',
    props: {
      chooseItem: {
        type: Object,
        default: {}
      },
      isSaveinvoiceType: { // 已保存的发票信息
        type: Number,
        default: 0
      },
      joinType: {
        type: String,
        default: 'add'
      }
    },
    computed: {
      isEmpty() {
        return this.chooseItem.kind
      }
      // invoiceType() {
      //   return this.isSaveinvoiceType > 0 ? (this.isSaveinvoiceType === 1205 ? 'speci' : 'normal') : 'speci'
      // }
    },
    mounted() {
      if (this.isSaveinvoiceType === 1205) {
        this.invoiceType = 'normal'
      } else if (this.isSaveinvoiceType === 1206) {
        this.invoiceType = 'speci'
      } else {
        if (this.chooseItem.kind) {
          this.invoiceType = this.chooseItem.kind === 1205 ? 'speci' : 'normal'
        }
        if (this.chooseItem.kind) {
          this.agreeInfo = true
        }
      }
    },
    data() {
      return {
        invoiceType: 'speci',
        agreeInfo: false,
        collectResult: '',
        timeoutCount: 0,
        addressShow: false
      }
    },
    methods: {
      goBack(str) {
        if (str) {
          if (this.chooseItem.head === '' || !this.chooseItem.head) {
            this.setRemindText('发票抬头不能为空')
          } else if (this.invoiceType !== 'normal' && (this.chooseItem.companyAddress === '' || !this.chooseItem.companyAddress)) {
            this.setRemindText('单位地址不能为空')
          } else if (this.invoiceType !== 'normal' && (!/^0\d{2,3}-\d{7,8}$/.test(this.chooseItem.companyPhone))) {
            this.setRemindText('单位电话不正确')
          } else if (this.invoiceType !== 'normal' && (this.chooseItem.companyTaxNumber === '' || !this.chooseItem.companyTaxNumber)) {
            this.setRemindText('税务登记号不能为空')
          } else if (this.invoiceType !== 'normal' && (!/^[0-9a-zA-Z]*$/g.test(this.chooseItem.companyTaxNumber))) {
            this.setRemindText('税务登记号为只能输入字母和数字')
          } else if (this.invoiceType !== 'normal' && (this.chooseItem.bankName === '' || !this.chooseItem.bankName)) {
            this.setRemindText('开户银行不能为空')
          } else if (this.invoiceType !== 'normal' && (this.chooseItem.bankAccount === '' || !this.chooseItem.bankAccount)) {
            this.setRemindText('开户银行账号不能为空')
          } else if (this.chooseItem.name === '' || !this.chooseItem.name) {
            this.setRemindText('收票人不能为空')
          } else if (!/^1\d{10}$/.test(this.chooseItem.telephone)) {
            this.setRemindText('联系电话不正确')
          } else if (this.chooseItem.detailAddress === '' || !this.chooseItem.detailAddress) {
            this.setRemindText('详细地址不能为空')
          } else if (!this.agreeInfo) {
            this.setRemindText('请阅读并勾选发票须知')
          } else {
            this.chooseItem.kind = this.invoiceType === 'normal' ? 1206 : 1205
            this.chooseItem.is_agree = true
            let params = new FormData()
            params.append('bill', JSON.stringify(this.chooseItem))
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$http.post('/trade/bill/save', params).then(res => {
              this.setRemindText('保存成功')
              this.$emit('addinvoiceBtn', str)
            }, config)
          }
        } else {
          this.$emit('addinvoiceBtn')
        }
      },
      addressData(item) {
        this.addressShow = false
        if (item) {
          this.chooseItem.address = item
          this.chooseItem.area = item.province + ',' + item.city + ',' + item.area
        }
      },
      setRemindText(str) {
        this.collectResult = str
        this.timeoutCount++
      }
    },
    components: {
      RemindBox,
      SelectAddress
    }
  }
</script>

<style scoped lang="scss">
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .addinvoice-wrapper {
    position: fixed;
    z-index: 99;
    background: #f1f3f6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .mobile-header{
      position: fixed;
      top: 0;
      z-index: 10;
      width:100%;
      height: 1.26rem;
      line-height: 1.26rem;
      /*border-bottom:.01rem solid #ccc;*/
      background: #3e82f5;
      padding:0 .2rem 0 .1rem;
      color:#fff;
    }
    .mobile-header p{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size:.36rem;
      text-align: center;
      width: 6rem;
      padding-left: 1rem;
    }
    .mobile-header a{
      font-size:.28rem;
      color:#fff;
      position: absolute;
    }
    .mobile-header a i{
      font-size: .48rem;
      margin-right: -.1rem;
    }
    .addinvoice-content-wrapper {
      margin: 1.26rem 0 0 0;
      height: calc(100vh - 1.26rem);
      overflow-y: scroll;
      .addinvoice-title {
        font-size: 0.28rem;
        color: #333;
        @include lineHeight(0.8rem);
        margin: 0 0.2rem;
      }
      .addinvoice-ul {
        background: #fff;
        margin: 0 0.2rem;
        padding-bottom: 0.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 0.07rem;
      }
      .addinvoice-focus {
        font-size: 0.28rem;
        color: #226ce7;
        line-height: 1.16rem;
        border-bottom: 1px solid #dcdcdc;
        margin: 0 0.2rem;
        .addinvoice-focus-name {
          width: 2.1rem;
        }
        .red {
          color: #ff0000;
        }
        .normal {
          .icon {
            font-size: 0.28rem;
            color: #333;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            border: 1px solid #dcdcdc;
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin-top: 0.32rem;
            &.active .icon-next {
              background: #226ce7;
              width: 0.3rem;
              height: 0.3rem;
              border-radius: 50%;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }
        input {
          width: 4.55rem;
          font-size: 0.28rem;
          height: 0.5rem;
          line-height: 0.5rem;
          color: #666;
        }
        .input {
          width: 4.55rem;
          font-size: 0.28rem;
          color: #666;
          position: relative;
          i {
            position: absolute;
            right: 0;
          }
        }
      }
      .addinvoice-agree {
        margin: 0.25rem 0.2rem 0;
        font-size: 0.24rem;
        color: #666;
        input[type="checkbox"] + label::before {
          content: "\a0";  /*不换行空格*/
          display: inline-block;
          width: 0.36rem;
          height: 0.36rem;
          vertical-align: top;
          margin-right: .05rem;
          border-radius: 0.07rem;
          background-color: #fff;
          text-indent: .15em;
          border: 1px solid #226ce7;
          line-height: 0.36rem;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
        }
        input[type="checkbox"]:checked + label::before {
          content: "\2713";
          color: #226ce7;
        }
        input {
          position: absolute;
          clip: rect(0, 0, 0, 0);
        }
        a {
          color: #226ce7
        }
      }
      .addinvoice-controll {
        font-size: 0.32rem;
        color: #fff;
        margin: 0.5rem 0.2rem 0;
        div {
          width: 3.16rem;
          @include lineHeight(0.77rem);
          border-radius: 0.07rem;
          text-align: center;
          &:first-child {
            background: #bfbfbf;
          }
          &:last-child {
            background: #3f84f6
          }
        }
      }
    }
  }
</style>