|
|
@@ -0,0 +1,320 @@
|
|
|
+<!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>
|
|
|
+ <div class="middle-container">
|
|
|
+ <div class="step-container">
|
|
|
+ <img class="tips" src="../static/img/doubleElevenActivity/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/doubleElevenActivity/hongbao.png" />
|
|
|
+ <span class="step-text">分享好友红包</span>
|
|
|
+ <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 class="red-packet"></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>
|
|
|
+ </div>
|
|
|
+ <div class="invite-text">*邀请好友即得厚礼，红包购机买一赠一</div>
|
|
|
+ <div class="packet-container">
|
|
|
+ <img class="rule-tips" src="../static/img/doubleElevenActivity/packet-tip.png" />
|
|
|
+ <div class="packet-block">
|
|
|
+ <div class="red-packet-next"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rule-container">
|
|
|
+ <img class="rule-tips" src="../static/img/doubleElevenActivity/rule.png" />
|
|
|
+ <div class="rule-content">
|
|
|
+ <div class="rule-point">红包规则：</div>
|
|
|
+ <div class="rule-point">1.红包可以自用或者分享给好友（好友可以是双子星新/老用户）</div>
|
|
|
+ <div class="rule-point">2.同一个红包一人限领一次，共计6个红包</div>
|
|
|
+ <div class="rule-point">3.红包可以无门槛抵押任何套餐，但是一个订单只能使用一个</div>
|
|
|
+ <div class="rule-point">4. 分享者分享的红包被领取后，如果领取红包的人使用红包购买了任意套餐，分享者都可领取一份相同的套餐</div>
|
|
|
+ <div class="rule-point">5. 若分享者自己领取自己的红包后使用红包购买套餐，自己可获得两份相同的套餐</div>
|
|
|
+ <div class="rule-point">6.本次活动仅限人民币购买套餐，星币支付不参与本次活动</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];
|
|
|
+ })
|
|
|
+ // 双十一活动
|
|
|
+ function receiveRedEnvelope(){
|
|
|
+ $.ajax({
|
|
|
+ url: baseUrl + `/api/user/v1/activity/receiveRedEnvelope`,
|
|
|
+ type: 'post',
|
|
|
+ headers: {
|
|
|
+ 'Authorization': obj.token //id
|
|
|
+ },
|
|
|
+ data:JSON.stringify({
|
|
|
+ couponRandomId: obj.couponRandomId,
|
|
|
+ goodId: obj.goodId,
|
|
|
+ originalOrder: obj.originalOrder,
|
|
|
+ shareUser: obj.shareUser
|
|
|
+ }),
|
|
|
+ contentType:"application/json",
|
|
|
+ dataType: 'json',
|
|
|
+ cache: false,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.status == 0 || res.status == 4106) {
|
|
|
+ operate('dt_双11_mp_领取红包');
|
|
|
+ phoneNumber = res.data;
|
|
|
+ let node = `<div class="packet">
|
|
|
+ <img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
|
|
|
+ <div class="money"><span class="money-mark">¥</span><span class="money-val">${parseInt(obj.money)}</span></div>
|
|
|
+ <div class="packet-title">云手机无门槛抵扣券</div>
|
|
|
+ <div class="packet-time">${obj.startTime.substring(5,7)}月${obj.startTime.substring(8,10)}-${obj.endTime.substring(5,7)}月${obj.endTime.substring(8,10)}日有效</div>
|
|
|
+ </div>
|
|
|
+ <div class="account">优惠券已放入您的账户${getPhoneNumber(phoneNumber)}</div>`
|
|
|
+ $('.red-packet').eq(0).append(node);
|
|
|
+ $('.activity-btn-text').eq(0).text('在双子星APP使用红包');
|
|
|
+ $('.icon-left').eq(0).hide();
|
|
|
+ } else {
|
|
|
+ stopManyClick(() => {
|
|
|
+ toastr.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //调用获取数据列表接口
|
|
|
+ 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){
|
|
|
+ $('.invite-text').eq(0).show();
|
|
|
+ $('.packet-container').eq(0).show();
|
|
|
+ var str = '',
|
|
|
+ list = '',
|
|
|
+ len = res.data.length;
|
|
|
+ for (var i = 0; i < len; i++) {
|
|
|
+ var totalMoney = res.data[i].totalMoney,
|
|
|
+ shareCount = res.data[i].shareCount,
|
|
|
+ couponRandomId = res.data[i].couponRandomId,
|
|
|
+ goodId = res.data[i].goodId,
|
|
|
+ shareOrder = res.data[i].shareOrder,
|
|
|
+ shareUser = res.data[i].shareUser,
|
|
|
+ dataList = res.data[i].list,
|
|
|
+ quantity = res.data[i].quantity;
|
|
|
+ function getReceivePhoneDuration(item){
|
|
|
+ let res = item.receivePhoneDuration===30?'月卡':item.receivePhoneDuration===90?'季卡':item.receivePhoneDuration===365?'年卡':item.receivePhoneDuration+'天卡';
|
|
|
+ return dataObj[item.receivePhoneType] + res
|
|
|
+ }
|
|
|
+ dataList.map((item,index) => {
|
|
|
+ let numberImg = Math.floor(getRandom()/2) + 1;
|
|
|
+ list += `<div class="user-item">
|
|
|
+ <div class="user-left">
|
|
|
+ <img class="head-img" src="../static/img/doubleElevenActivity/head-img-0${numberImg}.png" />
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-name">${getPhoneNumber(item.receiveUserPhone)}</div>
|
|
|
+ <div class="user-time">${item.createTime.substring(5,7)}月${item.createTime.substring(8,11)}日${item.createTime.substring(11,19)}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meal">${item.state === 0?totalMoney/quantity+'元红包':getReceivePhoneDuration(item)}</div>
|
|
|
+ <div class="${['receive no-user','receive',' receive usered'][item.state]}" data-type=${item.receivePhoneType} data-state=${item.state} data-id=${item.id}>${['未使用','领取','已领取'][item.state]}</div>
|
|
|
+ </div>`
|
|
|
+ })
|
|
|
+ str += `<div class="packet">
|
|
|
+ <img class="fxhb" data-index=${i} data-dataList=${JSON.stringify(dataList)} src="../static/img/doubleElevenActivity/fxhb.png" />
|
|
|
+ <div class="money" data-index=${i} data-dataList=${JSON.stringify(dataList)}><span class="money-mark">¥</span><span class="money-val">${parseInt(totalMoney)}</span></div>
|
|
|
+ <div class="packet-titles" data-index=${i} data-dataList=${JSON.stringify(dataList)}>无门槛</div>
|
|
|
+ <div class="packet-times" data-index=${i} data-dataList=${JSON.stringify(dataList)}>${startTime.substring(5,7)}月${startTime.substring(8,10)}-${endTime.substring(5,7)}月${endTime.substring(8,10)}日有效</div>
|
|
|
+ <div class="share-btn">
|
|
|
+ <img class="share" data-obj=${
|
|
|
+ JSON.stringify({
|
|
|
+ totalMoney: totalMoney,
|
|
|
+ couponRandomId: couponRandomId,
|
|
|
+ goodId: goodId,
|
|
|
+ shareOrder: shareOrder,
|
|
|
+ shareUser: shareUser,
|
|
|
+ shareCount: shareCount,
|
|
|
+ quantity: quantity
|
|
|
+ })
|
|
|
+ } src="../static/img/doubleElevenActivity/${shareCount === quantity?'no-share':'share'}.png" />
|
|
|
+ <div class="share-num ${shareCount === quantity?'gray':''}" data-obj=${
|
|
|
+ JSON.stringify({
|
|
|
+ totalMoney: totalMoney,
|
|
|
+ couponRandomId: couponRandomId,
|
|
|
+ goodId: goodId,
|
|
|
+ shareOrder: shareOrder,
|
|
|
+ shareUser: shareUser,
|
|
|
+ shareCount: shareCount,
|
|
|
+ quantity: quantity
|
|
|
+ })
|
|
|
+ }>${shareCount}/${quantity}</div>
|
|
|
+ </div>
|
|
|
+ <div class="packet-info">${dataList.length !== 0?'':'尚未有用户领取红包购买云机'}</div>
|
|
|
+ <img class="icon" src="../static/img/doubleElevenActivity/icon_up.png" />
|
|
|
+ </div>
|
|
|
+ <div class="list ${dataList.length !== 0?'user-list':''}" flag="2">
|
|
|
+ ${dataList.length !== 0?list:''}
|
|
|
+ </div>`
|
|
|
+ list = ''
|
|
|
+ }
|
|
|
+ $('.red-packet-next').eq(0).append(str);
|
|
|
+ $('.user-list').eq(0).css('display','block');
|
|
|
+- $('.icon').eq(0).attr('src','../static/img/doubleElevenActivity/icon_down.png');
|
|
|
+- $('.user-list').eq(0).attr('flag','1');
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ stopManyClick(() => {
|
|
|
+ toastr.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //埋点
|
|
|
+ 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) {
|
|
|
+
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //点击红包
|
|
|
+ $('.red-packet-next')[0].addEventListener('click',(e) => {
|
|
|
+ if(['fxhb','packet-titles','money','packet-times'].includes(e.target.className)){
|
|
|
+ let index = e.target.dataset.index;
|
|
|
+ $('.list').eq(index).toggle();
|
|
|
+ const flag = $('.user-list').eq(index).attr('flag');
|
|
|
+ if(flag === '1'){
|
|
|
+ $('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_up.png');
|
|
|
+ $('.user-list').eq(index).attr('flag','2');
|
|
|
+ }else{
|
|
|
+ $('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_down.png');
|
|
|
+ $('.user-list').eq(index).attr('flag','1');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //点击参加按钮
|
|
|
+ $('.join-activity-btn')[0].addEventListener('click',()=>{
|
|
|
+ if(obj.money){ // 小程序
|
|
|
+ window.location.href = `${baseUrl}/h5/microserviceUserH5/vcloud/downApp.html`
|
|
|
+ }else{
|
|
|
+ if (isAndroid) {
|
|
|
+ window.native.startPurchase();
|
|
|
+ operate('dt_双11_h5_快来参加双11');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //点击领取
|
|
|
+ $('.red-packet-next')[0].addEventListener('click',(e)=>{
|
|
|
+ var state = e.target.dataset.state;
|
|
|
+ let id = e.target.dataset.id;
|
|
|
+ let type = e.target.dataset.type;
|
|
|
+ if(state == 0){
|
|
|
+ if(obj.money){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ stopManyClick(() => {
|
|
|
+ toastr.error('赶紧让你的好友使用红包购买云机吧！');
|
|
|
+ })
|
|
|
+ }else if(state == 1){
|
|
|
+ if(e.target.className === 'receive'){
|
|
|
+ e.stopPropagation();
|
|
|
+ if (isAndroid) {
|
|
|
+ window.native.activatePhone(id, type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //防止提示一秒内重复显示
|
|
|
+ function stopManyClick(fn) {
|
|
|
+ if (flag) {
|
|
|
+ fn();
|
|
|
+ }
|
|
|
+ flag = false;
|
|
|
+ if(timer){clearTimeout(timer);}
|
|
|
+ timer = setTimeout(() => {flag = true}, 1500);
|
|
|
+ }
|
|
|
+ // 获取一个随机数
|
|
|
+ function getRandom(){
|
|
|
+ return Math.floor(Math.random()*10);
|
|
|
+ }
|
|
|
+ function getPhoneNumber(phoneNumber){
|
|
|
+ return `${phoneNumber.substring(0,3)}****${phoneNumber.substring(7,11)}`
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
heyang
