AppInside/accountZX/css/styleCode.css
New file @@ -0,0 +1,57 @@ * { margin: 0; top: 0; /* 不允许复制 */ -moz-user-select: none; /* Firefox私有属性 */ -webkit-user-select: none; /* WebKit内核私有属性 */ -ms-user-select: none; /* IE私有属性(IE10及以后) */ -khtml-user-select: none; /* KHTML内核私有属性 */ -o-user-select: none; /* Opera私有属性 */ user-select: none; /* CSS3属性 */ /* IOS点击阴影 */ -webkit-tap-highlight-color: transparent; /* 禁止长按图片保存 */ -webkit-touch-callout: none; } body { background-color: white; font-family: Arial, "Microsoft YaHei"; } / .container { position: absolute; bottom: 30px; padding: 10px; text-align: center; } .container p { font-family: "微软雅黑"; color: #888; } .div_codeBG { background-color: white; margin-top: -1.3rem; } .input { -webkit-user-select: auto; width: 0.6rem; height: 0.66rem; border: none; outline: medium; color: #000000; caret-color: #E5005C; margin-top: 0; text-align: center; font-size: 0.36rem; }
New file @@ -0,0 +1,66 @@ * { margin: 0; top: 0; /* 不允许复制 */ -moz-user-select: none; /* Firefox私有属性 */ -webkit-user-select: none; /* WebKit内核私有属性 */ -ms-user-select: none; /* IE私有属性(IE10及以后) */ -khtml-user-select: none; /* KHTML内核私有属性 */ -o-user-select: none; /* Opera私有属性 */ user-select: none; /* CSS3属性 */ /* IOS点击阴影 */ -webkit-tap-highlight-color: transparent; /* 禁止长按图片保存 */ -webkit-touch-callout: none; } body { background-color: white; font-family: Arial, "Microsoft YaHei"; } .div_PhoneBG { display: -webkit-flex; width: 100%; align-items: center; height: 0.86rem; background-color: white; margin-top: 0.6rem; } .input { -webkit-user-select: auto; margin-right: 0.27rem; font-size: 0.34rem; height: 0.7rem; width: 5rem; border: none; outline: medium; color: #000000; caret-color: #E5005C; text-align: left; line-height: 0.7rem; } .input::-webkit-input-placeholder { color: #CCCCCC; } .div_button { color: #FFFFFF; font-size: 0.34rem; background-color: #FFC8DD; height: 0.86rem; text-align: center; line-height: 0.86rem; border-radius: 0.43rem; margin-left: 0.7rem; width: 5.8rem; margin-top: 1.24rem; } AppInside/accountZX/fetchCode.html
New file @@ -0,0 +1,223 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>验证手机号</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="./css/styleCode.css" /> <script> window.onresize = function() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; }; window.onresize(); </script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://img.flqapp.com/resource/js/app20200610.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> [v-cloak] { display: none !important; } </style> </head> <body> <div id="root" v-cloak> <div style="color: #333333;font-size: 0.5rem;height: 0.46rem;line-height: 0.46rem;margin-left: 0.75rem;margin-top: 3rem;"> 请输入验证码 </div> <div style="color: #444444;font-size: 0.26rem;height: 0.35rem;line-height: 0.25rem;margin-left: 0.74rem;margin-top: 0.3rem;"> 验证码已发送至+86 {{phoneNumber}} </div> <div class="div_codeBG"> <input type="tel" class="input" style="margin-left: 0.75rem;" autofocus="autofocus" maxlength="1" /> <input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" /> <input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" /> <input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" /> </div> <div class="div_lineBG" style="margin-top: -1.1rem; display: -webkit-flex;"> <div style="background-color: #E5005C;height: 1px;width: 0.95rem;margin-left: 0.75rem;"></div> <div style="background-color: #E5005C;height: 1px;width: 0.95rem;margin-left: 0.75rem;"></div> <div style="background-color: #E5005C;height: 1px;width: 0.95rem;margin-left: 0.75rem;"></div> <div style="background-color: #E5005C;height: 1px;width: 0.95rem;margin-left: 0.72rem;"></div> </div> <div style="color: #434343;font-size: 0.26rem;margin-left: 0.75rem;margin-top: 0.98rem;" @click="fetchCode"> <span style="color: #E5005B;">{{time}}</span>{{desc}} </div> </div> </body> <script type="text/javascript"> function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; </script> <script> // "http://api.flqapp.com"; var host = "http://192.168.1.253:8080"; var h5Host = "http://192.168.1.114:8848/flqFront/" var phone = getQueryString('phone'); var check = null; var vcode = ''; var isTimerStart = true; $(function() { var app = new Vue({ el: "#root", data: { time: '60', desc: '秒后重新发送验证码', phoneNumber: '' }, methods: { fetchCode: function() { if (isTimerStart) return; sendMsg(); } } }); app.phoneNumber = phone; var txts = $(".div_codeBG input"); for (var i = 0; i < txts.length; i++) { var t = txts[i]; t.index = i; //t.setAttribute("readonly", true); t.onkeyup = function() { if (event.keyCode == 8) { // 删除 vcode = ''; this.value = ""; var behand = this.index - 1; if (behand < 0) return; //txts[behand].removeAttribute("readonly"); txts[behand].focus(); } else { this.value = this.value.replace(/^(.).*$/, '$1'); var next = this.index + 1; if (next > txts.length - 1) { txts[txts.length - 1].blur(); vcode = vcode + txts[0].value + +txts[1].value + txts[2].value + txts[3].value; checkCode(); return; } //txts[next].removeAttribute("readonly"); if (this.value) { txts[next].focus(); } } } } //txts[0].removeAttribute("readonly"); function checkCode() { yesApp.showLoading(); var uid = yesApp.getUid(); var params = { uid: uid, vcode: vcode }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/v2/user/accountRemove", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { //window.location.href = "result.html"; var controller = 'ShonpingShareViewController' var urls = h5Host + 'AppInside/accountZX/result.html'; var jumpDetail = { controller: controller } var parms = { url: urls } yesApp.jumpPageWithFinishCurrentPage(jumpDetail, parms); } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); }; function sendMsg() { yesApp.showLoading(); var uid = yesApp.getUid(); var params = { uid: uid, phone: phone }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/v1/sms/sendMSMRemove", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { isTimerStart = true; app.time = '60'; app.desc = '秒后重新发送验证码'; setTimer(); yesApp.toast('' + result.data); } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); }; function setTime() { app.time = app.time - 1; }; function setTimer() { var myVar = setInterval(function() { setTime(); if (app.time == 0) { stopTimer(); isTimerStart = false; app.time = ''; app.desc = '发送验证码' } }, 1000); check = myVar; }; function stopTimer() { clearInterval(check); }; setTimer(); }); </script> </html> AppInside/accountZX/img/arrow.png
@@ -29,9 +29,8 @@ 1.您的账户无法登录与使用 <br> 2.您的账户信息将永久删除且无法恢复 <br> 3.您授权的微信账户将会自动解绑 <br> 4.您账户所关联的订单将无法查询与召回 <br> 4.您账户所关联的订单将无法查询与找回<br> 5.您账户未结清的收入将被清空，请注销前去提现 <br> 6.当前绑定的手机号将无法再次注册板栗快省 </div> <div style="height: 0.36rem;"></div> </div> @@ -82,11 +81,11 @@ }, zxsure: function() { if (app.select == true) { window.location.href = "phoneNumber.html"; //yesApp.jumpWeb(h5Host + 'AppInside/accountZX/result.html', null); window.location.href = "result.html"; } else { yesApp.toast('请先同意板栗快省账户注销协议') } }, readDelegate: function() { AppInside/accountZX/phoneNumber.html
New file @@ -0,0 +1,120 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>验证手机号</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="./css/stylePhoneNumber.css" /> <script> window.onresize = function() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; }; window.onresize(); </script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://img.flqapp.com/resource/js/app20200610.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <div style="color: #E5005B;font-size: 0.34rem;line-height: 0.36rem;text-align: center;margin-top: 2rem;"> 我们需要进行注销申请的身份验证 </div> <div style="color: #E5005B;font-size: 0.34rem;line-height: 0.36rem;text-align: center;margin-top: 0.1rem;"> 请使用你绑定的手机号获取验证码 </div> <div style="color: #333333;font-size: 0.48rem;margin-top: 0.1rem;margin-left: 0.72rem;margin-top: 1.09rem;"> 注销板栗快省账户 </div> <div class="div_PhoneBG"> <div style="color: #000000;font-size: 0.28rem;margin-left: 0.72rem;height: 0.22rem; display: -webkit-flex;align-items: center;"> +86 </div> <img src="img/arrow.png" style="width: 0.17rem;height: 0.25rem;margin-left: 0.2rem;margin-top: -0.03rem;"> <input type="tel" class="input" placeholder="请输入手机号" @input="onInput" maxlength="13" /> </div> <div style="background-color: #E5005C; height:1px;margin-left: 0.7rem;width: 5.8rem;margin-top: 0.05rem;"></div> <div class="div_button" @click="fetchCode"> 获取短信验证码 </div> </div> </body> <script> // "http://api.flqapp.com"; var host = "http://192.168.1.253:8080"; var phone = null; $(function() { var app = new Vue({ el: "#root", data: { }, methods: { fetchCode: function() { phone = $('.input').val().replace(/\s/g, ''); if (phone.length != 11) return; app.sendMsg(); }, sendMsg: function() { yesApp.showLoading(); var uid = yesApp.getUid(); var params = { uid: uid, phone: phone }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/v1/sms/sendMSMRemove", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { window.location.href = "fetchCode.html?phone=" + $('.input').val(); } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); }, } }); $('.input').on('keyup', function(e) { var val = $(this).val(); if (val.length == 13) { $('.div_button').css('background-color', '#E5005C'); } else { $('.div_button').css('background-color', '#FFC8DD'); } // 按键为删除时要执行下面的判断，不然删除到第三位和第八位时又回加空格，一直循环。 if (e.keyCode === 8) { $(this).val(val); return; } if (val.length === 3 || val.length === 8) { val += " "; $(this).val(val); } }) }); </script> </html> AppInside/accountZX/result.html
@@ -22,8 +22,14 @@ <img src="img/icon_logo.png"> <div class="hedaer_title"> 板栗快省账户已注销成功！<br> 感谢你的使用。 请记得我们永远爱你... </div> </div> </body> <script> $(function() { // yesApp.finishPage(); }); </script> </html> AppInside/activityDetail/activity.html
@@ -114,7 +114,6 @@ <div id="share" style="display: none;"> <div class="share_title">分享活动</div> <div class="share_content"> <div class="share_content_content" onclick="shareText(1)"> <div class="share_content_content_img"> <img src="img/icon_wx.png"> @@ -150,12 +149,8 @@ QQ空间 </div> </div> </div> <div style="height: 1px; background-color: #D0D0D0; margin-top: 0.37rem;"></div> <div class="div_cancel" onclick="cancelShare()">取消</div> </div>
@@ -74,6 +74,7 @@ var host = "http://192.168.1.114:8848/flqFront/" var myurl = host + "AppInside/accountZX/index.html"; window.location.href = myurl; //yesApp.jumpWeb(myurl,null) } } </script> AppInside/miandanNew/css/stylesheet.css
@@ -16,6 +16,8 @@ /* CSS3属性 */ /* IOS点击阴影 */ -webkit-tap-highlight-color: transparent; /* 禁止长按图片保存 */ -webkit-touch-callout: none; } body { @@ -104,8 +106,7 @@ .header_info_left_bg { display: -webkit-flex; align-items: center; flex-direction: column-reverse background-color: yellow; flex-direction: column-reverse background-color: yellow; } .header_info_left_bg :nth-child(1) { @@ -113,6 +114,7 @@ height: 0.5rem; margin-left: 0.05rem; border-radius:50%; background-color: #F5F5F5; } .header_info_left_bg :nth-child(2) { @@ -232,7 +234,7 @@ border-radius: 0.23rem; text-align: center; line-height: 0.5rem; margin-left: 0.47rem; margin-left: 1.62rem; } .div_jd { @@ -304,10 +306,11 @@ .goodsimg { width: 2.6rem; height: 2.6rem; background-color: #F6F6F6; background-color: #F5F5F5; border-radius: 0.1rem; margin-top: 0.16rem; margin-left: 0.16rem; object-fit: cover; } .div_item_rightBg { @@ -331,7 +334,7 @@ } .div_goods_title_bg span { text-indent: 2.7em; text-indent: 0.75rem; color: #333333; font-size: 0.26rem; overflow: hidden; @@ -341,7 +344,7 @@ word-wrap: break-word; word-break: break-all; line-height: 0.39rem; margin-top: -1.195rem; margin-top: -1.198rem; } .div_store_bg { @@ -384,6 +387,7 @@ font-size: 0.24rem; margin-left: 0.1rem; margin-top: 0.01rem; text-decoration: line-through; } .div_payment_sales_bg :nth-child(4) { @@ -398,7 +402,7 @@ margin-top: 0.14rem; } .div_coupon_bg :nth-child(1) { .div_coupon_title1 { color: #FFFFFF; font-size: 0.24rem; width: 0.41rem; @@ -410,7 +414,7 @@ border-radius: 0.06rem 0 0 0.06rem; } .div_coupon_bg :nth-child(2) { .div_coupon_content1 { color: #E5005C; font-size: 0.24rem; border-right: 1px solid #E5005C; @@ -423,7 +427,7 @@ border-radius: 0 0.06rem 0.06rem 0; } .div_coupon_bg :nth-child(3) { .div_coupon_title2 { color: #FFFFFF; font-size: 0.24rem; width: 0.41rem; @@ -436,7 +440,7 @@ margin-left: 0.2rem; } .div_coupon_bg :nth-child(4) { .div_coupon_content2 { color: #832EEB; font-size: 0.24rem; border-right: 1px solid #832EEB; @@ -476,3 +480,22 @@ line-height: 0.4rem; margin-right: 0.22rem; } .div_goods_labels_bg { display: -webkit-flex; align-items: center; font-size: 0.18rem; margin-top: 0.1rem; margin-left: -0.1rem; } .div_goods_label1 { display: -webkit-flex; align-items: center; justify-content: center; /* color: #FE0014; */ border: solid 1px; height: 0.26rem; border-radius: 0.06rem; } AppInside/miandanNew/index.html
@@ -14,11 +14,16 @@ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://img.flqapp.com/resource/js/app2019112217.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> [v-cloak] { display: none !important; } </style> </head> <body> <div id="root"> <div id="root" v-cloak> <!-- 微信号悬浮 --> <div class="div_xf_bg"> <div v-if="user.tearcherWX" class="div_xf_bg"> <div class="div_xf_left_bg"> <img src="img/icon_+.png"> <p>添加资深导师微信，享更多福利</p> @@ -30,22 +35,24 @@ <!-- 选项卡悬浮 --> <div class="_div_xf_changetabe" v-show="xf_hangetabe_show"> <div class="div_tb" @click="changeTabs(1)">淘宝</div> <div class="div_jd" @click="changeTabs(2)">京东</div> <!-- <div class="div_jd" @click="changeTabs(2)">京东</div> --> <div class="div_pdd" @click="changeTabs(3)">拼多多</div> </div> <div class="div_img_bg"> <div class="div_header_info_bg" @click="miandan"> <div class="header_info_left_bg"> <img src="img/icon_+.png"> <div>昵称昵称昵称</div> <img :src="user.portrait"> <div>{{user.nickName}}</div> </div> <div class="header_info_right_bg"> <img src="img/icon_arrow.png"> <div>3张</div> <div>{{user.couponNum}}张</div> <div>免单券：</div> </div> </div> <div class="div_img_bg_bot"> <div class="div_img_bg_circle"> <div class="div_img_bg_circle_one"></div> @@ -71,46 +78,69 @@ <!-- 标题选项卡 --> <div class="div_headertabs"> <div class="div_tb" @click="changeTabs(1)">淘宝</div> <div class="div_jd" @click="changeTabs(2)">京东</div> <!-- <div class="div_jd" @click="changeTabs(2)">京东</div> --> <div class="div_pdd" @click="changeTabs(3)">拼多多</div> </div> <!-- 标题 --> <div class="div_list_title_bg"> <img src="img/icon_left.png"> <div>淘宝</div> <div>{{titleName}}</div> <img src="img/icon_right.png"> </div> <!-- 列表 --> <div class="div_gooList"> <div class="div_items" v-for="(item, index) in goodsList" @click="fetchData(item)" :key="index"> <!-- 商品图片 --> <div id=""> <img v-bind:src="item.img" class="goodsimg" /> <img :src="item.picUrl" class="goodsimg" /> </div> <div class="div_item_rightBg"> <div class="div_goods_title_bg"> <img src="img/icon_tb.png"> <span class="goods_title">{{item.title}}</span> <img v-if="item.goodsType==1" src="img/icon_tb.png"> <img v-else-if="item.goodsType==2" src="img/icon_jd.png"> <img v-else-if="item.goodsType==3" src="img/icon_pdd.png" style="width: 0.86rem;"> <span v-if="item.goodsType==3" class="goods_title" style="text-indent: 0.98rem;">{{item.title}}</span> <span v-else class="goods_title">{{item.title}}</span> </div> <div class="div_store_bg"> <!-- <div v-if="item.labels" class="div_goods_labels_bg"> <div v-for="(cell, indexPath) in item.labels" style="margin-left: 0.1rem;"> <div class="div_goods_label1" :style="{color: cell.color, borderColor:cell.color}"> {{cell.content}} </div> </div> </div> --> <div class="div_store_bg" v-if="item.shopInfo.shopName"> <img src="img/icon_store.png"> <div>{{item.store}}</div> <div>{{item.shopInfo.shopName}}</div> </div> <div class="div_payment_sales_bg"> <div v-if="item.shopInfo.shopName" class="div_payment_sales_bg"> <div>实付￥</div> <div>0</div> <div>￥78.9</div> <div>月销 8968</div> <div>{{item.otherInfo.actualPay}}</div> <div>￥{{item.zkPrice}}</div> <div>月销 {{item.salesCount}}</div> </div> <div v-else class="div_payment_sales_bg" style="margin-top: 1.02rem;"> <div>实付￥</div> <div>{{item.otherInfo.actualPay}}</div> <div>￥{{item.zkPrice}}</div> <div>月销 {{item.salesCount}}</div> </div> <div class="div_coupon_bg"> <div>券</div> <div> ￥15 </div> <div>补</div> <div> ￥15 </div> <div v-if="item.hasCoupon" class="div_coupon_title1">券</div> <div v-if="item.hasCoupon" class="div_coupon_content1"> ￥{{item.couponInfo.amount}} </div> <div v-if="item.hasCoupon" class="div_coupon_title2">补</div> <div v-else class="div_coupon_title2" style="margin-left: 0;">补</div> <div class="div_coupon_content2"> ￥{{item.otherInfo.mendMoney}} </div> </div> </div> </div> </div> @@ -132,27 +162,21 @@ </body> <script type="text/javascript"> // "http://api.flqapp.com"; http://192.168.1.253:8080 var host = "http://192.168.1.253:8080"; var goodsType = 1; var spaceTop = 0; //选项卡悬浮距离顶部位置 var scrollDistance = 0; //滑动距离 $(function() { var host = "http://api.flqapp.com"; var app = new Vue({ el: "#root", data: { dd: 'ddddsss', user: {}, titleName: '淘宝', xf_hangetabe_show: false, selectIndex: 1, goodsList: [{ img: 'img/icon_+.png', title: '牛仔外套女ins潮春秋装韩版宽松百搭春季2019新款流行港...', store: '三只松鼠官方旗舰店', id: '1' }, { img: 'img/icon_+.png', title: '牛仔外套女ins潮春秋装韩版宽松百搭春季2019新款流行港...', store: '三只松鼠官方旗舰店', id: '2' }, ], goodsList: [], }, methods: { // 切换选项卡 @@ -164,38 +188,141 @@ $('.div_tb').css('backgroundColor', '#E5005C') $('.div_jd').css('backgroundColor', '#832EEB') $('.div_pdd').css('backgroundColor', '#832EEB') app.titleName = '淘宝' } else if (type == 2) { $('.div_tb').css('backgroundColor', '#832EEB') $('.div_jd').css('backgroundColor', '#E5005C') $('.div_pdd').css('backgroundColor', '#832EEB') app.titleName = '京东' } else if (type == 3) { $('.div_tb').css('backgroundColor', '#832EEB') $('.div_jd').css('backgroundColor', '#832EEB') $('.div_pdd').css('backgroundColor', '#E5005C') app.titleName = '拼多多' } if (scrollDistance >= spaceTop) { window.scrollTo(0, spaceTop + 1) } app.fetchFreeGoodsList(); } }, copyWX: function() { yesApp.toast('复制微信号') yesApp.copyText(app.user.tearcherWX); var systemVersion = yesApp.getPlatform(); if (systemVersion == 1) { yesApp.toast('复制成功') } }, miandan: function() { yesApp.toast('点击免单') var uid = yesApp.getUid(); if (uid == null || uid.length == 0 || uid == '') { yesApp.login(); return; } var activity = null; var controller = null; activity = 'com.yeshi.ec.rebate.myapplication.ui.mine.WelfareCenterActivity'; controller = 'WelfareCenterController'; var params = null; var jumpDetail = { activity: activity, controller: controller } yesApp.jumpPage(jumpDetail, params); }, fetchData: function(data) { yesApp.toast(data.id) yesApp.jumpGoodsSplashWithFrom('32424234','web'); var activity = null; var controller = null; var goodsType = data.goodsType; var goodsId = data.goodsId; var fromString = 'miandan'; if (data.goodsType == 1) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityTB'; controller = 'GoodDeTrViewController'; } else if (data.goodsType == 2) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityJD'; controller = 'JDGoodsDetailController'; } else if (data.goodsType == 3) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityPDD'; controller = 'PDDGoodsDetailController'; } var jumpDetail = { activity: activity, controller: controller } var params = { goodsType: goodsType, id: goodsId, from: fromString } yesApp.jumpPage(jumpDetail, params); }, fetchFreeGoodsList: function() { yesApp.showLoading(); var uid = yesApp.getUid(); goodsType = app.selectIndex; var params = { uid: uid, page: 1, goodsType: goodsType }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/apph5/v1/coupon/getFreeGoodsList", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { app.user = result.data.user; app.goodsList = result.data.list; if (app.user.tearcherWX == null || app.user.tearcherWX.length == 0 || app.user.tearcherWX == '') { $('.div_img_bg').css('margin-top', '0'); $('._div_xf_changetabe').css('margin-top', '0'); } } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); } } }); var spaceTop = $('.div_headertabs').offset().top - 28; app.fetchFreeGoodsList(); spaceTop = $('.div_headertabs').offset().top - 31; $(window).scroll(function() { var scrollDistance = $(window).scrollTop(); scrollDistance = $(window).scrollTop(); if (scrollDistance >= spaceTop) { app.xf_hangetabe_show = true;
@@ -214,15 +214,16 @@ } .div_content_header_2 { color: #FFFFFF; color: #333333; font-size: 0.3rem; height: 0.93rem; display: flex; align-items: center; padding-left: 0.44rem; background-color: #FF7AAF; background-color: white; border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem; border-bottom: #E0E0E0 solid 1px; } .div_content_3 { @@ -235,15 +236,16 @@ } .div_content_header_3 { color: #FFFFFF; color: #333333; font-size: 0.3rem; height: 0.93rem; display: flex; align-items: center; padding-left: 0.44rem; background-color: #FF7AAF; background-color: white; border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem; border-bottom: #E0E0E0 solid 1px; } .div_content_4 { @@ -256,15 +258,16 @@ } .div_content_header_4 { color: #FFFFFF; color: #333333; font-size: 0.3rem; height: 0.93rem; display: flex; align-items: center; padding-left: 0.44rem; background-color: #FF7AAF; background-color: white; border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem; border-bottom: #E0E0E0 solid 1px; } .div_content_5 { @@ -277,15 +280,16 @@ } .div_content_header_5 { color: #FFFFFF; color: #333333; font-size: 0.3rem; height: 0.93rem; display: flex; align-items: center; padding-left: 0.44rem; background-color: #FF7AAF; background-color: white; border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem; border-bottom: #E0E0E0 solid 1px; } .div_content_6 { @@ -298,15 +302,16 @@ } .div_content_header_6 { color: #FFFFFF; color: #333333; font-size: 0.3rem; height: 0.93rem; display: flex; align-items: center; padding-left: 0.44rem; background-color: #FF7AAF; background-color: white; border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem; border-bottom: #E0E0E0 solid 1px; } .div_quanyi { AppInside/rechargeQy/index.html
@@ -296,7 +296,7 @@ var content3 = $('.div_content_3').offset().top - 51; var content4 = $('.div_content_4').offset().top - 51; var content5 = $('.div_content_5').offset().top - 51; var content6 = $('.div_content_6').offset().top; - 51 var content6 = $('.div_content_6').offset().top - 51; app.postion.content1 = content1; app.postion.content2 = content2; app.postion.content3 = content3; @@ -331,8 +331,11 @@ } if (scrollDistance > content5 && scrollDistance < content6) { //content5 app.changeTabs(5, false) } } if (scrollDistance > content6) { //content6 app.changeTabs(6, false) } }); }); </script> AppInside/rewardNew/css/layer.css
New file @@ -0,0 +1 @@ .layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} AppInside/rewardNew/css/load.css
New file @@ -0,0 +1,70 @@ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); transition: all 2s; } } .loading{ display: inline; height: 0.21rem; width: 0.21rem; margin-top: 0.15rem; position: relative; } .loading div{ position: absolute; height: 0.05rem; transform-origin: left; border-radius: 0.5rem; display: flex; } .loading div .k{ width: 0.08rem; height: 0.04rem; } .loading div .s{ width: 0.13rem; height: 0.04rem; background: #BBBBBB; border-radius: 0.5rem; } .loading div:nth-child(2) {-webkit-transform: rotate(30deg);} .loading div:nth-child(3) {-webkit-transform: rotate(60deg);} .loading div:nth-child(4) {-webkit-transform: rotate(90deg);} .loading div:nth-child(5) {-webkit-transform: rotate(120deg);} .loading div:nth-child(6) {-webkit-transform: rotate(150deg);} .loading div:nth-child(7) {-webkit-transform: rotate(180deg);} .loading div:nth-child(8) {-webkit-transform: rotate(210deg);} .loading div:nth-child(9) {-webkit-transform: rotate(240deg);} .loading div:nth-child(10) {-webkit-transform: rotate(270deg);} .loading div:nth-child(11) {-webkit-transform: rotate(300deg);} .loading div:nth-child(12) {-webkit-transform: rotate(330deg);} @-webkit-keyframes load{ 0%{opacity:1;} 100%{opacity:0;} } .loading div:nth-child(1){-webkit-animation:load 1.2s linear 0s infinite;} .loading div:nth-child(2){-webkit-animation:load 1.2s linear 0.1s infinite;} .loading div:nth-child(3){-webkit-animation:load 1.2s linear 0.2s infinite;} .loading div:nth-child(4){-webkit-animation:load 1.2s linear 0.3s infinite;} .loading div:nth-child(5){-webkit-animation:load 1.2s linear 0.4s infinite;} .loading div:nth-child(6){-webkit-animation:load 1.2s linear 0.5s infinite;} .loading div:nth-child(7){-webkit-animation:load 1.2s linear 0.6s infinite;} .loading div:nth-child(8){-webkit-animation:load 1.2s linear 0.7s infinite;} .loading div:nth-child(9){-webkit-animation:load 1.2s linear 0.8s infinite;} .loading div:nth-child(10){-webkit-animation:load 1.2s linear 0.9s infinite;} .loading div:nth-child(11){-webkit-animation:load 1.2s linear 1s infinite;} .loading div:nth-child(12){-webkit-animation:load 1.2s linear 1.1s infinite;} AppInside/rewardNew/css/stylesheet.css
@@ -51,14 +51,13 @@ .div_header_1 { color: #E5005B; height: 1.02rem; width: 49.5%; width: 32.6%; display: -webkit-flex; align-items: center; justify-content: center; } .div_header_1 p { margin-left: 1.72rem; margin-top: 0.29rem; } .div_header_1 p {} .div_header_mid { width: 1%; @@ -76,14 +75,24 @@ .div_header_2 { color: #333333; height: 1.02rem; width: 49.5%; width: 32.6%; display: -webkit-flex; justify-content: center; align-items: center; } .div_header_2 p { margin-left: 0.64rem; margin-top: 0.29rem; .div_header_2 p {} .div_header_3 { color: #333333; height: 1.02rem; width: 32.6%; display: -webkit-flex; justify-content: center; align-items: center; } .div_header_3 p {} .div_header_line { display: -webkit-flex; @@ -95,7 +104,7 @@ height: 0.04rem; border-radius: 0.02rem; background-color: #E5005B; margin-left: 1.75rem; margin-left: 0.57rem; } .div_header_line_2 { @@ -103,7 +112,16 @@ height: 0.04rem; border-radius: 0.02rem; background-color: #E5005B; margin-left: 1.4rem; margin-left: 1.04rem; opacity: 0; } .div_header_line_3 { width: 1.3rem; height: 0.04rem; border-radius: 0.02rem; background-color: #E5005B; margin-left: 1.01rem; opacity: 0; } @@ -406,6 +424,58 @@ line-height: 0.68rem; } .share {} .share_title { color: #333333; font-size: 0.26rem; height: 0.26rem; display: -webkit-flex; align-items: center; text-align: center; margin-left: 3.18rem; margin-top: 0.2rem; } .share_content { display: -webkit-flex; margin-top: 0.2rem; } .share_content_content { width: 1.875rem; } .share_content_content_img { display: -webkit-flex; justify-content: center; } .share_content_content_img img { width: 0.98rem; height: 0.98rem; } .share_content_content_title { color: #666666; font-size: 0.26rem; height: 0.26rem; display: -webkit-flex; align-items: center; justify-content: center; margin-top: 0.12rem; } .div_cancel { color: #333333; font-size: 0.3rem; height: 1rem; display: -webkit-flex; align-items: center; justify-content: center; } @supports (bottom: env(safe-area-inset-bottom)) { .div_Bottom { padding-bottom: env(safe-area-inset-bottom); AppInside/rewardNew/img/icon_header.pngAppInside/rewardNew/img/icon_kj.png
@@ -5,6 +5,8 @@ <title>拉新奖励</title> <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <link rel="stylesheet" type="text/css" href="./css/layer.css" /> <link rel="stylesheet" type="text/css" href="css/load.css" /> <script> window.onresize = function() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; @@ -14,90 +16,76 @@ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://img.flqapp.com/resource/js/app2019112217.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript" src="js/layer.js"></script> <style type="text/css"> [v-cloak] { display: none !important; } </style> </head> <body id="body"> <div id="root"> <div id="root" v-cloak> <div class="div_headertabs_xf" style="display: none;"> <div class="div_header_title"> <div class="div_header_1" @click="selectTab(1)"> <p>拉新商品</p> </div> <div class="div_header_mid"> <div></div> </div> <div class="div_header_2" @click="selectTab(2)"> <p>拉新排行榜</p> </div> <div class="div_header_mid"> <div></div> </div> <div class="div_header_3" @click="selectTab(3)"> <p>拉新规则</p> </div> </div> <div class="div_header_line"> <div class="div_header_line_1"></div> <div class="div_header_line_2"></div> <div class="div_header_line_3"></div> </div> </div> <img src="img/icon_header.png" style="width: 7.5rem;height: 5.28rem;"> <div style="background-color: #FF3567;margin-top: -0.3rem;"> <div class="div_headerBG"> <div style="color: #333333;font-size: 0.34rem;height: 0.85rem;line-height: 0.85rem;text-align: center;border-bottom: #DFDFDF solid 1px;"> 六月活动规则 {{rule.ruleName}} </div> <div style="color: #E5005B;font-size: 0.24rem;height: 0.24rem;font-weight: bold; display: -webkit-flex;align-items: center;margin-left: 0.43rem;margin-top: 0.34rem;"> 新人有效订单奖励： {{rule.newRule}} </div> <div style="color: #333333;font-size: 0.24rem;display: -webkit-flex;align-items: center;margin-left: 0.43rem;line-height: 0.3rem;margin-top: 0.1rem;"> 首笔订单≥9.9元（实付款），确认收货后，奖励免单券一张。 {{rule.newTitle}} </div> <div style="color: #E5005B;font-size: 0.24rem;height: 0.24rem;font-weight: bold; display: -webkit-flex;align-items: center;margin-left: 0.43rem;margin-top: 0.3rem;"> 邀请人有效粉丝奖励： {{rule.inviterRule}} </div> <div style="color: #333333;font-size: 0.24rem; display: -webkit-flex;align-items: center;margin-left: 0.43rem;margin-right: 0.4rem;line-height: 0.3rem;margin-top: 0.1rem;"> 直接粉丝首笔订单≥9.9元（实付款），确认收货后，可获得拉新奖励红包： {{rule.inviterTitle}} </div> <div> <div v-for="(item, index) in rule.list"> <div style="display: -webkit-flex;justify-content: space-between;align-items: center;height: 0.24rem;margin-top: 0.2rem;"> <div style="color: #333333;font-size: 0.24rem;margin-left: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 1~100人 {{item.numRange}} </div> <div style="color: #333333;font-size: 0.24rem;margin-right: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 奖励0.5元/人 {{item.rewardDesc}} </div> </div> <div style="display: -webkit-flex;justify-content: space-between;align-items: center;height: 0.24rem;margin-top: 0.2rem;"> <div style="color: #333333;font-size: 0.24rem;margin-left: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 101~200人 </div> <div style="color: #333333;font-size: 0.24rem;margin-right: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 奖励1元/人 </div> </div> <div style="display: -webkit-flex;justify-content: space-between;align-items: center;height: 0.24rem;margin-top: 0.2rem;"> <div style="color: #333333;font-size: 0.24rem;margin-left: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 201~500人 </div> <div style="color: #333333;font-size: 0.24rem;margin-right: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 奖励2元/人 </div> </div> <div style="display: -webkit-flex;justify-content: space-between;align-items: center;height: 0.24rem;margin-top: 0.2rem;"> <div style="color: #333333;font-size: 0.24rem;margin-left: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 500~3000人 </div> <div style="color: #333333;font-size: 0.24rem;margin-right: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 奖励5元/人 </div> </div> <div style="display: -webkit-flex;justify-content: space-between;align-items: center;height: 0.24rem;margin-top: 0.2rem;"> <div style="color: #333333;font-size: 0.24rem;margin-left: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 3001以上 </div> <div style="color: #333333;font-size: 0.24rem;margin-right: 0.55rem;display: -webkit-flex;align-items: center;height: 0.24rem;"> 奖励8元/人 </div> </div> @@ -108,86 +96,99 @@ <div class="div_header"> <div class="div_header_title"> <div class="div_header_1" @click="selectTab(1)"> <p>拉新商品</p> </div> <div class="div_header_mid"> <div></div> </div> <div class="div_header_2" @click="selectTab(2)"> <p>拉新排行榜</p> </div> <div class="div_header_mid"> <div></div> </div> <div class="div_header_3" @click="selectTab(3)"> <p>拉新规则</p> </div> </div> <div class="div_header_line"> <div class="div_header_line_1"></div> <div class="div_header_line_2"></div> <div class="div_header_line_3"></div> </div> </div> <!-- 拉新商品 --> <div v-if="selectTabType==1" class="div_goodsLibraryList"> <div class="div_item_goodsLibrary" v-for="(item, index) in goodsList" @click="goodsDetail(item)"> <div class="div_goodsBG"> <img v-bind:src="item.goods.picUrl" class="goodsimg" /> <img v-bind:src="item.picUrl" class="goodsimg" /> </div> <div class="div_item_rightBg"> <div class="div_goods_title_bg"> <img v-if="item.goods.shopType==10" src="img/icon_tb.png"> <img v-else-if="item.goods.shopType==11" src="img/icon_tm.png"> <img v-else-if="item.goods.shopType==20" src="img/icon_jd.png"> <img v-else-if="item.goods.shopType==30" src="img/icon_pdd.png" style="width: 0.81rem;"> <img v-else-if="item.goods.shopType==40" src="img/icon_wph.png" style="width: 0.9rem;"> <img v-else-if="item.goods.shopType==50" src="img/icon_sn.png" style="width: 1.12rem;"> <img v-if="item.shopType==10" src="img/icon_tb.png"> <img v-else-if="item.shopType==11" src="img/icon_tm.png"> <img v-else-if="item.shopType==20" src="img/icon_jd.png"> <img v-else-if="item.shopType==30" src="img/icon_pdd.png" style="width: 0.81rem;"> <img v-else-if="item.shopType==40" src="img/icon_wph.png" style="width: 0.9rem;"> <img v-else-if="item.shopType==50" src="img/icon_sn.png" style="width: 1.12rem;"> <span v-if="item.goods.shopType==30" class="goods_title" style="text-indent: 0.93rem;">{{item.goods.title}}</span> <span v-else-if="item.goods.shopType==40" class="goods_title" style="text-indent: 1.02rem;">{{item.goods.title}}</span> <span v-else-if="item.goods.shopType==50" class="goods_title" style="text-indent: 1.24rem;">{{item.goods.title}}</span> <span v-else class="goods_title">{{item.goods.title}}</span> <span v-if="item.shopType==30" class="goods_title" style="text-indent: 0.93rem;">{{item.title}}</span> <span v-else-if="item.shopType==40" class="goods_title" style="text-indent: 1.02rem;">{{item.title}}</span> <span v-else-if="item.shopType==50" class="goods_title" style="text-indent: 1.24rem;">{{item.title}}</span> <span v-else class="goods_title">{{item.title}}</span> </div> <div v-if="item.goods.labels" class="div_goods_labels_bg"> <div v-for="(cell, indexPath) in item.goods.labels" style="margin-left: 0.1rem;"> <div v-if="item.labels" class="div_goods_labels_bg"> <div v-for="(cell, indexPath) in item.labels" style="margin-left: 0.1rem;"> <div class="div_goods_label1" :style="{color: cell.color, borderColor:cell.color}"> {{cell.content}} </div> </div> </div> <div class="div_store_bg"> <img v-if="item.goods.shopInfo" src="img/icon_store.png"> <div v-if="item.goods.shopInfo">{{item.goods.shopInfo.shopName}}</div> <img v-if="item.shopInfo" src="img/icon_store.png"> <div v-if="item.shopInfo">{{item.shopInfo.shopName}}</div> </div> <div class="div_coupon_bg"> <div v-if="item.goods.shopType!=40&&item.goods.hasCoupon" style="color: white;font-size: 0.24rem;font-weight: bold;width: 0.41rem;height: 0.36rem;background-color: #E5005C;border-radius: 0.06rem 0 0 0.06rem;text-align: center;"> <div v-if="item.shopType!=40&&item.hasCoupon" style="color: white;font-size: 0.24rem;font-weight: bold;width: 0.41rem;height: 0.36rem;background-color: #E5005C;border-radius: 0.06rem 0 0 0.06rem;text-align: center;"> 券 </div> <div v-else-if="item.goods.shopType==40" style="color: white;font-size: 0.24rem;background-color: #E5005C;border-radius: 0.06rem;line-height: 0.36rem;"> {{item.goods.discount}} <div v-else-if="item.shopType==40" style="color: white;font-size: 0.24rem;background-color: #E5005C;border-radius: 0.06rem;line-height: 0.36rem;"> {{item.discount}} </div> <div v-if="item.goods.shopType!=40&&item.goods.hasCoupon" class="coupon_money"> ￥{{item.goods.couponInfo.amount}} <div v-if="item.shopType!=40&&item.hasCoupon" class="coupon_money"> ￥{{item.couponInfo.amount}} </div> <div v-if="item.goods.hasCoupon||item.goods.shopType==40" class="fanli_title"> 返 {{item.goods.moneyInfo.fanliMoney}} </div> <div v-else class="fanli_title" style="margin-left: 0rem;"> 返 {{item.goods.moneyInfo.fanliMoney}} <div v-if="item.hasCoupon||item.shopType==40" class="fanli_title"> 返 {{item.moneyInfo.fanliMoney}} </div> <div v-else class="fanli_title" style="margin-left: 0rem;"> 返 {{item.moneyInfo.fanliMoney}} </div> <img src="img/icon_maxFan.png" style="width: 0.15rem;height: 0.22rem; margin-left: -0.22rem;"> <div v-if="item.goods.moneyInfo.maxMoney" style="color: #E5005C;font-size: 0.24rem;margin-left: -0.05rem; height: 0.36rem; background-color: #FFBBCB;border-radius: 0 0.06rem 0.06rem 0;display: -webkit-flex;align-items: center;justify-content: center;"> {{item.goods.moneyInfo.maxMoney}} <div v-if="item.moneyInfo.maxMoney" style="color: #E5005C;font-size: 0.24rem;margin-left: -0.05rem; height: 0.36rem; background-color: #FFBBCB;border-radius: 0 0.06rem 0.06rem 0;display: -webkit-flex;align-items: center;justify-content: center;"> {{item.moneyInfo.maxMoney}} </div> </div> <div class="div_payment_sales_bg"> <div>￥</div> <div v-if="item.goods.couponPrice">{{item.goods.couponPrice}}</div> <div v-else>{{item.goods.zkPrice}}</div> <div v-if="item.couponPrice">{{item.couponPrice}}</div> <div v-else>{{item.zkPrice}}</div> <div>￥{{item.goods.zkPrice}}</div> <div v-if="item.goods.shopType!=40">月销 {{item.goods.salesCount}}</div> <div>￥{{item.zkPrice}}</div> <div v-if="item.shopType!=40">月销 {{item.salesCount}}</div> </div> </div> </div> @@ -196,101 +197,115 @@ <div v-if="selectTabType==2" class="div_rewardListBG"> <div class="divItems" v-for="(item, index) in arrayReward"> <div class="contentBg_left"> <div v-if="index==0" style="color: #D7B177;" class="flag">{{item.name}}</div> <div v-else-if="index==1" style="color: #AFBCC4;" class="flag">{{item.name}}</div> <div v-else-if="index==2" style="color: #C9C73E;" class="flag">{{item.name}}</div> <div v-else-if="index>=9" style="margin-left: 0.19rem;" class="flag">{{item.name}}</div> <div v-else class="flag">{{item.name}}</div> <div v-if="index==0" style="color: #D7B177;" class="flag">{{index+1}}</div> <div v-else-if="index==1" style="color: #AFBCC4;" class="flag">{{index+1}}</div> <div v-else-if="index==2" style="color: #C9C73E;" class="flag">{{index+1}}</div> <div v-else-if="index>=9" style="margin-left: 0.19rem;" class="flag">{{index+1}}</div> <div v-else class="flag">{{index+1}}</div> <img v-if="index>=9" style="margin-left: 0.19rem;" :src="item.por" class="imgHeader"> <img v-else :src="item.por" class="imgHeader"> <img v-if="index>=9" style="margin-left: 0.19rem;" :src="item.portrait" class="imgHeader"> <img v-else :src="item.portrait" class="imgHeader"> <div class="name">昵称昵称昵称</div> <div class="name">{{item.nickName}}</div> </div> <div class="contentBg_right"> <div>￥6666.33</div> <div>{{item.money}}</div> </div> </div> </div> <div class="div_tipsBG"> <div v-show="tips" class="div_tipsBG"> <div class="tips"> 温馨提示 拉新规则 </div> <div class="content"> 1.新用户：为本活动上线后被邀请注册的用户；<br> 2.有效订单：购买本专题页中的商品，且必须是新用户的首笔订单；<br> 3.邀请人所得到的红包奖励是来自于平台补贴，且不影响团队奖金的获得；<br> 4.每个新用户仅能奖励首单，若首单不满足条件则不奖励邀请人；<br> 5.拉新奖励活动为长期持续活动，活动分为每个自然月为一个周期，每月26日结算上月的奖励，如活动临时暂停或终止平台会另行通知。<br> 6.若出现包括但不限于恶意刷取红包行为，将会不结算任何红包和返利，情节严重将封禁账户；<br> 7.本活动最终解释权归板栗快省所有。 <div class="content" v-html="tip"> <!-- {{tip}} --> </div> <div style="height: 0.31rem;"></div> </div> <div style="height: 1.1rem;"></div> <div v-show="selectTabType==1" class="loading-more"></div> <div v-if="selectTabType!=1" style="height: 1.1rem;"></div> <div v-else style="height: 0.9rem;"></div> <div class="div_Bottom"> <div class="buttonLeft" @click="viewHB"> 查看红包 </div> <div class="buttonright"> <div class="buttonright" @click="share"> 立即分享 </div> </div> <div id="share" style="display: none;"> <div class="share_title">分享活动</div> <div class="share_content"> <div class="share_content_content" onclick="shareImg(1)"> <div class="share_content_content_img"> <img src="img/icon_wx.png"> </div> <div class="share_content_content_title"> 微信好友 </div> </div> <div class="share_content_content" onclick="shareImg(2)"> <div class="share_content_content_img"> <img src="img/icon_pyq.png"> </div> <div class="share_content_content_title"> 朋友圈 </div> </div> <div class="share_content_content" onclick="shareImg(3)"> <div class="share_content_content_img"> <img src="img/icon_qq.png"> </div> <div class="share_content_content_title"> QQ好友 </div> </div> <div class="share_content_content" onclick="shareImg(4)"> <div class="share_content_content_img"> <img src="img/icon_kj.png"> </div> <div class="share_content_content_title"> QQ空间 </div> </div> </div> <div style="height: 1px; background-color: #D0D0D0; margin-top: 0.37rem;"></div> <div class="div_cancel" onclick="cancelShare()">取消</div> </div> </div> </body> <script src="js/load.js"></script> <script> // "http://api.flqapp.com"; http://192.168.1.253:8080 var host = "http://192.168.1.253:8080"; var spaceTop = 0; var scrollDistance = 0; var spaceTop = 0; //选项卡距离顶部位置 var scrollDistance = 0; //滚动距离 var layerIndex; var app = null; $(function() { var app = new Vue({ app = new Vue({ el: "#root", data: { tip: '', page: 1, imgUrl: '', selectTabType: 1, goodsList: [{ goods: { labels: [], rewardList: [{}, {} ] } }], arrayReward: [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' }, { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' } ] rule: {}, goodsList: [], arrayReward: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}] }, watch: { goodsList: function(val) { @@ -317,17 +332,27 @@ $('.div_header').css('border-bottom', ' #E0E0E0 solid 1px'); $('.div_headertabs_xf').css('border-bottom', ' #E0E0E0 solid 1px'); $('.div_tipsBG').css('margin-top', '0.26rem'); app.fetchRankList(); app.tips = false; k } else if (type == 1) { $('.div_header').css('border-bottom', ' #E0E0E0 solid 0px'); $('.div_headertabs_xf').css('border-bottom', ' #E0E0E0 solid 0px'); $('.div_tipsBG').css('margin-top', '0.36rem'); app.fetchGoodsList(); app.tips = false; } else { $('.div_header').css('border-bottom', ' #E0E0E0 solid 0px'); $('.div_headertabs_xf').css('border-bottom', ' #E0E0E0 solid 0px'); $('.div_tipsBG').css('margin-top', '0.36rem'); $('.div_tipsBG').css('margin-top', '0.24rem'); app.tips = true; } }, viewHB: function() { var uid = yesApp.getUid(); if (uid == null || uid.length == 0 || uid == '0') { if (uid == null || uid.length == 0 || uid == '0' || uid == '') { yesApp.login(); return; } @@ -340,28 +365,130 @@ } yesApp.jumpPage(jumpDetail, null); }, // 发单商品库 fetchGoodsList: function() { yesApp.showLoading(); share: function() { var uid = yesApp.getUid(); if (uid == null || uid.length == 0 || uid == '0' || uid == '') { yesApp.login(); return; } yesApp.showLoading(); var params = { uid: uid, page: 1 }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/v2/user/cloud/getGoodsList", url: host + "/fanli/api/apph5/v1/pullNew/getShareImg", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { app.imgUrl = result.data.imgUrl; app.openShare(); } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); }, openShare: function() { layerIndex = layer.open({ type: 1, content: $("#share").html(), anim: 'up', style: 'position:fixed; bottom:0; left:0; width: 100%; height: 3.4rem; padding:0 0; border:none;background-color: white' }); }, // 拉新商品列表 fetchGoodsList: function() { yesApp.showLoading(); var uid = yesApp.getUid(); if (uid == null || uid.length == 0 || uid == '') { uid = 0; } var params = { uid: uid, page: app.page }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/apph5/v1/pullNew/getGoodsList", dataType: "jsonp", async: false, success: function(result) { load.hidden(); yesApp.hideLoading(); if (result.code == 0) { if (app.page == 1) { app.goodsList = new Array(); app.rule = result.data.rule; var reg = new RegExp("\n", "g"); app.tip = result.data.tip.replace(reg, "<br/>"); } app.page += 1; app.count = result.data.count; var list = app.goodsList.concat(result.data.list); app.goodsList = list; if (app.count <= app.goodsList.length) { load.noMore(); } } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); }, fetchRankList: function() { yesApp.showLoading(); var uid = yesApp.getUid(); if (uid == null || uid.length == 0 || uid == '') { uid = 0; } var params = { uid: uid, }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/apph5/v1/pullNew/getRankList", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { app.arrayReward = result.data.list; } else { yesApp.toast(result.msg); @@ -379,27 +506,27 @@ goodsDetail: function(goods) { var activity = null; var controller = null; var goodsType = goods.goods.goodsType; var goodsId = goods.goods.goodsId; var goodsType = goods.goodsType; var goodsId = goods.goodsId; var fromString = '云发单'; if (goods.goods.goodsType == 1) { if (goods.goodsType == 1) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityTB'; controller = 'GoodDeTrViewController'; } else if (goods.goods.goodsType == 2) { } else if (goods.goodsType == 2) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityJD'; controller = 'JDGoodsDetailController'; } else if (goods.goods.goodsType == 3) { } else if (goods.goodsType == 3) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityPDD'; controller = 'PDDGoodsDetailController'; } else if (goods.goods.goodsType == 4) { } else if (goods.goodsType == 4) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivityVIP'; controller = 'WPHGoodsDetailController'; } else if (goods.goods.goodsType == 5) { } else if (goods.goodsType == 5) { activity = 'com.yeshi.ec.rebate.myapplication.ui.recommend.GoodsDetailActivitySuning'; controller = 'SNGoodsDetailController'; } @@ -415,49 +542,12 @@ } yesApp.jumpPage(jumpDetail, params); }, // 删除商品 deleteListGoods: function(indexpath, deleteId) { yesApp.showLoading(); var uid = yesApp.getUid(); var params = { uid: uid, id: deleteId }; params = yesApp.getRequestBaseParams(params); $.ajax({ type: "GET", data: JSON.parse(params), url: host + "/fanli/api/v2/user/cloud/deleteGoods", dataType: "jsonp", async: false, success: function(result) { yesApp.hideLoading(); if (result.code == 0) { var list = app.goodsList; list.splice(indexpath, 1); app.goodsList = list; } else { yesApp.toast(result.msg); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { yesApp.hideLoading(); if (textStatus === 'timeout') { setTimeout(function() {}, 2000); } } }); } } }); app.fetchGoodsList(); }); spaceTop = $('.div_header').offset().top; //yesApp.toast('spaceTop:' + spaceTop) spaceTop = $('.div_header').offset().top + 160; $(window).scroll(function() { scrollDistance = $(window).scrollTop(); if (scrollDistance >= spaceTop) { @@ -466,6 +556,71 @@ } else { $('.div_headertabs_xf').css('display', 'none') } if (app.selectTabType == 1) { if (Math.abs(getScrollHeight() - getDocumentTop() - getWindowHeight()) < 10) { if (load.isLoading() || (app.page > 1 && app.count <= app.goodsList.length)) { return; } load.show(); setTimeout(function() { app.fetchGoodsList(); }, 300); } } }); }); function cancelShare() { layer.close(layerIndex); } function shareImg(type) { yesApp.shareImg(type, app.imgUrl); layer.close(layerIndex); } //（浏览器窗口上边界内容高度） function getDocumentTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; console.log("scrollTop:" + scrollTop); return scrollTop; } //可视窗口高度（屏幕可以看见的高度） function getWindowHeight() { var windowHeight = 0; if (document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } console.log("windowHeight:" + windowHeight); return windowHeight; } //滚动条滚动高度（即整个网页的高度） function getScrollHeight() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if (document.body) { bodyScrollHeight = document.body.scrollHeight; } if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; console.log("scrollHeight:" + scrollHeight); return scrollHeight; } </script> </html> AppInside/rewardNew/js/layer.js
New file @@ -0,0 +1,2 @@ /*! layer mobile-v2.0 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ ;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layui-m-layer"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'<h3 style="'+(a?c.title[1]:"")+'">'+(a?c.title[0]:c.title)+"</h3>":""}(),j=function(){"string"==typeof c.btn&&(c.btn=[c.btn]);var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a='<span yes type="1">'+c.btn[0]+"</span>",2===b&&(a='<span no type="0">'+c.btn[1]+"</span>"+a),'<div class="layui-m-layerbtn">'+a+"</div>"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(c.content||"")+"</p>"),c.skin&&(c.anim="up"),"msg"===c.skin&&(c.shade=!1),f.innerHTML=(c.shade?"<div "+("string"==typeof c.shade?'style="'+c.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(c.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(c.skin?"layui-m-layer-"+c.skin+" ":"")+(c.className?c.className:"")+" "+(c.anim?"layui-m-anim-"+c.anim:"")+'" '+(c.style?'style="'+c.style+'"':"")+">"+g+'<div class="layui-m-layercont">'+c.content+"</div>"+j+"</div></div></div>",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time));var e=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var f=b[d]("layui-m-layerbtn")[0].children,h=f.length,i=0;h>i;i++)g.touch(f[i],e);if(a.shade&&a.shadeClose){var j=b[d]("layui-m-layershade")[0];g.touch(j,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"2.0",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css?2.0",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window); AppInside/rewardNew/js/load.js
New file @@ -0,0 +1,91 @@ var load = { init: function() { if ($(".loading-more").length <= 0) { return; } $(".loading-more").css("visibility", "hidden"); $(".loading-more").empty(); $(".loading-more").css("display", "flex"); $(".loading-more").css("justify-content", "center"); $(".loading-more").css("align-items", "center"); $(".loading-more").css("height", "0.8rem"); $(".loading-more").css("font-size", "0"); $(".loading-more").append("<div class='loading'>"); for (var i = 1; i < 13; i++) { // alert('2'); $(".loading").append("<div><span class='k'></span><span class='s'></span></div>"); } $(".loading-more").append( "<div class='notifyContent' style='display:inline;font-size:0.3rem;margin-left:0.2rem;color:#999999'>正在加载更多数据</div>" ) }, show: function(msg) { if (msg != null && msg.length > 0) $(".loading-more").find("div").eq(1).html(msg); $(".loading-more").css("visibility", "visible"); }, hidden: function() { $(".loading-more").css("visibility", "hidden"); }, isLoading: function() { var visibility = $(".loading-more").css("visibility"); if ("hidden" == visibility) return false; else return true; }, noMore: function() { $(".loading-more .notifyContent").html("没有更多了"); $(".loading-more").find(".loading").css("display", "none"); $(".loading-more").css("visibility", "visible"); }, showMore: function(element, callBack) { if (Math.abs(load.getScrollHeight() - load.getDocumentTop() - load.getWindowHeight()) < 10) { if (load.isLoading()) return; load.show(); setTimeout(function() { callBack(); }, 300); } }, getDocumentTop: function() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; console.log("scrollTop:" + scrollTop); return scrollTop; }, getWindowHeight: function() { var windowHeight = 0; if (document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } console.log("windowHeight:" + windowHeight); return windowHeight; }, getScrollHeight: function() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if (document.body) { bodyScrollHeight = document.body.scrollHeight; } if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; console.log("scrollHeight:" + scrollHeight); return scrollHeight; } }; load.init();
