yijianbao_user_uniapp/pages_order/invoice/index.vue

<template>
	<view>
		<view class="container-body">
			<view class="title">发票详情</view>
			<view class="formbox">
				<u-form labelPosition="left" labelWidth='80' :model="formdata" :rules="rules" ref="uForm"
					errorType="toast">
					<u-form-item label="抬头类型" prop="billType">
						<u-radio-group v-model="formdata.billType" placement="row" size="30rpx"  @change="billTypeChange">
							<u-radio activeColor="#2583EB" label="企业单位" :name="0"></u-radio>
							<u-radio style="margin-left: 40rpx;" activeColor="#2583EB" label="个人/非企业单位"
								:name="1"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="发票抬头" prop="saleName">
						<u-input v-model="formdata.saleName" border="none" :clearable="true"
							placeholder="填写发票抬头"></u-input>
					</u-form-item>
					<u-form-item label="税号" prop="saleNo" v-if="formdata.billType != 1">
						<u-input v-model="formdata.saleNo" border="none" :clearable="true" placeholder="填写税号"></u-input>
					</u-form-item>
					<!-- <u-form-item label="更多内容">
						<view class="more" @click="handleMore">
							<text style="margin-right: 10rpx;">共5项，已填写0项</text>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</u-form-item> -->
					<u-form-item label="总金额" prop="amount">
						<view style="width: 100px;">
							<u-input v-model="formdata.amount" border="none" :clearable="true" placeholder="填写总金额"
								color="#2583EB"></u-input>
						</view>
						<view slot="suffix" class="title" style="padding: 0;">元</view>
					</u-form-item>
					<u-form-item label="备注药品信息" prop="memo" labelWidth='110'>
						<u-radio-group v-model="formdata.memo" placement="row" size="30rpx">
							<u-radio activeColor="#2583EB" label="是" :name="1"></u-radio>
							<u-radio style="margin-left: 40rpx;" activeColor="#2583EB" label="否" :name="0"></u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
			</view>
			<view class="title" style="color: red;">温馨提示</view>
			<view class="title" style="padding: 0 24rpx;">1.请您仔细核对您填写的发票信息，<text
					style="color: #3182bd;">发票只能开一次</text>，不允许修改重开！</view>
			<view class="title" style="padding: 0 24rpx;">2.互联网医院仅支持普票，不支持开具专票！</view>
			<view class="title" style="padding: 0 24rpx;">3.如开票后申请退款成功，发票将自动冲红作废，不能进行报销。</view>
		</view>
		<view class="footerbox x-ac">
			<view class="footerbox-btn x-ac" @click="submit">提交</view>
		</view>
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="popup-content">
				<image class="es-w-50 es-h-50" style="position: absolute;right:24rpx;top:24rpx"
					@tap="closepop" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/close.png"></image>
				<view class="popup-title">确认发票信息</view>
				<view class="x-start">
					<view class="label">抬头类型：</view><text>{{formdata.billType==1 ? "个人/非企业单位" : "企业单位"}}</text>
				</view>
				<view class="x-f es-mb-20 es-mt-20">
					<view class="label">发票抬头：</view><text>{{formdata.saleName}}</text>
				</view>
				<view class="x-f" v-if="formdata.billType != 1">
					<view class="label">发票税号：</view><text>{{formdata.saleNo}}</text>
				</view>
				<button class="submitbtn x-ac" @click="confirm" :disabled="btnLoading">确认提交</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {bill} from "@/api/store.js"
	import {getMyStoreOrderById,cancelOrder,finishOrder} from '@/api/storeOrder'
	export default {
		data() {
			const checkIsNum = (rule, value, callback) => {
				const reg = /^\d+(\.\d{1,2})?$/
				if (!reg.test(value)) {
					callback(new Error("请输入正确的金额"));
				} else {
					callback();
				}
			};
			return {
				btnLoading: false,
				userInfo: {},
				payPrice: 0,
				orderId: "",
				show: false,
				title: '确认发票信息',
				formdata: {
					billType: 0,
					saleName: "",
					saleNo: "",
					amount: "",
					memo: 0,
				},
				rules: {
					saleName: [{
						required: true,
						message: '请输入发票抬头',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					saleNo: [{
						required: true,
						message: '请输入税号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					amount: [{
							required: true,
							message: '请输入总金额',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							validator: checkIsNum,
							trigger: ["blur", "change"]
						},
					],
				}
			}
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {}
			this.orderId = option.orderId
			this.getMyStoreOrderById()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			handleMore() {
				uni.navigateTo({
					url: '/pages/store/invoiceOther'
				})
			},
			getMyStoreOrderById(){
				var data={orderId:this.orderId};
				getMyStoreOrderById(data).then(res => {
					if(res.code==200){
						 this.payPrice=Number(res.order.payPrice || 0) - Number(res.order.billPrice || 0);
						 this.formdata.amount = String(this.payPrice || 0)
						 this.$forceUpdate()
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						 
					}
				});
			},
			billTypeChange() {
				if(this.formdata.billType == 1) {
					this.rules.saleNo[0].required = false
					this.$refs.uForm.setRules(this.rules)
				} else {
					this.rules.saleNo[0].required = true
					this.$refs.uForm.setRules(this.rules)
				}
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if(Number(this.formdata.amount || 0) > this.payPrice) {
						uni.showToast({
							title: "总金额不能大于订单应付金额",
							icon: "none"
						})
						return
					}
					this.$refs.popup.open()
				})
			},
			closepop() {
				this.$refs.popup.close()
			},
			confirm() {
				const param = {
					orderId: this.orderId,
					billType: this.formdata.billType,
					saleName: this.formdata.saleName,
					saleNo: this.formdata.billType == 1 ? '' : this.formdata.saleNo,
					amount: this.formdata.amount,
					memo: this.formdata.memo == 1 ? true : false,
					userId: this.userInfo.userId
				}
				this.btnLoading = true
				bill(param).then(res=>{
					this.btnLoading = false
					this.$refs.popup.close()
					if(res.code == 200) {
						uni.showToast({
							title: "提交成功，请10分钟后在开票历史查看结果",
							icon: "none",
							duration: 3000
						})
						uni.$emit("refreshStoreOrder")
						uni.$emit("refreshOrderDetail")
						setTimeout(()=>{
							this.$navBack()
						},3000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					}
				}).catch(()=>{
					this.btnLoading = false
					this.$refs.popup.close()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.formbox {
		padding: 20rpx;
		background-color: #fff;
	}

	.more {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.container-body {
		padding-bottom: calc(var(--window-bottom) + 154rpx);
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 630rpx;
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		word-break: break-all;
		font-size: 28rpx;
		color: #757575;

		.label {
			flex-shrink: 0;
			color: #303133;
		}

		.popup-title {
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			padding: 24rpx 24rpx 36rpx 24rpx;
		}

		.submitbtn {
			margin-top: 70rpx;
			width: 100%;
			min-height: 84rpx;
			background: #2583EB;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.footerbox {
		width: 100%;
		padding: 20rpx 24rpx;
		padding-bottom: calc(var(--window-bottom) + 20rpx);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		&-btn {
			width: 702rpx;
			height: 96rpx;
			background: #2583EB;
			border-radius: 96rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
</style>