chshPay/pages/Paysuccessful/jxPaysuccessful.vue

<template>
	<view class="Content-Box">
		<template v-if="Name && Status != -1">
			<view class="Status">
				<image class="img" v-if="Status == 1" src="../../static/success.png" mode="widthFix" />
				<image class="img" v-if="Status == 2" src="../../static/fail.png" mode="widthFix" />
			</view>

			<view class="Shop-Name">
				<text>{{ Name }}</text>
			</view>

			<view class="Pay-Infor">
				<view class="Pay-Item">
					<view class="Label"><text>订单状态</text></view>
					<view class="Value"><text>{{ Status == 1 ? '支付成功' : '取消支付' }}</text></view>
				</view>
				<view class="Pay-Item">
					<view class="Label"><text>支付时间</text></view>
					<view class="Value"><text>{{ paytime }}</text></view>
				</view>
				<view class="Pay-Item" v-if="amountInfo.order_price">
					<view class="Label"><text>支付总额</text></view>
					<view class="Value"><text>￥{{ amountInfo.order_price }}</text></view>
				</view>
				<!-- <view class="Pay-Item" v-if="amountInfo.broker_ded">
					<view class="Label"><text>余额抵扣</text></view>
					<view class="Value"><text>￥{{ amountInfo.broker_ded }}</text></view>
				</view> -->
				<view v-if="Number(isAllApi) == 1">
					<view class="Pay-Item">
						<view class="Label"><text>抵用券抵扣</text></view>
						<view class="Value">
							<text>￥{{ (Number(amountInfo.coin_ded) + Number(amountInfo.broker_ded)).toFixed(2) }}</text>
						</view>
					</view>
				</view>
				<view class="Pay-Item" v-if="amountInfo.real_pay">
					<view class="Label"><text>实际付款</text></view>
					<view class="Value"><text>￥{{ amountInfo.real_pay }}</text></view>
				</view>
				<view class="Pay-Item">
					<view class="Label"><text>获得积分</text></view>
					<view class="Value" v-if="amountInfo.agent_id"><text>{{ amountInfo.user_integral }}</text></view>
					<view class="Value" v-else><text>{{ amountInfo.integral }}</text></view>
				</view>
			</view>
		</template>
		<template v-else>
			<image class="img" src="../../static/fail.png" mode="widthFix" />
			<view class="Shop-Name">
				<text>订单错误请联系管理员</text>
			</view>
		</template>

		<button class="complete" @click="closePage">完成</button>
	</view>
</template>

<script>
	import {
		getOfflineOrderDetail,
		getgzhlineOrderDetail
	} from '@/api/index.js';

	export default {
		name: 'JxPaysuccessful',
		data() {
			return {
				// 支付时间
				paytime: '',
				Status: 1,
				Name: '',
				order_sn: '',

				// 支付抵扣参数
				amountInfo: {} // 支付相关信息
			}
		},

		onLoad(option) {
			let date = new Date();
			this.paytime =
				`${date.getFullYear()}/${this.f0(date.getMonth() + 1)}/${this.f0(date.getDate())} ${this.f0(date.getHours())}:${this.f0(date.getMinutes())}:${this.f0(date.getSeconds())}`;
			this.Status = option?.Status;
			this.Name = option?.merchant_name;
			this.order_sn = option?.order_sn;
			this.isAllApi = option?.isAllApi;

			this.fetchOrderDetail();
		},

		methods: {
			// 补0
			f0(n) {
				if (n <= 9) return `0${n}`;
				return n;
			},

			async fetchOrderDetail() {
				try {
					const apiCall = Number(this.isAllApi) ? getOfflineOrderDetail : getgzhlineOrderDetail;
					const res = await apiCall({
						order_sn: this.order_sn
					});
					this.amountInfo = res.data;
				} catch (error) {
					console.error('获取订单详情失败:', error);
				}
			},

			// 关闭H5页面
			closePage() {
				// H5环境下关闭当前页面
				window.close();
				if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
					WeixinJSBridge.invoke('closeWindow', {}, function(res) {
						if (res.err_msg == "close_window:ok") {
							// 关闭成功的处理
							console.log('关闭成功的处理')
						} else {
							// 关闭失败的处理
							console.log('关闭失败的处理')
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.Content-Box {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		margin: 0rpx 50rpx;

		.Status {
			margin: 0 auto;
			width: 296.15rpx;
			height: 167.31rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.Shop-Name {
			width: 100%;
			text-align: center;
			line-height: 50rpx;
			font-weight: bold;
			margin: 50rpx 0rpx;
		}

		.Pay-Infor {
			// margin-top: 42.31rpx;
			padding: 19.23rpx;
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 23.08rpx;
			font-size: 26.92rpx;
			color: rgba(51, 51, 51, 1);
			overflow: hidden;

			.Pay-Item {
				display: flex;
				justify-content: space-between;
				line-height: 76.92rpx;
			}
		}
	}

	.complete {
		width: 500rpx;
		margin: 32rpx auto;
		background: linear-gradient(90deg, #FF9999 0%, #E11616 100%);
		color: #FFFFFF;
		border-radius: 50rpx;

		&::after {
			border: none !important;
		}
	}
</style>