| | |
| | | appKey: 'bkuibk',//此处替换成用户appKey |
| | | jumpGoodsUrl: function (items,sourceType) { //默认直接转链 |
| | | var url=''; |
| | | if(sourceType=="jd") |
| | | if(sourceType=="jd"||sourceType=="pdd"||sourceType=="dy") |
| | | { |
| | | var itemsStr=Infoformat(JSON.stringify(items)); |
| | | url='/pages/goods/goodsDetail?sourcefrom=fqb&info=' + encodeURIComponent(itemsStr) |
| | |
| | | } |
| | | }; |
| | | function Infoformat(info){ |
| | | let formatObj = info.replace(/\%/g,"%25") |
| | | formatObj = info.replace(/\#/g,"%23") |
| | | formatObj = info.replace(/\&/g,"%26") |
| | | formatObj = info.replace(/\?/g,"%3F") |
| | | return formatObj; |
| | | info = info.replace(/\%/g,"%25") |
| | | info = info.replace(/\#/g,"%23") |
| | | info = info.replace(/\&/g,"%26") |
| | | info = info.replace(/\?/g,"%3F") |
| | | return info; |
| | | } |
| | | </script> |
| | | <style> |
| | |
| | | a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:transparent;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-family:Arial,PingFang SC,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none} |
| | | .list-container{ |
| | | position: relative; |
| | | padding-top: 10px; |
| | | padding-top: 0.7rem; |
| | | } |
| | | .top-bg{ |
| | | width: 100%;position: absolute;top:0; |
| | |
| | | height: .4rem;background: rgba(255,129,70,.9);border-radius: .2rem;display: table;margin: .3rem auto;padding: 0 .2rem;font-size: .22rem;color: #fff;line-height: .4rem; |
| | | } |
| | | .list-container .topThree{ |
| | | display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center; |
| | | display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center; margin-top: .3rem; |
| | | } |
| | | .list-container .topThree>div { |
| | | width: 2.2rem;height: 3.4rem;background: #fff;border-radius: .14rem;padding: .1rem;position: relative; |
| | |
| | | font-weight: 500;color: #fff;line-height: .65rem;text-align: center; |
| | | } |
| | | .list-container .card-block{ |
| | | padding-top: 15px; |
| | | |
| | | } |
| | | .sys{ |
| | | width: 100%; |
| | |
| | | font-size: .35rem; |
| | | color: #333; |
| | | } |
| | | .contscore |
| | | { |
| | | overflow:scroll; |
| | | height: 80vh; |
| | | } |
| | | .box |
| | | { |
| | | position:absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif) no-repeat fixed top; |
| | | background-size: 70px 70px; |
| | | } |
| | | .list{ |
| | | position: relative; |
| | | top: 0; |
| | | width: 100%; |
| | | } |
| | | .reloadbg |
| | | { |
| | | display: flex; |
| | | justify-content: center; |
| | | height: 1.3rem; |
| | | } |
| | | .appback |
| | | { |
| | | height: 0.5rem; |
| | | position: absolute; |
| | | left: 0.4rem; |
| | | z-index: 999; |
| | | top:0.2rem; |
| | | } |
| | | .appback-img |
| | | { |
| | | height: 100%; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body style="padding-top:30px"> |
| | | |
| | | <body> |
| | | <div class="box"> |
| | | |
| | | <div class="list" id="fqList"> |
| | | <!-- <div class="appback"> |
| | | <image @click="topBack()" class="appback-img" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5return_backIcon.png"></image> |
| | | </div> --> |
| | | <img src="https://jpdy.ffquan.cn/static/header_bg.12963398.png" class="top-bg" alt=""> |
| | | |
| | | <div class="list-container" id="fqList"> |
| | | <div class="list-container"> |
| | | <div v-if="loading" class="loading"> |
| | | <span>加载中...</span> |
| | | </div> |
| | |
| | | |
| | | <div class="swiper-container card-block"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="swiper-slide swiper-no-swiping"> |
| | | <div class="swiper-slide swiper-no-swiping contscore"> |
| | | <div class="topThree"> |
| | | <div v-for="(item,index) in goodsList" :key = "index" v-if="index==1" @click="handleCdetailFavorite(item)"> |
| | | <a> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </body> |
| | | |
| | | <script> |
| | |
| | | ss:0, |
| | | cid:0, |
| | | type:1, |
| | | //posturl:'http://dfg.shop.com', |
| | | //posturl:'http://dfg.shop.com', |
| | | // posturl:'http://dfgapp.ushopvip.com', |
| | | posturl:'http://appapitest.ushopvip.com', |
| | | //posturl:'http://appapitest.ushopvip.com', |
| | | platlist:[ |
| | | { |
| | | id:"tb", |
| | |
| | | } |
| | | ], |
| | | platid:'tb', |
| | | scrollTop: 0, |
| | | canScroll: false, |
| | | nowPage:1, |
| | | loadData:false |
| | | }, |
| | | onload(options){ |
| | | console.log(options); |
| | | }, |
| | | onReachBottom(){ |
| | | console.log("到底了111"); |
| | | }, |
| | | methods:{ |
| | | topBack:function() |
| | | { |
| | | uni.postMessage({ |
| | | data: { |
| | | action: 'back' |
| | | } |
| | | }); |
| | | }, |
| | | getItemDetail:function(items) |
| | | { |
| | | var _this = this; |
| | |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | url:_this.posturl+'/api/Activity/fqb_goods_detail', |
| | | url:'/api/Activity/fqb_goods_detail', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | |
| | | _config.jumpGoodsUrl(res.data,_this.platid); |
| | | }) |
| | | }, |
| | | touch:function() |
| | | { |
| | | const box = document.querySelector('.box') |
| | | const list = document.querySelector('.list'); |
| | | // 按下屏幕的位置 |
| | | let touchStartPosition = 0 |
| | | |
| | | // touchstart事件 |
| | | box.addEventListener('touchstart', function (e) { |
| | | let touch = e.touches[0] |
| | | touchStartPosition = touch.pageY |
| | | }) |
| | | // touchmove事件 |
| | | box.addEventListener('touchmove', function (e) { |
| | | |
| | | let touch = e.touches[0] |
| | | // 列表的top值等于列表相对于box的偏移量+滑动的距离 |
| | | let pySize= list.offsetTop + touch.pageY - touchStartPosition; |
| | | if(pySize>=110) |
| | | { |
| | | return; |
| | | } |
| | | if(pySize<0) |
| | | { |
| | | return; |
| | | } |
| | | var scroll = document.getElementsByClassName('contscore') |
| | | var srollPos = $('.contscore').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) |
| | | if(srollPos>0) |
| | | { |
| | | return; |
| | | } |
| | | list.style.top =pySize + 'px'; |
| | | // 实现平滑的滑动 |
| | | touchStartPosition = touch.pageY |
| | | }) |
| | | // touchend事件 |
| | | box.addEventListener('touchend', function (e) { |
| | | let top = list.offsetTop |
| | | if (top > 70) { |
| | | // 在此处调用刷新后的回调 |
| | | console.log('刷新'); |
| | | location.reload(); |
| | | } |
| | | if(top<0) |
| | | { |
| | | list.style.top=0; |
| | | } |
| | | if (top > 0) { |
| | | // 通过定时器平滑的将list的top = 0 |
| | | let timer = setInterval(() => { |
| | | top=top-5; |
| | | list.style.top = top + 'px' |
| | | if (top <= 0) { |
| | | list.style.top=0; |
| | | clearInterval(timer) |
| | | } |
| | | },1) |
| | | } |
| | | }) |
| | | }, |
| | | scrollLoad: function() { |
| | | // |
| | | var _this = this; |
| | | var range = 800; //距下边界长度/单位px |
| | | var totalheight = 0; |
| | | $('.contscore').scroll(function() { |
| | | var scroll = document.getElementsByClassName('contscore') |
| | | var srollPos = $('.contscore').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) |
| | | totalheight = parseFloat($('.contscore').height()) + parseFloat(srollPos); |
| | | _this.scrollTop = srollPos |
| | | var scrollH = scroll[0].scrollHeight |
| | | // debugger |
| | | // console.log('scrollH - range',scrollH - range,'srollPos',srollPos) |
| | | if (scrollH - range <= srollPos) { |
| | | if (_this.canScroll&&_this.platid!='tb') { |
| | | _this.canScroll = false; |
| | | _this.loadData = true; |
| | | _this.nowPage++; |
| | | _this.getGoodsList(_this.cid); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | handleCdetailFavorite: function (items) { |
| | | if(_config.jumpGoodsUrl){ |
| | | |
| | | if(this.platid!="tb") |
| | | switch(this.platid) |
| | | { |
| | | this.getItemDetail(items); |
| | | case "tb": |
| | | case "pdd": |
| | | case "dy": |
| | | _config.jumpGoodsUrl(items,this.platid); |
| | | break; |
| | | case "jd": |
| | | this.getItemDetail(items); |
| | | break; |
| | | } |
| | | else{ |
| | | _config.jumpGoodsUrl(items,this.platid); |
| | | } |
| | | |
| | | } |
| | | return; |
| | | var params = { |
| | |
| | | }) |
| | | }, |
| | | chooseCate:function(index,cid,type){//选择分类 |
| | | mySwiper.slideTo(index-2, 1000, false) |
| | | mySwiper.slideTo(index-2, 1000, false); |
| | | this.nowPage=1; |
| | | this.goodsList=[]; |
| | | this.actIndex = index; |
| | | this.getGoodsList(cid,type) |
| | | this.cid = cid; |
| | |
| | | choosePlat:function(index,id) |
| | | {//选择平台 |
| | | this.platid = id; |
| | | this.goodsList=[]; |
| | | this.getCateList(); |
| | | }, |
| | | getCateList:function(){//获取分类列表 |
| | | var _this = this; |
| | | //_this.loading=true; |
| | | this.nowPage=1; |
| | | if(this.platid=='tb') |
| | | { |
| | | $.ajax({ |
| | |
| | | headers:{ |
| | | "token":this.getUrlPar("token") |
| | | }, |
| | | url:this.posturl+'/api/Activity/fqb_plat_cate', |
| | | url:'/api/Activity/fqb_plat_cate', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | |
| | | headers:{ |
| | | "token":this.getUrlPar("token") |
| | | }, |
| | | url:this.posturl+'/api/Activity/fqn_goods_list', |
| | | url:'/api/Activity/fqn_goods_list', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | |
| | | cid:cid, |
| | | type:type, |
| | | app_key: _config.appKey, |
| | | mainid:_this.nowPage |
| | | } |
| | | }).done(function(res){ |
| | | _this.loading=false; |
| | | if(res.code == 0){ |
| | | _this.goodsList =_this.platid=='tb'? res.data.data.data:res.data; |
| | | var resdata=_this.platid=='tb'? res.data.data.data:res.data; |
| | | _this.goodsList=_this.goodsList.concat(resdata); |
| | | if(resdata&&resdata.length>0) |
| | | { |
| | | _this.canScroll=true; |
| | | } |
| | | else{ |
| | | _this.canScroll=false; |
| | | } |
| | | // _this.sys = (res.data.data && res.data.data.sys) ? res.data.data.sys : null; |
| | | } |
| | | else { |
| | |
| | | mounted:function(){ |
| | | this.getCateList(); |
| | | this.cateRender(); |
| | | this.scrollLoad(); |
| | | this.touch(); |
| | | // this.getDateNow(); |
| | | //this.getGoodsList(); |
| | | // this.getNowTime(); |