<template>
	<view class="page">
		<u-navbar title="押金" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
		<view class="box">
			<view class="listobj">
				<view class="title">适用接口</view>
				<image src="https://api.ccttiot.com/smartmeter/img/static/uFde2uGCtvfA3RS2C7q4" mode="" class="pica">
				</image>
				<view class="wz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/urpodioxdcaz8ukriOZN" mode=""></image>
					支持免押服务
				</view>
				<view class="wz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/urpodioxdcaz8ukriOZN" mode=""></image>
					3元/小时，租借5分钟内免费
				</view>
				<view class="wz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/urpodioxdcaz8ukriOZN" mode=""></image>
					不足一小时按一小时计算
				</view>
				<view class="wz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/urpodioxdcaz8ukriOZN" mode=""></image>
					每24小时封顶30元，总分顶99元
				</view>
				<view class="mianyj" @click="btnzu">
					免押金租借
				</view>
				<view class="zffen">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u48314R0s5J6QUXKpTYp" mode=""></image>
					微信支付分 | 550分以上优享
				</view>
				<view class="wts">
					点击即同意<text>《委托扣款授权书》</text>
				</view>
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uQq0ENieLfArog8TQQVN" mode="" class="pic"></image>
		</view>
		<!-- 遮罩层 -->
		<u-mask :show="show" @click="show = false"></u-mask>

		<!-- 支付分未达标 -->
		<view class="weidabiao" v-if="depositfalse">
			<view class="" style="text-align: right;margin-right: 40rpx;font-size: 40rpx;" @click="btnyc">X</view>
			<view class="tit">你的微信支付分未达标 </view>
			<view class="tit"> 微信支付分要求：550分以上</view>
			<view class="zfyj">需支付押金</view>
			<view class="je">￥99.00</view>
			<view class="fw">
				<view class="wz">服务商家</view>
				<view class="gl">创特</view>
			</view>
			<view style="width: 626rpx;height: 1px;background-color:#D8D8D8;margin: auto;margin-top: 42rpx;"></view>
			<view class="fw">
				<view class="wz">服务说明</view>
				<view class="gl">归还后从押金扣除实际产生的费用</view>
			</view>
			<view class="yuedu">
				请仔细阅读《微信支付分押金规则》，同意协议请 点击按钮
			</view>
			<view class="anniu">
				确认并支付
			</view>
		</view>
        <!-- 支付分达标 -->
		<view class="dabiao" v-if="deposittrue">
			<view class="" style="text-align: right;margin-right: 40rpx;font-size: 40rpx;" @click="btnyc">X</view>
			<view class="fen">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uW2U0U93W2oTmDlLf7mA" mode=""></image>
				<text>611</text>
			</view>
			<view class="tit">你的微信支付分已达标 </view>
			<view class="tit">可享租借充电宝免押金￥99.00</view>
			<view style="width: 626rpx;height: 1px;background-color:#D8D8D8;margin: auto;margin-top: 42rpx;"></view>
			<view class="fw">
				<view class="wz">服务商家</view>
				<view class="gl">创特</view>
			</view>
			<view class="fw">
				<view class="wz">服务说明</view>
				<view class="gl">租借充电宝时免除押金，归还后自动支付实际产生的费用</view>
			</view>
			<view class="yuedu">
				请仔细阅读《微信支付分押金规则》，同意协议请 点击按钮
			</view>
			<view class="anniu">
				确认并支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					background: '#25CE88'
				},
				show: false,
				depositfalse: false,
				deposittrue:false
			}
		},
		methods: {
			btnzu() {
                // this.depositfalse = true
				this.deposittrue = true
			},
			btnyc() {
				this.depositfalse = false
				this.deposittrue = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
        .dabiao {
        	width: 750rpx;
        	height: 1168rpx;
        	background: #FFFFFF;
        	position: fixed;
        	left: 50%;
        	transform: translateX(-50%);
        	bottom: 0;
        	padding-top: 78rpx;
        	box-sizing: border-box;
        	border-radius: 50rpx 50rpx 0 0;
            .fen{
				width: 100%;
				text-align: center;
				position: relative;
				text{
					font-weight: 700;
					font-size: 40rpx;
					color: #1DBE7B;
					position: absolute;
					top: 50rpx;
					left: 50%;
					transform: translateX(-58%);
				}
				image{
					width: 168rpx;
					height: 152rpx;
				}
			}
        	// text-align: center;
        	.anniu {
        		width: 558rpx;
        		height: 90rpx;
        		background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
        		border-radius: 54rpx 54rpx 54rpx 54rpx;
        		color: #fff;
        		font-size: 40rpx;
        		text-align: center;
        		line-height: 90rpx;
        		margin: auto;
        		margin-top: 74rpx;
        		margin-bottom: 104rpx;
        	}
        
        	.yuedu {
        		margin-top: 144rpx;
        		font-size: 28rpx;
        		color: #333333;
        		padding: 0 64rpx;
        		box-sizing: border-box;
        	}
        
        	.fw {
        		display: flex;
        		justify-content: space-between;
        		padding: 0 64rpx;
        		margin-top: 34rpx;
        		box-sizing: border-box;
        		.wz {
        			font-size: 28rpx;
        			color: #808080;
        		}
        
        		.gl {
        			width: 414rpx;
        			text-align: left;
        			font-size: 28rpx;
        			color: #333333;
        		}
        	}
        
        	.je {
        		font-weight: 600;
        		font-size: 60rpx;
        		color: #3D3D3D;
        		margin-top: 24rpx;
        		text-align: center;
        	}
        
        	.zfyj {
        		font-weight: 600;
        		font-size: 32rpx;
        		color: #3D3D3D;
        		margin-top: 82rpx;
        		text-align: center;
        	}
        
        	.tit {
        		font-weight: 600;
        		font-size: 32rpx;
        		color: #3D3D3D;
        		margin-top: 12rpx;
        		text-align: center;
        	}
        }
		.weidabiao {
			width: 750rpx;
			height: 1168rpx;
			background: #FFFFFF;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			padding-top: 78rpx;
			box-sizing: border-box;
			border-radius: 50rpx 50rpx 0 0;

			// text-align: center;
			.anniu {
				width: 558rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				color: #fff;
				font-size: 40rpx;
				text-align: center;
				line-height: 90rpx;
				margin: auto;
				margin-top: 74rpx;
				margin-bottom: 104rpx;
			}

			.yuedu {
				margin-top: 144rpx;
				font-size: 28rpx;
				color: #333333;
				padding: 0 64rpx;
				box-sizing: border-box;
			}

			.fw {
				display: flex;
				justify-content: space-between;
				padding: 0 64rpx;
				margin-top: 34rpx;
				box-sizing: border-box;

				.wz {
					font-size: 28rpx;
					color: #808080;
				}

				.gl {
					width: 414rpx;
					text-align: left;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.je {
				font-weight: 600;
				font-size: 60rpx;
				color: #3D3D3D;
				margin-top: 24rpx;
				text-align: center;
			}

			.zfyj {
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 82rpx;
				text-align: center;
			}

			.tit {
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 12rpx;
				text-align: center;
			}
		}

		.box {
			width: 750rpx;
			// height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 30rpx;

			.pic {
				width: 680rpx;
				height: 238rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-left: 36rpx;
				margin-top: 34rpx;
			}

			.listobj {
				width: 680rpx;
				height: 918rpx;
				background: #FFFFFF;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				margin: auto;
				padding-top: 48rpx;
				box-sizing: border-box;

				.wts {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 12rpx;

					text {
						color: #25CE88;
					}
				}

				.zffen {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 38rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-right: 5rpx;
					}
				}

				.mianyj {
					width: 558rpx;
					height: 90rpx;
					background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
					border-radius: 54rpx 54rpx 54rpx 54rpx;
					margin: auto;
					margin-top: 48rpx;
					color: #fff;
					font-weight: 500;
					font-size: 40rpx;
					text-align: center;
					line-height: 90rpx;
				}

				.wz {
					font-size: 28rpx;
					color: #333333;
					margin-top: 12rpx;
					padding-left: 72rpx;
					box-sizing: border-box;

					image {
						width: 26rpx;
						height: 26rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}
				}

				.pica {
					width: 650rpx;
					height: 296rpx;
				}

				.title {
					width: 680rpx;
					text-align: center;
					font-weight: 500;
					font-size: 40rpx;
					color: #3D3D3D;
				}
			}
		}
	}
</style>