store/pages/auth-step/auth-step.vue

<template>
	<view class="shop_auth">
		<u-steps :list="stepList" :current="current" mode="number" active-color="#f76454"></u-steps>
		<view class="flexCC auth_hint">
			<!-- 未认证 -->
			<view v-if="current == 0">
				<view class="title">用户协议概要</view>
				<view class="intr">
					感谢您信任并使用大卫博士微店店长服务。为了更好地维护您的利益，我们对
					<text @click="skipProtocol">《大卫博士微店店长服务协议》</text>
					进行了更新，特向您推送本消息提示，请仔细阅读并充分理解相关条款。
				</view>
				<view class="deal" @click="isDeal = !isDeal">
					<text class="iconfont iconxuanzhong" v-if="isDeal"></text>
					<text class="iconfont iconweixuanzhong" v-else></text>
					<text>我已阅读并接受《大卫博士微店店长服务协议》</text>
				</view>
				<view class="sub_btn" @click="skipAuth(0)">同意协议并认证</view>
			</view>
			<!-- 待审核 -->
			<view v-if="current == 1">
				<view class="title">{{ state.applyment_state_desc }}</view>
				<!-- 待审核 -->
				<view v-if="state.applyment_state == 'AUDITING'">
					<view class="auth_intr">大概一分钟内审核成功，自动出现签约二维码。</view>
				</view>
				<!-- 已驳回 || 已冻结 -->
				<view v-if="state.applyment_state == 'REJECTED' || state.applyment_state == 'FROZEN'">
					<view class="reason" v-for="(item, index) in state.audit_detail" :key="index">
						<view>{{ item.reject_reason }}</view>
					</view>
				</view>
				<!-- 待账户验证 -->
				<view v-if="state.applyment_state == 'ACCOUNT_NEED_VERIFY'" class="wait_auth">
					<view>
						<view>付款户名</view>
						<view>{{ remit.account_name }}</view>
					</view>
					<view>
						<view>付款卡号</view>
						<view>{{ remit.account_no }}</view>
					</view>
					<view>
						<view>汇款金额</view>
						<view>{{ remit.pay_amount }}</view>
					</view>
					<view>
						<view>收款卡号</view>
						<view>{{ remit.destination_account_number }}</view>
					</view>
					<view>
						<view>收款户名</view>
						<view>{{ remit.destination_account_name }}</view>
					</view>
					<view>
						<view>开户银行</view>
						<view>{{ remit.destination_account_bank }}</view>
					</view>
					<view>
						<view>省市信息</view>
						<view>{{ remit.city }}</view>
					</view>
					<view>
						<view>备注信息</view>
						<view>{{ remit.remark }}</view>
					</view>
					<view>
						<view>汇款截止时间</view>
						<view>{{ remit.deadline }}</view>
					</view>
				</view>
				<view class="sub_btn" style="margin-top:50rpx;" v-if="state.applyment_state == 'REJECTED'"
					@click="skipAuth(1)">重新认证</view>
				<view class="refresh_hint" v-if="state.applyment_state == 'AUDITING'">审核状态每5秒更新一次，请耐心等待...</view>
			</view>
			<!-- 待签约 -->
			<view v-if="current == 2" class="sign">
				<view class="sign_hint">长按保存二维码-微信扫码签约</view>
				<image :src="signCode" @click="preview" @longpress="saveImg()"></image>
				<view class="sub_btn newbtn" @click="getstate()">已扫码，刷新</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreInfo,
		getState,
	} from '@/apis/shop.js';
	import QR from '../../common/util/wxqrcode.js'; // 二维码生成器
	export default {
		data() {
			return {
				current: 0, //待认证 审核中 待签约显示
				stepList: [{
						name: '待认证'
					},
					{
						name: '审核中'
					},
					{
						name: '待签约'
					}
				],
				isApply: '',
				isDeal: false, //是否选中已阅读协议
				signCode: '', //签约的二维码
				imgUrl: '', //二维码本地路径
				state:''
			}
		},
		onShow() {
			this.getShop();
		},
		watch: {
			isApply: {
				handler(newVal) {
					if (newVal == 1) { //只有待审核的时候定时请求
						this.timer = setInterval(() => {
							this.getstate();
						}, 5000);
					} else {
						clearInterval(this.timer);
						uni.hideLoading();
					}
				},
				deep: true
			}
		},
		methods: {
			//跳转到认证协议
			skipProtocol() {
				uni.navigateTo({
					url: '../../pagesA/pages/protocol/protocol'
				})
			},
			preview() {
				uni.previewImage({
					current: this.signCode,
					urls: [this.signCode]
				});
			},
			//保存签约二维码到相册
			saveImg() {
				let base64 = this.signCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: img => {
						uni.getSetting({
							success: res => {
								// 如果没有则获取授权
								if (!res.authSetting['scope.writePhotosAlbum']) {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: res => {
											uni.saveImageToPhotosAlbum({
												filePath,
												success: res => {
													uni.showModal({
														content: '图片已保存到相册，赶快识别签约吧~',
														showCancel: false
													})
												},
												fail: err => {
													uni.showToast({
														title: '保存失败',
														icon: 'none'
													})
												}
											})
										},
										fail: err => {
											uni.showModal({
												title: '提示',
												content: '需要获取相册访问权限，请到小程序设置页面打开授权',
												cancelText: '取消',
												cancelColor: '#999',
												confirmText: '确定',
												confirmColor: '#f94218',
												success: res => {
													if (res.confirm) {
														uni.openSetting({
															success: res => {
																console
																	.log(
																		res
																		.authSetting
																	)
															},
															fail: err => {
																uni.showModal({
																	content: '调起设置失败，请手动设置相册权限',
																	showCancel: false
																})
															}
														})
													} else if (res
														.cancel) {
														uni.showModal({
															content: '您取消了设置相册权限，不能保存图片到相册',
															showCancel: false
														})
													}
												}
											})
										}
									})
								} else {
									uni.showLoading({
										title: '保存中...'
									})

									// 有则直接保存不知道哦
									uni.saveImageToPhotosAlbum({
										filePath,
										success: res => {
											uni.showModal({
												content: '图片已保存到相册，赶快识别签约吧~',
												showCancel: false
											})
											uni.hideLoading()
										},
										fail: err => {
											uni.hideLoading()
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											})
										}
									})

								}
							}
						})
					},
					fail: err => {
						//console.log(err)
					}
				})
				return false;
			},
			/*
			 * 获取认证的状态【字段applyment_state】
			 *CHECKING：资料校验中
			 *ACCOUNT_NEED_VERIFY：待账户验证
			 *AUDITING：审核中
			 *REJECTED：已驳回
			 *NEED_SIGN：待签约
			 *FINISH：完成
			 *FROZEN：已冻结
			 *参考资料：https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/ecommerce/applyments/chapter3_2.shtml
			 */
			getstate() {
				uni.showLoading({
					title: '加载中..'
				});
				getState().then(res => {
					if (res.code == 200) {
						this.state = res.data;
						//已完成
						if (res.data.applyment_state == 'FINISH') {
							clearInterval(this.timer);
							uni.redirectTo({
								url: '../index/index'
							})
							return false;
						}
						//待签约
						if (res.data.applyment_state === 'NEED_SIGN' || res.data.sign_state === "UNSIGNED") {
							let val = res.data.sign_url;
							this.imgUrl = val;
							this.signCode = QR.createQrCodeImg(val, {
								size: parseInt(300) //二维码大小
							});
							clearInterval(this.timer);
							this.current = this.isApply = 2;
							return false;
						}
						//已驳回
						if (res.data.applyment_state == 'REJECTED') {
							this.isApply = 4
							clearInterval(this.timer);
							return false;
						}
						//其他状态
						this.isApply = this.current = 1;
						//显示待账户验证信息
						if (res.data.account_validation) {
							this.remit = res.data.account_validation;
						}
					} else {
						uni.showModal({
							content: res.data || '获取认证状态失败',
							showCancel: false
						});
					}
					uni.hideLoading();
				});
			},
			/*去认证*/
			skipAuth(type) {
				if (!this.isDeal && type == 0) {
					uni.showModal({
						content: '请确认已阅读协议',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url:'../../pagesA/pages/shop-auth/shop-auth'
				});
			},
			/*获取店铺信息*/
			getShop() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				//进入店铺根据is_apply判断认证的状态，提交认证之后，返回首页显示审核中，审核通过之后显示签约二维码，
				/*
				is_apply 0 未认证  2 待签约  3 认证完成 其余显示待审核状态
				*/
				getStoreInfo()
					.then(res => {
						if (res.code == 200) {
							const {
								is_apply
							} = res.data.store;
							this.isApply = is_apply;
							//未认证状态
							if (is_apply == 0) {
								this.current = 0;
								return false;
							}
							//如果是已完成
							if (is_apply == 3) {
								clearInterval(this.timer);
								uni.redirectTo({
									url: '../index/index'
								})
								return false;
							}
							if (is_apply == 1 || is_apply == 2) {
								this.current = is_apply;
							}
							this.getstate();
						} else {
							uni.showModal({
								content: res.data,
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss">
	.shop_auth {
		width: 690rpx;
		margin: 40rpx auto 0;

		.auth_hint {
			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				padding: 50rpx 0 30rpx;
			}

			.auth_intr {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				margin: 10rpx 0;
			}

			.intr {
				padding: 0 30rpx;
				font-size: 28rpx;
				line-height: 2;

				text {
					color: $base-color;
				}
			}

			.deal {
				margin-top: 160rpx;
				padding-left: 30rpx;

				.iconfont {
					margin-right: 15rpx;
					vertical-align: middle;
				}
			}

			.sub_btn {
				margin-top: 30rpx;
			}

			.refresh_hint {
				width: 100%;
				text-align: center;
				color: $base-color;
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 15rpx;
			}
		}

		.wait_auth {
			>view {
				view:first-child {
					font-size: 32rpx;
					font-weight: 700;
				}

				view:last-child {
					font-size: 28rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}
		}

		.hint {
			padding: 15rpx 0;
		}

		.sign {
			width: 690rpx;
			margin: 40rpx auto 0;
			text-align: center;

			.sign_hint {
				font-size: 40rpx;
				font-weight: bold;
				color: #FB231F;
				margin-bottom: 80rpx;
			}

			.sub_btn {
				margin-top: 30rpx;
			}

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
		.newbtn {
			width: 630rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			border: 2rpx solid #999999;
			color: #333333;
			font-weight: bold;
		}
	}
</style>