front-end/mobile-code/src/official/callback.vue

<template>
	<!-- 官网各种回调页面 -->
	<div class="app-content">
		<div class="callback-wrap">
			<div class="callback-blo" :class="{ 'paddingTop' : pageStatus == 7 }">
				<block v-if="pageStatus == 7">
                    <div class="module-wrap">
                        <div class="module-tit">提示</div>
                        <div class="module-det">
                            <div class="module-list" v-for="(item, index) in promptData" :key="index">
                                <span class="dot-wrap"></span>
                                <span>{{ item }}</span>
                            </div>
                        </div>
                    </div>
                </block>
				<block v-else>
					<!-- 使用icon -->
					<!-- 成功 icon -->
					<block v-if="pageStatus == 1">
						<div class="status-img">
							<img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
						</div>
					</block>
					<!-- 使用图片 -->
					<!-- 支付成功 -->
					<block v-else>
						<div class="icon">
							<i class="iconfont icondaizhifu"></i>
						</div>
					</block>
					<!-- prompt-wrap -->
					<div class="prompt-wrap">
						<block v-if="pageStatus == 1">
							<div class="prompt-tit">恭喜您, 续订成功!</div>
							<div>
								<span class="app-color-2">你的帐号有效期已延长至:</span>
								<span>2020-11-05 23:09</span>
							</div>
						</block>
					</div>
					<!-- qr-code -->
					<div class="qr-code-wrap" v-if="option.focus == 0">
						<div class="qr-code-img">
							<img :src="option.qrCode" alt />
						</div>
						<div>识别二维码关注花卉宝</div>
						<div>审核结果将通过微信通知您</div>
					</div>
				</block>
				<!-- button -->
				<div class="button-wrap">
					<block v-if="pageStatus == 1 || pageStatus == 7">
						<button class="admin-button-com big blue">{{ btnText }}</button>
					</block>
					<block v-else>
						<button class="admin-button-com big default">{{ btnText }}</button>
					</block>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
/** *
	 * 页面状态
	 * @parmas pageStatus 进入页面的状态
	 * @parmas 1 续订成功
	 * @parmas 2 申请已提交
	 * @parmas 3 申请已提交 - 返回二维码 -- successPay
	 * @parmas 4 审核未通过 -- successEval
	 * @parmas 5 审核通过 - 扫码支付 -- successPayCode
	 * @parmas 6 授权成功 - 扫码支付 -- successPayCode
	 * @parmas 7 授权提示 - 扫码支付 -- successPayCode
	 */
export default {
	name: 'callback',
	data() {
		return {
			pageStatus: 7,
			promptData: [
				'确认你已经有公众号（服务号），并且已认证和申请微 信支付',
				'满足以上条件，可以点下方按钮开始授权。',
				'点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。'
			]
		}
	},
	computed: {
		btnText() {
			let text = ''
			switch (this.pageStatus) {
				case '1':
					text = '返回管理中心'
					break
				case '2':
					text = '返回首页'
					break
				case '3':
					text = '返回首页'
					break
				case '4':
					text = '返回首页'
					break
				case '5':
					text = '开始授权'
					break
				case '6':
					text = '管理中心'
					break
				case '7':
					text = '开始授权'
					break
				default:
					text = '返回管理中心'
					break
			}
			return text
		}
	}
}
</script>

<style lang="scss" scoped>
	.callback-wrap {
		padding-top: 30px;
		.callback-blo {
			width: calc(100% - 60px);
			margin: 0 30px;
			padding: 70px 0;
			background-color: #fff;
			box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
			border-radius: 10px;
            text-align: center;
            &.paddingTop {
                padding-top: 40px;
            }
			// 使用icon
			.icon {
				.iconfont {
					font-size: 170px;
				}
				.icondaizhifu {
					color: #ffa92e;
				}
			}
			// 使用状态图片
			.status-img {
				width: 294px;
				margin: 0 auto;
			}
        }
        // module
        .module-wrap {
            padding: 0 32px;
            text-align: left;
            .module-tit {
                font-size: 38px;
                // margin-bottom: 20px;
            }
            .module-det {
                .module-list {
                    @include disFlex(flex-start, flex-start);
                    margin-top: 30px;
                    .dot-wrap {
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: $mainColor;
                        margin-top: 12px;
                        margin-right: 24px;
                    }
                }
            }
        }
		// prompt
		.prompt-wrap {
			margin-top: 60px;
			.prompt-tit {
				color: #09bb07;
				font-size: 36px;
				margin-bottom: 10px;
			}
		}
		// qr-code
		.qr-code-wrap {
			color: $fontColor2;
			text-align: center;
			& > div {
				margin-top: 10px;
			}
			.qr-code-img {
				width: 226px;
				margin: 60px auto 40px;
			}
		}
		// button
		.button-wrap {
			margin-top: 80px;
		}
	}
</style>