front-end/mobile-code/src/pages/callback/index.vue

<template>
	<!-- 各种回调页面 -->
	<div class="app-content" :class="[contentClass]">
		<div class="callback-wrap">
			<div class="callback-blo">
                <!-- 使用icon -->
				<template v-if="false">
				    <div class="icon">
					    <i class="iconfont icondaizhifu"></i>
				    </div>
				</template>
                <!-- 使用图片 -->
                <template v-else>
				    <div class="status-img">
                        <img src="../../static/images/callback/success.png" alt="" mode="widthFix" >
				    </div>
                </template>
				<div class="status-text app-size-36 app-bold">待支付</div>
				<div class="price">
					<span>￥</span>
					<span class="app-size-36 app-bold">3251.00</span>
				</div>
				<div class="surplus app-color-3">剩余￥3515.00</div>
				<div class="order-num app-color-3">订单号: 515155151515151551</div>
				<!-- 一个主按钮 -->
				<template v-if="false">
					<div class="call-btn-com call-one-btn">
						<button class="button-com success">余额支付</button>
					</div>
				</template>
				<!-- 两个主按钮 -->
				<template v-else>
					<div class="call-btn-com call-two-btn">
                        <button class="button-com default">查看订单</button>
                        <button class="button-com">返回首页</button>
					</div>
				</template>
			</div>
            <!-- 优惠券 -->
            <div class="coupon-wrap">
                <div class="coupon-img">
                    <img src="../../static/images/callback/coupon.png" alt="" mode="widthFix" >
                </div>
                <div class="qrcode-img">
                    <img src="../../static/images/extension.png" alt="" mode="widthFix" >
                </div>
            </div>
		</div>
	</div>
</template>

<script>
/** *
	 * 页面状态
	 * @parmas pagestatus 进入页面的状态
	 * @parmas 1 待支付 - 余额支付 -- awaitPayYe
	 * @parmas 2 待支付 - 微信支付 -- awaitPayWx
	 * @parmas 3 支付成功 -- successPay
	 * @parmas 4 评价成功 -- successEval
	 * @parmas 5 支付成功 - 扫码支付 -- successPayCode
	 */
export default {
	name: 'callback',
	data() {
		return {
			pagestatus: 1,
			contentClass: ''
		}
	},
	onLoad() {
		this.initClass(this.pagestatus)
		uni.setNavigationBarTitle({
			title: '支付成功'
		})
	},
	methods: {
		// 初始样式
		initClass(val) {
			switch (val) {
				case 1:
					this.contentClass = 'awaitPayYe'
					break
				case 2:
					this.contentClass = 'awaitPayWx'
					break
				case 3:
					this.contentClass = 'successPay'
					break
				case 4:
					this.contentClass = 'successEval'
					break
				case 5:
					this.contentClass = 'successPayCode'
					break
				default:
					this.contentClass = 'awaitPayYe'
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		.callback-wrap {
			padding-top: 50px;
			background-image: url('../../static/images/callback/bg.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			.callback-blo {
				width: 90%;
				margin: 0 auto;
				padding: 70px 0;
				background-color: #fff;
				box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
				border-radius: 10px;
                text-align: center;
                // 使用icon
				.icon {
					.iconfont {
						font-size: 170px;
					}
                }
                // 使用状态图片
                .status-img {
                    width: 294px;
                    margin: 0 auto;
                }
                .call-btn-com {
                    margin-top: 56px;
                    @include disFlex(center, center);
                }
                // 一个按钮
                .call-one-btn {
                    .button-com {
                        width: 74%;
                        padding-top: 22px;
                        padding-bottom: 22px;
                        font-size: 32px;
                    }
                }
                // 两个按钮
                .call-two-btn {
                    .button-com {
                        width: 200px;
                        padding-top: 22px;
                        padding-bottom: 22px;
                        font-size: 32px;
                    }
                    .default {
                        margin-right: 20px;
                    }
                }
            }
            // 优惠券
            .coupon-wrap {
                width: 96%;
                margin: 52px auto 0;
                position: relative;
                .qrcode-img {
                    width: 170px;
                    height: 170px;
                    position: absolute;
                    top: 40px;
                    right: 108px;
                }
            }
        }
    }
    // 待支付 - 公共
    .awaitPayWx, .awaitPayYe {
        .status-text {
            margin-top: 22px;
            margin-bottom: 52px;
        }
        .surplus {
            margin-top: 22px;
            margin-bottom: 38px;
        }
    }
	// 待支付 - 余额
	.awaitPayYe {
		.icon {
			.iconfont {
                color: #FFA92E
			}
        }
        .status-text {
            color: #FFA92E;
        }
	}
</style>