jsm-mall-h5-front/src/packageMine/pages/invoice/form.vue

<template>
  <zj-page-layout bgColor="#ffffff" hasFooter>
    <view class="all-container">
      <view class="title">发票明细</view>
      <view class="list" v-if="orderType == 'ORDER'">
        <view class="item" v-for="(item, index) in orderDetail.orderDetails" :key="index">
          <view class="name">{{ item.goodsName }}</view>
          <view class="right">
            <view class="price">¥{{ item.price | priceFilter }}</view>
            <view class="num">x{{ item.num }}</view>
          </view>
        </view>
      </view>
      <view class="list" v-else>
        <view class="item">
          <view class="name">{{ orderDetail.increContent }}</view>
          <view class="right">
            <view class="price">¥{{ orderDetail.amount | priceFilter }}</view>
          </view>
        </view>
      </view>

      <view class="title mt40">开票信息</view>
      <view class="form">
        <view class="row">
          <view class="label">发票类型</view>
          <view class="radio" :class="taxType == 1 ? 'active' : ''" @tap="taxType = 1">电子普通发票</view>
          <view class="radio" :class="taxType == 2 ? 'active' : ''" @tap="taxType = 2">专用发票</view>
        </view>
        <view class="row">
          <view class="label">发票内容</view>
          <view class="radio" :class="taxContent == 1 ? 'active' : ''" @tap="taxContent = 1">商品明细</view>
          <view class="radio" :class="taxContent == 2 ? 'active' : ''" @tap="taxContent = 2">商品类别</view>
        </view>
        <view class="row">
          <view class="label">抬头类型</view>
          <view class="radio" :class="headerType == 1 ? 'active' : ''" @tap="headerType = 1">个人</view>
          <view class="radio" :class="headerType == 2 ? 'active' : ''" @tap="headerType = 2">单位</view>
        </view>
        <view class="row">
          <view class="label">*抬头名称</view>
          <u--textarea placeholder="请输入抬头名称" border="none" autoHeight v-model="name"></u--textarea>
          <u-button type="primary" shape="circle" text="获取发票抬头" @click="getInvoice"></u-button>
        </view>
        <view class="row" v-if="headerType == 2">
          <view class="label">*单位税号</view>
          <u--input placeholder="请输入单位税号" border="none" v-model="payerNum"></u--input>
        </view>
        <view class="row">
          <view class="label">*收票邮箱</view>
          <u--input placeholder="请输入收票邮箱" border="none" v-model="email"></u--input>
        </view>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="申请开票" @click="submitData"></u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
import wx from 'weixin-js-sdk'
import { isEmail } from '@/common/utils/verify.js'
import { wxConfig, mini_env } from '@/common/utils/util'
export default {
  data() {
    return {
      orderType: null,
      orderId: null,
      orderDetail: {},
      taxType: 1,
      taxContent: 1,
      headerType: 1,
      name: '',
      payerNum: '',
      email: '',
      pamcs: ''
    }
  },

  onLoad(data) {
    mini_env(bool => {
      if (bool) {
        var { orderType, orderId } = data
        this.orderType = orderType
        this.orderId = orderId
        this.getOrderDetail()
        if (data.invoice_type) {
          this.headerType = data.invoice_type == 1 ? 1 : 2
          if (data.invoice_type == 0 && data.invoice_taxNumber) {
            this.payerNum = data.invoice_taxNumber || ''
          }
        }
        if (data.invoice_title) {
          this.name = data.invoice_title
        }
        if (data.invoice_taxType) {
          this.taxType = Number(data.invoice_taxType) || 1
        }
        if (data.invoice_taxContent) {
          this.taxContent = Number(data.invoice_taxContent) || 1
        }
        if (data.invoice_email) {
          this.email = data.invoice_email
        }
      } else {
        var { orderType, orderId } = data
        this.orderType = orderType
        this.orderId = orderId
        this.getOrderDetail()
        wxConfig()
      }
    })
  },

  methods: {
    getOrderDetail() {
      if (this.orderType == 'ORDER') {
        this.$api
          .get('/order/detail', {
            orderId: this.orderId
          })
          .then(res => {
            this.orderDetail = res.data || {}
          })
      } else {
        this.$api
          .post('/increConfig/detailIncre', {
            id: this.orderId
          })
          .then(res => {
            this.orderDetail = res.data || {}
          })
      }
    },

    submitData() {
      if (!this.name) return this.$toast('请输入抬头名称')
      if (this.headerType == 2 && !this.payerNum) return this.$toast('请输入单位税号')
      if (!this.email) return this.$toast('请输入收票邮箱')
      if (this.email && !isEmail(this.email)) return this.$toast('收票邮箱格式不正确')

      this.$api
        .postJson('/user/order/tax/save', {
          userId: this.$store.state.user.userId,
          orderType: this.orderType,
          orderId: this.orderId,
          taxType: this.taxType == 1 ? false : true,
          content: this.taxContent == 1 ? '商品明细' : '商品类别',
          type: this.headerType == 1 ? false : true,
          name: this.name,
          taxNo: this.payerNum,
          receiverEmail: this.email
        })
        .then(res => {
          this.$navToPage(
            {
              url: '/packageMine/pages/invoice/result?orderTaxId=' + res.data.orderTaxId
            },
            'redirectTo'
          )
        })
    },

    getInvoice() {
      mini_env(bool => {
        if (bool) {
          uniWebview.navigateTo({
            url: `/pages/getInvoiceTitle/getInvoiceTitle?url=${encodeURIComponent(
              window.location.href +
                `&invoice_taxType=${this.taxType}&invoice_taxContent=${this.taxContent}&invoice_email=${this.email}`
            )}`
          })
          uni.navigateBack()
        } else {
          wx.invoke(
            'chooseInvoiceTitle',
            {
              scene: 1
            },
            res => {
              if (res.choose_invoice_title_info || res.chooseInvoiceTitleInfo) {
                const data = JSON.parse(res.choose_invoice_title_info || res.chooseInvoiceTitleInfo)
                this.headerType = data.type == 1 ? 1 : 2
                this.name = data.title
                if (data.type == 0) {
                  this.payerNum = data.taxNumber || ''
                }
              }
            }
          )
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.all-container {
  padding: 30rpx;

  .title {
    font-weight: 600;
    font-size: 36rpx;
  }

  .list {
    .item {
      display: flex;
      margin-top: 20rpx;

      .name {
        font-size: 28rpx;
        flex: 1;
      }

      .right {
        margin-left: 30rpx;
        text-align: right;

        .price {
          font-size: 28rpx;
        }

        .num {
          font-size: 28rpx;
          color: $sec-font;
          margin-top: 10rpx;
        }
      }
    }
  }

  .form {
    .row {
      display: flex;
      align-items: center;
      margin-top: 30rpx;

      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 30rpx;
      }

      .radio {
        width: 230rpx;
        height: 60rpx;
        border-radius: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f1f1;
        margin-right: 30rpx;
        font-size: 28rpx;
        box-sizing: border-box;

        &:last-child {
          margin-right: 0;
        }

        &.disabled {
          background: #f8f8f8;
          color: $sec-font;
        }

        &.active {
          background: #ffffff;
          color: $theme-color;
          border: 1px solid $theme-color;
        }
      }

      ::v-deep .u-input {
        height: 60rpx;
      }
      ::v-deep .u-textarea {
        padding: 0;
      }

      ::v-deep .u-button {
        width: 190rpx;
        height: 60rpx;
      }
    }
  }
}
</style>