|
@@ -90,8 +90,41 @@
|
|
|
|
|
|
<u-modal v-model="showTop" class="showOss"
|
|
|
:show-title="false" :show-confirm-button="false" >
|
|
|
- <view class="slot-content">
|
|
|
- <u-image width="250px;"
|
|
|
+ <view class="slot-content" v-if="bannerListTop.length" >
|
|
|
+ <view class="couponmain" v-if="bannerListTop[showTopIndex].topmodel=='coupon'">
|
|
|
+ <view class="main" >
|
|
|
+
|
|
|
+ <!-- 专享优惠券 -->
|
|
|
+ <view class="exclusive">
|
|
|
+ <p class="exclusive1">恭喜你</p>
|
|
|
+ <p class="exclusive2">获得{{bannerListTop[showTopIndex].value}}元月卡卷</p>
|
|
|
+ <view class="img" >
|
|
|
+ <img src="../../assets/img/Frame915.png" alt="">
|
|
|
+
|
|
|
+ <view class="num">
|
|
|
+ {{bannerListTop[showTopIndex].value}}<span class="unit">元</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="unit2">月卡优惠券</view>
|
|
|
+ <view class="ticket-info">
|
|
|
+ <view class="ticket-name" >
|
|
|
+ {{bannerListTop[showTopIndex].text}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="exclusive-text"> 持月卡在指定站点充电,充电服务费全免</view>
|
|
|
+ <button class="exclusive-btn"
|
|
|
+ @click="clickBannerTop()"
|
|
|
+ shape="circle">立即开通</button>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-image width="250px;" v-else
|
|
|
bgColor="#ff000000"
|
|
|
style="margin: auto;min-height: 250px;"
|
|
|
mode="widthFix" @click="clickBannerTop()"
|
|
@@ -105,7 +138,18 @@
|
|
|
</view>
|
|
|
|
|
|
</u-image>
|
|
|
- <u-image width="36px" style="margin: auto;"
|
|
|
+ <view
|
|
|
+ @click="showTopIndex++"
|
|
|
+ v-show="showTopIndex!=bannerListTop.length-1"
|
|
|
+ >
|
|
|
+ <u-button class="choice-btn"
|
|
|
+ @click="nextTop(showTopIndex)"
|
|
|
+ style="width: 80%;margin-top: 10px;" shape="circle">下一条({{showTopIndex+1}}/{{bannerListTop.length}})</u-button>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-image width="36px"
|
|
|
+ v-show="showTopIndex==bannerListTop.length-1"
|
|
|
+ style="margin: auto; margin-top: 10px;"
|
|
|
mode="widthFix" @click="showTop=false"
|
|
|
src="../../assets/img/if-close-line-circled.png"></u-image>
|
|
|
|
|
@@ -539,7 +583,10 @@
|
|
|
// }
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ nextTop(index){
|
|
|
+ this.showTopImg=this.bannerListTop[index+1].picUrl;
|
|
|
+ this.showTopIndex=index+1;
|
|
|
+ },
|
|
|
getDescriptionTime() {
|
|
|
var date = this.activityDate;
|
|
|
var dateMonth1 = new Date().getMonth()+1;
|
|
@@ -748,21 +795,42 @@
|
|
|
var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
|
|
|
|
|
|
newsApi.getBannerInfo(code).then((res) => {
|
|
|
+
|
|
|
+
|
|
|
this.bannerListTop =res.data;
|
|
|
|
|
|
- for(var i in this.bannerListTop ){
|
|
|
- var mod=this.bannerListTop[i];
|
|
|
- var time=this.carhelp.get("bannerListTop"+mod.id);
|
|
|
- if(time&&nowtime==time){
|
|
|
-
|
|
|
- }else{
|
|
|
- this.showTop=true;
|
|
|
- this.showTopImg=mod.picUrl;
|
|
|
- this.showTopIndex=i;
|
|
|
- this.carhelp.set("bannerListTop"+mod.id,nowtime);
|
|
|
- break;
|
|
|
- }
|
|
|
+ var time=this.carhelp.get("bannerListTop");
|
|
|
+
|
|
|
+ if(this.bannerListTop.length&&!(time&&nowtime==time)){
|
|
|
+ this.showTop=true;
|
|
|
+ this.showTopImg=this.bannerListTop[0].picUrl;
|
|
|
+ this.showTopIndex=0;
|
|
|
+ //this.carhelp.set("bannerListTop",nowtime);
|
|
|
+ }
|
|
|
+ if (this.userId) {
|
|
|
+ API.readCoupon().then((res2) => {
|
|
|
+ var mod=res2.data.userCoupon;
|
|
|
+ console.log(mod)
|
|
|
+ if(mod){
|
|
|
+ var obj={
|
|
|
+ topmodel:"coupon",
|
|
|
+ value:mod.value,
|
|
|
+ text:mod.describe,
|
|
|
+ linkUrl:"#/pages/monthlyCardActivity/monthlyCardBuy",
|
|
|
+ }
|
|
|
+ this.bannerListTop =[
|
|
|
+ obj,...res.data
|
|
|
+ ]
|
|
|
+ if(!(time&&nowtime==time)){
|
|
|
+ this.showTop=true;
|
|
|
+ this.showTopImg=this.bannerListTop[0].picUrl;
|
|
|
+ this.showTopIndex=0;
|
|
|
+ //this.carhelp.set("bannerListTop",nowtime);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
+
|
|
|
|
|
|
|
|
|
uni.hideLoading()
|
|
@@ -1064,6 +1132,160 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+
|
|
|
+ .couponmain{
|
|
|
+ .main{
|
|
|
+
|
|
|
+ margin: 100px auto 0;
|
|
|
+ position: relative;
|
|
|
+ .content{
|
|
|
+ padding: 24px;
|
|
|
+ padding-top: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
|
|
|
+ border: 2px solid rgba(253, 217, 141, 100);
|
|
|
+ border-radius: 8px;
|
|
|
+ .img{
|
|
|
+ width: 44vw;
|
|
|
+ height: 134px;
|
|
|
+ position: absolute;
|
|
|
+ top: -88px;
|
|
|
+ right: 0px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(84, 45, 45, 100);
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(84, 45, 45, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: justify;
|
|
|
+ text-decoration:underline;
|
|
|
+ text-decoration-color:#ECE3BA;
|
|
|
+ text-indent: 32px;
|
|
|
+ }
|
|
|
+ .sign{
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 专享优惠券
|
|
|
+ .exclusive{
|
|
|
+ background-color: #F5E4C8;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 32rpx 32rpx 32rpx 32rpx ;
|
|
|
+ box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
|
|
|
+ border: 2px solid rgba(253, 217, 141, 100);
|
|
|
+ border-radius: 8px;
|
|
|
+ .exclusive1{
|
|
|
+
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ font-family: SourceHanSerif-bold;
|
|
|
+ }
|
|
|
+ .exclusive2{
|
|
|
+ font-family: PingFangSC-regular;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ //color: rgba(255, 73, 75, 100);
|
|
|
+ //font-size: 20px;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ // width: 74.4vw;
|
|
|
+ // height: 84px;
|
|
|
+ margin-top: 16px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .num{
|
|
|
+ font-size:54rpx;
|
|
|
+ color: rgba(252, 237, 179, 100);
|
|
|
+ position: absolute;
|
|
|
+ top:10px;
|
|
|
+ left: 8vw;
|
|
|
+ font-weight: 600;
|
|
|
+ .unit{
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(252, 237, 179, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit2{
|
|
|
+
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFF;
|
|
|
+ position: absolute;
|
|
|
+ top: 90rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ }
|
|
|
+ .exclusive-text{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16rpx;
|
|
|
+ }
|
|
|
+ .exclusive-btn{
|
|
|
+ width: 80%;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(90.58deg, rgba(225,208,165,1) 0.05%,rgba(228,190,132,1) 98.67%);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 8rpx 20rpx 0px rgba(184, 155, 103, 40);
|
|
|
+ font-family: -apple-system;
|
|
|
+ // width: 87.4%;
|
|
|
+ // margin-top: 20px;
|
|
|
+ // background-image: linear-gradient(#ffff00, #ff9600);
|
|
|
+ // color: #521e00;
|
|
|
+ // font-size: 20px;
|
|
|
+ // border-radius: 50px;
|
|
|
+ }
|
|
|
+ .ticket-info{
|
|
|
+ width: 40vw;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ right: 16rpx;
|
|
|
+ .ticket-name{
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 16rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .condition{
|
|
|
+ line-height: 22px;
|
|
|
+ color: #8a6f6f;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.oldTextClassF{
|
|
|
|
|
|
.station .price-free .price-1 .num{
|