点亮五菱

lottery/clientSop.html

@@ -18,10 +18,10 @@
     src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
-  <!-- <script src="js/vconsole.min.js"></script>
+  <script src="js/vconsole.min.js"></script>
   <script>
 		  var vConsole = new window.VConsole();
-		</script> -->
+		</script>
 </head>
 <style>
   body {

lottery/lightUpWl.html

@@ -103,6 +103,7 @@
     margin: 0 5px;
   }
 
+  /* 
   .ask_btn {
     display: flex;
     justify-content: center;
@@ -119,15 +120,103 @@
 
   .ask_btn img:last-child {
     margin-right: 0;
+  } */
+  .person_module {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(254, 232, 208, 0.8);
+    border-radius: 15px;
+    margin: 20px 10px 0;
+    padding: 15px 35px;
+  }
+
+  .person_box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #896F5A;
+  }
+
+  .person_num {
+    font-weight: bold;
+    font-size: 18px;
+    color: #6A401D;
+    line-height: 26px;
+    padding-bottom: 5px;
+  }
+
+  .person_line {
+    width: 1px;
+    height: 48px;
+    background: #6A401D;
+    opacity: 0.2;
   }
 
+  .ask_list {
+    margin: 15px 10px;
+    padding: 15px;
+    background: rgba(254, 232, 208, 0.8);
+    border-radius: 15px;
+  }
+
+  .ask_title {
+    font-weight: bold;
+    font-size: 16px;
+    color: #6A401D;
+    line-height: 24px;
+    text-align: center;
+  }
+  .ask_user_box {
+    max-height: 338px;
+    overflow-y: auto;
+  }
+  .ask_user {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(106, 64, 29, 0.1);
+
+  }
+  .user_msg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    color: #222222;
+    white-space: nowrap;
+  }
+  .user_msg img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  .ask_status1 {
+    font-weight: 400;
+    font-size: 12px;
+    color: #FF0000;
+    max-width: 20%;
+    text-align: right;
+  }
+  .ask_status2 {
+    font-weight: 400;
+    font-size: 12px;
+    color: #C98146;
+  }
+
+
   .activity_box {
-    width: 100%;
+    margin: 0 10px;
     background: #FEE8D0;
     border-radius: 20px 20px 0 0;
     padding: 20px 15px;
     box-sizing: border-box;
-    margin-top: 20px;
   }
 
   .lottery {
@@ -288,23 +377,25 @@
     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;
@@ -314,19 +405,20 @@
     width: 30px;
     height: 26px;
   }
-  
+
   .arrow-left {
     left: 15px;
   }
-  
+
   .arrow-right {
     right: 15px;
   }
+
   .progress {
     font-weight: 400;
-font-size: 12px;
-color: #E83636;
-text-align: center;
+    font-size: 12px;
+    color: #E83636;
+    text-align: center;
   }
 </style>
 
@@ -338,23 +430,34 @@ text-align: center;
           <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" />
+            <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" />
+            <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 > 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>
+        <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>
@@ -375,12 +478,51 @@ text-align: center;
         <span class="step_line"></span>
         <span>3.完成任务</span>
       </div>
-      <div class="ask_btn">
+      <!-- <div class="ask_btn">
         <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="person_module">
+        <div class="person_box">
+          <div class="person_num">{{lightData.clientCount}}</div>
+          <div>邀请人数</div>
+        </div>
+        <div class="person_line"></div>
+        <div class="person_box">
+          <div class="person_num">{{lightData.formCount}}</div>
+          <div>报名人数</div>
+        </div>
+        <div class="person_line"></div>
+        <div class="person_box">
+          <div class="person_num">{{lightData.testDriveCount}}</div>
+          <div>试驾人数</div>
+        </div>
+      </div>
+      <div class="ask_list">
+        <div class="ask_title">已邀请用户</div>
+        <div class="ask_user_box">
+          <div class="ask_user" v-for="item in lightData.wxcpLightenClientList" :key="item.id">
+            <div class="user_msg">
+              <img :src="item.head || './img/ask_btn.png'" />
+              <div>{{item.name}}</div>
+            </div>
+            <div v-if="item.auditStatus === 1" class="ask_status1">审核中</div>
+            <div v-if="item.auditStatus === 2" class="ask_status1">
+              <div>未通过</div>
+              <div>{{item.rejectionReason}}</div>
+            </div>
+            <div v-if="item.auditStatus === 3" class="ask_status1">待下发</div>
+            <div v-if="item.auditStatus === 4" class="ask_status1">下发中</div>
+            <div v-if="item.auditStatus === 5" class="ask_status2">下发成功</div>
+            <div v-if="item.auditStatus === 6" class="ask_status1">
+              <div>下发失败</div>
+              <div>{{item.sendFailReason}}</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="activity_box">
         <div v-if="lightData.wxcpLighten.raffeSwitch">
@@ -484,6 +626,9 @@ text-align: center;
         loading: false, // 提交按钮loading
         currentIndex: 0, // 当前显示的图片索引
         getChunkData: [], // 分割数据
+        clientCount: null, // 邀请人数
+        formCount: null, // 报名人数
+        testDriveCount: null, // 试驾人数
       }
     },
     created() {