pages/sub_medical/payResult.vue

<template>
	<view class="payResult">
		<view class="payResult-status" v-if="msg.billstatus ==1">
			<icon type="success" size="60" color="#3599FB"></icon>
			<text class="payResult-status-text">支付成功</text>
		</view>
		<view class="payResult-status" v-if="msg.billstatus ==0">
			<icon type="warn" size="60"></icon>
			<text class="payResult-status-text">支付失败</text>
		</view>
		<view class="payResult-money" v-if="msg.billstatus ==1"><text>-￥{{msg.mergingSubtotal?msg.mergingSubtotal:'0.00'}}</text></view>
		<view class="payResult-msg">
			<u-cell-group>
				<u-cell-item title="医院名称" :value="msg.hospitalName?msg.hospitalName:'未知医院'" :arrow="false" bg-color="#FFFFFF"></u-cell-item>
				<u-cell-item title="交易方式" value="大理市民卡" :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.billNo?msg.billNo:'未知订单号'" :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;
			let msg = JSON.parse(options.msg)
			let status = options.status
			let date = options.date
			switch(status){
				case 'fail':
				msg.billstatus = 0;
				break
				case 'success':
				msg.billstatus = 1;
				break
				case 'wip': //订单状态等待中 需查询
				msg.billstatus = 2;
				break
			}
			msg.paytime = date
			that.msg = msg
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta:2
				})
			}
		}
	}
</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;
			}
		}
		&-money{
			padding: 30rpx;
			font-size: 50rpx;
			text-align: right;
			color: #2FA8E1;
		}
		&-msg{
			margin-top: 50rpx;
		}
	}
</style>