zh-h5-pay/pages/bank-success.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">
			
			<image class="mr-18 icon-img" v-if="orderInfo.status === 2 || orderInfo.status === 6" src="@/static/success.png" mode="scaleToFill" />
			<image class="mr-18 icon-img" v-else src="@/static/ts-icon.png" mode="scaleToFill" />
			
			<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, } from '@/http/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
					}else{
						uni.reLaunch({
							url:`/pages/error?message=` + res.message
						})
					}
				}).catch((err)=>{
                    uni.reLaunch({
                        url:`/pages/error?message=` + ((err && err.message) ? err.message : '查询订单失败')
                    })
                })
			},
			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"
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon-img{
		width: 48rpx;
		height: 48rpx;
	}
	.flex-direction {
		display: flex;
		flex-direction: column;
	}
	.box-sizing-border {
		box-sizing: border-box;
	}
	.sys-radius-200 {
		border-radius: 200rpx;
	}
	.text-align-center {
		text-align: center;
	}
	.sys-color-4D72FA {
		color: #4D72FA;
	}
	.sys-size-28 {
		font-size: 28rpx;
	}
	.sys-weight-600 {
		font-weight: 600;
	}
	.align-items-center {
		display: flex;
		align-items: center;
	}
	.flex-justify-center {
		display: flex;
		justify-content: center;
	}
	.pb-32 {
		padding-bottom: 32rpx;
	}
	.mb-24 {
		margin-bottom: 24rpx;
	}
	.sys-color-3489FF {
		color: #3489FF;
	}
	.sys-size-60 {
		font-size: 60rpx;
	}
	.sys-weight-bold {
		font-weight: bold;
	}
	.flex-justify-space {
		display: flex;
		justify-content: space-between;
	}
	.flex-shrink0 {
		flex-shrink: 0;
	}
	.sys-color-9 {
		color: #999;
	}
	
	
	.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>