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 || '0.00'}}
			</view>
		</view>
		<view class="align-items-center flex-justify-center cg-box">
			<uni-icons v-if="orderInfo.status === 2 || orderInfo.status === 6" class="mr-10" type="checkbox-filled" size="25" color="#547BFA"></uni-icons>
			<uni-icons v-else class="mr-10" type="clear" size="25" color="#FF0000"></uni-icons>
			<view class="" v-if="orderInfo.status === 2 || orderInfo.status === 6">
				支付成功
			</view>
			<view class="" v-else>
				支付失败
			</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 pb-24">
			<view @click="jumpOut" class="but-box border-449470 sys-radius-200 text-align-center sys-color-195E3F">
				返回首页
			</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() {
				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')
			},
			shopAutomaticCancel(order_sn) {
				shopAutomaticCancel({
					order_sn: order_sn
				}).then((res) => {
					if (res.code === 1) {
						console.log(res, 'ok');
					}
				})
			}
		}
	}
</script>

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

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

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

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