HNKDBOSS-WEB/hn-shop-uniapp/pages/invoice/index.vue

<template>
	<view class="container">
		<view>
			<u-empty v-if="!invoiceList.length" mode="history" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<view v-else>
				<view v-for="(item,index) in invoiceList" :key="index">
					<u-card :title="item.orderinvoicegs" :sub-title="item.orderinvoiceid" padding="20"
						style="margin:0;">
						<template v-slot:body>
							<view>
								<view class="invoice-item">
									发票类型：{{item.orderinvoicetype}}
								</view>
								<view class="invoice-item">
									发票金额：{{item.orderinvoiceprice}}
								</view>
								<view class="invoice-item">
									公司名称：{{item.orderinvoicegs}}
								</view>
								<view class="invoice-item">
									纳税人识别号：{{item.orderinvoicesh}}
								</view>
								<view class="invoice-item">
									地址：{{item.orderinvoiceaddress}}
								</view>
								<view class="invoice-item">
									电话：{{item.orderinvoicetel}}
								</view>
								<view class="invoice-item">
									开户行：{{item.orderinvoiceyhmc}}
								</view>
								<view class="invoice-item">
									银行卡号：{{item.orderinvoiceyhcode}}
								</view>
								<view class="invoice-item">
									电子邮箱：{{item.orderinvoicemail}}
								</view>
								<view class="invoice-item">
									发票状态：
									<u-tag type="warning" text="待审核" mode="light" size="mini"
										v-if="item.orderinvoicestatus==='待审核'" />
									<u-tag type="success" text="已开票" mode="light" size="mini"
										v-if="item.orderinvoicestatus==='已开票'" />
									<u-tag type="error" text="已驳回" mode="light" size="mini"
										v-if="item.orderinvoicestatus==='已驳回'" />
								</view>
							</view>
						</template>
						<!-- <template v-slot:foot>
							<view class=""><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
						</template> -->
					</u-card>
				</view>
			</view>
			<u-button type="primary" @click="addInvoice" style="margin-top: 30px;" v-if="allowInvoice">发票申请</u-button>
		</view>

		<!-- 发票申请 -->
		<u-popup v-model="popupShow" mode="bottom" @close="popUpClose" @open="popUpopen" :mask-close-able="false"
			closeable>
			<view style="padding:10px;">
				<text>请输入发票信息：</text>
				<u-form :model="form" ref="invoiceForm" :label-width="200" style="margin-top: 20px;">
					<u-form-item label="发票类型" prop="orderinvoicetype" required>
						<u-radio-group v-model="form.orderinvoicetype" @change="radioGroupChange">
							<u-radio v-model="item.checked" v-for="(item, index) in invoiceTypeOptions" :key="index"
								:name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="发票抬头" prop="orderinvoicetoptype"><u-input
							v-model="form.orderinvoicetoptype" /></u-form-item>
					<u-form-item label="公司名称" prop="orderinvoicegs"><u-input
							v-model="form.orderinvoicegs" /></u-form-item>
					<u-form-item label="纳税人识别号" prop="orderinvoicesh"><u-input
							v-model="form.orderinvoicesh" /></u-form-item>
					<u-form-item label="地址" prop="orderinvoiceaddress"><u-input type="textarea"
							v-model="form.orderinvoiceaddress" /></u-form-item>
					<u-form-item label="电话" prop="orderinvoicetel"><u-input
							v-model="form.orderinvoicetel" /></u-form-item>
					<u-form-item label="开户行" prop="orderinvoiceyhmc"><u-input
							v-model="form.orderinvoiceyhmc" /></u-form-item>
					<u-form-item label="银行卡号" prop="orderinvoiceyhcode"><u-input
							v-model="form.orderinvoiceyhcode" /></u-form-item>
					<u-form-item label="电子邮箱" prop="orderinvoicemail"><u-input
							v-model="form.orderinvoicemail" /></u-form-item>
				</u-form>
				<u-button type="primary" @click="formSubmit" :loading="submitLoading">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as AppApi from '@/api/app'
	import * as invoiceApi from '@/api/invoice'

	export default {
		data() {
			return {
				payorderid: '',
				popupShow: false,
				submitLoading: false,
				invoiceNormal: true, //是否是普通发票
				form: {
					orderinvoicetype: '普通发票-纸质',
				},
				invoiceTypeOptions: [],
				rules: {
					orderinvoicetype: [{
						required: true,
						message: '请选择发票类型',
						trigger: ['change', 'blur']
					}],
					orderinvoicetel: [{
						pattern: /^1[3456789]\d{9}$/,
						message: '请输入电话',
						trigger: ['change', 'blur']
					}],
					orderinvoicemail: [{
						pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
						message: '请输入正确的邮箱',
						trigger: ['change', 'blur']
					}]
				},
				payOrderDetail: {},
				invoiceList: []
			}
		},
		onLoad(options) {
			this.payorderid = options.payorderid
			this.getInvoiceList(options.payorderid)
			this.getInvoiceTypeList()
			this.getPayOrderDetail(options.payorderid)
		},
		watch: {
			// 发票抬头改变时设置公司名称
			'form.orderinvoicetoptype': {
				handler(newVal) {
					this.form.orderinvoicegs = newVal
				},
				immediate: true,
				deep: true,
			}
		},
		computed: {
			//是否允许开票（包含 待审核 or 已开票）
			allowInvoice() {
				return !this.invoiceList.some(item => ['待审核', '已开票'].includes(item.orderinvoicestatus))
			}
		},
		methods: {
			async getInvoiceList(payorderid) {
				// 获取支付数据
				const params = {
					pageindex: 1,
					rows: 9999,
					orderinvoiceorderid: payorderid,
					pagevalue: 357
				}
				const {
					Data
				} = await AppApi.getPalList(params)
				this.invoiceList = Data.Data
			},
			addInvoice() {
				this.popupShow = true
				setTimeout(() => {
					this.$refs.invoiceForm.setRules(this.rules);
				}, 1000)
			},
			popUpClose() {
				if (this.$refs.invoiceForm) this.$refs.invoiceForm.resetFields();
			},
			popUpopen() {
				//...
			},
			async formSubmit() {
				this.submitLoading = true
				const params = {
					orderinvoiceorderid: this.payorderid, //订单编号
					orderinvoiceyhid: this.payOrderDetail.payorderyhinfoid.value, //用户id
					orderinvoicecustomerid: this.payOrderDetail.payordercustomerid.value, //客户编号
				}
				const {
					Status
				} = await invoiceApi.addInvoice(Object.assign(params, this.form))
				this.submitLoading = false
				if (Status === 0) {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					this.popupShow = false
					this.getInvoiceList(this.payorderid)
				}
			},
			async getInvoiceTypeList() {
				const params = {
					pagevalue: 358,
					groupname: 'orderinvoicetype'
				}
				const {
					Data
				} = await AppApi._get_list(params)
				const options = Data.Data.map(item => {
					return {
						name: item.substance,
						checked: false,
						disabled: false
					}
				})
				this.invoiceTypeOptions = options
			},
			// 获取支付订单详情
			async getPayOrderDetail(payorderid) {
				const params = {
					pagevalue: 359,
					'payorderid.value': payorderid
				}
				const {
					Data
				} = await AppApi._post_view_common(params)
				this.payOrderDetail = Data
			},
			radioGroupChange(e) {
				// //普通电子发票不展示 纳税人识别号和开户行
				this.invoiceNormal = e.includes('普通')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10px;

		.invoice-item {
			line-height: 30px;
		}
	}
</style>