|
|
@@ -53,7 +53,7 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
- margin-top: 98px;
|
|
|
+ margin-top: 108px;
|
|
|
}
|
|
|
|
|
|
.image_wrapper {
|
|
|
@@ -81,6 +81,7 @@
|
|
|
|
|
|
.ask {
|
|
|
background: #FEC99D;
|
|
|
+ margin-top: -22px;
|
|
|
}
|
|
|
|
|
|
.step {
|
|
|
@@ -287,17 +288,78 @@
|
|
|
color: #FFFFFF;
|
|
|
border: none;
|
|
|
}
|
|
|
+ .carousel-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel-wrapper {
|
|
|
+ display: flex;
|
|
|
+ transition: transform 0.4s ease-out;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel-item {
|
|
|
+ min-width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ position: absolute;
|
|
|
+ top: 347px;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ user-select: none;
|
|
|
+ z-index: 2;
|
|
|
+ width: 30px;
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-left {
|
|
|
+ left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-right {
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ .progress {
|
|
|
+ font-weight: 400;
|
|
|
+font-size: 12px;
|
|
|
+color: #E83636;
|
|
|
+text-align: center;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
<div id="box" class="box">
|
|
|
<div class="page6">
|
|
|
- <img class="wl_no" v-if="!lightData.wxcpLightenClientList.length" src="./img/wl_no.png" />
|
|
|
- <img class="wl_no" v-else-if="lightData.wxcpLightenClientList.length === 1" src="./img/light_one.png" />
|
|
|
- <img class="wl_no" v-else-if="lightData.wxcpLightenClientList.length === 2" src="./img/light_two.png" />
|
|
|
- <img class="wl_no" v-else-if="lightData.wxcpLightenClientList.length === 3" src="./img/light_three.png" />
|
|
|
- <img class="wl_no" v-else-if="lightData.wxcpLightenClientList.length === 4" src="./img/light_four.png" />
|
|
|
- <img class="wl_no" v-else-if="lightData.wxcpLightenClientList.length >= 5" src="./img/light_five.png" />
|
|
|
+ <div class="carousel-container">
|
|
|
+ <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
|
|
+ <div class="carousel-item" v-if="lightData.wxcpLightenClientList.length < 5">
|
|
|
+ <img class="carousel wl_no" v-if="!lightData.wxcpLightenClientList.length" src="./img/wl_no.png" />
|
|
|
+ <img class="carousel wl_no" v-if="lightData.wxcpLightenClientList.length === 1" src="./img/light_one.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="lightData.wxcpLightenClientList.length === 2" src="./img/light_two.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="lightData.wxcpLightenClientList.length === 3" src="./img/light_three.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="lightData.wxcpLightenClientList.length === 4" src="./img/light_four.png" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="carousel-item">
|
|
|
+ <img class="carousel wl_no" v-for="i in parseInt(lightData.wxcpLightenClientList.length/5)" :key="i" src="./img/light_five.png" />
|
|
|
+ <img class="carousel wl_no" v-if="parseInt(lightData.wxcpLightenClientList.length%5) === 1" src="./img/light_one.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="parseInt(lightData.wxcpLightenClientList.length%5) === 2" src="./img/light_two.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="parseInt(lightData.wxcpLightenClientList.length%5) === 3" src="./img/light_three.png" />
|
|
|
+ <img class="carousel wl_no" v-else-if="parseInt(lightData.wxcpLightenClientList.length%5) === 4" src="./img/light_four.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左箭头 -->
|
|
|
+ <img v-show="lightData.wxcpLightenClientList.length>5 && currentIndex > 0" src="./img/wl-left.png" alt="" class="arrow arrow-left" @click="prevSlide">
|
|
|
+
|
|
|
+ <!-- 右箭头 -->
|
|
|
+ <img v-show="lightData.wxcpLightenClientList.length>5 && currentIndex < lightData.wxcpLightenClientList.length/5 - 1" src="./img/wl-right.png" alt="" class="arrow arrow-right" @click="nextSlide"></img>
|
|
|
+ </div>
|
|
|
+ <div class="progress">
|
|
|
+ <span v-if="getChunkData.length < 5">点亮进度：{{getChunkData.length}}/5</span>
|
|
|
+ <span v-if="lightData.wxcpLightenClientList.length>5 && getChunkData.length === 5">您已成功点亮，左右切换查看更多</span>
|
|
|
+ </div>
|
|
|
<div class="wl_btn" @click="handleAsk">
|
|
|
<div class="image_wrapper">
|
|
|
<img class="btn_img" src="./img/wl_btn.png" />
|
|
|
@@ -314,10 +376,10 @@
|
|
|
<span>3.完成任务</span>
|
|
|
</div>
|
|
|
<div class="ask_btn">
|
|
|
- <img v-for="item in lightData.wxcpLightenClientList.slice(0, 5)" :key="item.head.id"
|
|
|
- :src="item.head || require('img/ask_btn.png')" />
|
|
|
- <div v-if="lightData.wxcpLightenClientList.length < 5">
|
|
|
- <img v-for="i in (5-lightData.wxcpLightenClientList.length)" :key="i" src="img/ask_btn.png" />
|
|
|
+ <img v-for="item in getChunkData.slice(0, 5)" :key="item.id"
|
|
|
+ :src="item.head || './img/ask_btn.png'" />
|
|
|
+ <div v-if="getChunkData.length < 5">
|
|
|
+ <img v-for="i in (5-getChunkData.length)" :key="i" src="./img/ask_btn.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="activity_box">
|
|
|
@@ -420,6 +482,8 @@
|
|
|
},
|
|
|
showDialog: false, // 填写顾问名称信息弹窗
|
|
|
loading: false, // 提交按钮loading
|
|
|
+ currentIndex: 0, // 当前显示的图片索引
|
|
|
+ getChunkData: [], // 分割数据
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -516,6 +580,8 @@
|
|
|
let { data, code, msg } = result
|
|
|
if (code === 1) {
|
|
|
this.lightData = data
|
|
|
+ this.currentIndex = Math.ceil(this.lightData.wxcpLightenClientList.length / 5)
|
|
|
+ this.getChunkData = this.getChunk(this.lightData.wxcpLightenClientList, this.currentIndex)
|
|
|
if (data.wxcpLighten.type === 2 && (!data.referrer || !data.referrerPhone)) {
|
|
|
this.showDialog = true
|
|
|
}
|
|
|
@@ -590,6 +656,27 @@
|
|
|
// 返回指定参数的值，如果不存在则返回null
|
|
|
return urlParams.get(paramName);
|
|
|
},
|
|
|
+ prevSlide() {
|
|
|
+ if (this.currentIndex > 0) {
|
|
|
+ this.currentIndex--
|
|
|
+ this.getChunkData = this.getChunk(this.lightData.wxcpLightenClientList, this.currentIndex)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nextSlide() {
|
|
|
+ if (this.currentIndex >= this.lightData.wxcpLightenClientList.length - 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.currentIndex < this.lightData.wxcpLightenClientList.length - 1) {
|
|
|
+ this.currentIndex++
|
|
|
+ this.getChunkData = this.getChunk(this.lightData.wxcpLightenClientList, this.currentIndex)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getChunk(arr, chunkIndex) {
|
|
|
+ const chunkSize = 5
|
|
|
+ const start = chunkIndex * chunkSize
|
|
|
+ const end = start + chunkSize
|
|
|
+ return arr.slice(start, end)
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
</script>
|
