pages/sub_medical/payResult.vue

<template>
	<view class="payResult">
		<view class="payResult-status" v-if="msg.billstatus ==2">
			<icon type="success" size="60" color="#3599FB"></icon>
			<text class="payResult-status-text">支付成功</text>
		</view>
		<view class="payResult-status" v-if="msg.billstatus !=2">
			<icon type="warn" size="60"></icon>
			<text class="payResult-status-text">支付失败</text>
		</view>
		<view class="payResult-money" v-if="msg.billstatus ==2"><text>-￥{{msg.amount?msg.amount:'0.00'}}</text></view>
		<view class="payResult-msg">
			<u-cell-group>
				<u-cell-item title="商户名" :value="msg.shopname?msg.shopname:'未知商户'" :arrow="false" bg-color="#FFFFFF"></u-cell-item>
				<u-cell-item title="交易方式" :value="msg.billname?msg.billname:'未知方式'" :arrow="false" bg-color="#FFFFFF"></u-cell-item>
				<u-cell-item title="交易时间" :value="msg.paytime?msg.paytime:'未知时间'" :arrow="false" bg-color="#FFFFFF"></u-cell-item>
				<u-cell-item title="订单号" :value="msg.refno?msg.refno:'未知订单号'" :arrow="false" bg-color="#FFFFFF"></u-cell-item>
			</u-cell-group>
		</view>
		<u-button class="btn":custom-style="btn"  @tap="goBack">返回首页</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: {},
				btn: {
					backgroundColor: ' #2FA8E1',
					padding: '50rpx 0',
					color: '#FFFFFF',
					width: ' 600rpx',
					fontSize: '30rpx',
					border: '1px solid #2FA8E1',
					marginTop: '50rpx'
				}
			}
		},
		onLoad(options) {
			let that = this;
			if (options.data) {
				let msg = JSON.parse(options.data);
				msg.amount = msg.amount.toFixed(2);
				that.msg = msg
			}
		},
		methods: {
			goBack() {
				uni.switchTab({
					url: '/pages/sub_tabbar/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payResult {
		background-color: #FFFFFF;
		height: 100vh;
		box-sizing: border-box;
		padding: 30rpx 0;
		display: flex;
		flex-direction: column;
		&-status{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			&-text{
				font-size: 40rpx;
				margin-top: 30rpx;
			}
		}
		&-msg{
			margin-top: 50rpx;
		}
	}
</style>