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" ref="ScrollContent">
      <div>
        <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 ? changeType('speci') : ''" :class="{'noclick': isSaveinvoiceType === 1205}">
                <div class="icon" :class="{'active': invoiceType === 'speci', 'noclick2': isSaveinvoiceType === 1205}">
                  <div class="icon-next"></div>
                </div>
                增值税专票
              </div>
              <div class="normal pull-left" @click="isSaveinvoiceType === 0 ? changeType('normal') : ''" :class="{'noclick': isSaveinvoiceType === 1206}">
                <div class="icon" v-bind:class="{'active' : invoiceType === 'normal', 'noclick2': isSaveinvoiceType === 1206}">
                  <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" 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.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" 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.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" oninput="if(value.length>30)value=value.slice(0,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="number" oninput="if(value.length>11)value=value.slice(0,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" maxlength="30"/>
            </div>
          </div>

          <div class="line addinvoice-agree" v-if="joinType === 'add'" style="line-height: 0.36rem">
            <span class="inline-block title">
               <label class="bottom-modal-check mobile-cart-check" :class="{active: agreeInfo}" @click="agreeInfo = !agreeInfo">
                 <!--<input type="checkbox">-->
               </label>
              我已阅读并同意<a @click="showRemindStr = true">《发票须知》</a>
            </span>
            <!--<input type="checkbox" id="awesome" :checked="agreeInfo" @click="agreeInfo = !agreeInfo"/>-->
            <!--<label for="awesome"></label>-->
          </div>

          <div class="addinvoice-controll clearfix">
            <div class="pull-left" @click="goBack()">取消</div>
            <div class="pull-right" @click="goBack(true)">确认</div>
          </div>
          <div style="width:100%;height:1.2rem;position: relative"></div>
      </div>
      </div>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <select-address :className="''" :isShow="addressShow" @closeAction="addressData"></select-address>
    <remind-str :showRemind="showRemindStr"
                :text="remindText"
                @closeAction="showRemindStr = false"
    ></remind-str>
  </div>
</template>

<script>
  import { RemindBox } from '~components/mobile/common'
  import { RemindStr } from '~components/mobile/base'
  import SelectAddress from '~components/mobile/base/SelectAddress.vue'
  import Bscroll from 'better-scroll'
  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
        }
      }
      this.$nextTick(res => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.ScrollContent, {click: true})
        } else {
          this.scroll.refresh()
        }
      })
    },
    data() {
      return {
        invoiceType: 'speci',
        agreeInfo: false,
        collectResult: '',
        timeoutCount: 0,
        addressShow: false,
        showRemindStr: false,
        remindText : '<div style="font-size: 0.3rem">为确保发票的开具顺利，在【订单信息】页面填写开票信息后请认真核对，因为您填写的错误信息导致的损失由您自行承担。</div>' +
        '<p style="font-size: 0.3rem;margin: 0.1rem 0">1.  如您收到的发票与您的开票信息、订单信息不符，请及时向卖家提出更换发票申请。</p>' +
        '<p style="font-size: 0.3rem;margin: 0.1rem 0">2.  发票与您的开票信息、订单信息一致的情况下，发票一经开出，恕不退换。</p>' +
        '<p style="font-size: 0.3rem">3.  补开发票的同时要补交税费。</p>'
      }
    },
    methods: {
      changeType(str) {
        this.scroll.refresh()
        this.invoiceType = str
      },
      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 (this.chooseItem.telephone === '' || !this.chooseItem.telephone) {
            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,
      RemindStr
    }
  }
</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-center-header p.en-name {
      font-size: .3rem;
    }
    .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;*/
      overflow: hidden;
      .addinvoice-title {
        font-size: 0.28rem;
        color: #333;
        @include lineHeight(0.8rem);
        margin: 0 0.2rem;
      }
      .addinvoice-ul {
        background: #fff;
        margin: 0 0.2rem;
        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.2rem;
        }
        .red {
          color: #ff0000;
        }
        .noclick {
          color: #999;
        }
        .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 {
              border: 1px solid #226ce7;
            }
            &.noclick2 {
              border: 1px solid #999;
              color: #999;
            }
            &.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.4rem;
          font-size: 0.28rem;
          height: 0.5rem;
          line-height: 0.5rem;
          color: #666;
        }
        .input {
          width: 4.4rem;
          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>