入驻高保真

src/components/settle/index.vue

+<template>
+	<view>
+		<u-navbar style="position: absolute;" title="入驻" background="{background: transparent}" :border-bottom="false"
+			back-icon-color="#ffffff" title-color="#ffffff"></u-navbar>
+		<image :src="url" style="width: 100%;" mode="widthFix"></image>
+		<view class="introduction">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			index: {
+				type: Number,
+				default: 1
+			}
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			url() {
+				return '../../static/settle/bachground' + this.index + '@3x.png'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.introduction {
+		border-radius: 12rpx;
+		margin-left: 30rpx;
+		margin-right: 30rpx;
+		margin-top: -112rpx;
+		background-color: #FFFFFF;
+		overflow: auto;
+		height: calc(100vh - 368rpx);
+	}
+</style>

src/pages.json

@@ -36,13 +36,17 @@
 		{
 			"path": "pages/settle/index",
 			"style": {
-				"navigationBarTitleText": "入驻"
+				"navigationBarTitleText": "入驻",
+				"navigationStyle": "custom", // 隐藏系统导航栏
+				"disableScroll": true
 			}
 		},
 		{
 			"path": "pages/settle/base",
 			"style": {
-				"navigationBarTitleText": "入驻"
+				"navigationBarTitleText": "入驻",
+				"navigationStyle": "custom",
+				"disableScroll": true
 			}
 		},
 		{
@@ -125,7 +129,9 @@
 		{
 			"path": "pages/settle/file",
 			"style": {
-				"navigationBarTitleText": "入驻资料"
+				"navigationBarTitleText": "入驻资料",
+				"navigationStyle": "custom",
+				"disableScroll": true
 			}
 		},{
 			"path": "pages/exam/start",

src/pages/index/index.vue

@@ -57,7 +57,7 @@
 		},
 		data() {
 			return {
-				status: 0, // 入驻状态:	    1=>'待审核',     2=>'已通过',     3=>'备选',     4=>'已驳回',     5=>'已签约',     6=>'未支付保证金',     7=>'已支付保证金',
+				status: 0, // 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试',9=>'待提交'
 				triggered: false,
 				list: [{
 						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
@@ -126,7 +126,8 @@
 				const callBack = (vm, result) => {
 					// 后台自动判断入驻流程是否完成，前台通过status确定状态
 					if (result && result.record) {
-						vm.status = result.record.status
+						// vm.status = result.record.status
+						vm.status = 0
 					}
 				}
 				await app.getBaseInfo(this, callBack)

src/pages/settle/base.vue

 <template>
 	<view class="content">
+		<Settle :index="2">
 		<view class="title">入驻基本信息</view>
 		<view class="base-list">
 			<!--view class="item item-input flex-yc">
@@ -48,11 +49,6 @@
 				placeholder-style='color:#CCCCCC;font-size:32rpx;'/>
 			</view>
 			<view class="tips bottom_padding_80">（选填项）输入可投入交付服务的人员数量</view>
-			
-			
-			
-			
-			
 			<view class="newAddressView">
 				<view class="newAddressTitleView"  @click="locationClick()">
 					<view class="address">
@@ -82,23 +78,27 @@
 		<view class="btn-wrap flex-xc">
 
 			<button class="btn-submit" :disabled="!submitStatus" @click="$u.debounce(submitBaseInfo, 500)">
-
 			<!--view class="">submitBaseInfo</view-->
 			<!--button class="btn-submit" :disabled="!submitStatus" @click="submitBaseInfo()"-->
-
 				确定
 			</button>
 		</view>
+		</Settle>
 	</view>
 </template>
 
 <script>
+	import Settle from '@/components/settle/index.vue'
+
 	let r = require("../../libs/bmap-wx.min.js");
 	let h = new r.BMapWX({
 		// ak: "rpVq5d3yxaRCoKzVwmFMo0o4iC524CAG",
 		ak: "lF1HoyXdiv4uZx6TrGQEZs48F5y8kEHI"
 	});
 	export default {
+		components: {
+			Settle
+		},
 		data() {
 			return {
 				baseInfo: {
@@ -345,7 +345,9 @@
 				let timer = setTimeout(() => {
 					clearTimeout(timer)
 					uni.navigateTo({
-						url:'/pages/settle/file'
+						url:'/pages/settle/file',
+						"animationType": "fade-in",
+						"animationDuration": 300
 					})
 				}, 2000)
 			},

src/pages/settle/file.vue

 <template>
 	<view class="page-content">
+		<Settle :index="2">
 		<view class="title">入驻充电安装业务所需资料</view>
 		<view class="base-list">
 			<template v-for="(fileItem, index) in formShowList">
@@ -41,11 +42,16 @@
 	                        }}
 			</button>
 		</view>
+		</Settle>
 	</view>
 </template>
 
 <script>
+	import Settle from '@/components/settle/index.vue'
 	export default {
+		components: {
+			Settle
+		},
 		data() {
 			return {
 				fileInfo: {

src/pages/settle/index.vue

 <template>
 	<view class="back_view">
-		<image class="theme_image" :src="theme_url" mode="widthFix"></image>
-	    <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 :class="isStop ? 'bottom_btn apply_color' : 'bottom_btn default_color' "
-			@click="$u.deapplyClick">
-	    		<text class="bottom_title" v-if="!isStop">浏览 {{count}} 秒后可申请入驻</text>
-				<text class="bottom_title" v-if="isStop">申请入驻</text>
-	    	</view> -->
+		<Settle :index="1">
+			<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>
+			<button class="bottom_btn apply_color" style="margin-bottom: 88rpx;" @click="handleClick">
+				<text class="bottom_title">申请入驻</text>
+			</button>
+		</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
+				clicked: false,
+				settledInfo: null,
+				status: ''
 			}
 		},
 		onLoad(e) {
+			this.clicked = false
 			this.initpageData(e)
-			this.startCounting()
-		},
-		onShow(){
-			// if(!this.settledInfo){
-			// 	this.getBaseInfo()
-			// }
-			uni.hideLoading()
 		},
 		methods: {
-			initpageData(option){
+			initpageData(option) {
 				let recommender = ''
-				if(option && option.q){
+				if (option && option.q) {
 					const urlLink = decodeURIComponent(option.q)
-					recommender = this.getQueryVariable(urlLink,'recommender')
+					recommender = this.getQueryVariable(urlLink, 'recommender')
 					getApp().globalData.settleRecommend = recommender
 				}
-				if(option && option.recommender){
+				if (option && option.recommender) {
 					recommender = decodeURI(option.recommender)
 					getApp().globalData.settleRecommend = recommender
 				}
 			},
-			getQueryVariable(url,key){
+			getQueryVariable(url, key) {
 				const queryStringArr = url.split('?')
 				let val = ''
 				let queryStr = queryStringArr && queryStringArr.length > 1 && queryStringArr[1]
-				if(!queryStr){
+				if (!queryStr) {
 					return
 				}
 				let queryArr = queryStr.split("&");
-			   for (let i=0;i<queryArr.length;i++) {
+				for (let i = 0; i < queryArr.length; i++) {
 					let pair = queryArr[i].split("=");
-				   if(pair[0] == key){
+					if (pair[0] == key) {
 						val = pair[1];
 					}
 				}
 				return val
 			},
-			async getBaseInfo(){
+			async getBaseInfo() {
 				const app = getApp()
-				const callBack = (vm,result)=>{
+				const callBack = (vm, result) => {
 					vm.settledInfo = result
 					vm.status = result.record.status
 				}
-				let settledInfo = await app.getBaseInfo(this,callBack)
-				if(!settledInfo){
+				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
-
-				}
-
+			handleClick() {
+				if (this.clicked) return
+				this.clicked = true
+				this.applyClick()
 			},
-
-			applyClick: async function () {
-
-				if(!this.isStop){
-					return
-				}
-				this.saving = true
-				if(!this.settledInfo){
+			applyClick: async function() {
+				if (!this.settledInfo) {
 					await this.getBaseInfo()
 					this.jumpJudge()
-					this.saving = false
 					return
 				}
 				this.jumpJudge()
 			},
-			jumpJudge(){
-				if(this.status>0){
+			jumpJudge() {
+				this.clicked = false
+				if (this.status > 0) {
 					uni.navigateTo({
-						url:'/pages/settle/prompt'
+						url: '/pages/settle/prompt'
 					})
 					return
 				}
 				uni.navigateTo({
-					url:'/pages/settle/base'
+					url: '/pages/settle/base',
+					"animationType": "fade-in",
+					"animationDuration": 300
 				})
 			}
 
@@ -128,10 +156,9 @@
 	}
 </script>
 
-<style lang="scss">
-
-	.back_view{
-		background-color: #FFFFFF;
+<style lang="scss" scoped>
+	.back_view {
+		background-color: #F4F5F7;
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -140,17 +167,50 @@
 		flex-direction: column;
 	}
 
-	.theme_image{
+	.introduction {
+		border-radius: 12rpx;
+		margin-left: 30rpx;
+		margin-right: 30rpx;
+		margin-top: -112rpx;
+		background-color: #FFFFFF;
+		overflow: auto;
+		height: calc(100vh - 368rpx);
+	}
+
+	.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;
+	}
+
+	.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;;
+	.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;
@@ -158,36 +218,37 @@
 		justify-content: center;
 	}
 
-	.bottom_btn{
+	.bottom_btn {
 		margin-top: 30rpx;
 		width: 600rpx;
 		height: 104rpx;
-		line-height:96rpx;
+		line-height: 96rpx;
 		border-radius: 54rpx;
 		// border: 4rpx solid #FFFFFF;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		&.apply_color{
+
+		&.apply_color {
+
 			// border: 4rpx solid #2272FF;
-            .bottom_title{
+			.bottom_title {
 				color: #fff;
 			}
 		}
 	}
 
-	.bottom_title{
+	.bottom_title {
 		font-weight: bold;
 		font-size: 32rpx;
 		color: #2272FF;
 	}
 
-	.default_color{
+	.default_color {
 		background-color: #fff;
 	}
 
-	.apply_color{
+	.apply_color {
 		background-color: #2272FF;
 	}
-
 </style>

src/pages/settle/prompt.vue

@@ -65,7 +65,7 @@
 					btnTxt:'去接单广场逛逛',
 					url:'/pages/take/index'
 				}],
-				// 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试'
+				// 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试',9=>'待提交'
 				status:'',
 				info:null,