395 lines
9.2 KiB
Vue
395 lines
9.2 KiB
Vue
<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> |