| | |
| | | margin: auto; max-width: 800px; font-size: .28rem; overflow: hidden; position: relative; z-index: 1; |
| | | overflow: hidden; |
| | | } |
| | | #appMain:before { |
| | | content: "";display: block;position: absolute;top: 0;left: -20%;height: 3.88rem;width: 140%;background: linear-gradient(90deg,#fbe7e2,#fbe7e2) no-repeat;background-size: 100%; |
| | | border-radius: 0 0 50% 50%;z-index: -1; |
| | | } |
| | | |
| | | |
| | | .h3bt { |
| | | width: 1.66rem; |
| | |
| | | .act_header{ |
| | | z-index: 200; width: 100%; background: no-repeat top; background-size: 100% auto; |
| | | display: flex; align-items: center; justify-content: space-between; |
| | | position: fixed;background: linear-gradient(90deg, #fbe7e2 0%, #fbe7e2 100%) 0% 0% / 100%; |
| | | background: linear-gradient(#FF451F, #fbe7e2); |
| | | color: #fff; |
| | | max-width: 800px; |
| | | } |
| | | .act_header .centent{ |
| | | text-align: center; |
| | | |
| | | padding-top: 0.6rem; |
| | | } |
| | | .act_header .centent img{ |
| | | width:100%; |
| | |
| | | |
| | | |
| | | .list-section{ |
| | | display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;padding: 0 1.87%; |
| | | display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;padding: 0 1.87%;margin-top: 0.05rem; |
| | | } |
| | | .list-section .listTmp{ |
| | | width: 49%;background: #fff;border-radius: .08rem;margin-bottom: .14rem;box-sizing: border-box; |
| | |
| | | center center no-repeat; |
| | | background-size: 2.4rem auto; |
| | | } |
| | | |
| | | .sort { |
| | | background-color: #ea2424; |
| | | border-radius: .2rem .2rem 0 0; |
| | | } |
| | | |
| | | .sort-list { |
| | | display: flex; |
| | | border-bottom: .02rem solid #eb3a15; |
| | | color: #ff8f78; |
| | | justify-content: space-between |
| | | } |
| | | |
| | | .sort-list>li { |
| | | width: 25%; |
| | | font-size: .26rem; |
| | | font-weight: 500; |
| | | color: #ff8f78; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: .24rem 0 |
| | | } |
| | | |
| | | .sort-list>li.sort-active { |
| | | color: #fff |
| | | } |
| | | |
| | | .sort-list>li span { |
| | | position: relative; |
| | | height: .16rem; |
| | | margin-left: .06rem |
| | | } |
| | | |
| | | .sort-list>li span i { |
| | | position: absolute; |
| | | width: 0; |
| | | height: 0; |
| | | border-color: #b92709 transparent transparent; |
| | | border-style: solid; |
| | | border-width: .06rem .06rem 0 |
| | | } |
| | | |
| | | .sort-list>li span i:first-child { |
| | | transform: rotate(180deg) |
| | | } |
| | | |
| | | .sort-list>li span i:nth-child(2) { |
| | | bottom: 0 |
| | | } |
| | | |
| | | .sort-list>li span i.arrow-active { |
| | | border-color: #f2f2f2 transparent transparent |
| | | } |
| | | .appback |
| | | { |
| | | height: 0.5rem; |
| | | position: absolute; |
| | | top: 0.5rem; |
| | | left: 0.4rem; |
| | | } |
| | | .appback-img |
| | | { |
| | | height: 100%; |
| | | } |
| | | .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%; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body > |
| | | <body style="background: #fbe7e2;"> |
| | | <div class="box"> |
| | | <div class="list"> |
| | | <div id="appMain" > |
| | | <div class="appback"> |
| | | <image v-on:click="topBack()" class="appback-img" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5return_backIcon.png"></image> |
| | | </div> |
| | | <header class="act_header"> |
| | | <div></div> |
| | | <div class="centent"><img src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/xinrengoubanner.png" alt=""></div> |
| | | <div class="share"> |
| | | <!-- <a href="">分享</a> --> |
| | | </div> |
| | | </header> |
| | | |
| | | <div :style="{ height: (twoNav && twoNav.length > 0) ? '2.3rem' : '2.3rem'}"></div> |
| | | <div class="sort"> |
| | | <ul class="sort-list"> |
| | | <li v-for="item in fristOrderSort" v-bind:class="{'sort-active': item.number == sortNumber}" |
| | | v-on:click="handleSort(item)"> |
| | | {{ item.name }} |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <div v-if="loading" v-else class="loading">加载中...</div> |
| | | |
| | | |
| | | <div v-else style="min-height: 100vh; background: #fbe7e2;" class=" swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-free-mode swiper-container-ios"> |
| | | <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);"> |
| | | <div class="swiper-slide list-section"> |
| | | <div class="listTmp " v-for="(data,key) in lists" :key="key" v-on:click="targetItem(data)"> |
| | | <div class="productImg"> |
| | | <img :src="data.mainPic + '_310x310.jpg'" class="fadeIn " height="200" width="200"> |
| | | <img :src="data.mainPic + (plat=='tb'?'_310x310.jpg':'')" class="fadeIn " height="200" width="200"> |
| | | </div> |
| | | <div class="productInfo"> |
| | | |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | goodsList:[], |
| | | robbingNum:0, |
| | | }, |
| | | sortNumber:'tb', |
| | | sortId:0, |
| | | fristOrderSort: [ |
| | | { |
| | | name: "淘宝", |
| | | bool: true, |
| | | max: "", |
| | | min: "", |
| | | number: 'tb' |
| | | }, |
| | | { |
| | | name: "抖音", |
| | | bool: true, |
| | | max: "", |
| | | min: "", |
| | | number: 'dy' |
| | | }, |
| | | { |
| | | name: "京东", |
| | | bool: true, |
| | | max: "", |
| | | min: "", |
| | | number: 'jd' |
| | | } |
| | | ], |
| | | goodsItem: [], |
| | | lists:[], |
| | | nav:[], |
| | |
| | | twoNav:false, |
| | | activeTwo:undefined, |
| | | loading:true, |
| | | isUniReady:false |
| | | isUniReady:false, |
| | | plat:'tb', |
| | | //posturl:"http://dfg.shop.com" |
| | | //posturl:"http://appapitest.ushopvip.com" |
| | | //posturl:"http://dfgapp.ushopvip.com" |
| | | }, |
| | | methods: { |
| | | |
| | | topBack:function() |
| | | { |
| | | uni.postMessage({ |
| | | data: { |
| | | action: 'back' |
| | | } |
| | | }); |
| | | }, |
| | | 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) |
| | | } |
| | | }) |
| | | }, |
| | | Infoformat: function(info){ |
| | | info = info.replace(/\%/g,"%25") |
| | | info = info.replace(/\#/g,"%23") |
| | | info = info.replace(/\&/g,"%26") |
| | | info = info.replace(/\?/g,"%3F") |
| | | return info; |
| | | }, |
| | | targetItem:function(item){ |
| | | uni.navigateTo({ |
| | | url: '/pages/goods/goodsDetail?id=' + item.goodsId+'&frompage=freebuy' |
| | | }); |
| | | switch(this.plat) |
| | | { |
| | | case "tb": |
| | | uni.navigateTo({ |
| | | url: '/pages/goods/goodsDetail?id=' + item.goodsId+'&frompage=freebuy' |
| | | }); |
| | | break; |
| | | case "dy": |
| | | case "jd": |
| | | var itemsStr=this.Infoformat(JSON.stringify(item)); |
| | | uni.navigateTo({ |
| | | url: '/pages/goods/goodsDetail?sourcefrom=freebuy&info=' + itemsStr+'&frompage=freebuy' |
| | | }); |
| | | break; |
| | | } |
| | | |
| | | /* if(this.isUniReady) |
| | | { |
| | | uni.postMessage({ |
| | |
| | | }); |
| | | } */ |
| | | }, |
| | | |
| | | handleSort: function(item) { |
| | | if(this.sortNumber != item.number) { |
| | | this.loading=true; |
| | | this.lists=[]; |
| | | this.getgoodsSwitch(item.number); |
| | | this.sortNumber = item.number; |
| | | this.plat=item.number; |
| | | } |
| | | }, |
| | | getUrlPar:function(name) |
| | | { |
| | | var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); |
| | |
| | | if(r !=null)return unescape(r[2]); |
| | | return null; |
| | | }, |
| | | getGoodsList:function(){ |
| | | var _this = this; |
| | | this.loading=true; |
| | | //判断是否首单 |
| | | //获取京东商品 |
| | | getJdGoodsList:function(){ |
| | | var _this=this; |
| | | $.ajax({ |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | //url:'http://dfg.shop.com/index.php/api/user/check_isfirst_free', |
| | | url:'http://dfgapp.ushopvip.com/api/user/check_isfirst_free', |
| | | //url:'http://appapitest.ushopvip.com/api/user/check_isfirst_free', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | | } |
| | | }).done(function(res){ |
| | | if(res.msg.info==1) |
| | | { |
| | | $.ajax({ |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | //url:'http://dfg.shop.com/index.php/api/taoke/get_first_free_goods', |
| | | //url:'http://dfgapp.ushopvip.com/api/taoke/get_first_free_goods', |
| | | url:'http://appapitest.ushopvip.com/api/taoke/get_first_free_goods', |
| | | url:'/api/taoke/get_first_free_jd_goods', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | | } |
| | | }).done(function(res){ |
| | | _this.lists=[].concat([],res.data.list); |
| | | _this.loading = false; |
| | | }) |
| | | }, |
| | | //获取抖音商品 |
| | | getDyGoodsList:function(){ |
| | | var _this=this; |
| | | $.ajax({ |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | url:'/api/taoke/get_first_free_dy_goods', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | | } |
| | | }).done(function(res){ |
| | | _this.lists=[].concat([],res.data.list); |
| | | _this.loading = false; |
| | | }) |
| | | }, |
| | | //获取淘宝商品 |
| | | getTbGoodsList:function() |
| | | { |
| | | var _this=this; |
| | | $.ajax({ |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | url:'/api/taoke/get_first_free_goods', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | |
| | | pageSize:40, |
| | | } |
| | | }).done(function(res){ |
| | | _this.lists=[].concat(_this.lists,res.data.list); |
| | | _this.lists=[].concat([],res.data.list); |
| | | _this.loading = false; |
| | | }) |
| | | }, |
| | | getgoodsSwitch:function(plat) |
| | | { |
| | | switch(plat) |
| | | { |
| | | case "tb": |
| | | this.getTbGoodsList(); |
| | | break; |
| | | case "dy": |
| | | this.getDyGoodsList(); |
| | | break; |
| | | case"jd": |
| | | this.getJdGoodsList(); |
| | | break; |
| | | } |
| | | }, |
| | | //是否首单 |
| | | getIsSd:function(){ |
| | | var _this = this; |
| | | this.loading=true; |
| | | //判断是否首单 |
| | | $.ajax({ |
| | | headers:{ |
| | | "token":_this.getUrlPar("token") |
| | | }, |
| | | url:'/api/user/check_isfirst_free', |
| | | type:"post", |
| | | dataType:"json", |
| | | data:{ |
| | | |
| | | } |
| | | }).done(function(res){ |
| | | if(res.msg.info==1) |
| | | { |
| | | _this.getgoodsSwitch(_this.plat); |
| | | } |
| | | else{ |
| | | alert("您已下过首单,不可再次购买,请浏览其他商品吧~"); |
| | |
| | | }, 1000 ) |
| | | } |
| | | }) |
| | | |
| | | |
| | | }, |
| | | }, |
| | | |
| | | mounted: function () { |
| | | this.getGoodsList(); |
| | | this.getIsSd(); |
| | | var that=this; |
| | | this.touch(); |
| | | document.addEventListener('UniAppJSBridgeReady', function() { |
| | | that.isUniReady=true; |
| | | }); |