index.vue

<template>
	<view class="back_view">
		<Settle :index="1">
			<view class="content-view">
				<view v-for="(item, index) in contentTexts" :key="index"
					:class="['item-list', {last: contentTexts.length <= index + 1}]">
					<view class="item">
						<view class="item-label">
							<text>{{item.title}}</text>
						</view>
						<view class="item-content">
							<text>{{item.content}}</text>
						</view>
					</view>
					<view class="line-view" v-if="contentTexts.length > index + 1"></view>
				</view>
			</view>
			<template v-slot:bottom>
				<u-button class="bottom_btn" @click="$u.debounce(applyClick, 500)" :custom-style="buttonStyle"
					type="primary" shape="circle" :hover-class="isStop ? '' : 'none'">
					<text class="bottom_title" v-if="!isStop">浏览 {{count}} 秒后可申请入驻</text>
					<text class="bottom_title" v-if="isStop">申请入驻</text>
				</u-button>
			</template>
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	export default {
		components: {
			Settle
		},
		data() {
			return {
				theme_url: 'https://qn-static.banshouhui.com/settle_theme.png?v=' + new Date().getTime(),
				count: 9,
				isStop: false,
				settledInfo: null,
				status: '',
				saving: true
			}
		},
		computed: {
			contentTexts() {
				return [{
					title: '招募要求',
					content: '1.必须具备相关的从业证书——电工证；\n\
							2.有汽车：皮卡、小面包、小轿车等\n\
							3.需具备一定的作业工具：如液压压线钳、冲击钻、电锤、登高安全带、电锤、绝缘电阻仪（摇表）、交流充电模拟器等；\n\
							4.有充电桩安装经验优先；'
				}, {
					title: '结算价格',
					content: '1.不同车企品牌结算价格不一，675元-1890元不等；\n\
							2.结算价格为包工包料价，安装材料根据车企品牌规格自行采购（电缆、空开、漏保）；\n\
							3.结算账期：周结50%，剩余50%次月20号结算；'
				}, {
					title: '入驻资料',
					content: '1.身份证正反面照片\n\
							2.高/低压电工证正反面照片\n\
							3.车辆照片'
				}, {
					title: '注意事项',
					content: '1.身份证，银行卡，签约人共有同一人，否则无法入驻。\n\
								2.充电桩材料按要求自行准备。'
				}]
			},
			buttonStyle() {
				return this.isStop ? {
					'color': '#FFFFFF',
					'background-color': '#2272FF;',
					'width': '600rpx',
					'height': '104rpx',
				} : {
					'color': '#FFFFFF',
					'background-color': '#D1D4D4;',
					'width': '600rpx',
					'height': '104rpx'
				}
			}
		},
		onLoad(e) {
			this.initpageData(e)
			this.startCounting()
		},
		onShow() {
			// if(!this.settledInfo){
			// 	this.getBaseInfo()
			// }
			uni.hideLoading()
		},
		methods: {
			initpageData(option) {
				let recommender = ''
				if (option && option.q) {
					const urlLink = decodeURIComponent(option.q)
					recommender = this.getQueryVariable(urlLink, 'recommender')
					getApp().globalData.settleRecommend = recommender
				}
				if (option && option.recommender) {
					recommender = decodeURI(option.recommender)
					getApp().globalData.settleRecommend = recommender
				}
			},
			getQueryVariable(url, key) {
				const queryStringArr = url.split('?')
				let val = ''
				let queryStr = queryStringArr && queryStringArr.length > 1 && queryStringArr[1]
				if (!queryStr) {
					return
				}
				let queryArr = queryStr.split("&");
				for (let i = 0; i < queryArr.length; i++) {
					let pair = queryArr[i].split("=");
					if (pair[0] == key) {
						val = pair[1];
					}
				}
				return val
			},
			async getBaseInfo() {
				const app = getApp()
				const callBack = (vm, result) => {
					vm.settledInfo = result
					vm.status = result.record.status
				}
				let settledInfo = await app.getBaseInfo(this, callBack)
				if (!settledInfo) {
					return
				}
				this.settledInfo = settledInfo
				this.status = settledInfo.record.status
			},
			startCounting: function() {

				if (this.isStop) {
					return
				}

				this.count = this.count - 1

				if (this.count > 0) {
					setTimeout(this.startCounting, 1000);
				} else {

					this.isStop = true

				}

			},

			applyClick: async function() {
				if (!this.isStop) {
					return
				}
				this.saving = true
				if (!this.settledInfo) {
					await this.getBaseInfo()
					this.jumpJudge()
					this.saving = false
					return
				}

				this.jumpJudge()
			},
			jumpJudge() {
				if (Number(this.status) > 0) {
					uni.navigateTo({
						url: '/pages/settle/prompt'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/settle/base'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.back_view {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

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

	.line-view {
		background-color: #F4F5F7;
		height: 2rpx;
		width: 100%;
		margin-top: 30rpx;
	}

	.item-list {
		padding: 30rpx 30rpx 0rpx 30rpx;

		&.last {
			padding-bottom: 30rpx;
		}
	}

	.item-label {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 8rpx;
	}

	.item-content {
		color: #333333;
		font-size: 26rpx;
		line-height: 50rpx;
		margin-top: 20rpx;
	}

	// .bottom_btn {
	// 	width: 600rpx;
	// 	height: 104rpx;
	// 	line-height: 96rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;

	// 	.bottom_title {
	// 		color: #fff;
	// 	}
	// }

	.bottom_title {
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.default_color {
		background-color: #D1D4D4;
	}

	.apply_color {
		background-color: #2272FF;
	}

	.bottom_view {
		position: fixed;
		bottom: 0;
		height: 192rpx;
		display: flex;
		align-items: center;
	}
</style>