front-end/store/src/admin-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" style="color: #09bb07">恭喜您, 续订成功!</div>
							<div>
								<span class="app-color-2">你的帐号有效期已延长至:</span>
								<span>{{ data.deadline | formatTime('YYYY-MM-DD hh:mm:ss') }}</span>
							</div>
						</block>
						<block v-if="pageStatus == 2">
							<div class="prompt-tit">申请已提交</div>
							<div>
								<span class="app-color-2">审核大约需要一个工作日，请耐心等候</span>
							</div>
						</block>
					</div>
					<!-- qr-code -->
					<!-- <div class="qr-code-wrap" v-if="option.focus == 0"> -->
					<block v-if="pageStatus == 2">
						<div class="qr-code-wrap">
							<div class="qr-code-img">
								<!-- <img :src="`${constant.imgUrl}/retail/common/qr-code.png`" alt /> -->
								<img :src="officialApply.qrCode" alt="">
							</div>
							<div>识别二维码关注花卉宝</div>
							<div>审核结果将通过微信通知您</div>
						</div>
					</block>
				</block>
				<!-- button -->
				<div class="button-wrap">
					<block v-if="pageStatus == 1 || pageStatus == 7">
						<button class="admin-button-com big blue" @click="jumpPage">{{ btnText }}</button>
					</block>
					<block v-else>
						<button class="admin-button-com big default" @click="jumpPage">{{ 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
	 */
	// api
	import { accountDet, applyStatus, getAuthUrl } from '@/api/official'
	// import { getShopUser } from '@/utils/auth'
	export default {
		name: 'callback',
		data() {
			return {
				constant: this.$constant,
				data: {},
				// pageStatus: '2',
				pageStatus: '2',
				promptData: ['确认你已经有公众号（服务号），并且已认证和申请微 信支付', '满足以上条件，可以点下方按钮开始授权。', '点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。'],
				officialApply: {}
			}
		},
		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
			}
		},
		onLoad() {
			// if (!this.$util.isLogin()) {
			// 	getShopUser()
			// 	return false
			// }
		},
		mounted() {
			// this.pageStatus = this.option.pageStatus
			// this.init()
		},
		methods: {
			init() {
				let officialApply = uni.getStorageSync('officialApply')
				if (!this.$util.isEmpty(officialApply)) {
					this.officialApply = officialApply
				}
				if (this.option.pagestatus == 1) {
					this.pageStatus = 1
				}
				this.$util.getCheckLogin().then(res => {
					if (res) {
						// this._getStatus()
						if (this.pageStatus == 1 || this.pageStatus == 5) {
							this._accountDet()
						}
					}
				})
			},
			// 获取状态
			_getStatus() {
				applyStatus().then(res => {
					let status = res.data.status
					if (status == 1) {
						this.pageStatus = 2
					}
				})
			},
			// 获取用户信息
			_accountDet() {
				accountDet().then(res => {
					this.data = res.data
				})
			},
			jumpPage() {
				if (this.btnText == '返回首页') {
					this.$util.pageTo({
						url: '/official/index',
						query: {
							id: this.option.id
						}
					})
				} else if (this.btnText == '返回管理中心') {
					// this.$util.pageTo({
					// 	url: '/official/index',
					// 	query: {
					// 		id: this.option.id
					// 	}
					// })
					// #ifdef H5
					location.href = `${window.location.protocol}//b.${this.$constant.firstHost}.com/#/`
					// #endif
				} else if (this.btnText == '开始授权') {
					getAuthUrl().then(res => {
						// #ifdef H5
						location.href = res.data.url
						// #endif
					})
					// this.$msg('功能待对接！')
				}
			}
		}
	}
</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 {
				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>