|
@@ -1,6 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
- <ujp-navbar title="开始充电" :is-back="isback" ></ujp-navbar>
|
|
|
|
|
|
+ <ujp-navbar title="开始充电" :is-back="isback" >
|
|
|
|
+ <view class="exchange " slot="right" @click="showmodal2=true">充电说明</view>
|
|
|
|
+ </ujp-navbar>
|
|
|
|
|
|
<view class="carImg" v-if="personInfo&&personInfo.userType!=2" >
|
|
<view class="carImg" v-if="personInfo&&personInfo.userType!=2" >
|
|
<img @click="gotoLogin" src="@/assets/img/gologin/img.png">
|
|
<img @click="gotoLogin" src="@/assets/img/gologin/img.png">
|
|
@@ -8,7 +10,7 @@
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view v-else>
|
|
<!-- 优惠 -->
|
|
<!-- 优惠 -->
|
|
- <view class="discounts" style="padding:0 18px;" v-if="bannerList.length">
|
|
|
|
|
|
+ <view class="discounts" style="padding:0 36rpx;" v-if="bannerList.length">
|
|
<u-swiper bg-color="#fff" mode="none" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
|
|
<u-swiper bg-color="#fff" mode="none" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
|
|
:name="'picUrl'">
|
|
:name="'picUrl'">
|
|
</u-swiper>
|
|
</u-swiper>
|
|
@@ -141,20 +143,10 @@
|
|
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 优惠券2 -->
|
|
<!-- 优惠券2 -->
|
|
- <view class="discounts2" v-if="false">
|
|
|
|
- <view class="left lefttitle">
|
|
|
|
- 支付方式
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="right" @click="paySelect=true" style="color:#101010" >
|
|
|
|
- {{payName}}
|
|
|
|
- <view class="iconfont"></view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
|
|
+
|
|
|
|
|
|
- <view class="discounts2">
|
|
|
|
- <view class="left lefttitle">
|
|
|
|
|
|
+ <view class="member">
|
|
|
|
+ <view class="actively">
|
|
优惠券
|
|
优惠券
|
|
</view>
|
|
</view>
|
|
|
|
|
|
@@ -222,24 +214,32 @@
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
- <view class="bottom">
|
|
|
|
- <view class="botton"
|
|
|
|
|
|
+ <view class="botton">
|
|
|
|
+ <button class="bottonBtn"
|
|
@click="submit"
|
|
@click="submit"
|
|
- >开始充电</view>
|
|
|
|
|
|
+ >开始充电</button>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
|
|
+ <u-modal v-model="showmodal2"
|
|
|
|
+ confirm-text="知道了"
|
|
|
|
+ title="充电说明" >
|
|
|
|
+
|
|
|
|
+ <view class="textinfo" style="padding: 10px;">
|
|
|
|
+
|
|
|
|
+ <view>
|
|
|
|
+ 1.最终结算金额将以实际充入电量为准;<br/>
|
|
|
|
+ 2.充满自停模式需要您的余额不低于10元才可充电;<br/>
|
|
|
|
+ 3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入(一般误差约几分钱);<br/>
|
|
|
|
+ 4.完成充电后,在满足条件的情况下,优惠券自动抵扣;提前结束充电则不使用优惠券并返还至您的卡包。<br/>
|
|
|
|
+
|
|
|
|
+ 5.先付后退模式,无法享受平台会员的服务费折扣、优惠券等优惠活动。<br/>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </u-modal>
|
|
|
|
+
|
|
|
|
|
|
- <view class="textinfo">
|
|
|
|
- <p>充电说明:</p>
|
|
|
|
- <view>
|
|
|
|
- 1.最终结算金额将以实际充入电量为准;<br/>
|
|
|
|
- 2.充满自停模式需要您的余额不低于10元才可充电;<br/>
|
|
|
|
- 3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入(一般误差约几分钱);<br/>
|
|
|
|
- 4.完成充电后,在满足条件的情况下,优惠券自动抵扣;提前结束充电则不使用优惠券并返还至您的卡包。<br/>
|
|
|
|
-
|
|
|
|
- 5.先付后退模式,无法享受平台会员的服务费折扣、优惠券等优惠活动。<br/>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
|
|
<!-- <view class="but-box" style="margin-bottom: 20px;">
|
|
<!-- <view class="but-box" style="margin-bottom: 20px;">
|
|
<u-button
|
|
<u-button
|
|
@@ -380,7 +380,7 @@
|
|
|
|
|
|
:class="otherNum_f? 'active' : ''"
|
|
:class="otherNum_f? 'active' : ''"
|
|
class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
|
|
class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
|
|
- <u-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit" :border="true" />
|
|
|
|
|
|
+ <ujp-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit" :border="true" />
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
@@ -441,7 +441,8 @@
|
|
moneyActiveClass_f: "-1",
|
|
moneyActiveClass_f: "-1",
|
|
detail: {},
|
|
detail: {},
|
|
couponsuse:'',
|
|
couponsuse:'',
|
|
- showmodal:false,
|
|
|
|
|
|
+ showmodal:false,
|
|
|
|
+ showmodal2:false,
|
|
//提交信息
|
|
//提交信息
|
|
//提交信息
|
|
//提交信息
|
|
submitForm_f: {
|
|
submitForm_f: {
|
|
@@ -1212,7 +1213,16 @@
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .exchange{
|
|
|
|
+ margin-right: 32rpx;
|
|
|
|
+ color: rgba(119, 119, 119, 100);
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ //margin-right: 6rpx;
|
|
|
|
+ }
|
|
.rightspan{
|
|
.rightspan{
|
|
float: right;
|
|
float: right;
|
|
}
|
|
}
|
|
@@ -1223,7 +1233,7 @@
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
- margin-bottom: 8px;
|
|
|
|
|
|
+ margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
.contentbody{
|
|
.contentbody{
|
|
|
|
|
|
@@ -1255,23 +1265,23 @@
|
|
}
|
|
}
|
|
.textinfo{
|
|
.textinfo{
|
|
padding: 40rpx;
|
|
padding: 40rpx;
|
|
- font-size: 14px !important;
|
|
|
|
|
|
+ font-size: 24rpx !important;
|
|
color: #999999;
|
|
color: #999999;
|
|
|
|
|
|
p{
|
|
p{
|
|
- font-size: 16px !important;
|
|
|
|
|
|
+ font-size: 32rpx !important;
|
|
color:#101010;
|
|
color:#101010;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.lefttitle{
|
|
.lefttitle{
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
- font-size: 16px
|
|
|
|
|
|
+ font-size: 32rpx
|
|
}
|
|
}
|
|
@import "@/_theme.scss";
|
|
@import "@/_theme.scss";
|
|
.listlength{
|
|
.listlength{
|
|
float: right;
|
|
float: right;
|
|
- padding-right: 10px;
|
|
|
|
|
|
+ padding-right: 20rpx;
|
|
}
|
|
}
|
|
/deep/.u-drawer-content{
|
|
/deep/.u-drawer-content{
|
|
border-radius: 10px 10px 0 0
|
|
border-radius: 10px 10px 0 0
|
|
@@ -1299,7 +1309,7 @@
|
|
|
|
|
|
}
|
|
}
|
|
.paySelect{
|
|
.paySelect{
|
|
- padding: 16px;
|
|
|
|
|
|
+ padding: 32rpx;
|
|
.title{
|
|
.title{
|
|
font-size:40rpx
|
|
font-size:40rpx
|
|
}
|
|
}
|
|
@@ -1321,8 +1331,8 @@
|
|
}
|
|
}
|
|
|
|
|
|
.recharge {
|
|
.recharge {
|
|
- padding: 16px;
|
|
|
|
- // padding-bottom: 80px;
|
|
|
|
|
|
+ padding: 32rpx;
|
|
|
|
+ padding-bottom: 100px;
|
|
.title {
|
|
.title {
|
|
@include themeify{
|
|
@include themeify{
|
|
font-size: themed('font-size3');
|
|
font-size: themed('font-size3');
|
|
@@ -1348,8 +1358,8 @@ position: relative;
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
// justify-content: space-between;
|
|
- margin-top: 12px;
|
|
|
|
- margin-bottom: 5px;
|
|
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
|
.recharge-item {
|
|
.recharge-item {
|
|
.u-input {
|
|
.u-input {
|
|
@@ -1357,12 +1367,12 @@ position: relative;
|
|
}
|
|
}
|
|
width: 31%;
|
|
width: 31%;
|
|
border: 1px solid #e3e3e3;
|
|
border: 1px solid #e3e3e3;
|
|
- padding: 10px 0;
|
|
|
|
|
|
+ padding: 20rpx 0;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
position: relative;
|
|
position: relative;
|
|
- margin-left: 5px;
|
|
|
|
|
|
+ margin-left: 10rpx;
|
|
@include themeify{
|
|
@include themeify{
|
|
font-size: themed('font-size3');
|
|
font-size: themed('font-size3');
|
|
}
|
|
}
|
|
@@ -1470,7 +1480,7 @@ position: relative;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
|
/deep/.u-radio {
|
|
/deep/.u-radio {
|
|
- padding: 18px 16px;
|
|
|
|
|
|
+ padding: 36rpx 32rpx;
|
|
margin-top: 12px;
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 48px;
|
|
height: 48px;
|
|
@@ -1487,7 +1497,7 @@ position: relative;
|
|
// }
|
|
// }
|
|
|
|
|
|
/deep/.u-radio__icon-wrap {
|
|
/deep/.u-radio__icon-wrap {
|
|
- left: 16px;
|
|
|
|
|
|
+ left: 32rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -1565,22 +1575,24 @@ position: relative;
|
|
|
|
|
|
// 会员活动
|
|
// 会员活动
|
|
.member{
|
|
.member{
|
|
- margin-top: 20px;
|
|
|
|
|
|
+ margin-top: 24rpx;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- flex-direction: column;
|
|
|
|
-
|
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ align-items: center;
|
|
.actively{
|
|
.actively{
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
|
- font-size: 20px;
|
|
|
|
|
|
+
|
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
|
}
|
|
}
|
|
- .type{
|
|
|
|
|
|
+ .type,.right{
|
|
color: rgba(16, 18, 18, 100);
|
|
color: rgba(16, 18, 18, 100);
|
|
- font-size: 16px;
|
|
|
|
- line-height: 28px;
|
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ //line-height: 28px;
|
|
padding-right: 10px;
|
|
padding-right: 10px;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
}
|
|
}
|
|
.iconfont{
|
|
.iconfont{
|
|
@@ -1600,33 +1612,41 @@ position: relative;
|
|
|
|
|
|
|
|
|
|
// 尾部
|
|
// 尾部
|
|
- .bottom {
|
|
|
|
- background: #fff;
|
|
|
|
|
|
+ .botton {
|
|
|
|
+ border: 1px solid rgba(242, 242, 242, 1);
|
|
|
|
+ background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
|
|
|
|
+ position: fixed;
|
|
|
|
+
|
|
|
|
+ //background: #fff;
|
|
width: 100%;
|
|
width: 100%;
|
|
- // height: 64px;
|
|
|
|
- // line-height: 64px;
|
|
|
|
- // position: fixed;
|
|
|
|
- // bottom: 0;
|
|
|
|
- // left: 0;
|
|
|
|
|
|
+
|
|
|
|
+ padding: 24rpx 40rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
z-index: 999;
|
|
z-index: 999;
|
|
- padding: 0px 16px 16px;
|
|
|
|
-
|
|
|
|
- .botton {
|
|
|
|
- //width: 343px;
|
|
|
|
- height: 40px;
|
|
|
|
- line-height: 40px;
|
|
|
|
- font-size:16px;
|
|
|
|
- border-radius: 50px;
|
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
|
-/* font-size: 16px;*/
|
|
|
|
- // @include themeify{
|
|
|
|
- // font-size: themed('font-size3');
|
|
|
|
- // line-height: themed('font-size15');
|
|
|
|
- // height: themed('font-size15');
|
|
|
|
- // }
|
|
|
|
- text-align: center;
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
|
+ //padding: 0px 32rpx 32rpx;
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
+ button {
|
|
|
|
+
|
|
|
|
+ margin-left: 40rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ //width: 45.8%;
|
|
|
|
+ // background-color: black;
|
|
|
|
+ // color: #fff;
|
|
|
|
+ // background-color: rgba(255, 255, 255, 1);
|
|
|
|
+ // color: rgba(0, 185, 98, 1);
|
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ height:88rpx;
|
|
|
|
+ border-radius: 50px;
|
|
|
|
+ font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|