zh_UnionPay/pages/index/index.vue

<template>
	<view class="flex-direction plr-100-30 box-sizing-border">
		<view class="align-items-center flex-justify-center pt-50 mb-20">
			<view class="sys-color-547BFA sys-size-32">
				￥
			</view>
			<view class="sys-color-547BFA sys-size-64 sys-weight-bold">
				{{orderInfo.pay_money}}
			</view>
		</view>
		<view class="align-items-center flex-justify-center cg-box">
			<uni-icons class="mr-10" type="checkbox-filled" size="25" color="#547BFA"></uni-icons>
			<view class="">
				支付成功
			</view>
		</view>
		<view class="align-items-center flex-justify-space mb-20">
			<view class="sys-color-AD flex-shrink0 mr-20">
				商户名称
			</view>
			<view class="sys-size-28">
				{{orderInfo.shop_name}}
			</view>
		</view>
		<view class="align-items-center flex-justify-space mb-20">
			<view class="sys-color-AD flex-shrink0 mr-20">
				订单号
			</view>
			<view class="sys-size-28">
				{{orderInfo.rs_sn}}
			</view>
		</view>
		<view class="align-items-center flex-justify-space mb-64">
			<view class="sys-color-AD flex-shrink0 mr-20">
				交易流水号
			</view>
			<view class="sys-size-28">
				{{orderInfo.pay_sn}}
			</view>
		</view>
		<view class="flex-justify-center">
			<view @click="jumpOut" class="but-box border-449470 sys-radius-200 text-align-center sys-color-195E3F">
				返回首页
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopOrderInfo
	} 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
					}
				})
			},
			jumpOut() {
				var mchData = {
					action: 'jumpout',
					jumpOutUrl: "https://wap.jhcs888.com/"
				}
				var postData = JSoN.stringify(mchData)
				parent.postMessage(postData, 'https://payapp.weixin.qq.com')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.plr-100-30 {
		padding: 0 8%;
	}

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

	.cg-box {
		padding-bottom: 50rpx;
		border-bottom: 1rpx solid #F5F5F5;
		margin-bottom: 50rpx;
	}

	.but-box {
		width: 40%;
		padding: 15rpx 0;
	}
</style>