4dkankan_mobile/src/components/invoices/index.vue

<template>
  <div class="invoices-layout">
    <div class="invoice-header">
      <label class="check-con" @click="type='geren'">
        <span class="check-box">
          <span class="checkbox-inner" :class="{'checkbox-inner-checked':type==='geren'}"></span>
        </span>
        <span>个人</span>
      </label>
      <label class="check-con" @click="type='qiye'">
        <span class="check-box">
          <span class="checkbox-inner" :class="{'checkbox-inner-checked':type==='qiye'}"></span>
        </span>
        <span>企业</span>
      </label>
    </div>
    <div class="address-input-con" v-if="type==='qiye'">
      <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" 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.code" 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.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" 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>
      <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="$emit('closeInvoice', true)">
        <span>取 消</span>
      </button>
    </div>
    <div class="address-input-con" 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.title" 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="tempInvoice2.code" type="text" placeholder="税务登记号" />
          </div>
        </div>
      </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="$emit('closeInvoice', true)">
        <span>取 消</span>
      </button>
    </div>
  </div>
</template>

<script>
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'],
  computed: {
    tempInvoice2: function () {
      return cloneObj(this.invoice)
    },
    tempInvoice3: function () {
      return cloneObj(this.invoicet)
    }
  },
  data () {
    return {
      type: 'geren'
    }
  },
  methods: {
    blurHandle () {
    },
    saveInvoice () {
      let isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }
      let params = {}
      if (this.type === 'geren') {
        params = {
          invoiceType: 2,
          title: this.tempInvoice2.title,
          code: this.tempInvoice2.code
        }
      } else {
        let {title, code, organizedAddress, registerPhone, bankName, bankAccount} = this.tempInvoice3
        params = {
          invoiceType: 3,
          title,
          code,
          organizedAddress,
          registerPhone,
          bankName,
          bankAccount
        }
      }

      let test = Object.keys(params)
      for (let i = 0; i < test.length; i++) {
        if (!isObject(params[test[i]])) {
          return this.$toast.show('warn', '信息填写不完整')
        }
      }

      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)
          let type = this.type === 'geren' ? 2 : 3
          this.$store.dispatch('getInvoice', {
            type: type,
            params: {
              invoiceType: type
            }
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>