feat:奖券落地修改

src/web/staticres/frontRouter/pc/squeeze/sess/css/squeezePc.css

@@ -8,6 +8,7 @@
   margin: 0 auto;
 }
 .squeeze-pc .activity {
+  height:1370px;
   padding-top: 90px;
   min-width: 1215px;
   background: url(/frontRouter/pc/squeeze/sess/images/bg.png) no-repeat center top;
@@ -35,16 +36,16 @@
 }
 .squeeze-pc .activity .box .ticket {
   margin: 0 auto;
-  height: 522px;
+  height: 380px;
   width: 100%;
   background: url(/frontRouter/pc/squeeze/sess/images/ticketBg.png) no-repeat;
-  background-size: cover;
+  background-size: auto;
   overflow: hidden;
   text-align: center;
 }
 .squeeze-pc .activity .box .ticket ul {
   margin: 0 auto;
-  margin-top: 102px;
+  margin-top: 116px;
   width: 900px;
   display: flex;
   flex-wrap: wrap;
@@ -52,14 +53,14 @@
 }
 .squeeze-pc .activity .box .ticket ul li {
   position: relative;
-  width: 244px;
+  width: 374px;
   margin: 0 28px;
   margin-bottom: 33px;
 }
 .squeeze-pc .activity .box .ticket ul li .ticket-btn {
   position: absolute;
   bottom: 18px;
-  right: 26px;
+  right: 58px;
   width: 86px;
   height: 33px;
   text-align: center;
@@ -73,31 +74,33 @@
   border: 1px solid #fff;
   border-radius: 17px;
   font-size: 16px;
+  font-weight: bold;
   font-family: Source Han Sans CN, Source Han Sans CN-Medium;
   cursor: pointer;
 }
 .squeeze-pc .activity .box .ticket ul li .ticket-btn button.use {
-  color: #fff;
-  background-color: #da1f0f;
+  color: #da1f0f;
+  background-color: #fff;
 }
 .squeeze-pc .activity .box .ticket ul li .ticket-btn button.get {
   color: #da1f0f;
   background-color: #fff;
 }
+
 .squeeze-pc .activity .box .ticket ul li .ticket-btn span {
   font-size: 23px;
   color: rgba(255, 255, 255, 0.5);
   cursor: no-drop;
 }
+.squeeze-pc .activity .box .ticket ul li .ticket-btn  span.end {
+  font-size: 16px;
+}
 .squeeze-pc .activity .box .ticket #getAll {
   margin-top: 8px;
-  width: 237px;
   height: 54px;
-  color: #ed322a;
-  background-color: #fff;
-  border-radius: 27px;
+  color: #fff;
+  background-color: transparent;
   font-size: 23px;
-  cursor: pointer;
 }
 .squeeze-pc .activity .box .ticket #getAll.dis {
   color: #fff;

src/web/staticres/frontRouter/pc/squeeze/sess/js/squeeze_pc.js

@@ -4,11 +4,12 @@ let baseUrl = getEVN('http://192.168.20.131:8080')
 let ticket // 可领取的奖券
 let activityId // 活动id
 ticketImg = [
-  '/frontRouter/pc/squeeze/sess/images/ticket5.png',
-  '/frontRouter/pc/squeeze/sess/images/ticket15.png',
-  '/frontRouter/pc/squeeze/sess/images/ticket38.png',
-  '/frontRouter/pc/squeeze/sess/images/ticket100.png',
-  '/frontRouter/pc/squeeze/sess/images/ticket250.png'
+  // '/frontRouter/pc/squeeze/sess/images/ticket5.png',
+  // '/frontRouter/pc/squeeze/sess/images/ticket15.png',
+  // '/frontRouter/pc/squeeze/sess/images/ticket38.png',
+  // '/frontRouter/pc/squeeze/sess/images/ticket100.png',
+  // '/frontRouter/pc/squeeze/sess/images/ticket250.png'
+  '/frontRouter/pc/squeeze/sess/images/ticket380.png'
 ]
 
 // 活动id
@@ -39,36 +40,37 @@ $(document).on('click', '#modal', function(e) {
 })
 
 // 获取奖券信息
+let lis = ''
 function getTicket() {
   request('/jyMarketing/lottery/activityLottery', 'GET', {
     activityId
   }).then(data => {
     console.log(data)
     ticketList = data.data
-    let lis = ''
+    
     ticket = []
     ticketList.forEach((item, index) => {
-      // console.log(item);
       if (item.IsUser) {
         lis += `<li>
                     <img src="${ticketImg[index]}" alt="">
                     <div class="ticket-btn">
-                      <span data-id="${item.LotteryIdStr}">已结束</span>
+                      <span data-id="${item.LotteryIdStr}">已使用</span>
                     </div>
                   </li>`
       } else {
+        console.log(item.IsReceive,"IsReceive")
         if (item.IsReceive) {
-          li = `<li>
-                <img src="${ticketImg[index]}" alt="">
-                <div class="ticket-btn">
-                   <span data-id="${item.LotteryIdStr}">已结束</span>
-                </div>
-              </li>`
+          // li = `<li>
+        //       <img src="${ticketImg[index]}" alt="" />
+        //       <div class="ticket-btn">
+        //          <span data-id="${item.LotteryIdStr}">领取</span>
+        //       </div>
+        //     </li>`
           if (item.StockNumber > 0) {
             lis += `<li>
                     <img src="${ticketImg[index]}" alt="">
                     <div class="ticket-btn">
-                        <span data-id="${item.LotteryIdStr}">已结束</span>
+                        <button class="get" is-receive="true" data-id="${item.LotteryIdStr}">点击领取</button>
                     </div>
                   </li>`
             ticket.push(item.LotteryIdStr)
@@ -76,7 +78,7 @@ function getTicket() {
             lis += `<li>
                     <img src="${ticketImg[index]}" alt="">
                     <div class="ticket-btn">
-                      <span data-id="${item.LotteryIdStr}">已结束</span>
+                      <span data-id="${item.LotteryIdStr}">抢光了</span>
                     </div>
                   </li>`
           }
@@ -84,19 +86,37 @@ function getTicket() {
           lis += `<li>
                 <img src="${ticketImg[index]}" alt="">
                 <div class="ticket-btn">
-                   <span data-id="${item.LotteryIdStr}">已结束</span>
+                   <button data-id="${item.LotteryIdStr}" class="use">去使用</button>
                 </div>
               </li>`
         }
       }
+      let times = data.activity
+      activity(times.ActivityBeginDate,times.ActivityendDate,item, index)
     })
+   
+    console.log(lis)
     $('.ticket ul').html(lis)
     console.log(ticket);
-    if (ticket.length == 0) {
-      $('#getAll').attr('disabled', true).addClass('dis').text('活动已结束')
-    }
+    // if (ticket.length == 0) {
+    //   $('#getAll').attr('disabled', true).addClass('dis').text('活动已结束')
+    // }
   })
 }
+function activity(startTime,endTime,item, index){
+  const ONE_DAY_TIMP = 86400000
+  let startT = new Date(startTime).getTime()
+  let endT = new Date(endTime).getTime() + ONE_DAY_TIMP
+  let nowT = new Date().getTime()
+  if(endT<nowT){
+    lis = `<li>
+              <img src="${ticketImg[index]}" alt="">
+              <div class="ticket-btn">
+                <span class="end" data-id="${item.LotteryIdStr}">活动已结束</span>
+              </div>
+            </li>`
+  }
+}
 // 领取奖券
 function drawTicket(id) {
   request('/jyMarketing/lottery/lotteryReceive', 'POST', {
@@ -104,14 +124,14 @@ function drawTicket(id) {
   }).then(data => {
     // console.log(data);
     if (data.code === 1) {
-      $('#toast .toast-content').text('领取成功')
+      $('.ticket ul li button').text('领取成功')
       // $('#toast').show()
       getTicket()
       setTimeout(() => {
         $('#toast').hide()
       }, 1500)
     } else {
-      $('#toast .toast-content').text('领取失败')
+      $('.ticket ul li button').text('领取失败')
       // $('#toast').show()
       setTimeout(() => {
         $('#toast').hide()
@@ -120,16 +140,14 @@ function drawTicket(id) {
   })
 }
 $(document).on('click', '.ticket ul li button', function () {
-  return
+  console.log('1',$(this).attr('is-receive'))
   // 领取
   if ($(this).attr('is-receive') === 'true') {
-    $('#toast .toast-content').text('领取中')
-    $('#toast').show()
     let ids = []
     ids.push($(this).attr('data-id'))
     drawTicket(ids)
-  } else { // 使用
-    $("body").animate({ scrollTop: 1280 }, 200);
+  }else{
+    $('#modal').show()
   }
 
 })

src/web/staticres/frontRouter/wx/squeeze/css/squeezeMobile.css

@@ -51,9 +51,9 @@ html {
   z-index: 1;
   margin: 0 auto;
   width: 6.86rem;
-  height: 7.58rem;
+  height: 4.1rem;
   background: url('/frontRouter/wx/squeeze/images/ticketBg.png') no-repeat;
-  background-size: cover;
+  background-size: 100%;
   text-align: center;
   overflow: hidden;
 }

src/web/templates/frontRouter/pc/squeeze/sess/squeeze_pc.html

@@ -108,51 +108,27 @@
         <div class="activity">
           <div class="w">
             <img class="ac-tit" src="/frontRouter/pc/squeeze/sess/images/tit.png" alt="">
-            <p class="ac-time">活动时间：2021年4月20日-2021年5月7日</p>
+            <p class="ac-time"></p>
             <img class="ac-discount" src="/frontRouter/pc/squeeze/sess/images/hongbao.png" alt="">
           </div>
           <div class="box w">
             <div class="ticket">
               <ul>
                 <li>
-                  <img src="/frontRouter/pc/squeeze/sess/images/ticket5.png" alt="">
+                  <img src="/frontRouter/pc/squeeze/sess/images/ticket380.png" alt="">
                   <div class="ticket-btn">
-                    <button class="use">立即使用</button>
-                  </div>
-                </li>
-                <li>
-                  <img src="/frontRouter/pc/squeeze/sess/images/ticket15.png" alt="">
-                  <div class="ticket-btn">
-                    <button class="get">点击领取</button>
-                  </div>
-                </li>
-                <li>
-                  <img src="/frontRouter/pc/squeeze/sess/images/ticket38.png" alt="">
-                  <div class="ticket-btn">
-                    <button class="use">立即使用</button>
-                  </div>
-                </li>
-                <li>
-                  <img src="/frontRouter/pc/squeeze/sess/images/ticket100.png" alt="">
-                  <div class="ticket-btn">
-                    <button class="get">点击领取</button>
-                  </div>
-                </li>
-                <li>
-                  <img src="/frontRouter/pc/squeeze/sess/images/ticket250.png" alt="">
-                  <div class="ticket-btn">
-                    <span>抢光了</span>
+                    <button class="use">去使用</button>
                   </div>
                 </li>
               </ul>
-              <button id="getAll">活动已结束</button>
+              <p id="getAll">【仅限超级订阅使用】2021年5月31日到期</p>
             </div>
-            <div class="product">
+            <!-- <div class="product">
               <img src="/frontRouter/pc/squeeze/sess/images/product.png" alt="">
               <button id="buy1">购买</button>
               <button id="buy2">购买</button>
               <button id="buy3">购买</button>
-            </div>
+            </div> -->
             <div class="product">
               <img src="/frontRouter/pc/squeeze/sess/images/rule.png" alt="">
             </div>

src/web/templates/frontRouter/wx/squeeze/sess/squeeze_mobile.html

@@ -40,7 +40,7 @@
         <img class="ac-bg" src="/frontRouter/wx/squeeze/images/bg.png" alt="">
         <div class="ac-content">
           <img src="/frontRouter/wx/squeeze/images/tit.png" alt="">
-          <p>活动时间：2021年4月20日-2021年5月7日</p>
+          <!-- <p>活动时间：2021年4月20日-2021年5月7日</p> -->
         </div>
         <img class="ac-discount" src="/frontRouter/wx/squeeze/images/hongbao.png" alt="">
       </div>
@@ -77,14 +77,14 @@
             </div>
           </li> -->
         </ul>
-        <button id="getAll">活动已结束</button>
+        <!-- <button id="getAll">活动已结束</button> -->
       </div>
-      <div class="product">
+      <!-- <div class="product">
         <img src="/frontRouter/wx/squeeze/images/product.png" alt="">
-        <button id="buy1">购买</button>
+        <button id="buy1">购买1</button>
         <button id="buy2">购买</button>
         <button id="buy3">购买</button>
-      </div>
+      </div> -->
       <div class="product">
         <img src="/frontRouter/wx/squeeze/images/rule.png" alt="">
       </div>