Compare commits

..

9 Commits

Author SHA1 Message Date
Dragon
ddfd7370f2 修改新加坡规则 2024-02-19 18:39:24 +08:00
Dragon
c58674a618 修改规则 2024-02-19 18:34:07 +08:00
Dragon
7fdcfdaa32 修复切换异常问题 2024-02-19 18:05:17 +08:00
Dragon
70607468ff 新增台湾地区银行提领绑定资料 2024-02-19 16:44:39 +08:00
Dragon
267cf85389 修改规则 2024-02-13 00:17:18 +08:00
Dragon
0a865eda72 修改活动时间 2024-02-12 13:14:34 +08:00
Dragon
a598111ede 新增情人节 2024-02-06 17:12:09 +08:00
Dragon
956c3c26f9 新增peko新春榜单 2024-02-05 21:27:57 +08:00
Dragon
3632ed33a9 新春榜单暂存 2024-02-01 14:18:56 +08:00
104 changed files with 7206 additions and 222 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,391 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熱戀情人節</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 頭部 -->
<div class="header">
<div class="rule_icon"></div>
</div>
<!-- tab切換 -->
<div class="tab">
<div class="act">萌動花盒</div>
<div>甜蜜升溫</div>
<div>熱戀時刻</div>
</div>
<!-- 頁面1 -->
<div class="page1">
<div class="bg1">
<!-- 標題 -->
<img src="./images/page1Bg1Title.png" alt="" class="title">
<!-- 愛心盒子 -->
<img src="./images/loveBox.png" alt="" class="loveBox">
<!-- 文案 -->
<p class="p1">活動期間開出「萌動花盒」中的6種不同禮物</p>
<p class="p2">可獲得「初心萌動」限定銘牌</p>
<p class="p3">今日獎勵已發放</p>
<p class="p4">獎勵自動發放每日僅可領取一次點亮結果和獎勵每日中午12點自動刷新</p>
<!-- 銘牌 -->
<img src="./images/mp.png" alt="" class="mp">
<!-- 點亮列錶 -->
<div class="giftListBox">
<div class="giftList giftList1 filter">
<div class="qp"></div>
<img src="./images/1.png" alt="" class="gift">
<div class="giftName">白玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList2 filter">
<div class="qp"></div>
<img src="./images/2.png" alt="" class="gift">
<div class="giftName">紅玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList3 filter">
<div class="qp"></div>
<img src="./images/3.png" alt="" class="gift">
<div class="giftName">粉玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList4 filter">
<div class="qp"></div>
<img src="./images/4.png" alt="" class="gift">
<div class="giftName">彩玫瑰</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList5 filter">
<div class="qp"></div>
<img src="./images/5.png" alt="" class="gift">
<div class="giftName">熾熱愛戀</div>
<div class="giftVAlue">1314鉆</div>
</div>
<div class="giftList giftList6 filter">
<div class="qp"></div>
<img src="./images/6.png" alt="" class="gift">
<div class="giftName">純白愛戀</div>
<div class="giftVAlue">1314鉆</div>
</div>
</div>
</div>
<div class="bg2">
<!-- 標題 -->
<img src="./images/page1Bg2Title.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li class="liTitle">
<div>點亮時間</div>
<div>獲得獎勵</div>
</li>
<li>
<div class="left">
<p>2024/2/1</p>
<span>00:00:00</span>
</div>
<div>xxxx銘牌</div>
</li>
<li class="null">
<div>暫無點亮記錄,快去集齊禮物吧~</div>
</li>
</ul>
</div>
</div>
<!-- 頁面2 -->
<div class="page2">
<div class="box">
<!-- 標題 -->
<img src="./images/page2Title.png" alt="" class="title">
<!-- 購買記錄icon -->
<img src="./images/page2Buy_icon.png" alt="" class="page2Buy_icon">
<!-- 文案 -->
<i class="i1">剩余時間:00天12時12分</i>
<i class="i2">活動期間送禮到達指定任務值,可解鎖超珍稀限時禮物直購權</i>
<i class="i3">1鉆石送禮=1禮物值</i>
<!-- 任務 -->
<div class="tasks tasks1 taskss">
<div class="giftBox">
<div class="qp"></div>
<img src="./images/tasks1.png" alt="" class="gift">
<div class="giftName">心動一剎</div>
<div class="giftVAlue">13140鉆</div>
</div>
<p class="p1">每達到52000禮物值可解鎖1次直購權</p>
<p class="p2">禮物值</p>
<p class="p3">當前可購買: X個</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
<img src="./images/diamond.png" alt="" class="diamond">
1314購買
</div>
</div>
<div class="tasks2 taskss">
<div class="giftBox">
<div class="qp"></div>
<img src="./images/tasks2.png" alt="" class="gift">
<div class="giftName">絕對寵溺</div>
<div class="giftVAlue">33440鉆</div>
</div>
<p class="p1">每達到1314520禮物值可解鎖1次直購權</p>
<p class="p2">禮物值</p>
<p class="p3">當前可購買: X個</p>
<div class="line">
<span></span>
<i class="i">0/2000</i>
</div>
<div class="buy">
<img src="./images/diamond.png" alt="" class="diamond">
3344購買
</div>
</div>
</div>
</div>
<!-- 頁面3 -->
<div class="page3">
<!-- 獎勵任務 -->
<div class="box">
<!-- 文案 -->
<i class="i2">突破熱戀值,領取限時裝扮獎勵!
女性用戶獲得粉色裝扮,男性用戶獲得藍色裝扮
每個用戶僅能獲取1次將自動發放至「我的裝扮」</i>
<!-- 任務 -->
<div class="tasks tasks1">
<div class="giftBox">
<div class="qp"></div>
<!-- <img src="./images/logo.png" alt="" class="gift"> -->
<div class="giftName">糖果戀人頭飾</div>
<div class="giftVAlue">13140熱戀值</div>
</div>
<p class="p1">糖果戀人頭飾-情人節限定</p>
<p class="p2">熱戀值</p>
<p class="p3">有效期24H</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
未完成
</div>
</div>
<div class="tasks2">
<div class="giftBox">
<div class="qp"></div>
<!-- <img src="./images/logo.png" alt="" class="gift"> -->
<div class="giftName">糖果戀人氣泡</div>
<div class="giftVAlue">33440熱戀值</div>
</div>
<p class="p1">糖果戀人氣泡·情人節限定</p>
<p class="p2">熱戀值</p>
<p class="p3">有效期24H</p>
<div class="line">
<span></span>
<i class="i">0/1000</i>
</div>
<div class="buy">
未完成
</div>
</div>
</div>
<!-- 前三 -->
<div class="top3">
<!-- 標題 -->
<div class="title">熱戀榜單</div>
<!-- 榜單獎勵 -->
<img src="./images/page3Rule_icon.png" alt="" class="rule_icon">
<!-- 前三列錶 -->
<div class="no1">
<img src="./images/page3Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
<div class="no2">
<img src="./images/page3Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
<div class="no3">
<img src="./images/page3Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftlogo">
<img src="./images/logo.png" alt="" class="rightlogo">
<div class="name">我是男用戶6...<i> & </i>我是女用戶6...</div>
<span class="score">9999熱戀值</span>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">我是男用戶的...</div>
<div class="rightName">我是男用戶的...</div>
<div class="score">0</div>
</li>
</ul>
<!-- 自己組合 -->
<div class="my">
<img src="./images/top.png" alt="" class="icon">
<div class="scroll">
<div class="myBox">
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">1我是男用戶的...</div>
<div class="rightName">1我是男用戶的...</div>
<div class="score">0</div>
</div>
</div>
</div>
</div>
<!-- 購買記錄彈窗 -->
<div class="buyRecords">
<div class="buyRecords_in">
<!-- 標題 -->
<img src="./images/page2RuleTitle.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li class="liTitle">
<div>購買時間</div>
<div>購買禮物</div>
</li>
<li>
<div class="left">
<p>2024/2/1</p>
<span>00:00:00</span>
</div>
<div>xxxx禮物*1個</div>
</li>
<li class="null">
<div>暫無購買記錄~</div>
</li>
</ul>
</div>
</div>
<!-- 活動規則彈窗 -->
<div class="rule">
<div class="rule_in">
<!-- 標題 -->
<img src="./images/ruleTitle.png" alt="" class="title">
<!-- 列錶 -->
<ul>
<li>一、活動時間:</li>
<li> 2024年2月12日12:00:00—2024年2月16日23:59:59</li>
<li> 二、熱戀情人節</li>
<li> 1. 萌動花盒</li>
<li> a. 活動期間5200鉆石萌動花盒幸運禮物限時上線花盒內有6種不同禮物每次送出隨機解鎖1種</li>
<li> b.每送出花盒內的一種禮物皆可點亮對應拼圖所有拼圖全部點亮即可獲得24H【初心萌動】銘牌獎勵</li>
<li> c. 拼圖進度每日中午12點重置活動期間每天均可完成1次 </li>
<li>2. 甜蜜升溫</li>
<li> a. 活動期間,超珍稀禮物直購限時開放,贈送禮物每達指定價值即可解鎖直購</li>
<li>b. 贈送禮物價值每滿520000鉆即可購買【心動一剎131400鉆】</li>
<li>c. 贈送禮物價值每滿1314520鉆即可購買【絕對寵溺334400鉆】</li>
<li>d. 購買的禮物將直接放入背包當中</li>
<li>3. 熱戀時刻</li>
<li>a. 活動時間2月14日0:00:00—2月15日00:00:00</li>
<li>b. 活動時間內比拼熱戀值收到10鉆=1熱戀值</li>
<li>c. 活動時間內熱戀值滿13140可獲得24H【糖果戀人】頭像框獎勵熱戀值滿33440可獲得24H【糖果戀人】氣泡獎勵</li>
<li>d. 大頭號牌照房房主和家族長不可以組成CP不參與榜單活動排名</li>
<li>e. 榜單獎勵TOP1可額外獲得情侶靚號5203344&3344520*30天TOP1-3均可獲得【摯愛唯一】專屬銘牌、頭像框、資料卡、專屬開屏1天</li>
<li>三、特別說明</li>
<li>1.靚號持有者需要在活動結束後2周內確認靚號否則將自動過期無法使用</li>
<li>2.本活動最終解釋權歸PIKO所有本活動以及獎勵與蘋果公司無關</li>
</ul>
</div>
</div>
<!-- 活動結束彈窗 -->
<div class="end">
<div class="end_in">
<img src="./images/endTitle.png" alt="" class="title">
<div class="but">檢視榜單</div>
</div>
</div>
<!-- 購買失敗彈窗 -->
<div class="failureBuy">
<div class="failureBuy_in">
<img src="./images/failureBuyTitle.png" alt="" class="title">
<div class="text">鉆石余額不足</div>
<div class="but close">關閉</div>
<div class="but ok">前往充值</div>
</div>
</div>
<!-- 購買成功彈窗 -->
<div class="success">
<div class="success_in">
<img src="./images/buyTitle.png" alt="" class="title">
<div class="giftListSuccess">
<div class="qp"></div>
<img src="./images/logo.png" alt="" class="gift">
<div class="giftName">禮物名稱</div>
<div class="giftVAlue">0鉆</div>
</div>
<div class="text">xxxx禮物名*1已發放至「我的背包」</div>
<div class="but">知道了</div>
</div>
</div>
<!-- 二次確認購買彈窗 -->
<div class="sure">
<div class="sure_in">
<img src="./images/sureTitle.png" alt="" class="title">
<div class="text">購買成功後將自動發放至「我的背包」</div>
<div class="giftListSuccess">
<div class="qp"></div>
<img src="./images/logo.png" alt="" class="gift">
<div class="giftName">禮物名稱</div>
<div class="giftVAlue">0鉆</div>
</div>
<div class="but close">下次再說</div>
<div class="but ok">立即購買</div>
</div>
</div>
<!-- 榜單獎勵彈窗 -->
<div class="page3Rule">
<div class="page3Rule_in">
<img src="./images/page3Title.png" alt="" class="title">
<div class="box">
<img src="./images/page3Rule_inBg.png" alt="">
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="./js/index.js"></script>

View File

@@ -0,0 +1,531 @@
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 activityCode1;
var activityCode2;
var activityCode;
var diamondNum;
var taskCode;
var taskIcon;
var taskName;
var showValue;
var countupTime;
// 初始化函數
$(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)
}
})
getTask_MENG_DONG_HUA_HE();
getTask_TIAN_MI_SHENG_WEN();
getRank();
}, 100)
})
// 獲取榜單接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024Valentines/cpRank/getRank',
success (res) {
if (res.code === 200) {
// 處理任務
res.data.cpTaskList.forEach((val, i) => {
console.log(res.status);
if (val.status == 2) {
$(`.page3 .box .tasks${i + 1} .buy`).addClass("act");
$(`.page3 .box .tasks${i + 1} .buy`).text("已完成");
$(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`);
$(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`)
} else {
$(`.page3 .box .tasks${i + 1} .buy`).removeClass("act");
$(`.page3 .box .tasks${i + 1} .buy`).text("未完成");
$(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`);
$(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`)
}
});
// 處理前三
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
leftAvatar: './images/logo.png',
rightAvatar: './images/logo.png',
leftNick: '虛位以待',
rightNick: '虛位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, i) => {
$(`.page3 .top3 .no${i + 1} .leftlogo`).attr('src', res.leftAvatar);
$(`.page3 .top3 .no${i + 1} .rightlogo`).attr('src', res.rightAvatar);
$(`.page3 .top3 .no${i + 1} .name`).html(`${res.leftNick.length > 6 ? res.leftNick.slice(0, 6) + '...' : res.leftNick}<i> & </i>${res.rightNick.length > 6 ? res.rightNick.slice(0, 6) + '...' : res.rightNick}`);
$(`.page3 .top3 .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w') + '熱戀值')
})
// 非前三
var str = '';
$('.page3 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}</div>
<img src="${res.leftAvatar}" alt="" class="leftTx">
<img src="${res.rightAvatar}" alt="" class="rightTx">
<div class="leftName">${res.leftNick}</div>
<div class="rightName">${res.rightNick}</div>
<div class="score">${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page3 ul').append(str);
// 處理自己榜單排名
$('.page3 .my .myBox').remove();
var strMy = '';
res.data.meRankList.forEach((res, i) => {
strMy += `
<div class="myBox">
<div class="num">${res.ranking == 0 ? '未上榜' : res.ranking}</div>
<img src="${res.leftAvatar}" alt="" class="leftTx">
<img src="${res.rightAvatar}" alt="" class="rightTx">
<div class="leftName">${res.leftNick}</div>
<div class="rightName">${res.rightNick}</div>
<div class="score">${unitProcessing(res.score, 10000, 1, 'w')}</div>
</div>
`
})
$('.page3 .my .scroll').append(strMy)
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 獲取萌動禮盒點亮任務接口
function activityInfo () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/info',
data: { activityCode: activityCode2 },
success (res) {
if (res.code === 200) {
if (res.data.endTime - res.timestamp > 0) {
countup(res.data.endTime - res.timestamp);
} else {
$('.end').show();
bodyScroolFun(true);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 倒計時
function countup (leftTime) {
clearTimeout(countupTime)
//獲取當前時間
// var now = nowTime;
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定義變數 d,h,m,s保存倒計時的時間
var d, h, m, s;
//遞歸每秒調⽤countTime⽅法顯⽰動態時間效果
if (leftTime > 0) {
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
s = getzf(Math.floor(leftTime / 1000 % 60));
//將倒計時賦值到div中
$('.page2 .box .i1').text(`剩余時間:${d}${h}${m}${s}`);
} else {
$('.page2 .box .i1').text(`剩余時間:已結束`);
}
if (leftTime > 0) {
leftTime = leftTime - 1000;
}
countupTime = setTimeout(function () {
countup(leftTime);
}, 1000);
}
// 獲取萌動禮盒點亮任務接口
function getTask_MENG_DONG_HUA_HE () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "MENG_DONG_HUA_HE" },
success (res) {
if (res.code === 200) {
// 渲染合成列錶
$('.page1 .bg1 .giftListBox .giftList').remove();
var str = '';
res.data[0].children.forEach((res, i) => {
str += `
<div class="giftList giftList${i + 1} ${res.completed ? '' : 'filter'}">
<div class="qp"></div>
<img src="${res.taskIcon}" alt="" class="gift">
<div class="giftName">${res.taskName}</div>
<div class="giftVAlue">${res.taskValue}鉆</div>
</div>
`
});
$('.page1 .bg1 .giftListBox').append(str);
activityCode1 = 'ACT_2024_VALENTINES_DAY';
recordPage(activityCode1, 'MENG_DONG_HUA_HE',);
if (res.data[0].reward.granted) {
$('.page1 .bg1 .p3').show();
} else {
$('.page1 .bg1 .p3').hide();
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 獲取甜蜜升溫任務接口
function getTask_TIAN_MI_SHENG_WEN () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "TIAN_MI_SHENG_WEN" },
success (res) {
if (res.code === 200) {
activityCode2 = 'ACT_2024_VALENTINES_DAY';
res.data.forEach((res, i) => {
$(`.page2 .box .tasks${i + 1} .giftBox .gift`).attr('src', res.taskIcon);
$(`.page2 .box .tasks${i + 1} .giftBox .giftName`).text(res.reward.rewardName);
$(`.page2 .box .tasks${i + 1} .giftBox .giftVAlue`).text(res.reward.showValue + '鉆');
$(`.page2 .box .tasks${i + 1} .p1`).text(`每達到${res.taskValue}禮物值可解鎖1次直購權`);
$(`.page2 .box .tasks${i + 1} .line .i`).text(`${res.completeValue % res.taskValue}/${res.taskValue}`);
$(`.page2 .box .tasks${i + 1} .line span`).css('width', `${(res.completeValue % res.taskValue / res.taskValue) * 100 >= 100 ? 98.8 : (res.completeValue % res.taskValue / res.taskValue) * 100}%`);
$(`.page2 .box .tasks${i + 1} .p3`).text(`當前可購買: ${Math.floor(res.activityValue / res.taskValue)}`);
$(`.page2 .box .tasks${i + 1} .buy`).html(`<img src="./images/diamond.png" alt="" class="diamond">
${res.reward.showValue}購買`);
$(`.page2 .box .tasks${i + 1} .buy`).attr('activityCode', res.activityCode);
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskCode', res.taskCode);
$(`.page2 .box .tasks${i + 1} .buy`).attr('diamondNum', res.reward.showValue);
$(`.page2 .box .tasks${i + 1} .buy`).attr('num', Math.floor(res.activityValue / res.taskValue));
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskIcon', res.taskIcon);
$(`.page2 .box .tasks${i + 1} .buy`).attr('taskName', res.reward.rewardName);
$(`.page2 .box .tasks${i + 1} .buy`).attr('showValue', res.reward.showValue);
})
activityInfo();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 購買接口
function exchange (activityCode, diamondNum, taskCode, taskIcon, taskName, showValue) {
showLoading()
networkRequest({
type: 'post',
url: urlPrefix + '/activity/task/exchange',
data: { activityCode, diamondNum, taskCode, num: 1 },
success (res) {
if (res.code === 200) {
$('.success .success_in .giftListSuccess .gift').attr('src', taskIcon);
$('.success .success_in .giftListSuccess .giftName').text(taskName);
$('.success .success_in .giftListSuccess .giftVAlue').text(`${showValue}`);
$('.success .success_in .text').text(`${taskName}*1已發放至「我的背包」`);
$('.success').show();
getTask_TIAN_MI_SHENG_WEN();
bodyScroolFun(true);
} else if (res.code == 31005) {
$('.failureBuy').show();
bodyScroolFun(true);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 購買禮物按鈕
$(`.page2 .box .taskss .buy`).click(function () {
var num = $(this).attr('num');
activityCode = $(this).attr('activityCode');
diamondNum = $(this).attr('diamondNum');
taskCode = $(this).attr('taskCode');
taskIcon = $(this).attr('taskIcon');
taskName = $(this).attr('taskName');
showValue = $(this).attr('showValue');
if (num > 0) {//true
$('.sure .sure_in .giftListSuccess .gift').attr('src', taskIcon);
$('.sure .sure_in .giftListSuccess .giftName').text(taskName);
$('.sure .sure_in .giftListSuccess .giftVAlue').text(showValue + '鉆');
$('.sure').show();
bodyScroolFun(true);
} else {
toastMsg('當前購買次數不足~')
}
});
// 二次確認彈窗
$('.sure .sure_in .ok').click(function () {
exchange(activityCode, diamondNum, taskCode, taskIcon, taskName, showValue);
$('.sure').hide();
bodyScroolFun(false);
})
// tab切換
$('.tab div').click(function () {
var i = $(this).index() + 1;
$('.page1,.page2,.page3').hide();
$(`.page${i}`).show();
$(this).addClass(`act`).siblings().removeClass('act')
if (i == 3) {
getRank();
}
})
// 記錄接口
function recordPage (activityCode, componentCode) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user/record/page',
data: { activityCode, componentCode, pageNum: 1, pageSize: 9999 },
success (res) {
if (res.code === 200) {
var str = '';
if (componentCode == 'MENG_DONG_HUA_HE') {
$('.page1 .bg2 ul li').remove()
if (res.data.records.length <= 0) {
str = `<li class="null"><div>暫無點亮記錄,快去集齊禮物吧~</div></li>`
} else {
res.data.records.forEach(res => {
str += `
<li class="liTitle">
<div>點亮時間</div>
<div>獲得獎勵</div>
</li>
<li>
<div class="left">
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<span>${dateFormat(res.createTime, 'hh/mm/ss')}</span>
</div>
<div>${res.rewardName}銘牌</div>
</li>
`})
}
$('.page1 .bg2 ul').append(str);
} else if (componentCode == 'TIAN_MI_SHENG_WEN') {
$('.buyRecords .buyRecords_in ul li').remove();
if (res.data.records.length <= 0) {
str = `<li class="null"><div>暫無購買記錄~</div></li>`
} else {
res.data.records.forEach(res => {
str += `
<li class="liTitle">
<div>購買時間</div>
<div>購買禮物</div>
</li>
<li>
<div class="left">
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<span>${dateFormat(res.createTime, 'hh/mm/ss')}</span>
</div>
<div>${res.rewardName}禮物*1個</div>
</li>
`})
}
$('.buyRecords .buyRecords_in ul').append(str);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// 打開購買記錄
$('.page2 .box .page2Buy_icon').click(function () {
recordPage(activityCode2, 'TIAN_MI_SHENG_WEN',);
$('.buyRecords').show();
bodyScroolFun(true);
})
// 關閉購買記錄
$('.buyRecords').click(function () {
$('.buyRecords').hide();
bodyScroolFun(false);
})
// 打開規則記錄
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則記錄
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})
// 自己榜單展開按鈕
var scrollBool = true;
$('.page3 .my .icon').click(function () {
$('.page3 .my .scroll').scrollTop(0)
if (scrollBool) {
$('.page3 .my').css({ "height": "8.74667rem", "background": "url(./images/myBg.png) no-repeat", "background-size": "100% 100%" })
$('.page3 .my .scroll').css({ "overflow-y": "scroll" })
$('.page3 .my .icon').attr('src', './images/bottom.png')
bodyScroolFun(true);
} else {
$('.page3 .my').css({ "height": "2.2rem", "background": "url(./images/myBg2.png) no-repeat", "background-size": "100% 100%" })
$('.page3 .my .scroll').css({ "overflow-y": "hidden" })
$('.page3 .my .icon').attr('src', './images/top.png')
bodyScroolFun(false);
}
scrollBool = !scrollBool;
})
// 關閉活動結束彈窗
$('.end .end_in .but').click(function () {
$('.page1,.page2,.page3').hide();
$(`.page${3}`).show();
$('.tab div').removeClass('act');
$('.tab div').eq(2).addClass('act');
$('.end').hide();
bodyScroolFun(false);
})
// 關閉充值彈窗
$('.failureBuy .failureBuy_in .close').click(function () {
$('.failureBuy').hide();
bodyScroolFun(false);
})
// 跳轉充值彈窗
$('.failureBuy .failureBuy_in .ok').click(function () {
$('.failureBuy').hide();
bodyScroolFun(false);
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內打開')
}
})
// 關閉購買成功彈窗
$('.success .success_in .but').click(function () {
$('.success').hide();
bodyScroolFun(false);
})
// 關閉二次確認彈窗
$('.sure .sure_in .close').click(function () {
$('.sure').hide();
bodyScroolFun(false);
})
// 關閉榜單獎勵
$('.page3Rule').click(function () {
$('.page3Rule').hide();
bodyScroolFun(false);
})
// 打開榜單獎勵
$('.page3 .top3 .rule_icon').click(function () {
$('.page3Rule').show();
bodyScroolFun(true);
})
//補0操作
function getzf (num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}

View File

@@ -0,0 +1,564 @@
html,
body {
width: 100%;
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
}
.back {
position: fixed;
top: 0.93333rem;
left: 0.45333rem;
z-index: 99;
width: 0.82667rem;
height: 0.82667rem;
}
.back img {
width: 100%;
height: 100%;
}
.back p {
color: #fff;
font-size: 0.42667rem;
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: 0.82667rem;
}
.header {
width: 10rem;
height: 8.4rem;
position: relative;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
}
.header .rule_icon {
width: 0.62667rem;
height: 1.73333rem;
position: absolute;
top: 2.57333rem;
right: 0rem;
}
.tab {
width: 8rem;
height: 1.17333rem;
line-height: 1.17333rem;
margin: 0.10667rem auto 0.58667rem;
background: #fff;
border-radius: 1.17333rem;
display: flex;
justify-content: space-between;
}
.tab div {
color: #BB4A56;
font-size: 0.4rem;
text-align: center;
width: 4rem;
height: 1.17333rem;
font-weight: 500;
}
.tab .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.tab .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page1 .pageImg1 {
display: block;
width: 9.2rem;
height: 20.58667rem;
margin: 0 auto 0.34667rem;
}
.page1 .pageImg2 {
display: block;
width: 9.2rem;
height: 16.33333rem;
margin: 0 auto 0.46667rem;
}
.page2 {
display: none;
}
.page2 .box {
width: 9.2rem;
height: 17.14667rem;
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.48rem;
overflow: hidden;
position: relative;
}
.page2 .box .listTab {
width: 7.38667rem;
height: 1.17333rem;
line-height: 1.17333rem;
border-radius: 1.17333rem;
display: flex;
justify-content: space-between;
margin: 0.58667rem auto 2.06667rem;
background: #fff;
}
.page2 .box .listTab div {
width: 3.72rem;
color: #BB4A56;
font-size: 0.4rem;
font-weight: 500;
text-align: center;
}
.page2 .box .listTab .listTab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page2 .box .listTab .listTab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
color: transparent;
}
.page2 .box .topBox {
position: relative;
width: 8.26667rem;
height: 5.33333rem;
margin: 0 auto -0.8rem;
}
.page2 .box .topBox .top1 {
width: 2.54667rem;
height: 2.78667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -1.25333rem;
}
.page2 .box .topBox .top1 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top1 .tx {
width: 2.25333rem;
height: 2.18667rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top1 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.66667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top1 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.9rem;
}
.page2 .box .topBox .top2 {
width: 2.09333rem;
height: 2.28rem;
position: absolute;
left: 0.33333rem;
top: -0.37333rem;
}
.page2 .box .topBox .top2 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top2 .tx {
width: 1.8rem;
height: 1.76rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top2 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.26667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top2 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
.page2 .box .topBox .top3 {
width: 2.09333rem;
height: 2.28rem;
position: absolute;
right: 0.33333rem;
top: -0.37333rem;
}
.page2 .box .topBox .top3 .ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page2 .box .topBox .top3 .tx {
width: 1.8rem;
height: 1.76rem;
position: absolute;
top: 0.05333rem;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.page2 .box .topBox .top3 .name {
width: 100%;
height: 1.12rem;
line-height: 1.12rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/name3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 2.26667rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page2 .box .topBox .top3 .score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
.page2 .box ul {
width: 8.56rem;
margin: 0 auto 1.84rem;
overflow-y: scroll;
height: 6.6rem;
}
.page2 .box ul::-webkit-scrollbar {
display: none;
}
.page2 .box ul li {
width: 100%;
height: 1.6rem;
line-height: 1.6rem;
margin-bottom: 0.2rem;
background: #FFF7F9;
border-radius: 0.16rem;
}
.page2 .box ul li .num {
width: 0.8rem;
height: 100%;
text-align: center;
color: #AD4868;
font-size: 0.48rem;
font-weight: bold;
float: left;
margin-right: 0.29333rem;
}
.page2 .box ul li .tx {
width: 1.09333rem;
height: 1.09333rem;
box-sizing: border-box;
border: 0.01333rem solid #FE71B8;
float: left;
margin-top: 0.25333rem;
margin-right: 0.22667rem;
border-radius: 50%;
}
.page2 .box ul li .name {
width: 2.06667rem;
height: 100%;
color: #AD4868;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.page2 .box ul li .score {
float: right;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
margin-right: 0.37333rem;
}
.page2 .box .my {
position: absolute;
width: 100%;
height: 1.84rem;
line-height: 1.84rem;
bottom: 0;
left: 0;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.page2 .box .my .num {
width: 0.8rem;
height: 100%;
text-align: center;
color: #AD4868;
font-size: 0.26667rem;
font-weight: 400;
float: left;
margin-right: 0.29333rem;
margin-left: 0.32rem;
}
.page2 .box .my .tx {
width: 1.09333rem;
height: 1.09333rem;
box-sizing: border-box;
border: 0.01333rem solid #FE71B8;
float: left;
margin-top: 0.38667rem;
margin-right: 0.22667rem;
border-radius: 50%;
}
.page2 .box .my .name {
width: 2.06667rem;
height: 100%;
color: #AD4868;
font-size: 0.34667rem;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.page2 .box .my .score {
float: right;
color: #AD4868;
font-size: 0.29333rem;
font-weight: 400;
margin-right: 0.37333rem;
}
.bootom {
margin-bottom: 0.26667rem;
}
.bootom p {
width: 100%;
text-align: center;
color: #7E0033;
font-size: 0.32rem;
font-weight: 400;
margin-bottom: 0.2rem;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99;
}
.rule .rule_in {
width: 8.18667rem;
height: 13.53333rem;
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.rule .rule_in .tabRule {
width: 6.50667rem;
height: 1.01333rem;
line-height: 1.01333rem;
display: flex;
justify-content: space-between;
border-radius: 0.64rem;
background: #fff;
margin: 0.6rem auto 0.25333rem;
}
.rule .rule_in .tabRule div {
text-align: center;
color: #CA5987;
font-size: 0.37333rem;
font-weight: 500;
width: 3.25333rem;
}
.rule .rule_in .tabRule .act {
background: url(../images/rule_act.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.rule .rule_in .box1 {
width: 7.34667rem;
height: 11.4rem;
overflow-y: scroll;
margin: 0 auto;
}
.rule .rule_in .box1::-webkit-scrollbar {
display: none;
}
.rule .rule_in .box1 img {
display: block;
width: 7.25333rem;
}
.rule .rule_in .box2 {
display: none;
}
.rule .rule_in .box2 .box2Tab {
width: 4.74667rem;
height: 0.8rem;
margin: 0 auto 0.26667rem;
display: flex;
justify-content: space-between;
}
.rule .rule_in .box2 .box2Tab div {
width: 2.34667rem;
}
.rule .rule_in .box2 .box2Tab .tab1 {
background: url(../images/box2tab1.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .tab2 {
background: url(../images/box2tab2.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .act1 {
background: url(../images/box2tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .box2Tab .act2 {
background: url(../images/box2tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.rule .rule_in .box2 .imgBox {
width: 7.52rem;
height: 10rem;
margin: 0 auto;
overflow-y: scroll;
}
.rule .rule_in .box2 .imgBox::-webkit-scrollbar {
display: none;
}
.rule .rule_in .box2 .imgBox img {
width: 100%;
display: block;
}

View File

@@ -0,0 +1,581 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
}
// 返回按钮
.back {
position: fixed;
top: px2rem(70);
left: px2rem(34);
z-index: 99;
width: px2rem(62);
height: px2rem(62);
img {
width: 100%;
height: 100%;
}
p {
color: #fff;
font-size: px2rem(32);
position: absolute;
width: 9rem;
left: 0;
top: 0;
height: 100%;
text-align: center;
line-height: px2rem(62);
}
}
.header {
width: px2rem(750);
height: px2rem(630);
position: relative;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
.rule_icon {
width: px2rem(47);
height: px2rem(130);
position: absolute;
top: px2rem(193);
right: px2rem(0);
}
}
.tab {
width: px2rem(600);
height: px2rem(88);
line-height: px2rem(88);
margin: px2rem(8) auto px2rem(44);
background: #fff;
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
div {
color: #BB4A56;
font-size: px2rem(30);
text-align: center;
width: px2rem(300);
height: px2rem(88);
font-weight: 500;
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
}
.page1 {
// display: none;
.pageImg1 {
display: block;
width: px2rem(690);
height: px2rem(1544);
margin: 0 auto px2rem(26);
}
.pageImg2 {
display: block;
width: px2rem(690);
height: px2rem(1225);
margin: 0 auto px2rem(35);
}
}
.page2 {
display: none;
.box {
width: px2rem(690);
height: px2rem(1286);
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(36);
overflow: hidden;
position: relative;
.listTab {
width: px2rem(554);
height: px2rem(88);
line-height: px2rem(88);
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
margin: px2rem(44) auto px2rem(155);
background: #fff;
div {
width: px2rem(279);
color: #BB4A56;
font-size: px2rem(30);
font-weight: 500;
text-align: center;
}
.listTab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.listTab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
;
color: rgba(0, 0, 0, .0);
}
}
.topBox {
position: relative;
width: px2rem(620);
height: px2rem(400);
margin: 0 auto px2rem(-60);
.top1 {
width: px2rem(191);
height: px2rem(209);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-94);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(169);
height: px2rem(164);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(200);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.9rem;
}
}
.top2 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
left: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
.top3 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
right: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
}
ul {
width: px2rem(642);
margin: 0 auto px2rem(138);
overflow-y: scroll;
height: 6.6rem;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(120);
line-height: px2rem(120);
margin-bottom: px2rem(15);
background: #FFF7F9;
border-radius: px2rem(12);
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(36);
font-weight: bold;
float: left;
margin-right: px2rem(22);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(19);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
.my {
position: absolute;
width: 100%;
height: px2rem(138);
line-height: px2rem(138);
bottom: 0;
left: 0;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(20);
font-weight: 400;
float: left;
margin-right: px2rem(22);
margin-left: px2rem(24);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(29);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
}
.bootom {
margin-bottom: px2rem(20);
p {
width: 100%;
text-align: center;
color: #7E0033;
font-size: px2rem(24);
font-weight: 400;
margin-bottom: px2rem(15);
}
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 99;
.rule_in {
width: px2rem(614);
height: px2rem(1015);
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
.tabRule {
width: px2rem(488);
height: px2rem(76);
line-height: px2rem(76);
display: flex;
justify-content: space-between;
border-radius: px2rem(48);
background: #fff;
margin: px2rem(45) auto px2rem(19);
div {
text-align: center;
color: #CA5987;
font-size: px2rem(28);
font-weight: 500;
width: px2rem(244);
}
.act {
background: url(../images/rule_act.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
}
.box1 {
width: px2rem(551);
height: 11.4rem;
overflow-y: scroll;
margin: 0 auto;
// display: none;
&::-webkit-scrollbar {
display: none;
}
img {
display: block;
width: px2rem(544);
}
}
.box2 {
display: none;
.box2Tab {
width: px2rem(356);
height: px2rem(60);
margin: 0 auto px2rem(20);
display: flex;
justify-content: space-between;
div {
width: px2rem(176);
}
.tab1 {
background: url(../images/box2tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/box2tab2.png) no-repeat;
background-size: 100% 100%;
}
.act1 {
background: url(../images/box2tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.act2 {
background: url(../images/box2tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
.imgBox {
width: px2rem(564);
height: 10rem;
margin: 0 auto;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
display: block;
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 693 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新春福利</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 頭部 -->
<div class="header">
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab -->
<div class="tab">
<div class="tab1">新春福利</div>
<div class="">新春榜單</div>
</div>
<!-- 頁面1 -->
<div class="page1">
<img src="./images/pageImg1.png" alt="" class="pageImg1">
<img src="./images/pageImg2.png" alt="" class="pageImg2">
</div>
<!-- 頁面2 -->
<div class="page2">
<div class="box">
<!-- 切換 -->
<div class="listTab">
<div class="listTab1">財氣榜</div>
<div class="">福氣榜</div>
</div>
<!-- 前三 -->
<div class="topBox">
<div class="top1">
<img src="./images/ts1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
<div class="top2">
<img src="./images/ts2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
<div class="top3">
<img src="./images/ts3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值: <b>0</b></div>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">4</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值999999999</div>
</li>
</ul>
<div class="my">
<div class="num">未上榜</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用戶昵稱</div>
<div class="score">財氣值999999999</div>
</div>
</div>
</div>
<!-- 免責宣告 -->
<div class="bootom">
<p>本活動最終解釋權歸官方所有</p>
<p>本活動以及獎勵與蘋果/Google公司無關</p>
</div>
<!-- 彈窗規則 -->
<div class="rule">
<div class="rule_in">
<div class="tabRule">
<div class="act">活動規則</div>
<div>活動獎勵</div>
</div>
<div class="box1">
<img src="./images/rule1.png" alt="">
</div>
<div class="box2">
<div class="box2Tab">
<div class="tab1 act1"></div>
<div class="tab2"></div>
</div>
<div class="imgBox">
<img src="./images/img1.png" alt="" srcset="">
</div>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="./js/index.js"></script>

View File

@@ -0,0 +1,158 @@
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 rankType = 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)
}
})
}, 100)
})
// 接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/special/gift/getRank',
data: { rankType: rankType, page: 1, pageSize: 30 },
success (res) {
if (res.code === 200) {
// 處理前三
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虛位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, index) => {
$(`.page2 .box .topBox .top${index + 1} .tx`).attr('src', res.avatar);
$(`.page2 .box .topBox .top${index + 1} .name`).text(res.nick);
$(`.page2 .box .topBox .top${index + 1} .score`).text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
})
// 處理非前三
var str = '';
$('.page2 .box ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="name">${res.nick}</div>
<div class="score">${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page2 .box ul').append(str);
// 處理自己
$('.page2 .box .my .tx').attr('src', res.data.meRank.avatar);
$('.page2 .box .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page2 .box .my .name').text(res.data.meRank.nick);
$('.page2 .box .my .score').text(`${rankType == 2 ? "財氣值:" : "福氣值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網路錯誤,請退出重進')
}
})
}
// tab切換
$('.tab div').click(function () {
var i = $(this).index() + 1;
$('.page1,.page2').hide();
$(`.page${i}`).show();
$('.tab div').removeClass('tab1').removeClass('tab2');
$(this).addClass(`tab${i}`);
if (i == 2) {
getRank();
}
})
// 榜單切換
$('.page2 .box .listTab div').click(function () {
var i = $(this).index() + 1;
$('.page2 .box .listTab div').removeClass('listTab1').removeClass('listTab2');
$(this).addClass(`listTab${i}`);
if (i == 1) {
rankType = 2;
} else {
rankType = 4;
}
getRank()
})
// 規則切換
$('.rule .rule_in .tabRule div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act');
$('.rule .rule_in .box1,.rule .rule_in .box2').hide();
$(`.rule .rule_in .box${i}`).show();
return false;
})
$('.rule .rule_in .box2 .box2Tab div').click(function () {
var i = $(this).index() + 1;
$('.rule .rule_in .box2 .box2Tab div').removeClass('act1').removeClass('act2')
$(this).addClass(`act${i}`);
$('.rule .rule_in .box2 .imgBox img').attr('src', `./images/img${i}.png`)
return false;
})
// 打開規則
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 關閉規則
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
return false;
})

View File

@@ -0,0 +1,210 @@
html,
body {
width: 100%;
background: #F3F5FA;
}
.back {
position: fixed;
z-index: 9;
width: 0.74667rem;
height: 0.74667rem;
left: 0.53333rem;
top: 0.2rem;
}
h3 {
width: 100%;
margin-top: 0.53333rem;
margin-bottom: 0.42667rem;
text-align: center;
color: #1F1B4F;
font-size: 0.48rem;
font-weight: bold;
}
input {
background: transparent;
border: none;
outline: none;
box-sizing: border-box;
font-size: 0.37333rem;
}
input::placeholder {
font-size: 0.37333rem;
color: #8A8CAB;
}
.box1 {
width: 9.14667rem;
height: 9.70667rem;
background: #fff;
border-radius: 0.26667rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 0 auto 0.32rem;
overflow: hidden;
}
.box1 div {
width: 100%;
height: 1.37333rem;
line-height: 1.37333rem;
border-bottom: 0.01333rem solid #EBEEF5;
display: flex;
}
.box1 div span {
flex: 3;
height: 100%;
font-size: 0.37333rem;
color: #1F1B4F;
}
.box1 div input {
flex: 7;
height: 100%;
text-align: right;
font-size: 0.37333rem;
color: #1F1B4F;
}
.box2 {
width: 9.14667rem;
height: 5.54667rem;
background: #fff;
border-radius: 0.26667rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 0 auto 0.32rem;
overflow: hidden;
}
.box2 div {
width: 100%;
height: 1.37333rem;
line-height: 1.37333rem;
border-bottom: 0.01333rem solid #EBEEF5;
display: flex;
}
.box2 div span {
flex: 3;
height: 100%;
font-size: 0.37333rem;
color: #1F1B4F;
}
.box2 div input {
flex: 7;
height: 100%;
text-align: right;
font-size: 0.37333rem;
color: #1F1B4F;
}
.box3 {
width: 9.14667rem;
height: 5.54667rem;
background: #fff;
border-radius: 0.26667rem;
box-sizing: border-box;
padding: 0 0.53333rem;
margin: 0 auto 0.53333rem;
overflow: hidden;
}
.box3 p {
font-size: 0.37333rem;
color: #1F1B4F;
margin-top: 0.42667rem;
}
.box3 .idBox {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 0.42667rem;
}
.box3 .idBox .z,
.box3 .idBox .f {
width: 3.84rem;
height: 3.14667rem;
background: #F3F5FA;
border-radius: 0.26667rem;
position: relative;
}
.box3 .idBox .z .documents,
.box3 .idBox .f .documents {
position: absolute;
width: 3.09333rem;
height: 1.92rem;
left: 50%;
transform: translateX(-50%);
top: 0.37333rem;
}
.box3 .idBox .z .icon_camera,
.box3 .idBox .f .icon_camera {
position: absolute;
width: 1.06667rem;
height: 1.06667rem;
left: 50%;
top: 0.8rem;
transform: translateX(-50%);
z-index: 2;
}
.box3 .idBox .z span,
.box3 .idBox .f span {
position: absolute;
color: #8A8CAB;
font-size: 0.32rem;
left: 50%;
top: 2.4rem;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
.box3 .idBox .z .upload,
.box3 .idBox .f .upload {
position: absolute;
width: 3.09333rem;
height: 1.92rem;
left: 50%;
transform: translateX(-50%);
top: 0.37333rem;
z-index: 2;
}
.but {
width: 8.08rem;
height: 1.28rem;
line-height: 1.28rem;
border-radius: 1.28rem;
margin: 0 auto 0.64rem;
text-align: center;
font-size: 0.42667rem;
color: #FFFFFF;
background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
}
.active {
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
}
.rule {
width: 8.72rem;
margin: 0 auto 0.66667rem;
color: #8A8CAB;
font-size: 0.37333rem;
}
.rule p {
margin-bottom: 0.13333rem;
line-height: 0.45rem;
}

View File

@@ -0,0 +1,210 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #F3F5FA;
}
.back {
position: fixed;
z-index: 9;
width: px2rem(56);
height: px2rem(56);
left: px2rem(40);
top: 0.2rem;
// display: none;
}
h3 {
width: 100%;
margin-top: px2rem(40);
margin-bottom: px2rem(32);
text-align: center;
color: #1F1B4F;
font-size: px2rem(36);
font-weight: bold;
}
input {
background: transparent;
border: none;
outline: none;
box-sizing: border-box;
font-size: px2rem(28);
&::placeholder {
font-size: px2rem(28);
color: #8A8CAB;
}
}
.box1 {
width: px2rem(686);
height: px2rem(728);
background: #fff;
border-radius: px2rem(20);
box-sizing: border-box;
padding: 0 px2rem(40);
margin: 0 auto px2rem(24);
overflow: hidden;
div {
width: 100%;
height: px2rem(103);
line-height: px2rem(103);
border-bottom: px2rem(1) solid #EBEEF5;
display: flex;
span {
flex: 3;
height: 100%;
font-size: px2rem(28);
color: #1F1B4F;
}
input {
flex: 7;
height: 100%;
text-align: right;
font-size: px2rem(28);
color: #1F1B4F;
}
}
}
.box2 {
width: px2rem(686);
height: px2rem(416);
background: #fff;
border-radius: px2rem(20);
box-sizing: border-box;
padding: 0 px2rem(40);
margin: 0 auto px2rem(24);
overflow: hidden;
div {
width: 100%;
height: px2rem(103);
line-height: px2rem(103);
border-bottom: px2rem(1) solid #EBEEF5;
display: flex;
span {
flex: 3;
height: 100%;
font-size: px2rem(28);
color: #1F1B4F;
}
input {
flex: 7;
height: 100%;
text-align: right;
font-size: px2rem(28);
color: #1F1B4F;
}
}
}
.box3 {
width: px2rem(686);
height: px2rem(416);
background: #fff;
border-radius: px2rem(20);
box-sizing: border-box;
padding: 0 px2rem(40);
margin: 0 auto px2rem(40);
overflow: hidden;
p {
font-size: px2rem(28);
color: #1F1B4F;
margin-top: px2rem(32);
}
.idBox {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: px2rem(32);
.z,
.f {
width: px2rem(288);
height: px2rem(236);
background: #F3F5FA;
border-radius: px2rem(20);
position: relative;
.documents {
position: absolute;
width: px2rem(232);
height: px2rem(144);
left: 50%;
transform: translateX(-50%);
top: px2rem(28);
}
.icon_camera {
position: absolute;
width: px2rem(80);
height: px2rem(80);
left: 50%;
top: px2rem(60);
transform: translateX(-50%);
z-index: 2;
}
span {
position: absolute;
color: #8A8CAB;
font-size: px2rem(24);
left: 50%;
top: px2rem(180);
transform: translateX(-50%);
width: 100%;
text-align: center;
}
.upload {
position: absolute;
width: px2rem(232);
height: px2rem(144);
left: 50%;
transform: translateX(-50%);
top: px2rem(28);
z-index: 2;
}
}
}
}
.but {
width: px2rem(606);
height: px2rem(96);
line-height: px2rem(96);
border-radius: px2rem(96);
margin: 0 auto px2rem(48);
text-align: center;
font-size: px2rem(32);
color: #FFFFFF;
background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
}
.active{
background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
}
.rule {
width: px2rem(654);
margin: 0 auto px2rem(50);
color: #8A8CAB;
font-size: px2rem(28);
p {
margin-bottom: px2rem(10);
line-height: 0.45rem;
}
}

View File

@@ -0,0 +1,220 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
var url = getQueryString();
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'
})
}
$(function () {
setTimeout(function () {
getInfoFromClient()
if (browser.app) {
$('.back').hide();
}
setTimeout(function () {
}, 100)
})
})
// 返回按鈕
$('.back').click(function () {
window.history.go(-1)
})
function fileChangeZ (e) {
var filesList = document.querySelector('#frontImageUpload').files;
if (filesList.length == 0) {
return;
}
getUploadToken(1)
}
function fileChangeF (e) {
var filesList = document.querySelector('#backImageUpload').files;
if (filesList.length == 0) {
return;
}
getUploadToken(2)
}
// 上傳身份證接口
function getUploadToken (type) {
const frontImage = document.getElementById('frontImageUpload').files[0];
const backImage = document.getElementById('backImageUpload').files[0];
showLoading()
networkRequest({
type: 'GET',
url: urlPrefix + '/qiniu/upload/getUploadToken',
success (res) {
if (res.code === 200) {
var frontImageKey = res.data.key;
var frontImageToken = res.data.token;
showLoading()
const observable = qiniu.upload(
type == 1 ? frontImage : backImage,
frontImageKey,
frontImageToken
);
observable.subscribe({
complete: (res) => {
console.log(res);
if (type == 1) {
$('.box3 .idBox .z .documents').attr('src', res.path);
} else {
$('.box3 .idBox .f .documents').attr('src', res.path);
}
hideLoading(layerIndex)
toastMsg("上傳成功")
},
});
} else if (res.code ? res.code == 1444 : JSON.parse(res).code == 401) {
window.location.href = './login.html'
} else {
toastMsg(res.message)
}
// hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 確認綁定按鈕
$('.but').click(function () {
if (listenFun()) {
var filesList = document.querySelector('#frontImageUpload').files;
var backImageUpload = document.querySelector('#backImageUpload').files;
if (filesList.length == 0 || backImageUpload.length == 0) {
toastMsg('請上傳身份證照片')
return;
}
}
})
//監聽是否完善信息
function listenFun () {
var num1 = $(".box1 div .name").val();
var num2 = $(".box1 div .accountName").val();
var num3 = $(".box1 div .card").val();
var num4 = $(".box1 div .state").val();
var num5 = $(".box1 div .city").val();
var num7 = $(".box1 div .street").val();
var num8 = $(".box1 div .postalCode").val();
var num9 = $(".box2 div .bankAccount").val();
var num10 = $(".box2 div .bankName").val();
var num11 = $(".box2 div .swiftCode").val();
var num12 = $(".box2 div .phone").val();
if (num1 != '' && num2 != '' && num3 != '' && num4 != '' && num5 != '' && num7 != '' && num8 != '' && num9 != '' && num10 != '' && num11 != '' && num12 != '') {
$('.but').addClass('active');
return true;
} else {
$('.but').removeClass('active');
return false;
}
}
// 監聽所有輸入框輸入
$(".box1 div .name,.box1 div .accountName,.box1 div .card,.box1 div .state,.box1 div .city,.box1 div .street,.box1 div .postalCode,.box2 div .bankAccount,.box2 div .bankName,.box2 div .swiftCode,.box2 div .phone").on("keyup", function () {
listenFun()
});
// 保存绑定
function withdrawUserAccount (
surname,
name,
idCardNo,
province,
city,
street,
postCode,
accountNo,
bankName,
swiftCode,
contact,
frontPhoto,
backPhoto,) {
var obj = {
uid: pubInfo.uid,
accountType: url.accountType,
surname,
name,
idCardNo,
province,
city,
street,
postCode,
accountNo,
bankName,
swiftCode,
contact,
frontPhoto,
backPhoto,
};
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/withdrawUserAccount/save',
contentType: 'application/json',
data: JSON.stringify(obj),
success (res) {
if (res.code === 200) {
toastMsg('保存成功')
setTimeout(function () {
window.location.href = './withdrawal.html'
}, 500)
} else if (res.code ? res.code == 1444 : JSON.parse(res).code == 401) {
window.location.href = './login.html'
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
$('.but').click(function () {
var frontImageUpload = document.querySelector('#frontImageUpload').files;
var backImageUpload = document.querySelector('#backImageUpload').files;
if (listenFun()) {
if (frontImageUpload.length == 0 || backImageUpload.length == 0) {
toastMsg('請上傳身份證');
return;
}
withdrawUserAccount(
$('.box1 div .name').val(),
$('.box1 div .accountName').val(),
$('.box1 div .card').val(),
$('.box1 div .state').val(),
$('.box1 div .city').val(),
$('.box1 div .street').val(),
$('.box1 div .postalCode').val(),
$('.box2 div .bankAccount').val(),
$('.box2 div .bankName').val(),
$('.box2 div .swiftCode').val(),
$('.box2 div .phone').val(),
$('.box3 .idBox .z .documents').attr('src'),
$('.box3 .idBox .f .documents').attr('src')
);
}
})

View File

@@ -239,6 +239,8 @@ function getAccounts () {
$('.switch .pub_in p').text('是否切換到馬來西亞銀行提領 ');
} else if (accountTypes == 8) {
$('.switch .pub_in p').text('是否切換到新加坡銀行提領 ');
} else if (accountTypes == 16) {
$('.switch .pub_in p').text('是否切換到臺灣地區銀行提領 ');
}
$('.switch .pub_in .ok').attr('accounttype', accountTypes);
$('.switch .pub_in .ok').attr('text', $(this).attr('accountTypesText'));
@@ -253,6 +255,8 @@ function getAccounts () {
$('.binding .pub_in p').text('需要先綁定馬來西亞銀行賬戶資料');
} else if (accountTypes == 8) {
$('.binding .pub_in p').text('需要先綁定新加坡銀行賬戶資料');
}else if (accountTypes == 16) {
$('.binding .pub_in p').text('需要先綁定臺灣地區銀行賬戶資料 ');
}
$('.binding').show();
// 確認跳轉綁定頁面按鈕
@@ -265,6 +269,8 @@ function getAccounts () {
window.location.href = `./malaysia.html?accountType=${accountTypes}`;
} else if (accountTypes == 8) {
window.location.href = `./singapore.html?accountType=${accountTypes}`;
}else if (accountTypes == 16) {
window.location.href = `./taiwan.html?accountType=${accountTypes}`;
}
return false;
})
@@ -395,7 +401,7 @@ $('.butBig').click(function () {
if (accountType == 2 && isRealCertifyBool == 0) {
toastMsg('請先進行實名認證')
return
}
}
// console.log(isAdult(idCard));
if (accountType == 2) {
birthday = idCard.substring(6, 14);

View File

@@ -94,7 +94,7 @@
<!-- 说明 -->
<div class="rule">
<p>註意:</p>
<p>1.該頁面適用於馬來西亞地區的提領,非馬來西亞地區請切換其他提領方式;</p>
<p>1.該頁面適用於新加坡地區的提領,非新加坡地區請切換其他提領方式;</p>
<p>2.提領資料請勿隨意填寫,需正確填寫以上資料;</p>
<p>3.銀行賬號與身份證號碼必須與提領實名一致,否則提領不能到賬;</p>
<p>4.請勿將賬號綁定他人的姓名,提領真實姓名綁定後不能修改,請謹慎操作;</p>

View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>台湾地区銀行</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/taiwan.css">
</head>
<body>
<!-- 返回 -->
<img src="./images/back.png" alt="" class="back">
<!-- 标题 -->
<h3>台湾地区銀行</h3>
<!-- 姓名身份证 -->
<div class="box1">
<div>
<span>開戶姓氏</span>
<input class="name" type="text" placeholder="例ZHANG">
</div>
<div>
<span>開戶名稱</span>
<input class="accountName" type="text" placeholder="例LEE HONG">
</div>
<div>
<span>身份證號备份</span>
<input class="card" type="text" placeholder="請輸入正確的身份證號碼备份">
</div>
<div>
<span>省(州)</span>
<input class="state" type="text" placeholder="請輸入身份證上的地址信息">
</div>
<div>
<span>城市</span>
<input class="city" type="text" placeholder="請輸入身份證上的地址信息">
</div>
<div>
<span>街道地址</span>
<input class="street " type="text" placeholder="請輸入身份證上的地址信息">
</div>
<div>
<span>郵編</span>
<input class="postalCode" type="text" placeholder="請輸入身份證上的郵編信息">
</div>
</div>
<!-- 银行卡手机号等信息 -->
<div class="box2">
<div>
<span>銀行收款賬戶</span>
<input class="bankAccount " type="text" placeholder="例666666">
</div>
<div>
<span>銀行名稱</span>
<input class="bankName" type="text" placeholder="例CIMB Bank">
</div>
<div>
<span>SWIFT CODE</span>
<input class="swiftCode" type="text" placeholder="例MBBEMYKLPKG">
</div>
<div>
<span>聯系方式</span>
<input class="phone" type="text" placeholder="可聯系您的聯系方式,郵箱/電話">
</div>
</div>
<!-- 上传身份证 -->
<div class="box3">
<p>上傳身份證照片</p>
<div class="idBox">
<!-- 正面 -->
<div class="z">
<img src="./images/chainBank/documents_front.png" alt="" class="documents">
<img src="./images/chainBank/icon_camera.png" alt="" class="icon_camera">
<span>請上傳正面照片</span>
<input type="file" id="frontImageUpload" accept="image/*" onchange="fileChangeZ(event)" class="upload"
style="opacity: 0;">
</div>
<!-- 反面 -->
<div class="f">
<img src="./images/chainBank/documents_reverse.png" alt="" class="documents">
<img src="./images/chainBank/icon_camera.png" alt="" class="icon_camera">
<span>請上傳反面照片</span>
<input type="file" id="backImageUpload" accept="image/*" onchange="fileChangeF(event)" class="upload"
style="opacity: 0;">
</div>
</div>
</div>
<!-- 绑定按钮 -->
<div class="but">確認綁定</div>
<!-- 说明 -->
<div class="rule">
<p>註意:</p>
<p>1.該頁面適用於台湾地區的提領,非台湾地區請切換其他提領方式;</p>
<p>2.提領資料請勿隨意填寫,需正確填寫以上資料;</p>
<p>3.銀行賬號與身份證號碼必須與提領實名一致,否則提領不能到賬;</p>
<p>4.請勿將賬號綁定他人的姓名,提領真實姓名綁定後不能修改,請謹慎操作;</p>
<p>5.實際提領收益按照轉賬時的匯率之後金額;</p>
<p>6.首次進行提領流程時,會需要上傳您的身份證相關信息;</p>
<p>7.申請提領人為未滿二十歲的未成年人,除需提供申請人的身份證相關信息外,另須提供法定代理人(或監護人)的身份證件相關信息;</p>
<p>8.如有疑問請聯系Wechat:sd245376</p>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/qiniu.min.js"></script>
<script src="./js/taiwan.js?v=1.0"></script>

View File

@@ -1,32 +0,0 @@
html, body {
min-height: 100%;
background: #084f70;
font-family: "Helvetica Neue","Helvetica",Arial,sans-serif;
font-weight: 100;
font-size: 14px;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
.title {
font-size: 18px;
}
.subtitle {
font-size: 16px;
margin: 20px 0;
}
.note {
font-style: italic;
font-size: 14px;
}
b {
font-weight: 300;
}

View File

@@ -171,4 +171,4 @@
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="./js/index.js?v1.0"></script>
<script src="./js/index.js?v=1.1"></script>

Some files were not shown because too many files have changed in this diff Show More