realtorEasier-webSite/mobile/src/components/cinvoices/index.vue

<template>
  <div class="invoices-layout">
    <div class="address-input-con" v-if="selectedId===3">
      <template v-if="isShowInvoice3">
        <template v-if="invoicet.title">
          <div class="bc-item">
            <div class="bc-contact">
              <span>{{invoicet.title}}</span>
            </div>
            <div>{{invoicet.code}}</div>
            <div>{{invoicet.organizedAddress}}</div>
            <div>{{invoicet.registerPhone}}</div>
            <div>{{invoicet.bankName}}</div>
            <div>{{invoicet.bankAccount}}</div>
            <div class="bc-edit" @click="isShowInvoice3=false">编辑</div>
          </div>
        </template>
        <template v-else>
          <div class="bc-item">
            <div class="bc-contact">
              <span>暂无信息</span>
            </div>
            <div class="bc-edit" @click="isShowInvoice3=false">编辑</div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">发票抬头</div>
            <div class="ant-input">
              <input @blur="blurHandle"
                v-model="tempInvoice3.title"
                class="ant-input"
                type="text"
                maxlength='15'
                placeholder="请输入发票抬头"
              />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">纳税人识别号</div>
            <div class="ant-input">
              <input @blur="blurHandle" oninput="value=value.replace(/[^\d]/g,'')" maxlength='18' v-model="tempInvoice3.code" type="text" placeholder="请输入18位纳税人识别号" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">注册地址</div>
            <div class="ant-input">
              <input @blur="blurHandle" v-model="tempInvoice3.organizedAddress" type="text" placeholder="注册地址" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">注册电话</div>
            <div class="ant-input">
              <input @blur="blurHandle" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="tempInvoice3.registerPhone" type="text" placeholder="注册电话" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">开户银行</div>
            <div class="ant-input">
              <input @blur="blurHandle" v-model="tempInvoice3.bankName" type="text" placeholder="开户银行" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">银行账户</div>
            <div class="ant-input">
              <input @blur="blurHandle" v-model="tempInvoice3.bankAccount" type="text" placeholder="银行账户" />
            </div>
          </div>
        </div>
        <div class="wenxin-tip">
          <p>{{$t('mall.wenxinTip')}}：</p>
          <p>{{$t('mall.wenxinTipContent')}}</p>
        </div>
        <button @click="saveInvoice" type="submit" class="ant-btn ant-btn-primary">
          <span>保 存</span>
        </button>
        <button type="submit" class="ant-btn ant-btn-primary cancel" @click="isShowInvoice3=true">
          <span>取 消</span>
        </button>
      </template>
    </div>
    <div class="address-input-con" v-else>
      <template v-if="isShowInvoice2">
        <template v-if="invoice.title">
          <div class="bc-item">
            <div class="bc-contact">
              <span>{{invoice.title}}</span>
            </div>
            <div>{{invoice.code}}</div>
            <div>{{invoice.emailAddress}}</div>
            <div class="bc-edit" @click="isShowInvoice2=false">编辑</div>
          </div>
        </template>
        <template v-else>
          <div class="bc-item">
            <div class="bc-contact">
              <span>暂无信息</span>
            </div>
            <div class="bc-edit" @click="isShowInvoice2=false">编辑</div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">电子邮箱</div>
            <div class="ant-input">
              <input @blur="blurHandle" v-model="tempInvoice2.emailAddress" type="text" placeholder="请输入电子邮箱" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">抬头类型</div>
            <div style="position: relative;">
              <div class="invoice-select" @click="selected=!selected">
              <div class="select-txt">{{ selectedTxt }}</div>
              <i class="iconfont icon-xia"></i>
            </div>
            <ul class="invoice-item" :class="{'invoice-active':selected}">
              <li v-for="(item,i) in invoiceType" :key="i" @click="handleItem(item)">{{item}}</li>
            </ul>
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">发票抬头</div>
            <div class="ant-input">
              <input @blur="blurHandle" maxlength='15' v-model="tempInvoice2.title" type="text" placeholder="请输入发票抬头" />
            </div>
          </div>
        </div>
        <div class="address-input-item" v-if="selectedTxt === '企业'">
          <div class="address-sub">
            <div class="top-title">纳税人识别号</div>
            <div class="ant-input">
              <input @blur="blurHandle" oninput="value=value.replace(/[^\d]/g,'')" maxlength='18' v-model="tempInvoice2.code" type="text" placeholder="请输入18位纳税人识别号" />
            </div>
          </div>
        </div>
        <div class="wenxin-tip">
          <p>{{$t('mall.wenxinTip')}}：</p>
          <p>{{$t('mall.wenxinTipContent')}}</p>
        </div>
        <button @click="saveInvoice" type="submit" class="ant-btn ant-btn-primary">
          <span>保 存</span>
        </button>
        <button type="submit" class="ant-btn ant-btn-primary cancel" @click="isShowInvoice2=true">
          <span>取 消</span>
        </button>
      </template>
    </div>
  </div>
</template>

<script>
import { reg } from '@/util'
import { mapState } from 'vuex'

var cloneObj = function (obj) {
  var newObj = {}
  if (obj instanceof Array) {
    newObj = []
  }
  for (var key in obj) {
    var val = obj[key] || ''
    newObj[key] = typeof val === 'object' ? cloneObj(val) : val
  }
  return newObj
}
export default {
  props: ['invoice', 'invoicet', 'token', 'selectedId'],
  computed: {
    ...mapState({
      langToast: state => state.language.home.toast,
      language: state => state.language.current

    }),
    tempInvoice2: function () {
      return cloneObj(this.invoice)
    },
    tempInvoice3: function () {
      return cloneObj(this.invoicet)
    }
  },
  data () {
    return {
      isShowInvoice3: true,
      isShowInvoice2: true,
      selected: false,
      invoiceType: ['个人', '企业'],
      selectedTxt: '个人'
    }
  },
  watch: {
    isShowInvoice3 (newVal) {
      this.$emit('showInvoice', newVal)
    },
    isShowInvoice2 (newVal) {
      this.$emit('showInvoice', newVal)
    }
  },
  methods: {
    blurHandle () {

    },
    saveInvoice () {
      let isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }
      let params = {}
      let invoiceType = ''
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            return this.$toast.show('warn', (this.language === 'en' ? value[i].En : value[i].name) + this.langToast['7'])
          }
        }
        return true
      }
      if (this.selectedId === 2) {
        invoiceType = 2
        let title = isObject(this.tempInvoice2.title)
        let code = isObject(this.tempInvoice2.code)
        let emailAddress = isObject(this.tempInvoice2.emailAddress)
        if (this.selectedTxt !== '个人' && (!code || code.length !== 18)) {
          return this.$toast.show('warn', this.langToast['21'])
        }
        if (this.selectedTxt === '个人') {
          code = ''
        }
        if (!reg.email.test(emailAddress)) {
          return this.$toast.show('warn', this.langToast['8'])
        }

        params = {
          invoiceType,
          title,
          code,
          emailAddress
        }
        let checkStr = [
          {
            name: '发票抬头',
            En: 'Title',
            val: title
          },
          {
            name: '电子邮箱',
            En: 'Email',
            val: emailAddress
          }
        ]
        if (!check(checkStr)) {
          return
        }
      } else {
        let {title: title1, code: code1, organizedAddress: organizedAddress1, registerPhone: registerPhone1, bankName: bankName1, bankAccount: bankAccount1} = this.tempInvoice3
        invoiceType = 3
        let title = isObject(title1)
        let code = isObject(code1)
        let organizedAddress = isObject(organizedAddress1)
        let registerPhone = isObject(registerPhone1)
        let bankName = isObject(bankName1)
        let bankAccount = isObject(bankAccount1)

        params = {
          invoiceType,
          title,
          code,
          organizedAddress,
          registerPhone,
          bankName,
          bankAccount
        }
        let checkStr = [
          {
            name: '发票抬头',
            En: 'Title',
            val: title
          },
          {
            name: '纳税人识别号',
            En: 'Code',
            val: code
          },
          {
            name: '注册地址',
            En: 'Organized Address',
            val: organizedAddress
          },
          {
            name: '注册电话',
            En: 'Register Phone',
            val: registerPhone
          },
          {
            name: '开户银行',
            En: 'Bank Name',
            val: bankName
          },
          {
            name: '银行账号',
            En: 'Bank Account',
            val: bankAccount
          }
        ]
        if (!check(checkStr)) {
          return
        }

        if (!code || code.length !== 18) {
          return this.$toast.show('warn', this.langToast['21'])
        }

        if (!reg.guhua.test(registerPhone)) {
          return this.$toast.show('warn', this.langToast['22'])
        }
      }

      this.$http
        .post('user/invoice/save', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          let res = data.data
          if (res.code !== 0) return
          this.$emit('closeInvoice', true)
          this.isShowInvoice3 = true
          this.isShowInvoice2 = true
          let type = this.selectedId
          this.$store.dispatch('getInvoice', {
            type: type,
            params: {
              invoiceType: type
            }
          })
        })
    },
    handleItem (item) {
      this.selectedTxt = item
      this.selected = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.wenxin-tip {
  padding: 8px 10px;
  background: #f7f7f7;
  font-size: 10px;
  color: #202020;
  line-height: 15px;
}
</style>