index copy.vue

<template>
	<view class="wrap">
		<process :process="0" :type="0" title="业务流程"></process>
		<view class="introduction">
			<view class="item">
				<view class="label">
					<text>招募要求</text>
				</view>
				<view class="content">
					<text>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Aenean euismod bibendum laoreet. Proin gravida dolor sit 
						amet lacus accumsan et viverra justo commodo. Proin sodales 
						pulvinar sic tempor. Sociis natoque penatibus et magnis dis 
						parturient montes, nascetur ridiculus mus. Nam fermentum, 
						nulla luctus pharetra vulputate, felis tellus 。
					</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<text>结算价格</text>
				</view>
				<view class="content">
					<text>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Aenean euismod bibendum laoreet. Proin gravida dolor sit 
						amet lacus accumsan et viverra justo commodo. Proin sodales 
						pulvinar sic tempor. Sociis natoque penatibus et magnis dis 
						parturient montes, nascetur ridiculus mus. Nam fermentum, 
						nulla luctus pharetra vulputate, felis tellus 。
					</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					<text>入驻资料</text>
				</view>
				<view class="content">
					<text>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Aenean euismod bibendum laoreet. Proin gravida dolor sit 
						amet lacus accumsan et viverra justo commodo. Proin sodales 
						pulvinar sic tempor. Sociis natoque penatibus et magnis dis 
						parturient montes, nascetur ridiculus mus. Nam fermentum, 
						nulla luctus pharetra vulputate, felis tellus 。
					</text>
				</view>
			</view>
			<view class="item careful-color">
				<view class="careful-content">
					<text>注意事项：</text>
					<text>
						身份证、银行卡、签约人均为同一人，否则无法入驻；
					</text>
					<text>
						充电桩材料按要求自行准备
					</text>
				</view>
			</view>
		</view>
	    <view class="bottom_view">
			<button :class="isStop ? 'bottom_btn apply_color' : 'bottom_btn default_color' "  @click="$u.debounce(applyClick, 500)">
				<text class="bottom_title" v-if="!isStop">浏览 {{count}} 秒后可申请入驻</text>
				<text class="bottom_title" v-if="isStop">申请入驻</text>
			</button>
	    </view>
	</view>
</template>

<script>
	import { process } from '@/components/process/process'
	export default {
		components: {
			process
		},
		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
			}
		},
		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(this.status>0){
					uni.navigateTo({
						url:'/pages/settle/prompt'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/settle/base'
				})
			}

		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.back_view{
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.theme_image{
		width: 100%;
		height: 3000rpx;
		margin-bottom:164rpx;
	}

	.bottom_view{
		position:fixed;
        box-shadow: 0 -1rpx 6rpx rgba(0,0,0,0.05);
		bottom:0;
		background-color: #DAEBFF;;
		width: 100%;
		height: 164rpx;
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.bottom_btn{
		margin-top: 30rpx;
		width: 600rpx;
		height: 104rpx;
		line-height:96rpx;
		border-radius: 54rpx;
		// border: 4rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&.apply_color{
			// border: 4rpx solid #2272FF;
            .bottom_title{
                color: #fff;
            }
		}
	}

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

	.default_color{
		background-color: #fff;
	}

	.apply_color{
		background-color: #2272FF;
	}
	
	.introduction {
		border: 4rpx solid #2272FF;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		margin-bottom: 200rpx;
	}
	.introduction .item {
		padding: 20rpx;
	}
	.introduction .item .label {
		font-size: 32rpx;
		padding: 10rpx;
	}
	.introduction .item .content {
		font-size: 28rpx;
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
	
	.careful-color{
		color: red;
	}
	.careful-content {
		padding: 10rpx;
		font-size: 32rpx;
	}
</style>