hlm_pl_mall_h5/pages/member/invoice/InvoiceForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div container member-invoice-form">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar :title="getTitle" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
            <flex-line :show-border="true">
                <text class="span">发票类型</text>
                <view class="div" slot="right">
                <radio-group @change="radioChange">
                  <label v-for="(item, index) in invoice_state_options" :key="index">
                    <radio :value="item.value" :checked="invoice.invoice_state==item.value" />
                    <text>{{item.label}}</text>
                  </label>
                </radio-group>
                </view>
            </flex-line>
            <view>
                <view v-if="invoice.invoice_state=='1'">
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">发票抬头</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_title" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">纳税人识别号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_code" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">发票内容</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_content" /></view></flex-line>
                </view>
                <view v-if="invoice.invoice_state=='2'">
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">单位名称</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_company" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">纳税人识别号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_company_code" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">注册地址</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_reg_addr" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">注册电话</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_reg_phone" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">开户银行</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_reg_bname" /></view></flex-line>
                    <flex-line class="field-line" :show-border="true"><text class="span field-name">银行帐户</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="invoice.invoice_reg_baccount" /></view></flex-line>
                </view>
            </view>
            <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">{{getSumitTitle}}</view></view>
        </view>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { getInvoiceInfo, addInvoice, editInvoice } from '../../../api/memberInvoice'
import flexLine from '../../flexLine'
export default {
  name: 'InvoiceForm',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
    navHeight: 0,
    action:'',
    isFromCheckout:0,
    goBackLevel:0,
      invoice_state_options: [
        {
          label: '普通发票',
          value: '1'
        },
        {
          label: '增值税专用发票',
          value: '2'
        }
      ],
      invoice_id: 0,
      invoice: {
        invoice_state: '1',
        invoice_title: '',
        invoice_code: '',
        invoice_content: '',
        invoice_company: '',
        invoice_company_code: '',
        invoice_reg_addr: '',
        invoice_reg_phone: '',
        invoice_reg_bname: '',
        invoice_reg_baccount: ''
      }
    }
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine
  },
  onLoad: function (option) {
  this.isFromCheckout = option.isFromCheckout
  this.goBackLevel=option.goBackLevel
  this.action=option.action
    if (!this.isAddMode) {
      this.invoice_id = option.invoice_id
      getInvoiceInfo(this.invoice_id).then(res => {
        this.invoice.invoice_state = res.result.invoice_state
        this.invoice.invoice_title = res.result.invoice_title
        this.invoice.invoice_code = res.result.invoice_code
        this.invoice.invoice_content = res.result.invoice_content
        this.invoice.invoice_company = res.result.invoice_company
        this.invoice.invoice_company_code = res.result.invoice_company_code
        this.invoice.invoice_reg_addr = res.result.invoice_reg_addr
        this.invoice.invoice_reg_phone = res.result.invoice_reg_phone
        this.invoice.invoice_reg_bname = res.result.invoice_reg_bname
        this.invoice.invoice_reg_baccount = res.result.invoice_reg_baccount
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      // add: 添加地址，edit: 编辑地址
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增发票'
      } else {
        return '修改发票'
      }
    },
    getSumitTitle () {
      let isFromCheckout = this.isFromCheckout
      if (isFromCheckout) {
        return '保存并使用'
      } else {
        return '保存'
      }
    }
  },
  methods: {
    radioChange(e){
      this.invoice.invoice_state=e.detail.value
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    submit () {
      // 普通发票
      if (this.invoice.invoice_state === '1') {
        if (this.invoice.invoice_title === '') {
          uni.showToast({icon:'none',title: '请填写发票抬头'})
          return
        }
        if (this.invoice.invoice_code === '') {
          uni.showToast({icon:'none',title: '请填写纳税人识别号'})
          return
        }
        if (this.invoice.invoice_content === '') {
          uni.showToast({icon:'none',title: '请填写发票内容'})
          return
        }
      }
      // 专用发票
      if (this.invoice.invoice_state === '2') {
        if (this.invoice.invoice_company === '') {
          uni.showToast({icon:'none',title: '请填写单位名称'})
          return
        }
        if (this.invoice.invoice_company_code === '') {
          uni.showToast({icon:'none',title: '请填写纳税人识别号'})
          return
        }
        if (this.invoice.invoice_reg_addr === '') {
          uni.showToast({icon:'none',title: '请填写注册地址'})
          return
        }
        if (this.invoice.invoice_reg_phone === '') {
          uni.showToast({icon:'none',title: '请填写注册电话'})
          return
        }
        if (this.invoice.invoice_reg_bname === '') {
          uni.showToast({icon:'none',title: '请填写开户银行'})
          return
        }
        if (this.invoice.invoice_reg_baccount === '') {
          uni.showToast({icon:'none',title: '请填写银行帐户'})
          return
        }
      }

      if (this.isAddMode) {
        uni.showLoading({ title: '加载中' })
        addInvoice(this.invoice).then(
          (response) => {
            uni.hideLoading()
            this.updateSelectedInvoice()
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      } else {
        uni.showLoading({ title: '加载中' })
        editInvoice(this.invoice, this.invoice_id).then(
          (response) => {
            uni.hideLoading()
            this.updateSelectedInvoice()
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      }
    },
    updateSelectedInvoice () {
      uni.navigateBack({delta:1})
    }
  }

}
</script>
<style lang="scss">
    .member-invoice-form{
        .mint-radiolist {
            display: flex;
            .mint-cell {
                flex: 1;
                .mint-radio-input:checked + .mint-radio-core {
                    background-color: $primaryColor !important;
                    border-color: $primaryColor !important;
                }
                &:after{display: none}
            }
        }
    }

</style>
<style lang="scss" scoped>
    .main-content{background: #fff;padding:0 $pageSpace}

</style>