414 lines
14 KiB
Vue
414 lines
14 KiB
Vue
<template>
|
|
<view class="invoice">
|
|
<view class="box bg-white">
|
|
<!-- 发票类型 -->
|
|
<view class="item flex row-between" @click="handleOpenInvoiceType">
|
|
<view class="label">发票类型</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<text>{{ type == 0 ? '增值税电子普通发票' : '增值税专用发票' }}</text>
|
|
<u-icon name="arrow-right" size="22" v-if="formData.header_type == 1"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 抬头类型 -->
|
|
<view class="item flex row-between">
|
|
<view class="label">抬头类型</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-radio-group v-model="formData.header_type">
|
|
<u-radio
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:name="item.header_type"
|
|
:disabled="item.disabled"
|
|
:active-color="colorConfig.primary"
|
|
>
|
|
{{ item.name }}
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 发票抬头 -->
|
|
<view class="item flex row-between">
|
|
<view class="label">发票抬头</view>
|
|
<view class="content">
|
|
<u-input
|
|
v-model="formData.name"
|
|
input-align="right"
|
|
placeholder="填写需要开具发票的姓名"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 税号 -->
|
|
<view class="item flex row-between" v-show="formData.header_type === 1">
|
|
<view class="label">税号</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input
|
|
v-model="formData.duty_number"
|
|
input-align="right"
|
|
placeholder="纳税人识别号"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 邮箱 -->
|
|
<view class="item flex row-between">
|
|
<view class="label">邮箱</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input
|
|
v-model="formData.email"
|
|
input-align="right"
|
|
placeholder="您的联系邮箱"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 企业地址 -->
|
|
<view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
|
|
<view class="label">企业地址</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input v-model="formData.address" input-align="right" placeholder="必填" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 企业电话 -->
|
|
<view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
|
|
<view class="label">企业电话</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input v-model="formData.mobile" input-align="right" placeholder="必填" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开户银行 -->
|
|
<view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
|
|
<view class="label">开户银行</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input v-model="formData.bank" input-align="right" placeholder="必填" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 银行账号 -->
|
|
<view class="item flex row-between" v-show="type == 1 && formData.header_type == 1">
|
|
<view class="label">银行账号</view>
|
|
<view class="content flex-1 flex row-right">
|
|
<u-input
|
|
v-model="formData.bank_account"
|
|
input-align="right"
|
|
placeholder="必填"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer">
|
|
<view class="" v-if="order_id && shop_id">
|
|
<button class="submit-btn br60 white btn" size="lg" @click="handleInvoiceAdd">
|
|
提交申请
|
|
</button>
|
|
</view>
|
|
<view class="" v-if="invoice_id && shop_id">
|
|
<button class="submit-btn br60 white btn" size="lg" @click="handleInvoiceEdit">
|
|
提交编辑
|
|
</button>
|
|
</view>
|
|
<view class="" v-if="shop_id && !invoice_id && !order_id">
|
|
<button class="submit-btn br60 white btn" size="lg" @click="handleConfirm">
|
|
确定
|
|
</button>
|
|
</view>
|
|
<view class="m-t-40">
|
|
<button class="cancel-btn br60 white btn" size="lg" @click="handleCancel">
|
|
不开发票
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 发票类型选择 -->
|
|
<u-popup
|
|
v-model="showCoupon"
|
|
border-radius="14"
|
|
mode="bottom"
|
|
closeable
|
|
:safe-area-inset-bottom="true"
|
|
@open="type = formData.type"
|
|
@close="handleCloseInvoiceType"
|
|
>
|
|
<view class="p-30 bg-body">
|
|
<view class="text-center">发票类型选择</view>
|
|
</view>
|
|
<view class="invoice-type bg-body">
|
|
<!-- 普票 -->
|
|
<view class="invoice-type--item bg-white flex row-between" @click="type = 0">
|
|
<view>
|
|
<view class="nr black">增值税电子普通发票</view>
|
|
<view class="xs lighter m-t-14">默认发送至所提供的电子邮件</view>
|
|
</view>
|
|
<u-checkbox :value="type == 0" shape="circle" name="0"></u-checkbox>
|
|
</view>
|
|
<!-- 专票 -->
|
|
<view
|
|
class="invoice-type--item bg-white flex row-between"
|
|
@click="type = 1"
|
|
v-show="spec_invoice"
|
|
>
|
|
<view>
|
|
<view class="nr black">增值税专用发票</view>
|
|
<view class="xs lighter m-t-14">纸质发票开出后将以邮寄形式交付</view>
|
|
</view>
|
|
<u-checkbox :value="type == 1" shape="circle" name="1"></u-checkbox>
|
|
</view>
|
|
<!-- 底部确认按钮 -->
|
|
<view class="invoice-type-confirm-btn">
|
|
<button class="confirm br60 white btn" size="lg" @click="handleChoise">
|
|
确定
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInvoiceSetting, apiInvoiceAdd, apiInvoiceEdit, apiInvoiceDetail } from '@/api/shop.js'
|
|
import { invoiceType } from '@/utils/type.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
shop_id: '', // 商家ID
|
|
invoice_id: '', // 发票ID （编辑时
|
|
order_id: '', // 订单ID （添加时
|
|
showCoupon: false,
|
|
list: [
|
|
{
|
|
name: '个人',
|
|
header_type: 0,
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '企业',
|
|
header_type: 1,
|
|
disabled: false
|
|
}
|
|
],
|
|
formData: {
|
|
id: '', // 必填 int 发票id
|
|
order_id: '', // 必填 int 订单id
|
|
type: 0, // 必填 int 发票类型 0-普通 1-专用
|
|
header_type: 0, // 必填 int 抬头类型 0-个人 1-企业
|
|
name: '', // 必填 string 抬头名称
|
|
duty_number: '', // 否 string 税号
|
|
email: '', // 否 string 邮箱
|
|
mobile: '', // 否 string 企业电话
|
|
address: '', // 否 string 企业地址
|
|
bank: '', // 否 string 开户行
|
|
bank_account: '' // 否 string 银行账号
|
|
},
|
|
type: 0, //
|
|
open_invoice: 0, // 发票开关 0- 关闭 1-开启
|
|
spec_invoice: 0 // 是否支持专票 0-不支持 1-支持
|
|
}
|
|
},
|
|
methods: {
|
|
// 初始化发票
|
|
initInvoiceSetting() {
|
|
getInvoiceSetting({
|
|
shop_id: this.shop_id
|
|
}).then((res) => {
|
|
this.spec_invoice = res.data.spec_invoice
|
|
if (res.data.open_invoice) this.open_invoice = res.data.open_invoice
|
|
else this.$toast({ title: '当前店铺暂未开启发票' })
|
|
})
|
|
},
|
|
// 获取发票详情
|
|
getInvoiceDetail() {
|
|
apiInvoiceDetail({ id: this.invoice_id }).then((res) => {
|
|
for (const key in res.data) {
|
|
if (!this.formData.hasOwnProperty(key)) continue
|
|
this.formData[key] = res.data[key]
|
|
}
|
|
})
|
|
},
|
|
initRules() {
|
|
const form = this.formData
|
|
if (!this.open_invoice) {
|
|
this.$toast({ title: '当前店铺暂未开启发票' })
|
|
return false
|
|
}
|
|
if (!form.name) {
|
|
this.$toast({ title: '请输入发票抬头' })
|
|
return false
|
|
}
|
|
if (!form.duty_number && form.header_type == 1) {
|
|
this.$toast({ title: '请输入税号' })
|
|
return false
|
|
}
|
|
if (!form.email) {
|
|
this.$toast({ title: '请输入邮箱地址' })
|
|
return false
|
|
}
|
|
if (!/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/.test(form.email)) {
|
|
this.$toast({ title: '邮箱输入有误,请重新输入' })
|
|
return false
|
|
}
|
|
if (!form.address && form.header_type == 1 && form.type == 1) {
|
|
this.$toast({ title: '请输入企业地址' })
|
|
return false
|
|
}
|
|
if (!form.mobile && form.type == 1) {
|
|
this.$toast({ title: '请输入手机号码' })
|
|
return false
|
|
}
|
|
if (!form.bank && form.header_type == 1 && form.type == 1) {
|
|
this.$toast({ title: '请输入开户银行' })
|
|
return false
|
|
}
|
|
if (!form.bank_account && form.header_type == 1 && form.type == 1) {
|
|
this.$toast({ title: '请输入银行账号' })
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
// 打开发票类型选择
|
|
handleOpenInvoiceType() {
|
|
if (this.formData.header_type == 0) return
|
|
this.showCoupon = true
|
|
},
|
|
// 关闭发票类型选择
|
|
handleCloseInvoiceType() {
|
|
if (this.type != this.formData.type) {
|
|
this.type = this.type == 1 ? 0 : 1
|
|
}
|
|
},
|
|
// 选择发票类型
|
|
handleChoise() {
|
|
this.formData.type = this.type
|
|
this.showCoupon = false
|
|
},
|
|
// 确定发票（订单下单时
|
|
handleConfirm() {
|
|
if (!this.initRules()) return
|
|
uni.$emit('invoice', { ...this.formData, shop_id: this.shop_id })
|
|
uni.navigateBack()
|
|
},
|
|
// 确认添加
|
|
handleInvoiceAdd() {
|
|
if (!this.initRules()) return
|
|
apiInvoiceAdd({ ...this.formData, order_id: this.order_id }).then((res) => {
|
|
if (res.code == 1) {
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
}
|
|
})
|
|
},
|
|
// 确认编辑
|
|
handleInvoiceEdit() {
|
|
if (!this.initRules()) return
|
|
apiInvoiceEdit({ ...this.formData }).then((res) => {
|
|
if (res.code == 1) {
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
}
|
|
})
|
|
},
|
|
// 不开发票
|
|
handleCancel() {
|
|
if (!this.order_id && !this.invoice_id) {
|
|
uni.$emit('invoice', { del: true, shop_id: this.shop_id })
|
|
}
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
const query = this.$Route.query
|
|
switch (query.type * 1) {
|
|
case invoiceType['SETTLEMENT']:
|
|
this.shop_id = query.shop_id || ''
|
|
if (query.invoice != '{}') {
|
|
this.formData = JSON.parse(query.invoice)
|
|
this.type = this.formData.type
|
|
}
|
|
break
|
|
case invoiceType['ORDERDETAILEdit']:
|
|
this.invoice_id = query.invoice_id || ''
|
|
this.shop_id = query.shop_id || ''
|
|
this.getInvoiceDetail()
|
|
break
|
|
case invoiceType['ORDERDETAILADD']:
|
|
this.order_id = query.order_id || ''
|
|
this.shop_id = query.shop_id || ''
|
|
break
|
|
}
|
|
// 初始化发票
|
|
this.initInvoiceSetting()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.invoice {
|
|
height: calc(100vh - env(safe-area-inset-bottom));
|
|
padding: 24rpx;
|
|
position: relative;
|
|
|
|
.box {
|
|
padding: 20rpx 0;
|
|
border-radius: 16rpx;
|
|
|
|
.item {
|
|
padding: 16rpx 30rpx;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: $-color-black;
|
|
}
|
|
|
|
.content {
|
|
min-width: 440rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 24rpx;
|
|
position: absolute;
|
|
.btn {
|
|
height: 88rpx;
|
|
}
|
|
.submit-btn {
|
|
color: $-color-white;
|
|
background-color: #e39b37;
|
|
}
|
|
.cancel-btn {
|
|
color: #e39b37;
|
|
background-color: $-color-white;
|
|
}
|
|
}
|
|
|
|
.invoice-type {
|
|
padding: 40rpx;
|
|
padding-bottom: 0;
|
|
|
|
.invoice-type--item {
|
|
padding: 28rpx 36rpx;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.invoice-type-confirm-btn {
|
|
padding: 90rpx 0 50rpx 0;
|
|
|
|
.confirm {
|
|
background-color: #ff9e1e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|