完善许愿之星

view/peko/modules/act-wishingStar/css/index.css

@@ -474,7 +474,7 @@ body {
 }
 
 .page2 .my .num {
-  width: 0.97333rem;
+  width: 1.8rem;
   height: 100%;
   line-height: 2.13333rem;
   text-align: center;

view/peko/modules/act-wishingStar/css/index.scss

@@ -484,7 +484,7 @@ body {
         height: px2rem(152);
 
         .num {
-            width: px2rem(73);
+            width: 1.8rem;
             height: 100%;
             line-height: px2rem(160);
             text-align: center;

view/peko/modules/act-wishingStar/js/index.js

@@ -48,12 +48,11 @@ $(function () {
                 window.webkit.messageHandlers.closeWebView.postMessage(null)
             }
         })
-        // getConfig();
+        getConfig();
     }, 100)
 })
 // 配置接口
 function getConfig () {
-    $('.page1 ul li').remove()
     // showLoading()
     networkRequest({
         type: 'get',
@@ -61,17 +60,19 @@ function getConfig () {
         success (res) {
             if (res.code === 200) {
                 mymagicStickNum = res.data.userStickNum;
+                $('.page1 .top .centon').text(mymagicStickNum);
+                $('.wishingPop .wishingPop_in .magicSticks b').text(mymagicStickNum);
                 var str = '';
                 res.data.roundList.forEach(res => {
                     str += `
                     <li>
                         <div class="giftBox">
-                            <img src="${res.giftImg}" alt="" class="giftImg">
+                            <img src="${res.gift.picUrl}" alt="" class="giftImg">
                         </div>
                         <div class="giftInfo">
-                            <b>${res.giftName}</b>
+                            <b>${res.gift.giftName}</b>
                             <img src="./images/diamond.png" alt="" class="diamond">
-                            <i>${res.giftPrice}</i>
+                            <i>${res.gift.goldPrice}</i>
                         </div>
                         <div class="inventory">庫存${res.stockNum}</div>
                         <div class="schedule">許願進度</div>
@@ -82,11 +83,12 @@ function getConfig () {
                             <p>${res.process}/${res.max}</p>
                         </div>
                         <div class="wishIng">已許願${res.userInputNum}次</div>
-                        <img src="./images/wishIngBut.png" alt="" class="wishIngBut" roundId=${res.roundId} stockNum=${res.stockNum}>
+                        <img src="./images/wishIngBut.png" alt="" class="wishIngBut" configId=${res.configId} roundId=${res.gift.roundId} stockNum=${res.gift.stockNum}>
                     </li>
                     `
                 });
-                $('.page1 ul').append(src);
+                $('.page1 ul li').remove()
+                $('.page1 ul').append(str);
             } else {
                 toastMsg(res.message)
             }
@@ -421,11 +423,12 @@ function buyStick (num) {
         success (res) {
             if (res.code === 200) {
                 getConfig();
-                $('.buySuccess p').tetx(`魔法棒${num}`);
+                $('.buySuccess p').text(`魔法棒${num}`);
                 $('.buySuccess').show();
                 bodyScroolFun(true);
                 magicStickNum = 1;
-                $('.magicStick .magicStick_in .magicSticks b').text(0);
+                $('.magicStick .magicStick_in input').val(magicStickNum);
+                $('.magicStick .magicStick_in .magicSticks b').text(100);
             } else if (res.code === 31005) {
                 $('.goToPay').show();
                 bodyScroolFun(true);
@@ -489,7 +492,7 @@ $('.wishingPop').click(function () {
 })
 // 许愿按钮
 var roundId;
-$('.page1 ul li').on('click', '.wishIngBut', function () {
+$('.page1 ul').on('click', 'li .wishIngBut', function () {
     var stockNum = $(this).attr('stockNum');
     roundId = $(this).attr('roundId');
     if (stockNum == 0) {
@@ -520,7 +523,13 @@ function promise (num, roundId) {
         data: { num, roundId },
         success (res) {
             if (res.code === 200) {
+                wishingNum = 1;
+                $('.wishingPop .wishingPop_in input').val(wishingNum)
                 toastMsg('参与许愿成功')
+                getConfig();
+            }else if(res.code === 5003){
+                $('.magicStick .magicStick_in h3').text('可用魔法棒不足，请购买');
+                $('.magicStick').show();
             } else {
                 toastMsg(res.message)
             }

view/peko/modules/act-wishingStar/js/index.ts

@@ -0,0 +1,535 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var mymagicStickNum = 0;//魔法棒数量
+var getRankType = 1;//1=今日奖励榜，2=次数总榜
+// 初始化函數
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+// 配置接口
+function getConfig () {
+    $('.page1 ul li').remove()
+    // showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/promiseStar/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                mymagicStickNum = res.data.userStickNum;
+                $('.page1 .top .centon').text(mymagicStickNum)
+                var str = '';
+                res.data.roundList.forEach(res => {
+                    str += `
+                    <li>
+                        <div class="giftBox">
+                            <img src="${res.giftImg}" alt="" class="giftImg">
+                        </div>
+                        <div class="giftInfo">
+                            <b>${res.giftName}</b>
+                            <img src="./images/diamond.png" alt="" class="diamond">
+                            <i>${res.giftPrice}</i>
+                        </div>
+                        <div class="inventory">庫存${res.stockNum}</div>
+                        <div class="schedule">許願進度</div>
+                        <div class="line">
+                            <div class="line_in">
+                                <img style="width: ${res.process / res.max * 100 >= 100 ? '100' : res.process / res.max}%;" src="./images/line.png" alt="">
+                            </div>
+                            <p>${res.process}/${res.max}</p>
+                        </div>
+                        <div class="wishIng">已許願${res.userInputNum}次</div>
+                        <img src="./images/wishIngBut.png" alt="" class="wishIngBut" roundId=${res.roundId} stockNum=${res.stockNum}>
+                    </li>
+                    `
+                });
+                $('.page1 ul').append(src);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// 刷新接口
+$('.page1 .update').click(function(){
+    getConfig();
+})
+// 购买魔法棒接口
+function getRank (type) {
+    $('.page2 .listBox li').remove()
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/promiseStar/getRank',
+        data: { type },
+        success (res) {
+            if (res.code === 200) {
+                var str = '';
+                res.data.rankList.forEach((res, i) => {
+                    str += `
+                        <li class='li1${i + 1}'>
+                            <div class="num num${i + 1}">${i + 1 > 3 ? res.ranking : ''}</div>
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <div class="name">${res.nick}</div>
+                            <div class="right">
+                                <p>${res.score}次</p>
+                                <b>許願獲獎次數</b>
+                            </div>
+                        </li>
+                    `
+                })
+                $('.page2 .listBox').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// Tab切换
+$('.header .tabBox').on('click', ' div', function () {
+    var i = $(this).index() + 1;
+    $('.header .tabBox div').removeClass('act1').removeClass('act2');
+    $(this).addClass(`act${i}`);
+    $('.page1,.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        getRank(getRankType);
+    }
+})
+// 榜单切换
+$('.page2 .listTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).parent('.listTab').removeClass('tab1').removeClass('tab2');
+    $(this).parent('.listTab').addClass(`tab${i}`)
+    getRankType = i;
+    getRank(getRankType);
+})
+// 打开活动规则弹窗
+$('.header .rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 关闭活动规则弹窗
+$('.rule').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})
+var page = 1;
+var isLock = true;
+// 中奖记录接口
+function listLuckyRecord (page) {
+    $('.record .record_in .ul1 li').remove();
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/promiseStar/listLuckyRecord',
+        data: { page, pageSize: 10 },
+        success (res) {
+            if (res.code === 200) {
+                if (res.data.length == 0) {
+                    isLock = false;
+                }
+                var str = '';
+                res.data.forEach((res, i) => {
+                    str += `
+                        <li class="${i % 2 == 0 ? '' : 'liAct'}">
+                            <div class="left">
+                                <p>${dateFormat(res.createTime, 'hh:mm:ss')}</p>
+                                <i>${dateFormat(res.createTime, 'yyyy-MM-dd')}</i>
+                            </div>
+                            <div class="right">
+                                <p>獲得：${res.gift.giftName}</p>
+                                <i>（${res.gift.goldPrice}鉆石）</i>
+                            </div>
+                        </li>
+                    `
+                })
+                $('.record .record_in .ul1').append(str);
+                isLock = true;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            isLock = true;
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// 参与记录
+function listRoundRecord (page) {
+    $('.record .record_in .ul2 li').remove();
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/promiseStar/listRoundRecord',
+        data: { page, pageSize: 10 },
+        success (res) {
+            if (res.code === 200) {
+                if (res.data.length == 0) {
+                    isLock = false;
+                }
+                var str = '';
+                res.data.forEach((res, i) => {
+                    str += `
+                        <li class="liAct">
+                            <div class="left">
+                                <p>${dateFormat(res.createTime, 'hh:mm:ss')}</p>
+                                <i>${dateFormat(res.createTime, 'yyyy-MM-dd')}</i>
+                            </div>
+                            <div class="center">
+                                <p>許願：${res.gift.giftName}</p>
+                                <i>${res.luckyUser ? '已结束' : '進行中'}</i>
+                            </div>
+                            <div class="right">
+                                <p>${res.luckyUser ? res.luckyUser.nick : ''}</p>
+                                <i>${res.luckyUser ? '獲得' : ''}</i>
+                            </div>
+                        </li>
+                    `
+                })
+                $('.record .record_in .ul2').append(str);
+                isLock = true;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            isLock = true;
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// 打开参与记录按钮
+$('.header .record_icon').click(function () {
+    page = 1;
+    isLock = true;
+    showLoading();
+    listLuckyRecord(page);
+    $('.record').show();
+    bodyScroolFun(true);
+})
+// 切换参与记录按钮
+$('.record .record_in .recordtab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.record .record_in .recordtab div').removeClass('act1').removeClass('act2');
+    $(this).addClass(`act${i}`);
+    $('.record .record_in .ul2,.record .record_in .ul1').hide();
+    console.log(i);
+    if (i == 1) {
+        listLuckyRecord(page)
+    } else {
+        listRoundRecord(page)
+    }
+    $(`.record .record_in .ul${i}`).show();
+    return false;
+})
+// 监听滚动1
+$('.record .record_in .ul1').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.record .record_in .ul1')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (isLock) {
+            // 请求下一页
+            if (canNext) {
+                listLuckyRecord(page++)
+                isLock = false;
+            }
+        }
+    }
+})
+// 监听滚动2
+$('.record .record_in .ul2').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.record .record_in .ul2')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (isLock) {
+            // 请求下一页
+            if (canNext) {
+                listRoundRecord(page++)
+                isLock = false;
+            }
+        }
+    }
+})
+// 关闭参与记录按钮
+$('.record').click(function () {
+    $('.record').hide();
+    bodyScroolFun(false);
+})
+// 关闭去充值弹窗
+$('.goToPay').click(function () {
+    $('.goToPay').hide();
+    bodyScroolFun(false);
+})
+// 关闭购买成功按钮
+$('.buySuccess .buySuccess_in .buySuccessBut').click(function () {
+    $('.buySuccess').hide();
+    bodyScroolFun(false);
+})
+// 去充值按钮
+$('.goToPay .goToPay_in .but').click(function () {
+    if (browser.app) {
+        if (browser.android) {
+            let channel = pubInfo.deviceInfo.channel;
+            console.log(pubInfo.deviceInfo);
+            if (channel == "google") {
+                window.androidJsObj.openChargePage(6);
+            } else {
+                window.androidJsObj.openChargePage(6);
+                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
+            }
+        } else if (browser.ios) {
+            let channel = pubInfo.deviceInfo.channel;
+            if (channel == "appstore") {
+                window.webkit.messageHandlers.openChargePage.postMessage(null);
+            } else {
+                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
+                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
+            }
+        }
+    } else {
+        toastMsg('請在app內打開')
+    }
+    $('.goToPay').hide();
+    bodyScroolFun(false);
+    return false;
+})
+var magicStickNum = 1;
+function magicStick (type, num) {
+    magicStickNum = Number($('.magicStick .magicStick_in input').val());
+    if (type == 1) {
+        // 加
+        magicStickNum++;
+    } else if (type == 2) {
+        // 减
+        magicStickNum--;
+    } else if (type == 3) {
+        // 快捷购买
+        magicStickNum += num;
+    } else {
+    }
+    magicStickNum <= 1 ? magicStickNum = 1 : magicStickNum = magicStickNum;
+    magicStickNum >= 99999999 ? magicStickNum = 99999999 : magicStickNum = magicStickNum;
+    $('.magicStick .magicStick_in .magicSticks b').text(magicStickNum * 100);
+    $('.magicStick .magicStick_in input').val(magicStickNum);
+}
+// 打开购买魔法棒弹窗
+$('.page1 .top .but').click(function () {
+    $('.magicStick .magicStick_in h3').text('購買數量');
+    $('.magicStick').show();
+    bodyScroolFun(true);
+})
+// 魔法棒加弹窗
+$('.magicStick .magicStick_in .add').click(function () {
+    magicStick(1)
+    return false;
+})
+// 魔法棒减弹窗
+$('.magicStick .magicStick_in .decrease').click(function () {
+    magicStick(2)
+    return false;
+})
+// 魔法棒快捷购买弹窗
+$('.magicStick .magicStick_in .quickAddition div').click(function () {
+    var num = Number($(this).attr('num'));
+    magicStick(3, num)
+    return false;
+})
+// 监听输入框的变化
+$('.magicStick .magicStick_in input').on('input', function () {
+    magicStick();
+})
+// 魔法棒输入框弹窗
+$('.magicStick .magicStick_in input').click(function () {
+    return false;
+})
+// 关闭购买魔法棒弹窗
+$('.magicStick').click(function () {
+    $('.magicStick').hide();
+    bodyScroolFun(false);
+})
+// 确认购买魔法棒按钮
+$('.magicStick .magicStick_in .but').click(function () {
+    buyStick(magicStickNum)
+    bodyScroolFun(false);
+})
+// 购买魔法棒
+function buyStick (num) {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/promiseStar/buyStick',
+        data: { num },
+        success (res) {
+            if (res.code === 200) {
+                getConfig();
+                $('.buySuccess p').tetx(`魔法棒${num}`);
+                $('.buySuccess').show();
+                bodyScroolFun(true);
+                magicStickNum = 1;
+                $('.magicStick .magicStick_in .magicSticks b').text(0);
+            } else if (res.code === 31005) {
+                $('.goToPay').show();
+                bodyScroolFun(true);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+var wishingNum = 1;
+function wishing (type, num) {
+    wishingNum = Number($('.wishingPop .wishingPop_in input').val());
+    if (type == 1) {
+        // 加
+        wishingNum++;
+    } else if (type == 2) {
+        // 减
+        wishingNum--;
+    } else if (type == 3) {
+        // 快捷购买
+        wishingNum += num;
+    } else {
+    }
+    wishingNum <= 1 ? wishingNum = 1 : wishingNum = wishingNum;
+    wishingNum >= 99999999 ? wishingNum = 99999999 : wishingNum = wishingNum;
+    $('.wishingPop .wishingPop_in input').val(wishingNum);
+}
+// 许愿加弹窗
+$('.wishingPop .wishingPop_in .add').click(function () {
+    wishing(1)
+    return false;
+})
+// 许愿减弹窗
+$('.wishingPop .wishingPop_in .decrease').click(function () {
+    wishing(2)
+    return false;
+})
+// 许愿快捷购买弹窗
+$('.wishingPop .wishingPop_in .quickAddition div').click(function () {
+    var num = Number($(this).attr('num'));
+    wishing(3, num)
+    return false;
+})
+// 监听输入框的变化
+$('.wishingPop .wishingPop_in input').on('input', function () {
+    wishing();
+})
+// 许愿输入框弹窗
+$('.wishingPop .wishingPop_in input').click(function () {
+    return false;
+})
+// 关闭许愿弹窗
+$('.wishingPop').click(function () {
+    $('.wishingPop').hide();
+    bodyScroolFun(false);
+})
+// 许愿按钮
+var roundId;
+$('.page1 ul li').on('click', '.wishIngBut', function () {
+    var stockNum = $(this).attr('stockNum');
+    roundId = $(this).attr('roundId');
+    if (stockNum == 0) {
+        toastMsg('该礼物库存不足,无法进行许愿');
+        return;
+    }
+    $('.wishingPop').show();
+})
+// 确认许愿按钮
+$('.wishingPop .wishingPop_in .but').click(function () {
+    console.log(wishingNum < mymagicStickNum);
+    if (wishingNum > mymagicStickNum) {
+        $('.magicStick .magicStick_in h3').text('可用魔法棒不足，请购买');
+        $('.magicStick').show();
+        bodyScroolFun(true);
+    } else {
+        promise(wishingNum, roundId);
+        bodyScroolFun(false);
+    }
+
+})
+// 许愿接口
+function promise (num, roundId) {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/promiseStar/promise',
+        data: { num, roundId },
+        success (res) {
+            if (res.code === 200) {
+                toastMsg('参与许愿成功')
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}

view/peko/modules/act-wishingStar/package-lock.json

@@ -0,0 +1,27 @@
+{
+  "name": "act-wishingStar",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "@types/jquery": "^3.5.29"
+      }
+    },
+    "node_modules/@types/jquery": {
+      "version": "3.5.29",
+      "resolved": "https://registry.npmmirror.com/@types/jquery/-/jquery-3.5.29.tgz",
+      "integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==",
+      "dev": true,
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/@types/sizzle/-/sizzle-2.3.8.tgz",
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "dev": true
+    }
+  }
+}

view/peko/modules/act-wishingStar/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@types/jquery": "^3.5.29"
+  }
+}