|
|
@@ -38,10 +38,10 @@
|
|
|
</view>
|
|
|
|
|
|
<scroll-view class="scroll-view_H" scroll-x="true" :scrollWithAnimation="true" @scroll="scroll"
|
|
|
- :scrollLeft="scrollLeftSet" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
|
|
|
+ :scrollLeft="scrollLeftSet" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
|
|
|
<view class="scroll-view-item_H" v-if="!ispay" v-for="(item,i) in cardList" :key="i">
|
|
|
- <view
|
|
|
- :style="'background-image: url('+item.monthlyRentCard.image+') ;'" :class="'cardtab card-'+i ">
|
|
|
+ <view :style="'background-image: url('+item.monthlyRentCard.image+') ;'"
|
|
|
+ :class="'cardtab card-'+i ">
|
|
|
<view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主
|
|
|
</view>
|
|
|
<view class="tag" v-else-if="item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
|
|
|
@@ -111,10 +111,49 @@
|
|
|
<view class="title">
|
|
|
可享一个月充电服务费<span style="color:#ec4f27">全免</span>
|
|
|
</view>
|
|
|
- <view class="line">
|
|
|
- <view v-show="detail.type==1">· 仅限<b>非运营车</b>车主或<b>新用户</b>购买和使用</view>
|
|
|
+ <view class="line" >
|
|
|
+ <!-- <view v-show="detail.type==1">· 仅限<b>非运营车</b>车主或<b>新用户</b>购买和使用</view>
|
|
|
<view>· 在指定充电站充电时，此单服务费<b>全免</b></view>
|
|
|
- <view>· 不可抵扣电费、停车费、占位费</view>
|
|
|
+ <view>· 不可抵扣电费、停车费、占位费</view> -->
|
|
|
+
|
|
|
+ <view class="lineInfo" v-show="detail.type==1" :class="detail.type==1?'lineInfo1':'lineInfo2'" >
|
|
|
+ <view class="lineSvg">
|
|
|
+ <img src="@/assets/img/buy/bus2.svg">
|
|
|
+ </view>
|
|
|
+ <view class="lineView">
|
|
|
+ <view class="lineTitle">适用车主</view>
|
|
|
+ <p class="linep">仅限非运营车车主或新用户购买和使用</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lineInfo" v-show="detail.type==2" :class="detail.type==1?'lineInfo1':'lineInfo2'" >
|
|
|
+ <view class="lineSvg">
|
|
|
+ <img src="@/assets/img/buy/bus.svg">
|
|
|
+ </view>
|
|
|
+ <view class="lineView">
|
|
|
+ <view class="lineTitle">适用车主</view>
|
|
|
+ <p class="linep">适合运营车车主购买和使用</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lineInfo" :class="detail.type==1?'lineInfo1':'lineInfo2'" >
|
|
|
+ <view class="lineSvg">
|
|
|
+ <img src="@/assets/img/buy/fee.svg">
|
|
|
+ </view>
|
|
|
+ <view class="lineView">
|
|
|
+ <view class="lineTitle">充电免服务费</view>
|
|
|
+ <p class="linep">在指定站点充电时，此单服务费全免</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lineInfo" :class="detail.type==1?'lineInfo1':'lineInfo2'" >
|
|
|
+ <view class="lineSvg">
|
|
|
+ <img src="@/assets/img/buy/tips.svg">
|
|
|
+ </view>
|
|
|
+ <view class="lineView">
|
|
|
+ <view class="lineTitle">注意事项</view>
|
|
|
+ <p class="linep">不可抵扣电费、停车费、占位费</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
|
|
|
@@ -246,15 +285,15 @@
|
|
|
<view class="bot-line"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="upupupView" v-show="flag==1" >
|
|
|
- <view class="upupupImg">
|
|
|
- <img src="@/assets/img/upupup.svg">
|
|
|
- </view>
|
|
|
-
|
|
|
- <p>上划查看更多内容</p>
|
|
|
+
|
|
|
+ <view class="upupupView" v-show="flag==1">
|
|
|
+ <view class="upupupImg">
|
|
|
+ <img src="@/assets/img/upupup.svg">
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
+ <p>上划查看更多内容</p>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 按钮 -->
|
|
|
<view class="button" v-if="!ispay">
|
|
|
@@ -448,34 +487,36 @@
|
|
|
},
|
|
|
methods: {
|
|
|
scrolltolower: function(e) {
|
|
|
- //
|
|
|
-
|
|
|
+ //
|
|
|
+
|
|
|
},
|
|
|
- scrolltoupper:function(e) {
|
|
|
-
|
|
|
+ scrolltoupper: function(e) {
|
|
|
+
|
|
|
//this.scrollLeftSetBl=false;
|
|
|
},
|
|
|
scroll: function(e) {
|
|
|
-
|
|
|
- console.log(JSON.stringify(e.detail))
|
|
|
-
|
|
|
+
|
|
|
+ if (this.scrollLeftSetBl) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.scrollLeftSetBl = true;
|
|
|
var scrollWidth = e.detail.scrollWidth
|
|
|
- if (e.detail.deltaX>0) {
|
|
|
+ if (e.detail.deltaX > 0) {
|
|
|
//右移动
|
|
|
this.scrollLeftSet = 0;
|
|
|
this.checkboxChange(this.cardList[0].monthlyRentCard)
|
|
|
} else {
|
|
|
//左移动
|
|
|
- this.scrollLeftSet = scrollWidth
|
|
|
+ this.scrollLeftSet = scrollWidth
|
|
|
if (this.cardList.length > 1) {
|
|
|
this.checkboxChange(this.cardList[1].monthlyRentCard)
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
|
|
+ this.scrollLeftSetBl = false;
|
|
|
//this.old.scrollTop = e.detail.scrollTop
|
|
|
- this.scrollLeftOldSet =e.detail.scrollLeft
|
|
|
+ this.scrollLeftOldSet = e.detail.scrollLeft
|
|
|
},
|
|
|
confirmPhone() {
|
|
|
this.show = false;
|
|
|
@@ -694,10 +735,10 @@
|
|
|
|
|
|
}
|
|
|
if (this.flag == 0) {
|
|
|
- this.flag = 1;
|
|
|
- setTimeout(()=>{
|
|
|
- this.flag = 2;
|
|
|
- },5000)
|
|
|
+ this.flag = 1;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.flag = 2;
|
|
|
+ }, 5000)
|
|
|
}
|
|
|
}
|
|
|
uni.hideLoading();
|
|
|
@@ -845,34 +886,35 @@
|
|
|
top: 15px;
|
|
|
}
|
|
|
}
|
|
|
- .upupupImg{
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
- .upupupView {
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- padding: 30rpx;
|
|
|
+
|
|
|
+ .upupupImg {
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upupupView {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 30rpx;
|
|
|
border-radius: 12px;
|
|
|
position: absolute;
|
|
|
background: rgb(0 0 0 / 70%);
|
|
|
top: 50%;
|
|
|
- transform: translate(-50%);
|
|
|
- left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ left: 50%;
|
|
|
color: #fff;
|
|
|
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- .upupupView img {
|
|
|
- top: 15px;
|
|
|
+ .upupupView img {
|
|
|
+ top: 15px;
|
|
|
position: relative;
|
|
|
- width: 60px;
|
|
|
- animation: movepoint 2s infinite;
|
|
|
+ width: 60px;
|
|
|
+ animation: movepoint 2s infinite;
|
|
|
-webkit-animation: movepoint 2s infinite;
|
|
|
}
|
|
|
</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
.scroll-Y {
|
|
|
height: 300rpx;
|
|
|
}
|
|
|
@@ -923,7 +965,7 @@
|
|
|
text-align: center;
|
|
|
line-height: 40rpx;
|
|
|
padding: 0 12rpx;
|
|
|
- right: 24rpx;
|
|
|
+ right: 26rpx;
|
|
|
top: 0rpx;
|
|
|
border-radius: 0 12px 0 12px;
|
|
|
|
|
|
@@ -1114,21 +1156,54 @@
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
font-size: 40rpx;
|
|
|
text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
color: #666666;
|
|
|
-
|
|
|
- b {
|
|
|
- color: #333;
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ .lineInfo1{
|
|
|
+ border: 1px solid #D5C5B5;
|
|
|
+ background-color: #fef9f5;
|
|
|
+ }
|
|
|
+ .lineInfo2{
|
|
|
+ border: 1px solid #79ACDB ;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .lineInfo{
|
|
|
+ margin-right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 15rpx 15rpx 10rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ .lineSvg{
|
|
|
+ padding-top: 2px;
|
|
|
+ margin: auto 16rpx;
|
|
|
+ img{
|
|
|
+ width: 70rpx;
|
|
|
+ color:#62574C ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lineView{
|
|
|
+ .lineTitle{
|
|
|
+ color:#62574C;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .linep{
|
|
|
+ color:#8A7B6C;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
- padding: 20px 20px 20px 30px;
|
|
|
+ padding: 30rpx 30rpx 30rpx 50rpx;
|
|
|
|
|
|
/deep/.u-divider {
|
|
|
margin-bottom: 16px !important;
|
zhengkaixin
