123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <title>双旦活动</title>
- <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
- <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
- <link rel="stylesheet" href="../static/css/doubleChristmasActivity.css">
- <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
- <script src="../static/js/vender/toastr/toastr.min.js"></script>
- <script src="../static/js/vender/config.js"></script>
- <style>
-
- </style>
- </head>
- <body>
- <div class="container">
- <div class="header-container">
- <img class="top-banner" src="../static/img/doubleChristmasActivity/top-banner.png" />
- <div class="activity-meal">活动参与套餐:星耀套餐</div>
- <div class="meal-price">云机低至0.24元/天</div>
- <div class="rest-time">距离活动结束:20天3时4分30秒</div>
- <div class="limit">PC端用户不参与本次活动</div>
- </div>
- <div class="middle-container">
- <img class="footer-cloud" src="../static/img/doubleChristmasActivity/footer-cloud.png" />
- <div class="step-container">
- <img class="tips" src="../static/img/doubleChristmasActivity/tip.png" />
- <div class="main-step-content">
- <div class="top-step">
- <div class="step-item">
- <img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
- <span class="step-text">购买续费云机</span>
- </div>
- <img class="step" src="../static/img/doubleElevenActivity/step.png" />
- <div class="step-item">
- <img class="hongbao" src="../static/img/doubleChristmasActivity/hongbao.png" />
- <span class="step-text">累计云机时长</span>
- </div>
- <img class="step" src="../static/img/doubleElevenActivity/step.png" />
- <div class="step-item">
- <img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
- <span class="step-text">获取额外奖励</span>
- </div>
- </div>
- </div>
- <div class="join-activity-btn">
- <img class="join-activity" src="../static/img/doubleElevenActivity/button-join-activity.png" />
- <div class="activity-btn-content">
- <span class="activity-btn-text">立即参与</span>
- <img class="icon-left" src="../static/img/doubleElevenActivity/icon-left.png" />
- </div>
- </div>
- <img class="middle-cloud" src="../static/img/doubleChristmasActivity/middle-cloud.png" />
- </div>
- <div class="rest-tip">使用激活码,优惠券和星币支付不参与活动</div>
- <div class="tab-row">
- <div class="tab-item tab-active" data-index="0">充值奖励</div>
- <div class="tab-item" data-index="1">分配奖励(0000)</div>
- <img class="tab-bg" src="../static/img/doubleChristmasActivity/tab-bg.png" />
- </div>
- <div class="reward-container">
- <div class="reward-time">
- <span class="reward-text">购买套餐累计时长</span>
- <span class="time-num">2222</span>
- <span class="reward-text">天</span>
- <span class="time-line">|</span>
- <span class="reward-text">距离下一个奖励还差</span>
- <span class="time-num">2222</span>
- <span class="reward-text">天</span>
- </div>
- <div class="reward-tip-row">
- <img class="reward-tip-img" src="../static/img/doubleChristmasActivity/reward-tip-img.png" />
- <div class="reward-tip">精彩不停的充值福利专场已经来临充值越多折扣越大</div>
- </div>
- <div class="reward-list">
- <div class="reward-last-tip">已获得奖励请在分配奖励栏中进行时长分配</div>
- </div>
- </div>
- <div class="distribution-container">
- <div class="distribution-time">
- <div>
- <span class="distribution-text">奖励总时长</span>
- <span class="distribution-num">2222</span>
- <span class="distribution-text">天</span>
- </div>
- <span class="distribution-line">|</span>
- <div>
- <span class="distribution-text">未分配时长</span>
- <span class="distribution-num">2222</span>
- <span class="distribution-text">天</span>
- </div>
- </div>
- <div class="reward-list">
- <img class="left-ear" src="../static/img/doubleChristmasActivity/left-ear.png" />
- <img class="right-ear" src="../static/img/doubleChristmasActivity/right-ear.png" />
- <div class="slider" id="slider">
- <div class="slider-list flex" id="slider-list"></div>
- </div>
- <div class="page-row">
- <div class="schedule-line">
- <div class="schedule-child-line"></div>
- </div>
- <div class="page">1/4页</div>
- </div>
- <div class="distribution-reward-btn">
- <img class="reward-btn-img" src="../static/img/doubleChristmasActivity/distribution-reward-btn.png" />
- </div>
- </div>
- </div>
- <div class="distribution-container time-container">
- <div class="time-title-row">
- <img class="time-title-bg" src="../static/img/doubleChristmasActivity/time-title-bg.png" />
- <div class="time-title">分配时长记录(已分配时长999天)</div>
- </div>
- <div class="time-list">
- <div class="title-row">
- <div>云机名称</div>
- <div>时间</div>
- <div>时长</div>
- </div>
- <div class="time-content-row">
- <div>lo试玩撒了</div>
- <div>2021年11月24日15:48:44</div>
- <div>1000天</div>
- </div>
- <div class="time-content-row">
- <div>lo试玩撒了</div>
- <div>2021年11月24日15:48:44</div>
- <div>1000天</div>
- </div>
- <div class="time-content-row">
- <div>lo试玩撒了</div>
- <div>2021年11月24日15:48:44</div>
- <div>1000天</div>
- </div>
- <div class="time-content-row">
- <div>lo试玩撒了</div>
- <div>2021年11月24日15:48:44</div>
- <div>1000天</div>
- </div>
- </div>
- </div>
- <div class="rule-container">
- <img class="rule-tips" src="../static/img/doubleChristmasActivity/rule.png" />
- <div class="rule-content">
- <div class="rule-point">一、活动时间:2021年12月18日-2022年1月3日。</div>
- <div class="rule-point">二、任务奖励与获取说明</div>
- <div class="rule-point">1.活动期间购买星曜云机达累计天数,可获得相应奖励,同一个账号同一进度的奖励只能领取一次。</div>
- <div class="rule-point">任务奖励一览:</div>
- <div class="rule-point">1.1.累积购买天数小于等于2022天时 ,获得对应任务奖励。</div>
- <div class="rule-point">1.2.累积购买天数大于2022天时,超过2022天的部分按买一送二发放奖励。</div>
- <div class="rule-point">2.使用星币支付、激活码兑换、优惠劵购买和购买非星耀套餐不计入任务进度。</div>
- <div class="rule-point">3.奖励获取的云机时长仅可用于续费账号中现有的星曜云机设备。</div>
- <div class="rule-point blue">4.奖励领取日期为:2021年12月18日-2022年1月6日,超过领取时间未领取奖励则视为放弃任务奖励。</div>
- <div class="rule-point">5.授权的云手机不能获取累计奖励时长。</div>
- <div class="rule-point">三、其他说明</div>
- <div class="rule-point">1.本次活动不与其他活动优惠叠加。</div>
- <div class="rule-point">2.本次活动期间购买的云手机套餐不支持退款。</div>
- <div class="rule-point">3.双子星官方对活动具有最终解释权。</div>
- </div>
- </div>
-
- </div>
- </div>
- <script>
- toastr.options.positionClass = 'toast-center-center';
- toastr.options.timeOut = '1500';
- </script>
- <script type="text/javascript">
- let timer,flag = true;
- var url = window.location.href;
- url = url.split('/');
- var topVal = -0.5;
- let obj = {};
- // 上线分享环境改为0,图片路径改为正式站路径
- // var baseUrl = 'https://test.androidscloud.com'
- var loc = window.location.search,
- u = navigator.userAgent,
- ua = navigator.userAgent.toLowerCase(),
- isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
- isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
- let s = loc.substr(1,loc.length-1);//取得=号的位置
- let parms = s.split('&');
- parms.map((item) =>{
- let arr = item.split('=');
- let key = arr[0];
- obj[key] = arr[1];
- })
- getList();
- getLists();
- //点击立即参与按钮
- $('.join-activity-btn')[0].addEventListener('click',() => {
- if(isAndroid){ // 安卓
- window.native.startPurchase(1,365);
- }else{
- window.webkit.messageHandlers.startPurchase.postMessage(1,365);
- }
- })
- //点击去完成
- $('.reward-list')[0].addEventListener('click',(e) => {
- if(e.target.className === 'reward-btn'){
- if(isAndroid){ // 安卓
- window.native.startPurchase(1,365);
- }else{
- window.webkit.messageHandlers.startPurchase.postMessage(1,365);
- }
- }
- });
- //点击tab选项卡
- $('.tab-row')[0].addEventListener('click',(e) => {
- const index = e.target.dataset.index;
- if(!index){
- return
- }
- if(index == 0){
- $('.tab-item')[1].className = 'tab-item';
- $('.tab-bg')[0].className = 'tab-bg tab-left';
- $('.reward-container').eq(0).css('display','block');
- $('.distribution-container').eq(0).css('display','none');
- $('.distribution-container').eq(1).css('display','none');
- }else{
- $('.tab-item')[0].className = 'tab-item';
- $('.tab-bg')[0].className = 'tab-bg tab-right';
- $('.reward-container').eq(0).css('display','none');
- $('.distribution-container').eq(0).css('display','block');
- $('.distribution-container').eq(1).css('display','block');
- }
- $('.tab-item')[index].className = 'tab-item tab-active';
- })
- //调用获取数据列表接口
- function getList(){
- // $.ajax({
- // url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
- // type: 'post',
- // headers: {
- // 'Authorization': obj.token //id
- // },
- // contentType: "application/json",
- // dataType: 'json',
- // cache: false,
- // success: function (res) {
- // if(res.status === 0){
- // if(res.data && res.data.length > 0){
- let res = {
- data:[{
- shareCount: 10,
- totalMoney: 30
- },{
- shareCount: 40,
- totalMoney: 90
- },{
- shareCount: 80,
- totalMoney: 180
- },{
- shareCount: 240,
- totalMoney: 365
- },{
- shareCount: 800,
- totalMoney: 730
- },{
- shareCount: 3022,
- totalMoney: 2022
- },{
- shareCount: 3022,
- totalMoney: 2022
- }]
- }
- var str = '',
- len = res.data.length;
- for (var i = 0; i < len; i++) {
- var totalMoney = res.data[i].totalMoney,
- shareCount = res.data[i].shareCount;
- str += `<div class="reward-row">
- <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
- <div class="reward-row-content">
- <img class="reward-img" src="../static/img/doubleChristmasActivity/reward.png" />
- <div class="reward-day-text">
- <div class="reward-day">奖励天数${shareCount}天</div>
- <div class="total-day">购买套餐累计时长达${totalMoney}天</div>
- </div>
- <img class="reward-btn" src="../static/img/doubleChristmasActivity/finish-btn.png" />
- </div>
- </div>`
- }
- str +=`<div class="reward-last-tip">已获得奖励请在分配奖励栏中进行时长分配</div>`
- $('.reward-list').eq(0).append(str);
- // }
- // }else{
- // stopManyClick(() => {
- // toastr.error(res.msg);
- // })
- // }
- // }
- // })
- }
- //获取分配列表数据
- function getLists(){
- const sliderLen = Array.from($('.slider-item')).length;
- if(sliderLen > 4){
- return
- }
- // $.ajax({
- // url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
- // type: 'post',
- // headers: {
- // 'Authorization': obj.token //id
- // },
- // contentType: "application/json",
- // dataType: 'json',
- // cache: false,
- // success: function (res) {
- // if(res.status === 0){
- // if(res.data && res.data.length > 0){
- let res = {
- data:[{
- shareCount: 0,
- totalMoney: 0
- },{
- shareCount: 0,
- totalMoney: 0
- },{
- shareCount: 0,
- totalMoney: 0
- },{
- shareCount: 0,
- totalMoney: 0
- }]
- }
- var str = '',
- len = res.data.length;
- for (var i = 0; i < len; i++) {
- var totalMoney = res.data[i].totalMoney,
- shareCount = res.data[i].shareCount;
- str += `<div class="reward-row">
- <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
- <div class="reward-row-content">
- <img class="icon_xingyao" src="../static/img/doubleChristmasActivity/home_list_icon_xingyao.png" />
- <div class="reward-day-text">
- <div class="reward-day">Y2-12567</div>
- <div class="total-day time-row">
- <img class="time-icon" src="../static/img/doubleChristmasActivity/time-icon.png" />
- <span>剩99999天24小时</span>
- </div>
- </div>
- <div class="compute-block">
- <img class="compute-icon cut" src="../static/img/doubleChristmasActivity/cut.png" />
- <input class="ipt" type="number" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" value="0" maxlength="5" />
- <img class="compute-icon add" src="../static/img/doubleChristmasActivity/add.png" />
- </div>
- </div>
- </div>`
- }
- let sliderItemDom = res.data.length === 0 ? `<div class="slider-item no-slider">暂无可分配的云手机</div>` : `<div class="slider-item">${str}</div>`;
- $('#slider-list').append(sliderItemDom);
- // }
- // }else{
- // stopManyClick(() => {
- // toastr.error(res.msg);
- // })
- // }
- // }
- // })
- }
- //点击加号
- $('.slider-list')[0].addEventListener('click',(e) => {
- if(e.target.className === 'compute-icon add'){
- let number = $('.ipt').eq(0).val();
- number++;
- if(number < 30){
- $('.ipt').eq(0).val(number);
- }else{
- stopManyClick(() => {
- toastr.error('分配时常不能大于未分配时常');
- })
- }
- }
- });
- //点击减号
- $('.slider-list')[0].addEventListener('click',(e) => {
- if(e.target.className === 'compute-icon cut'){
- let number = $('.ipt').eq(0).val();
- if(number > 0){
- number--;
- $('.ipt').eq(0).val(number);
- }else{
- stopManyClick(() => {
- toastr.error('分配的时常不能小于0');
- })
- }
- }
- });
- //埋点
- operate('dt_双11_h5_活动页面');
- function operate(pointName,type){
- $.ajax({
- url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
- type: 'post',
- data:JSON.stringify({
- pointName: pointName
- }),
- contentType:"application/json",
- dataType: 'json',
- cache: false,
- success: function (res) {
-
- },
- })
- }
- //防止提示一秒内重复显示
- function stopManyClick(fn) {
- if (flag) {
- fn();
- }
- flag = false;
- if(timer){clearTimeout(timer);}
- timer = setTimeout(() => {flag = true}, 1500);
- }
- </script>
- <script src="../static/js/vender/move.js"></script>
- </body>
- </html>
|