zhishifufei_uniapp/pages/store/applyInvoicing.vue

<template>
	<BaseContainer class="apply-invoicing">
		<NavBar title="申请开票" />
		<view v-if="orderNum" class="order-info info-box">
			<view class="info-item flex flex-center-x">
				<view class="item-label">订单编号</view>
				<view class="item-content">{{ orderNum }}</view>
			</view>
			<view class="info-item flex flex-center-x">
				<view class="item-label">开票金额</view>
				<view class="item-content money-content">￥<text>{{ money }}</text></view>
			</view>
		</view>
		<view class="invoicing-info info-box">
			<view class="info-item flex flex-center-x">
				<view class="item-label">抬头类型</view>
				<view class="item-content">
					<radio-group @change="changeRadioType">
						<label>
							<radio value="1" :checked="invoicingInfo.type === 1" color="#F8473E"/><text>个人</text>
						</label>
						<label>
							<radio value="2" :checked="invoicingInfo.type === 2"  color="#F8473E"/><text>企业</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="info-item flex flex-center-x">
				<view class="item-label">发票抬头</view>
				<view class="item-content">
					<input v-if="!orderNum" type="text" v-model="invoicingInfo.invoiceHeader" placeholder="抬头名称" placeholder-class="input-placeholder" />
					<picker
						v-else
						:range="invoiceHeaderArray"
						:value="invoiceHeaderIndex"
						@change="changeInvoiceHeader"
						:style="invoiceHeaderIndex > -1 ? '' : 'color: #CFCFCF;'"
					>{{ invoiceHeaderIndex > -1 ? invoiceHeaderArray[invoiceHeaderIndex] : '请选择发票抬头'}}</picker>
				</view>
			</view>
			<template v-if="Number(invoicingInfo.type) === 2">
				<view class="info-item flex flex-center-x">
					<view class="item-label">税号</view>
					<view class="item-content">
						<input type="text" v-model="invoicingInfo.dutyParagraph" placeholder="纳税人识别号或社会统一征信代码" placeholder-class="input-placeholder" />
					</view>
				</view>
				<view class="info-item flex flex-center-x">
					<view class="item-label">地址</view>
					<view class="item-content">
						<input type="text" v-model="invoicingInfo.address" placeholder="选填" placeholder-class="input-placeholder" />
					</view>
				</view>
				<view class="info-item flex flex-center-x">
					<view class="item-label">开户行</view>
					<view class="item-content">
						<input type="text" v-model="invoicingInfo.bank" placeholder="选填" placeholder-class="input-placeholder" />
					</view>
				</view>
			</template>
		</view>
		<view class="footer">
			<view class="submit-btn btn" @click="submit">提交申请</view>
			<view v-if="orderNum" class="cancel-btn btn" @click="cancel">不开发票</view>
		</view>
	</BaseContainer>
</template>

<script>
	import { addInvoiceHeader, editInvoiceHeader, applyInvoice, getInvoiceHeaderList } from '@/api/store';
	
	export default {
		data() {
			return {
				orderNum: '',
				money: '',
				headerId: '',
				invoiceHeaderIndex: -1,
				invoiceHeaderList: [],
				invoiceHeaderArray: [],
				invoicingInfo: {
					type: 1,
					invoiceHeader: '',
					dutyParagraph: '',
					address: '',
					bank: '',
				},
			};
		},
		onLoad(options) {
			console.log(options);
			this.orderNum = options.orderNum || '';
			this.money = options.money || 0;
			if (options.orderNum) {
				this.getInvoiceHeaderList();
			}
			if (options.info) {
				const info = JSON.parse(options.info);
				this.headerId = info.id;
				this.invoicingInfo = {
					type: info.header_type,
					invoiceHeader: info.invoice_header,
					dutyParagraph: info.tax_number,
					address: info.address,
					bank: info.bank,
				}
			}
			console.log(addInvoiceHeader, editInvoiceHeader, applyInvoice);
		},
		methods: {
			changeRadioType(e) {
				console.log(e, this.invoicingInfo.type);
				this.invoicingInfo.type = e.detail.value;
				this.invoicingInfo.invoiceHeader = '';
				this.invoicingInfo.dutyParagraph = '';
				this.invoicingInfo.address = '';
				this.invoicingInfo.bank = '';
				this.invoiceHeaderIndex = -1;
				if (this.orderNum && this.invoiceHeaderList.length > 0) {
					const arr = [];
					this.invoiceHeaderList.forEach(v => {
						if (Number(v.header_type) === Number(this.invoicingInfo.type)) {
							arr.push(v.invoice_header);
						}
					});
					this.invoiceHeaderArray = arr;
				}
			},
			submit() {
				if (!this.invoicingInfo.invoiceHeader) {
				  return this.$util.showMsg("请填写发票抬头");
				}
				uni.showLoading({
					mask: true,
				});
				const params = {
					order_number: this.orderNum,
					invoice_amount: this.money,
					header_type: this.invoicingInfo.type,
					invoice_header: this.invoicingInfo.invoiceHeader,
					tax_number: this.invoicingInfo.dutyParagraph,
					address: this.invoicingInfo.address,
					bank: this.invoicingInfo.bank,
				}
				this.commonApi(params);
			},
			async commonApi(params) {
				let response = {};
				try{
					if (this.orderNum) {
						response = await applyInvoice(params);
					} else if (this.headerId){
						response = await editInvoiceHeader({ id: this.headerId, ...params});
					} else {
						response = await addInvoiceHeader(params);
					}
					console.log(response);
					uni.hideLoading();
					const { data, code, msg } = response;
					if (code != 200) {
					  uni.showToast({
					    title: msg,
					  });
					} else {
						uni.showToast({
						  title: this.orderNum ? '申请成功！' : (this.headerId ? '修改成功！' : '添加成功！'),
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				}catch(e){
					uni.hideLoading();
					console.log(e);
				}
			},
			cancel() {
				uni.navigateBack();
			},
			changeInvoiceHeader(e) {
				this.invoiceHeaderIndex = e.detail.value;
				this.invoicingInfo.invoiceHeader = this.invoiceHeaderArray[this.invoiceHeaderIndex];
			},
			async getInvoiceHeaderList() {
				uni.showLoading({
					mask: true,
				});
				try{
					const { data, code, msg } = await getInvoiceHeaderList({});
					uni.hideLoading();
					if (code != 200) {
					  uni.showToast({
					    title: msg,
					  });
					} else {
						console.log(data);
						this.invoiceHeaderList = data.list;
						if (data.list.length > 0) {
							const arr = [];
							data.list.forEach(v => {
								if (Number(v.header_type) === Number(this.invoicingInfo.type)) {
									arr.push(v.invoice_header);
								}
							});
							this.invoiceHeaderArray = arr;
						}
					}
				}catch(e){
					uni.hideLoading();
					console.log(e);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.input-placeholder {
		color: #CFCFCF;
		font-size: 24rpx;
	}
	.apply-invoicing {
		background: #f5f5f5;
		.info-box {
			width: 690rpx;
			margin: 20rpx auto 0;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx 40rpx;
			.info-item {
				height: 64rpx;
				line-height: 64rpx;
				color: #999999;
				font-size: 26rpx;
				.item-label {
					width: 130rpx;
					margin-right: 40rpx;
				}
				.item-content {
					flex: 1;
					color: #000;
					&.money-content {
						color: #F8473E;
						font-size: 22rpx;
						text {
							font-size: 32rpx;
						}
					}
					::v-deep {
						uni-radio-group,  {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.uni-radio-input {
								width: 34rpx;
								height: 34rpx;
							}
						}
						.uni-label-pointer {
							display: flex;
							align-items: center;
							margin-left: 63rpx;
						}
						input {
							text-align: right;
						}
						uni-picker {
							text-align: right;
						}
					}
				}
			}
		}
		.footer {
			position: fixed;
			left: 30rpx;
			width: 690rpx;
			bottom: 173rpx;
			.btn {
				width: 100%;
				height: 80rpx;
				background: #E5E5E5;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #A2A2A2;
				font-size: 32rpx;
				&.submit-btn {
					background: #F8473E;
					color: #fff;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>