zh_UnionPay/pages/index/index.vue

<template>
	<view class="flex-direction plr-40-24 box-sizing-border box-b">
		<view @click="jumpOut" class="but-box sys-radius-200 text-align-center sys-color-4D72FA sys-size-28 sys-weight-600">
			返回首页
		</view>
		<view class="align-items-center flex-justify-center cg-box">
			<uni-icons v-if="orderInfo.status === 2 || orderInfo.status === 6" class="mr-18" type="checkbox-filled"
				size="24" color="#547BFA"></uni-icons>
			<uni-icons v-else class="mr-18" type="clear" size="24" color="#FF0000"></uni-icons>
			<view class="sys-size-28" v-if="orderInfo.status === 2 || orderInfo.status === 6">
				支付成功
			</view>
			<view class="sys-size-28" v-else>
				支付失败
			</view>
		</view>
		<view class="align-items-center flex-justify-center pb-32 pay_money-box mb-24">
			<view class="sys-color-3 sys-size-60 sys-weight-bold">
				￥
			</view>
			<view class="sys-color-3 sys-size-60 sys-weight-bold">
				{{orderInfo.pay_money || '0.00'}}
			</view>
		</view>
		<view class="align-items-center flex-justify-space mb-24">
			<view class="sys-color-9 flex-shrink0 sys-size-28 mr-20">
				商户名称
			</view>
			<view class="sys-size-28 sys-color-3">
				{{orderInfo.shop_name || '无'}}
			</view>
		</view>
		<view class="align-items-center flex-justify-space">
			<view class="sys-color-9 flex-shrink0 sys-size-28 mr-20">
				支付订单
			</view>
			<view class="sys-size-28 sys-color-3">
				{{orderInfo.rs_sn || '无'}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopOrderInfo,
		shopAutomaticCancel
	} from '@/api/shop_order';
	export default {
		components: {},
		data() {
			return {
				orderInfo: {}
			}
		},
		onLoad(data) {
			var mchData = {
				action: 'onIframeReady',
				displayStyle: 'SHOW_CUSTOM_PAGE'
			};
			var postData = JSON.stringify(mchData);
			parent.postMessage(postData, "https://payapp.weixin.qq.com");
			if (data.order_sn) {
				this.shopOrderInfo(data.order_sn)
			}
		},
		mounted() {},
		methods: {
			shopOrderInfo(order) {
				shopOrderInfo({
					order_sn: order
				}).then((res) => {
					if (res.code === 1) {
						this.orderInfo = res.data
						if (res.data.status === 1) {
							this.shopAutomaticCancel(res.data.rs_sn)
						}
					}
				})
			},
			jumpOut() {
				if (this.orderInfo.status === 2 || this.orderInfo.status === 6) {
					var mchData = {
						action: 'jumpOut',
						jumpOutUrl: "https://wap.jhcs888.com/#/pages/index-my/index"
					}
					var postData = JSON.stringify(mchData)
					parent.postMessage(postData, 'https://payapp.weixin.qq.com')
				} else {
					window.location.href = "https://wap.jhcs888.com/#/pages/index-my/index"
				}
			},
			shopAutomaticCancel(order_sn) {
				shopAutomaticCancel({
					order_sn: order_sn
				}).then((res) => {
					if (res.code === 1) {
						console.log(res, 'ok');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-b{
		position: relative;
	}
	.plr-40-24 {
		padding: 24rpx 40rpx 0;
	}

	.pt-50 {
		padding-top: 50rpx;
	}

	.cg-box {
		padding-bottom: 8rpx;
		padding-top: 32rpx;
	}

	.pay_money-box {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.but-box {
		width: 148rpx;
		height: 48rpx;
		line-height: 48rpx;
		border: 1rpx solid #4D72FA;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
	}
</style>