471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="押金" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></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>
|
||
{{fee.feePrice}}元/小时，租借{{fee.feeFreeTime}}分钟内免费
|
||
</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小时封顶{{sum}}元，总封顶{{fee.feeMaxPrice}}元
|
||
</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="imgad" 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" @click="btnweiyj">
|
||
确认并支付
|
||
</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>{{wxf}}</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" @click="btnzujie">
|
||
确认并租借
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
background: '#25CE88'
|
||
},
|
||
show: false,
|
||
depositfalse: false,
|
||
deposittrue:false,
|
||
sn:'',
|
||
fee:{},
|
||
sum:0,
|
||
wxf:'',
|
||
imgad:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.sn = option.sn
|
||
this.getemi()
|
||
this.getad()
|
||
this.getwxf()
|
||
},
|
||
methods: {
|
||
getad() {
|
||
this.$u.get("/app/ad").then((res) => {
|
||
if (res.code == 200) {
|
||
this.imgad = res.data.picture
|
||
}
|
||
})
|
||
},
|
||
btnzu() {
|
||
if(this.wxf > 550){
|
||
this.deposittrue = true
|
||
}else{
|
||
this.depositfalse = true
|
||
}
|
||
},
|
||
btnweiyj(){
|
||
uni.navigateTo({
|
||
url:'/pages/deposit/index'
|
||
})
|
||
},
|
||
btnyc() {
|
||
this.depositfalse = false
|
||
this.deposittrue = false
|
||
},
|
||
|
||
getemi(){
|
||
this.$u.get(`/app/cabinet/rentInfo/${this.sn}`).then(res => {
|
||
if(res.code == 200){
|
||
this.fee = res.data.fee
|
||
this.sum = this.fee.feePrice * 24
|
||
}
|
||
})
|
||
},
|
||
getwxf(){
|
||
this.$u.get('/wx/pay/score').then(res => {
|
||
if(res.code == 200){
|
||
this.wxf = res.data.userScore
|
||
}
|
||
})
|
||
},
|
||
|
||
// 确认并租借
|
||
btnzujie(){
|
||
let data = {
|
||
cabinetSn:this.sn,
|
||
rentType:2,
|
||
fee:{
|
||
feePrice:this.fee.feePrice,
|
||
feeMode:this.fee.feeMode,
|
||
feeMaxPrice:this.fee.feeMaxPrice,
|
||
feeFreeTime:this.fee.feeFreeTime
|
||
}
|
||
}
|
||
this.$u.post('/app/order/rent',data).then(res => {
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title:'租借成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
},1000)
|
||
}else if(res.code == 500){
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-title,
|
||
/deep/ .uicon-nav-back {
|
||
padding-bottom: 22rpx;
|
||
}
|
||
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;
|
||
}
|
||
}
|
||
.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;
|
||
|
||
.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> |