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

<template>
  <div>
    <div class="select-layout">
      <p class="sub-title">
        <span>发票金额</span>
      </p>
      <div class="address-input-con">
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">开票金额</div>
            <div class="ant-input">
              <input v-model="amount" oninput="value=Math.max(Number(value.replace(/[^\d]/g,'')),1)"  type="text" placeholder="请输入开票金额" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="select-layout">
      <p class="sub-title">
        <span>发票信息</span>
      </p>
      <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 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 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 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 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 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 v-model="tempInvoice3.bankAccount" type="text" placeholder="银行账户" />
            </div>
          </div>
        </div>
      </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 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 v-model="tempInvoice2.code" type="text" placeholder="税务登记号" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="select-layout">
      <p class="sub-title">
        <span>收货地址</span>
      </p>
      <div class="address-input-con">
        <div class="address-input-item">
          <div class="address-sub address-name">
            <div class="top-title">姓名</div>
            <div class="ant-input">
              <input v-model="tempAddress.shipName" type="text" placeholder="姓名" />
            </div>
          </div>
          <div class="address-sub address-phone">
            <div class="top-title">联系电话</div>
            <div class="ant-input">
              <input v-model="tempAddress.shipMobile" type="text" placeholder="联系电话" />
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub prov-name">
            <div class="top-title">省份</div>
            <div class="ant-input prov" @click="handleSelect('prov')">
              {{citylist[currentPID]['p']||'省份'}}
              <ul v-if="prov">
                <li
                  v-for="(item,i) in citylist"
                  :key="i"
                  @click="handleClick('currentPID',i)"
                >{{item.p}}</li>
              </ul>
            </div>
          </div>
          <div class="address-sub city-phone">
            <div class="top-title">城市</div>
            <div class="ant-input city" @click="handleSelect('city')">
              {{currentProv[currentCID]['n']||'城市'}}
              <ul v-if="city">
                <li
                  v-for="(item,i) in currentProv"
                  :key="i"
                  @click="handleClick('currentCID',i)"
                >{{item.n}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="address-input-item">
          <div class="address-sub">
            <div class="top-title">地址</div>
            <div class="ant-input dist" @click="handleSelect('dist')">
              {{currentCity[currentSID]['s']||'区/县'}}
              <ul v-if="dist">
                <li
                  v-for="(item,i) in currentCity"
                  :key="i"
                  @click="handleClick('currentSID',i)"
                >{{item.s}}</li>
              </ul>
            </div>
            <div class="ant-input">
              <input v-model="tempAddress.shipAddress" type="text" placeholder="详细地址" />
            </div>
          </div>
        </div>
        <p class="p-dec">请务必详细填写相符无误的地址以免耽误收货</p>
      </div>
    </div>
    <div class="invoice-save">
      <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="$router.back()">
        <span>取 消</span>
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { citylist } from './city'
let sle = ['prov', 'city', 'dist']

export default {
  data () {
    let idArr = ['', '', '']

    return {
      type: 'geren',
      amount: '',
      tempInvoice2: {},
      tempInvoice3: {},
      tempAddress: {},
      citylist,
      prov: false,
      city: false,
      dist: false,
      currentPID: idArr[0] || 18,
      currentCID: idArr[1] || 3,
      currentSID: idArr[2] || 2,
      areaPath: ''
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token
    }),
    currentProv: function () {
      let tmp = this.citylist[this.currentPID]
      return tmp.c
    },
    currentCity: function () {
      let cprov = this.citylist[this.currentPID]
      let tmp = cprov.c[this.currentCID]
      return tmp.a
    }
  },
  watch: {
    currentProv () {
      this.currentCID = 0
      this.currentSID = 0
    }
  },
  methods: {
    handleSelect (item) {
      sle.forEach(i => {
        if (i === item) {
          this[i] = !this[i]
        } else {
          this[i] = false
        }
      })
    },
    handleClick (id, i) {
      this[id] = i
      this.handleChange()
    },
    handleChange () {
      let prov = this.citylist[this.currentPID]
      let city = prov.c[this.currentCID]
      let dist = city.a[this.currentSID]
      this.areaPath = [prov.p, city.n, dist.s]
      console.log(this.areaPath)
    },
    async saveInvoice () {
      let params = {}
      let invoiceType = ''
      if (this.type === 'geren') {
        invoiceType = 2
        let { title = '', code = '' } = this.tempInvoice2
        params = {
          invoiceType,
          title,
          code
        }
      } else {
        let {
          title = '',
          code = '',
          organizedAddress = '',
          registerPhone = '',
          bankName = '',
          bankAccount = ''
        } = this.tempInvoice3
        invoiceType = 3
        params = {
          invoiceType,
          title,
          code,
          organizedAddress,
          registerPhone,
          bankName,
          bankAccount
        }
      }
      let {
        shipName = '',
        shipMobile = '',
        shipAddress = ''
      } = this.tempAddress

      this.tempAddress.shipAreaPath = this.areaPath.join(',')
      this.tempAddress.amount = Number(this.amount)
      this.tempAddress.shipName = shipName || ''
      this.tempAddress.shipMobile = shipMobile || ''
      this.tempAddress.shipAddress = shipAddress || ''

      let temp = Object.keys(this.tempAddress)
      temp.forEach(item => {
        params[item] = this.tempAddress[item] || ''
      })
      console.log(params)
      let arr = Object.keys(params)
      for (let i = 0; i < arr.length; i++) {
        if (!params[arr[i]]) {
          return this.$toast.show('warn', '信息填写不能为空')
        }
      }

      params['cameraId'] = ''

      let res = await this.$http.post('/user/invoice/add', params, {
        headers: {
          token: this.token
        }
      })
      let response = res.data

      if (response.code === 0) {
        this.$toast.show('success', '开票成功', () => {
          this.$router.replace({name: 'consumption'})
        })
      } else {
        return this.$toast.show('warn', response.msg, () => {})
      }
    }
  },
  mounted () {
    this.handleChange()
  }
}
</script>

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