初始化仓库
This commit is contained in:
wangxiaowei
413
bundle/pages/invoice/invoice.vue
Normal file
413
bundle/pages/invoice/invoice.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user