prompt.vue

<template>
	<view class="container u-row-between" v-if="info">
		<Settle :index="pageIndex" :type="1">
			<view class="content-view">
				<!-- <view style="min-height: 120rpx;" v-if="status == 8"></view> -->
				<view class="u-flex u-row-center">
					<image :class="['icon', {active: status != 1, h: [1, 2, 3, 4].indexOf(status) != -1}]"
						:src="imageUrl">
					</image>
				</view>
				<view class="txt-box">
					<text :class="['title', {failed: status == 4} ,index ? 'active' : '']"
						v-for="(txt,index) in info.txtArr" :key="index">{{txt}}</text>
				</view>
				<view class="tips-box" v-if="info.tipsArr">
					<text :class="['tips',info.tipsArr.length>1 && index===0 ? 'red' : '']"
						v-for="(txt,index) in info.tipsArr" :key="index">{{txt}}</text>
				</view>
				<view class="services-view">
					<view v-if="[1, 2, 3, 4, 7].indexOf(status) != -1">
						<view class="service-info-image">
							<u-image class="qrcode" :src="erweimaImage" width="220" height="220" mode="widthFix"
								:fade="true" duration="450">
							</u-image>
						</view>
						<view class="content-info-tip">长按二维码保存图片</view>
						<view class="content-info-tip">添加官方客服微信及时了解审核进度</view>
					</view>
				</view>
				<button class="btn-submit" @click="$u.debounce(goPage, 500)">{{info.btnTxt}}</button>
			</view>
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	// import Services from '@/components/settle/services.vue'

	export default {
		components: {
			Settle,
			// Services
		},

		data() {
			return {
				pageIndex: 2,
				settledInfo: null,
				promptList: [{
					status: 1,
					statusName: '待审核',
					txtArr: ['入驻资料提交成功', '您的申请入驻资料已成功提交，工作人员正在审核中'],
					btnTxt: '去首页',
					url: '/pages/index/index'
				}, {
					status: 2,
					statusName: '已通过',
					txtArr: ['入驻资料审核成功', '您的申请入驻资料已审核提交，可进行在线学习考试'],
					btnTxt: '下一步',
					url: '/pages/learn/exam'
				}, {
					status: 3,
					statusName: '备选',
					txtArr: ['您已成为', "“充电桩安装备选服务商”"],
					tipsArr: ['后续如有业务，请留意通知！'],
					btnTxt: '去首页',
					url: '/pages/index/index'
				}, {
					status: 4,
					statusName: '已驳回',
					txtArr: ['入驻资料审核失败'],
					tipsArr: ['原因：', '图片不够清楚'],
					btnTxt: '重新提交',
					url: '/pages/settle/file'
				}, {
					status: 8,
					statusName: 'step4',
					txtArr: ['您已通过接单在线考试', '通过在线考试后，可以前往签约'],
					btnTxt: '下一步',
					url: '/pages/settle/sign-contract'
				}, {
					status: [5, 6],
					statusName: '未支付保证金',
					txtArr: ['您已成功完成签约', "完成签约后，缴纳配件押金即可完成入驻"],
					btnTxt: '下一步',
					url: '/pages/settle/pay-ensure'
				}, {
					status: 7,
					statusName: '已支付保证金',
					txtArr: ['您已成功缴纳配件押金', " 成功缴纳配件押金后即前往接单"],
					btnTxt: '去首页',
					url: '/pages/index/index'
				}],
				// 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试',9=>'待提交'
				status: '',
				info: null,

			}
		},
		computed: {
			imageUrl() {
				return this.status == 1 ? process.uniEnv.qn_base_url + 'chenggong.png' : process.uniEnv.qn_base_url +
					'icon-prompt.png'
			},
			erweimaImage() {
				return process.uniEnv.qn_base_url + 'erweima-rk.png'
			},
		},
		onLoad(e) {
			getApp().trackPage('入驻结果中转页')
			if (e) {
				if (e.pageIndex) {
					this.pageIndex = e.pageIndex;
				}
			}
			// if(!this.settledInfo){
			// 	this.getBaseInfo()
			// }

		},
		onShow() {
			if (!this.settledInfo) {
				this.getBaseInfo()
			}
		},
		components: {

		},
		methods: {
			async getBaseInfo() {
				const app = getApp()
				const callBack = (vm, result) => {
					vm.settledInfo = result
					vm.status = result.record.status
				}
				let settledInfo = await app.getBaseInfo(this, callBack)
				this.settledInfo = settledInfo
				this.status = settledInfo.record.status
				switch (this.status) {
					case 1:
					case 2:
					case 3:
					case 4:
						this.pageIndex = 2;
						break;
					case 8:
						this.pageIndex = 3;
						break;
					case 5:
					case 6:
						this.pageIndex = 4;
						break;
					case 7:
						this.pageIndex = 5;
						break;
					default:
						this.pageIndex = 1;
						break;
				}
				uni.hideLoading()
				this.initInfo(settledInfo.record)
			},
			initInfo(record) {
				if (!record) {
					this.info = this.promptList[0]
					return
				}
				const status = record.status
				// const status = 7
				const infoArr = this.promptList.filter(item => {
					const itemStatus = item.status
					let idx = -2
					if (Array.isArray(itemStatus)) {
						idx = itemStatus.indexOf(status)
					}
					return itemStatus === status || idx >= 0
				})
				const info = infoArr.length > 0 && infoArr[0]
				if (!info) {
					this.info = this.promptList[0]
					return
				}
				// if (status === 6) {
				// 	info.tipsArr[0] = '请缴纳' + this.settledInfo.record.deposit + '元质保金'
				// } else 
				if (status === 4) {
					info.tipsArr[1] = this.settledInfo.record.reason || ''
				}
				this.info = info
			},
			download() {
				let that = this;
				uni.downloadFile({ //获得二维码的临时地址
					url: that.erweimaImage,
					success: (res) => {
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, //传入临时地址
								success() {
									that.$u.toast('保存成功!');
								},
								fail() {
									that.$u.toast('保存失败!');
								}
							})
						}
					}
				})
			},
			// saveQrcode() {
			// 	let that = this;
			// 	uni.downloadFile({           //获得二维码的临时地址
			// 		url: that.erweimaImage,
			// 		success:(res)=>{
			// 			if(res.statusCode == 200){
			// 				uni.saveImageToPhotosAlbum({
			// 					filePath:res.tempFilePath,//传入临时地址
			// 					success() {
			// 						that.$u.toast('保存成功!');
			// 					},
			// 					complete(res) {
			// 						if (res.errMsg.indexOf('auth')  != -1) {
			// 							uni.showModal({
			// 									title: '提示',
			// 									content: '获取相册权限失败，请到设置页面开启权限',
			// 									confirmText: '好的',
			// 									success(res) {
			// 										if (res.confirm) {
			// 											uni.openSetting({
			// 												success(res) {
			// 												}
			// 											});
			// 										}

			// 									}
			// 							   })
			// 						} else if (res.errMsg) {
			// 							that.$u.toast('保存失败!');
			// 						}
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			goPage() {
				const url = this.info.url
				if (this.status == 1 || this.status == 3 || this.status == 7) {
					uni.reLaunch({
						url,
					});

				} else {
					uni.navigateTo({
						url,
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		width: 750rpx;
		// height:500rpx;
		display: flex;
		flex-direction: column;
		background-color: #F4F5F7;
		height: 100%;
		position: absolute;

		.icon {
			margin-top: 20rpx;
			width: 224rpx;
			height: 224rpx;

			&.active {
				margin-top: 150rpx;
				width: 234rpx;
				height: 222rpx;
			}

			&.h {
				margin-top: 38rpx;
				width: 234rpx;
				height: 222rpx;
			}
		}

		.content-view {
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			border-radius: 12rpx;
			padding: 30rpx;
		}

		.txt-box {}

		.title {
			display: block;
			font-weight: bold;
			// padding: 0 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 44rpx;
			color: #2272FF;

			&.failed {
				color: #FA5A49;
			}

			&.active {
				color: #666666;
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 20rpx;
			}
		}

		.tips-box {
			// margin-top: 32rpx;
			text-align: center;
		}

		.tips {
			color: #666666;
			font-size: 24rpx;
		}

		.btn-submit {
			margin-top: 50rpx;
			margin-bottom: 30rpx;
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272ff;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;

			&:disabled {
				border: 2rpx solid #999;
				background-color: #f3f3f3;
				color: #999;
			}
		}

		.services-view {
			padding-top: 50rpx;
			text-align: center;
			min-height: 120rpx;

			.service-info-image {
				margin-bottom: 30rpx;
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: center;
			}

			.content-info-tip {
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
</style>