Pārlūkot izejas kodu

feat: 完善pc活动页逻辑

cuiyalong 3 gadi atpakaļ
vecāks
revīzija
eae13b7496

+ 0 - 0
src/web/staticres/frontRouter/pc/activity/image/202207/coupon-bg@2x.png → src/web/staticres/common-module/active/2022.7/coupon-bg@2x.png


+ 0 - 0
src/web/staticres/frontRouter/pc/activity/image/202207/float-button-bg@2x.png → src/web/staticres/common-module/active/2022.7/float-button-bg@2x.png


+ 0 - 0
src/web/staticres/frontRouter/pc/activity/image/202207/gift-box.png → src/web/staticres/common-module/active/2022.7/gift-box.png


BIN
src/web/staticres/common-module/active/2022.7/icon-coupon@2x.png


+ 4 - 4
src/web/staticres/frontRouter/pc/activity/css/task-202207.css

@@ -19,7 +19,7 @@
 
 .content-container {
   padding: 64px 0;
-  background: linear-gradient(127deg, #FF6A63 0%, #D54841 100%);;
+  background: linear-gradient(127deg, #FF6A63 0%, #D54841 100%);
 }
 
 .section .section-header {
@@ -114,7 +114,7 @@
   height: 277px;
   font-size: 16px;
   color: #E80E0D;
-  background-image: url(/frontRouter/pc/activity/image/202207/coupon-bg@2x.png);
+  background-image: url(/common-module/active/2022.7/coupon-bg@2x.png);
   background-repeat: no-repeat;
   background-size: contain;
   text-align: center;
@@ -146,7 +146,7 @@
 }
 
 .section-fuli2 .mission-list {
-  background-color: pink;
+  /* background-color: pink; */
 }
 .section-fuli2 .mission-list-img {
   width: 90%;
@@ -293,7 +293,7 @@
   font-size: 16px;
   line-height: 20px;
   background-color: transparent;
-  background-image: url(/frontRouter/pc/activity/image/202207/float-button-bg@2x.png);
+  background-image: url(/common-module/active/2022.7/float-button-bg@2x.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

+ 3 - 0
src/web/staticres/frontRouter/pc/activity/css/task-common.css

@@ -14,6 +14,9 @@
 .icon-jy-svip {
   background-image: url(/frontRouter/pc/activity/image/chaojidingyue@2x.png);
 }
+.icon-bg-jy-coupon {
+  background-image: url(/common-module/active/2022.7/icon-coupon@2x.png);
+}
 .no-select {
   user-select: none;
 }

+ 54 - 31
src/web/staticres/frontRouter/pc/activity/js/task-202207.js

@@ -1,8 +1,3 @@
-var headers = {
-  userId: '6103bb722abfa5f4d81bb1d1',
-  Cookie: 'SESSIONID=c18b6791dd8a5806bfd26f7e0d29d8aafad33e1c'
-}
-
 function Point (x, y) {
   this.x = x
   this.y = y
@@ -136,7 +131,7 @@ function activeOverCheck (endTime, callback) {
 
 // toast上限提示
 function toastFn (text, duration) {
-  if (duration) {
+  if (!duration) {
     duration = 1000
   }
   var _html = ""
@@ -430,6 +425,28 @@ var task = new Vue({
       this.activeState = state
       return state
     },
+    // type=yure判断预热是否开始
+    // type=active 判断活动是否开始
+    activeNotStartToast: function (type) {
+      var state = this.checkActiveState()
+      type = type || 'active'
+      if (state === 'ended') {
+        toastFn('活动已结束')
+      } else if (state === 'waiting') {
+        toastFn('活动尚未开始,敬请期待')
+      } else {
+        if (type === 'yure') {
+          if (state === 'activating') {
+            // 预热已结束
+            toastFn('预热已结束')
+          }
+        } else {
+          if (state === 'yureing') {
+            toastFn('活动尚未开始,敬请期待')
+          }
+        }
+      }
+    },
     startTopTimer: function () {
       var _this = this
       var start = this.conf.start * 1000
@@ -447,7 +464,7 @@ var task = new Vue({
       var tipText = ''
       var buttonDisabled = true
       if (this.yureInfo.timerId) {
-        clearInterval(timerId)
+        clearInterval(this.yureInfo.timerId)
       }
       if (this.activeState === 'yureing') {
         // 当天时间
@@ -531,8 +548,12 @@ var task = new Vue({
     },
     receiveYuReCoupon: function () {
       if (this.yureInfo.buttonDisabled) {
-        // toastFn('活动尚未开始,敬请期待')
+        toastFn('活动尚未开始,敬请期待')
+      } else if (this.yureInfo.buttonText === '去查看') {
+        // 领过了
+        this.toBuyVip()
       } else {
+        // 没领过
         this.receiveYuReCouponAjax()
       }
     },
@@ -550,18 +571,20 @@ var task = new Vue({
       })
     },
     receiveActiveButtonText: function (item) {
-      if (item.IsUser) {
-        if (item.IsReceive) {
-          return '立即领取'
-        } else {
+      if (item.IsReceive) {
+        return '立即领取'
+      } else {
+        if (item.IsUser) {
           return '去使用'
+        } else {
+          return '已使用'
         }
-      } else {
-        return '已使用'
       }
     },
     receiveActiveCoupon: function (coupons) {
-      if (this.activeState !== 'activating') return toastFn('活动尚未开始,敬请期待')
+      if (this.activeState !== 'activating') {
+        return this.activeNotStartToast()
+      }
       if (coupons.length === 0) return
       if (coupons.length === 1) {
         var item = coupons[0]
@@ -649,19 +672,6 @@ var task = new Vue({
         }
       })
     },
-    // 领取福利2优惠券
-    receiveFuLi2Coupon: function () {
-      var _this = this
-      $.ajax({
-        url: '/jyActivity/membershipDay/getDailyBoonSVip',
-        type: 'post',
-        success: function (res) {
-          if (res.data) {
-            console.log('领取成功')
-          }
-        }
-      })
-    },
     calcPointList: function () {
       var dom = this.$refs.missions
       window.points = new RandomCoordinate({
@@ -694,8 +704,10 @@ var task = new Vue({
     onClickListItem: function (item) {
       if (item.icon === 'jy-svip') {
         window.open('/front/swordfish/toMyOrder')
-      } else {
+      } else if (item.icon === 'jy-coin') {
         window.open('/swordfish/integral/index/detail')
+      } else {
+        this.toBuyVip()
       }
     },
     onClickReceive: function (type, item) {
@@ -838,9 +850,17 @@ var task = new Vue({
           if (res.error_code === 0 && res.data) {
             if (res.data.list && typeof res.data.list.map === 'function') {
               _this.rewardList = res.data.list.map(function (v) {
+                var icon = ''
+                if (v.award.indexOf('剑鱼币') > -1) {
+                  icon = 'jy-coin'
+                } else if (v.award.indexOf('订阅') > -1) {
+                  icon = 'jy-svip'
+                } else {
+                  icon = 'jy-coupon'
+                }
                 return {
                   id: v._id,
-                  icon: v.award.indexOf('订阅') !== -1 ? 'jy-svip' : 'jy-coin',
+                  icon: icon,
                   rewardText: v.award,
                   receiveTime: new Date(v.date * 1000).pattern('yyyy-MM-dd HH:mm:ss'),
                   receiveFrom: v.getway
@@ -852,7 +872,10 @@ var task = new Vue({
       })
     },
     receiveFuli3: function () {
-      vm.isNeedSubmit('member_business_get',function(){
+      if (this.activeState !== 'activating') {
+        return this.activeNotStartToast()
+      }
+      vm.isNeedSubmit('super_membership_day',function(){
         vm.showSuccess = true
       })
     },

+ 2 - 2
src/web/templates/frontRouter/pc/activity/sess/task-202207.html

@@ -113,7 +113,7 @@
                 </div>
             </div>
             <div class="section-content mission-list" ref="missions">
-                <img class="mission-list-img" src="{{Msg "seo" "cdn"}}/frontRouter/pc/activity/image/202207/gift-box.png" alt="">
+                <img class="mission-list-img" src="{{Msg "seo" "cdn"}}/common-module/active/2022.7/gift-box.png" alt="">
                 <div
                     class="mission-list-item floating"
                     :id="'bubble-' + item.id"
@@ -172,7 +172,7 @@
             <div class="section-footer">
                 <div class="button-group">
                     <button class="section-button learn-more" @click="toMemberPage">了解更多</button>
-                    <button class="section-button button-middle" @click="receiveFuli3">一键领取</button>
+                    <button class="section-button button-middle" @click="receiveFuli3">立即体验</button>
                 </div>
                 <div class="text">
                     <p>满足企业多人使用 多场景赋能业务增长</p>