糖果树：新增网络延时

view/peko/activity/explore/js/index.js

@@ -12,7 +12,7 @@ const showLoading = (content = '加載中...') => {
         type: 2,
         shadeClose: false,
         content,
-        success(e) {
+        success (e) {
             layerIndex = $(e).attr('index')
         }
     })
@@ -38,12 +38,20 @@ const getUserInfo = (param) => {
         data: {
             uid: pubInfo.uid
         },
-        success(res){
-            if(res.code === 200){
+        timeout: 8000, //超时时间设置，单位毫秒
+        complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
+            if (status == 'timeout') {//超时,status还有success,error等值的情况
+                //这里我使用的是layer中的弹出框（当然也可以用其他的）
+                hideLoading(layerIndex)
+                toastMsg('请求连接超时')
+            }
+        },
+        success (res) {
+            if (res.code === 200) {
                 isGetUserInfoInterFace = true
                 isShow()
                 $('.mine').find('.avatar img').attr('src', res.data.avatar)
-                if(!res.data.nick){
+                if (!res.data.nick) {
                     res.data.nick = '未知'
                 }
                 if (res.data.nick.length > 10) {
@@ -51,17 +59,18 @@ const getUserInfo = (param) => {
                 }
                 $('.mine').find('.nick').html(res.data.nick)
                 $('.mine').find('.diamond-num span').html(res.data.userPurse.diamonds)
-                if(param){
-                    $('.mine').find('.meteor-num span')[0].innerHTML = parseInt($('.mine').find('.meteor-num span')[0].innerHTML)  + param
-                } else{
+                if (param) {
+                    $('.mine').find('.meteor-num span')[0].innerHTML = parseInt($('.mine').find('.meteor-num span')[0].innerHTML) + param
+                } else {
                     $('.mine').find('.meteor-num span').html(res.data.num)
                 }
-            }else{
+                getListPack()
+            } else {
                 toastMsg(res.message)
             }
             hideLoading(layerIndex)
         },
-        error(err){
+        error (err) {
             toastMsg('網絡錯誤')
             hideLoading(layerIndex)
         }
@@ -77,20 +86,28 @@ const getListPack = () => {
         type: 'POST',
         url: urlPrefix + '/activities/draw/getPackList',
         data: {
-          uid: pubInfo.uid
+            uid: pubInfo.uid
         },
-        success(res){
+        timeout: 8000, //超时时间设置，单位毫秒
+        complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
+            if (status == 'timeout') {//超时,status还有success,error等值的情况
+                //这里我使用的是layer中的弹出框（当然也可以用其他的）
+                hideLoading(layerIndex)
+                toastMsg('请求连接超时')
+            }
+        },
+        success (res) {
             if (res.code === 200) {
                 isGetListPackInterFace = true
                 isShow()
                 listPack = res.data
                 renderList()
-            }else{
+            } else {
                 toastMsg(res.message)
             }
             hideLoading(layerIndex)
         },
-        error(){
+        error () {
             toastMsg('網絡錯誤')
             hideLoading(layerIndex)
         }
@@ -124,19 +141,18 @@ const renderList = () => {
 
 //只有兩個接口都請求到數據，才渲染默認頁面
 const isShow = () => {
-    if(isGetListPackInterFace && isGetUserInfoInterFace){
+    if (isGetListPackInterFace && isGetUserInfoInterFace) {
         hideLoading(layerIndex)
         $('.wrap').show()
-    }else{
+    } else {
         showLoading('加載中...')
     }
 }
 
-$(function(){
+$(function () {
     getInfoFromClient()
-    setTimeout(function(){
+    setTimeout(function () {
         getUserInfo()
-        getListPack()
     }, 500)
 
     // 點擊玩法介紹按鈕
@@ -146,24 +162,24 @@ $(function(){
         $('body').css('overflow', 'hidden')
     })
     // 關閉規則彈窗
-    $('.rule-mask .cancel').on('click', function(){
+    $('.rule-mask .cancel').on('click', function () {
         $('.shade').fadeOut(300)
         $('.rule-mask').fadeOut(300)
         $('body').css('overflow', 'auto')
     })
-    $('.shade').on('click', function(){
+    $('.shade').on('click', function () {
         $('.shade').hide()
         $('.rule-mask').hide()
         $('.shade-mask-success').hide()
         $('.shade-mask-no-money').hide()
         $('body').css('overflow', 'auto')
     })
-    $('.rule-mask').on('click', function(e){
+    $('.rule-mask').on('click', function (e) {
         e.stopPropagation()
     })
 
     // 監聽購買按鈕點擊事件
-    $('ul.buy-area').on('click', '.buy-btn', function(){
+    $('ul.buy-area').on('click', '.buy-btn', function () {
         console.log($(this).data());
         if (!$(this).data('name') || !$(this).data('day') || !$(this).data('gold') || !$(this).data('giftId')) {
             toastMsg('禮包信息不完整')
@@ -178,7 +194,7 @@ $(function(){
         giftObj['num'] = 1
         giftObj['ticketNum'] = $(this).data('ticketNum')
 
-        
+
         $('.shade-mask-buy').find('.title span').html(giftObj['name'])
         $('.shade-mask-buy').find('.buy-day span').html(giftObj['day'])
         $('.shade-mask-buy').find('.buy-price span').html(giftObj['gold'])
@@ -187,53 +203,53 @@ $(function(){
         $('body').css('overflow', 'hidden')
     })
     // 關閉購買彈窗
-    $('.buy-confirm-btn .cancel').on('click', function(){
+    $('.buy-confirm-btn .cancel').on('click', function () {
         $('.shade-mask-buy').fadeOut(50)
         $('body').css('overflow', 'auto')
     })
-    $('.shade-mask-buy').on('click', function(){
+    $('.shade-mask-buy').on('click', function () {
         $('.shade-mask-buy').fadeOut(50)
         $('body').css('overflow', 'auto')
     })
-    $('.shade-content-buy').on('click', function(e){
+    $('.shade-content-buy').on('click', function (e) {
         e.stopPropagation()
     })
     // 增加購買數量
-    $('.increase').on('click', function(){
-        if(giftObj['num']<999){
+    $('.increase').on('click', function () {
+        if (giftObj['num'] < 999) {
             giftObj['num']++;
             giftObj['day']++;
             let allPrice = giftObj['num'] * giftObj['gold'];
             $('.inputNum').val(giftObj['num'])
             $('.buy-day span').html(giftObj['day'])
             $('.buy-price span').html(allPrice)
-        }else{
+        } else {
             toastMsg('單次購買數量最多為999')
         }
     })
     // 減少購買數量
-    $('.decrease').on('click', function(){
-        if($('.inputNum').val()>0){
+    $('.decrease').on('click', function () {
+        if ($('.inputNum').val() > 0) {
             giftObj['num']--;
             giftObj['day']--;
             let allPrice = giftObj['num'] * giftObj['gold'];
             $('.inputNum').val(giftObj['num'])
             $('.buy-day span').html(giftObj['day'])
             $('.buy-price span').html(allPrice)
-        }else{
+        } else {
             toastMsg('最少購買數量為1')
         }
     })
     // 手動輸入購買數量
-    $('.inputNum').on('input', function(){
+    $('.inputNum').on('input', function () {
         let exp = /^[0-9]+$/
         if (!exp.test($(this).val())) {
             toastMsg('請輸入數字')
             return
         }
-        if($(this).val() > 999){
+        if ($(this).val() > 999) {
             giftObj['num'] = 999
-        }else{
+        } else {
             giftObj['num'] = $(this).val()
         }
         giftObj['day'] = giftObj['num'];
@@ -244,17 +260,17 @@ $(function(){
     })
     // 確認購買
     let lock = false
-    $('.confirm').on('click', function(){
+    $('.confirm').on('click', function () {
         let exp = /^[0-9]+$/
-        if(!exp.test($('.inputNum').val())){
+        if (!exp.test($('.inputNum').val())) {
             toastMsg('請輸入數字')
             $('.inputNum').val(1)
             return
         }
-        if($('.inputNum').val() == 0){
+        if ($('.inputNum').val() == 0) {
             return toastMsg('最少購買數量為1')
         }
-        if(!lock){
+        if (!lock) {
             lock = true
             networkRequest({
                 type: 'POST',
@@ -265,63 +281,75 @@ $(function(){
                     packNum: giftObj.num,
                     ticket: pubInfo.ticket
                 },
-                success(res){
-                    if(res.code === 200){
+                success (res) {
+                    if (res.code === 200) {
                         getUserInfo(res.data)
                         $('.shade-mask-buy').hide()
                         $('.shade').fadeIn(300)
-                        $('.shade-mask-success .tip').html(`獲贈信物x` +  giftObj.ticketNum * giftObj.num)
+                        $('.shade-mask-success .tip').html(`獲贈信物x` + giftObj.ticketNum * giftObj.num)
                         $('.shade-mask-success').fadeIn()
-                    }else if(res.code === 2103){
+                    } else if (res.code === 2103) {
                         $('.shade-mask-buy').hide()
                         $('.shade').fadeIn(300)
                         $('.shade-mask-no-money').show()
                         $('.shade-mask-no-money').fadeIn()
-                    }else{
+                    } else {
                         toastMsg(res.message)
                     }
                     lock = false
                 },
-                error(err){
+                error (err) {
                     toastMsg('網絡錯誤')
                 }
             })
         }
-        
+
     })
     // 關閉購買成功彈窗
-    $('.in-btn').on('click', function(){
+    $('.in-btn').on('click', function () {
         $('.shade-mask-success').fadeOut()
         $('.shade').fadeOut()
         $('body').css('overflow', 'auto')
     })
     // 跳轉充值
-    $('.recharge').on('click', function(){
+    $('.recharge').on('click', function () {
         $('.shade-mask-no-money').fadeOut(300)
         $('.shade').fadeOut(300)
         $('body').css('overflow', 'auto')
-        if(browser.app){
-            if(browser.android){
+        if (browser.app) {
+            if (browser.android) {
                 tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
-            }else if(browser.ios){
+            } else if (browser.ios) {
                 window.webkit.messageHandlers.openChargePage.postMessage(null)
             }
-        }else{
+        } else {
             toastMsg('請在app內打開')
         }
     })
 
-    //從充值頁面返回活動頁面 重新請求用戶信息接口
+    // //從充值頁面返回活動頁面 重新請求用戶信息接口
+    // var hiddenProperty = 'hidden' in document ? 'hidden' :
+    // 'webkitHidden' in document ? 'webkitHidden' :
+    // 'mozHidden' in document ? 'mozHidden' : null;
+
+    // var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
+    // var onVisibilityChange = function () {
+    //     if(!document[hiddenProperty]){
+    //         $('.shade-mask-no-money').hide()
+    //         getUserInfo()
+    //     } 
+    // }
+    // document.addEventListener(visibilityChangeEvent, onVisibilityChange);
+    //返回页面 重新请求接口
     var hiddenProperty = 'hidden' in document ? 'hidden' :
-    'webkitHidden' in document ? 'webkitHidden' :
-    'mozHidden' in document ? 'mozHidden' : null;
+        'webkitHidden' in document ? 'webkitHidden' :
+            'mozHidden' in document ? 'mozHidden' : null;
 
     var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
     var onVisibilityChange = function () {
-        if(!document[hiddenProperty]){
-            $('.shade-mask-no-money').hide()
-            getUserInfo()
-        } 
+        if (!document[hiddenProperty]) {
+            location.reload()
+        }
     }
     document.addEventListener(visibilityChangeEvent, onVisibilityChange);
 })