xinyi/powerbank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fdcd063c12
powerbank/page_user/yajin/index.vue

395 lines
9.2 KiB
Vue
Raw Normal View History

aaa
2024-05-15 18:01:50 +08:00
<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>
aa
2024-05-16 18:02:44 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uQq0ENieLfArog8TQQVN" mode="" class="pic"></image>
aaa
2024-05-15 18:01:50 +08:00
</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>
Reference in New Issue Copy Permalink