缴纳保证金

src/components/settle/agreement.vue

@@ -23,7 +23,7 @@
 						'4.与人交流时态度良好，沟通顺畅；'
 					]
 				}, {
-					title: '一、注意事项',
+					title: '二、注意事项',
 					content: [
 						'1.平台会对每笔订单收取一定比例的服务费抽成；',
 						'2.若审核通过，平台工作人员将会电话联系您，并邀约参加师傅培训会，请您耐心等待；',

src/pages.json

@@ -101,7 +101,9 @@
 		{
 			"path": "pages/settle/pay-ensure",
 			"style": {
-				"navigationBarTitleText": "缴纳设备押金"
+				"navigationBarTitleText": "缴纳设备押金",
+				"navigationStyle": "custom",
+				"disableScroll": true
 			}
 		},
 		{
@@ -239,6 +241,11 @@
 				"path": "pages/settle/file", //启动页面，必选
 				"query": "" //启动参数，在页面的onLoad函数里面得到
 			},
+			{
+				"name": "缴纳保证金", //模式名称
+				"path": "pages/settle/pay-ensure", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			},
 			{
 				"name": "签约页面", //模式名称
 				"path": "pages/settle/sign-contract", //启动页面，必选

src/pages/settle/pay-ensure.vue

 <template>
 	<view class="content">
+		<Settle :index="5">
 			<view class="base-list">
 				<view class="title">充电桩安装需缴纳设备押金</view>
-			<view class="price"><text>¥</text>{{settledInfo.record.deposit}}</view>
+				<view class="price"><text>¥ </text>{{settledInfo.record.deposit}}</view>
 				<view class="list">
 					<view class="item u-flex u-row-between">
 						<view class="txt">您已缴纳金额</view>
-					<view class="txt">¥ 0.00</view>
+						<view class="txt-value">¥ 0.00</view>
 					</view>
+					<view class="line-view"></view>
 					<view class="item u-flex u-row-between">
 						<view class="txt">待缴纳金额</view>
-					<view class="txt">¥ {{settledInfo.record.deposit}}</view>
+						<view class="txt-value">¥ {{settledInfo.record.deposit}}</view>
 					</view>
 				</view>
-<!-- 			<view class="tips">你已缴纳金额：1000.00元</view>
+				<!-- 			<view class="tips">你已缴纳金额：1000.00元</view>
 			<view class="tips">充电桩安装需缴纳保证金：1000元待缴金额：1000元</view> -->
 			</view>
-		<view class="seat"></view>
+
+			<template v-slot:bottom>
 				<view class="btn-wrap flex-xc">
 					<button class="btn-submit" :disabled="saving" @click="paySubmit">
-				{{saving ? '支付中……' : '微信支付'}}
+						<image class="button-image" mode="widthFix" src="../../static/settle/weixin@3x.png"></image>
+						<text>{{saving ? '支付中……' : '微信支付'}}</text>
 					</button>
 				</view>
+			</template>
+		</Settle>
 	</view>
 </template>
 
 <script>
+	import Settle from '@/components/settle/index.vue'
 	import pingpp from '@/include/libs/pingpp.js'
 	const globalUrl = process.uniEnv || {}
 	import util from '@/utils/util.js'
 	export default {
+		components: {
+			Settle
+		},
 		data() {
 			return {
 				saving: false,
-				paySuccess:false,
-				payResult:{
-					oid:''
+				paySuccess: false,
+				payResult: {
+					oid: ''
+				},
+				isRefresh: false,
+				settledInfo: {
+					record: {
+						deposit: ''
+					}
 				},
-				isRefresh:false,
-				settledInfo:null,
 			}
 		},
 		onLoad(e) {
 
 		},
-		onShow(){
-			if(!this.settledInfo){
+		onShow() {
+			if (!this.settledInfo.record.deposit) {
 				this.getBaseInfo()
 			}
 		},
 		computed: {},
-		watch:{
-			isRefresh(val){
+		watch: {
+			isRefresh(val) {
 				this.getBaseInfo()
 			}
 		},
@@ -59,42 +73,42 @@
 
 		},
 		methods: {
-			successCallback(){
+			successCallback() {
 				uni.navigateTo({
-					url:'/pages/settle/prompt'
+					url: '/pages/settle/prompt'
 				})
 			},
-			async getBaseInfo(){
+			async getBaseInfo() {
 				const app = getApp()
-				const callBack = (vm,result)=>{
+				const callBack = (vm, result) => {
 					vm.settledInfo = result
 				}
 				let settledInfo = app.globalData.settledInfo
-				if(settledInfo){
-					callBack(this,settledInfo)
+				if (settledInfo) {
+					callBack(this, settledInfo)
 					return
 				}
-				await app.getBaseInfo(this,callBack)
+				await app.getBaseInfo(this, callBack)
 
 			},
-			async pending(){
+			async pending() {
 				// const timer = setTimeout(async ()=>{
 				// 	clearTimeout(timer)
 				const params = {
 					...this.payResult
 				}
 				const res = await this.$u.api.getSettleDepositResult(params);
-					if(res.status!==true){
+				if (res.status !== true) {
 					this.saving = false
 					return
 				}
 				uni.showToast({
-						title:'支付成功',
+					title: '支付成功',
 				})
-					let timer = setTimeout(()=>{
+				let timer = setTimeout(() => {
 					clearTimeout(timer)
 					this.successCallback()
-					},3000)
+				}, 3000)
 			},
 			getCode: async function() {
 				let that = this
@@ -127,33 +141,33 @@
 				const self = this
 				this.saving = true
 				uni.showLoading({
-					title:'支付中……'
+					title: '支付中……'
 				})
 				// 提交支付订单
 				const code = await this.getCode()
 				const params = {
 					oid: this.settledInfo.record.id,
 					type: 'wx_lite',
-					openid:util.getOpenid(),
-					code:code
+					openid: util.getOpenid(),
+					code: code
 					// appid:'wxd1d6eede324b0465'
 				}
 				const response = await this.$u.api.paySettleDeposit(params)
-				if (response.status!==true) {
+				if (response.status !== true) {
 					uni.showToast({
 						title: response.message,
-						icon:'none'
+						icon: 'none'
 					})
 					return
 				}
-				let timer = setTimeout(res=>{
+				let timer = setTimeout(res => {
 					clearTimeout(timer)
 					uni.showModal({
 						title: '提示',
 						content: '支付结果',
-						confirmText:'成功',
-						cancelText:'失败',
-					    success: function (res) {
+						confirmText: '成功',
+						cancelText: '失败',
+						success: function(res) {
 							if (res.confirm) {
 								// console.log(res.confirm,'res.confirm')
 								self.pending()
@@ -163,7 +177,7 @@
 							}
 						}
 					});
-				},1000)
+				}, 1000)
 
 				const {
 					charge,
@@ -177,7 +191,7 @@
 						// 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
 						uni.showToast({
 							title: '支付成功',
-							icon:'none'
+							icon: 'none'
 						})
 					} else if (result == "fail") {
 						// charge 不正确或者微信公众账号/QQ 公众号/支付宝口碑支付失败时会在此处返回
@@ -186,7 +200,7 @@
 						// 微信公众账号、QQ 公众号、支付宝口碑支付取消支付
 						uni.showToast({
 							title: '您已经取消了支付',
-							icon:'none'
+							icon: 'none'
 						})
 					}
 				});
@@ -195,45 +209,80 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.content {
+		background-color: #F4F5F7;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.base-list {
+		background-color: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 30rpx;
+		min-height: 160rpx;
+		margin-bottom: 188rpx;
 		text-align: center;
-		.txt{
+
+		.txt {
 
 			line-height: 50rpx;
-			font-size:36rpx;
+			font-size: 36rpx;
 			color: #333;
 		}
-		.title{
-			margin-top:120rpx;
+
+		.title {
+			margin-top: 80rpx;
 			font-weight: bold;
 			line-height: 50rpx;
-			font-size:36rpx;
+			font-size: 40rpx;
 			color: #333;
 		}
-		.price{
-			margin-top:120rpx;
+
+		.price {
+			margin-top: 100rpx;
 			font-weight: bold;
 			line-height: 90rpx;
-			font-size:64rpx;
-			color: #333;
-			text{
-				font-size:32rpx;
+			font-size: 64rpx;
+			color: #2272FF;
+
+			text {
+				font-size: 32rpx;
 			}
 		}
-		.list{
-			margin-top:200rpx;
-			padding:0 50rpx;
-			.item{
-				padding:28rpx 0;
-				border-bottom: 1rpx solid #FDFDFD;
+
+		.list {
+			margin-top: 200rpx;
+			padding: 0 50rpx;
+
+			.line-view {
+				background-color: #F4F5F7;
+				height: 2rpx;
+				width: 100%;
+			}
+
+			.item {
+				padding: 28rpx 0;
+			}
+
+			.txt {
+				line-height: 44rpx;
+				font-size: 28rpx;
+				color: #666666;
 			}
-			.txt{
+
+			.txt-value {
 				line-height: 44rpx;
-				font-size:32rpx;
+				font-size: 28rpx;
 				color: #333;
 			}
 		}
+
 		.tips {
 			margin-top: 20rpx;
 			padding: 0 30rpx;
@@ -249,29 +298,28 @@
 
 	/*提交按钮*/
 	.btn-wrap {
-		position: fixed;
-		// margin: px2rem(36);
-		left: 0;
-		right: 0;
-		bottom: 0;
-		padding: 30rpx 0;
-		background: #f3f3f3;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.button-image {
+			width: 38rpx;
+			padding-right: 20rpx;
+		}
 
 		.btn-submit {
 			width: 600rpx;
-			border-radius: 52rpx;
-			// left: 5%;
-			// bottom: px2rem(36);
 			height: 104rpx;
 			line-height: 104rpx;
-			background: #2272ff;
+			border-radius: 52rpx;
+			background: #2272FF;
 			font-size: 32rpx;
 			color: #fff;
 
-			&:disabled {
-				border: 2rpx solid #999;
-				background-color: #f3f3f3;
-				color: #999;
+			&[disabled] {
+				background-color: #D1D4D4;
+				color: #FFFFFF;
 			}
 		}
 	}