zhaojs
2023-07-31 848a169221668413691f44e1fcbd219e32c1431c
public/html/freebuy.html
@@ -40,10 +40,7 @@
            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;
@@ -55,12 +52,14 @@
        .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%;
@@ -158,7 +157,7 @@
        .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%;margin-top: 0.6rem;
            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;
@@ -234,7 +233,6 @@
    .sort {
        background-color: #ea2424;
        border-radius: .2rem .2rem 0 0;
        margin-top: 0.8rem;
        }
.sort-list {
@@ -285,20 +283,44 @@
.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 id="appMain" >
    <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}"
@@ -349,6 +371,8 @@
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
   
</div>
    </div>
</div>
</body>
@@ -410,16 +434,105 @@
            activeTwo:undefined,
            loading:true,
            isUniReady:false,
            plat:'dy',
            posturl:"http://dfg.shop.com"
            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({
@@ -431,23 +544,13 @@
                } */
            },
            handleSort: function(item) {
                if(this.sortNumber == item.number) {
                    if(item.min === item.max) {
                    return;
                    }
                    if(item.bool) {
                    this.sortId = item.min;
                    item.bool = false;
                    } else {
                    this.sortId = item.max;
                    item.bool = true;
                    }
                } else {
                    item.bool = true;
                if(this.sortNumber != item.number) {
                    this.loading=true;
                    this.lists=[];
                    this.getgoodsSwitch(item.number);
                    this.sortNumber = item.number;
                    this.sortId = item.max;
                    this.plat=item.number;
                }
                this.getgoodsSwitch(item.number);
            },
            getUrlPar:function(name)
            {
@@ -456,6 +559,23 @@
                if(r !=null)return unescape(r[2]);
                 return null;
            },
             //获取京东商品
             getJdGoodsList:function(){
                var _this=this;
                $.ajax({
                            headers:{
                                "token":_this.getUrlPar("token")
                            },
                            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;
@@ -463,15 +583,13 @@
                            headers:{
                                "token":_this.getUrlPar("token")
                            },
                            url:_this.posturl+'/api/taoke/get_first_free_dy_goods',
                            url:'/api/taoke/get_first_free_dy_goods',
                            type:"post",
                                dataType:"json",
                            data:{
                                page: 1,
                                pageSize:40,
                            }
                            }).done(function(res){
                            _this.lists=[].concat(_this.lists,res.data.list);
                            _this.lists=[].concat([],res.data.list);
                            _this.loading = false;
                     })
            },
@@ -483,7 +601,7 @@
                            headers:{
                                "token":_this.getUrlPar("token")
                            },
                            url:_this.posturl+'/api/taoke/get_first_free_goods',
                            url:'/api/taoke/get_first_free_goods',
                            type:"post",
                                dataType:"json",
                            data:{
@@ -491,7 +609,7 @@
                                pageSize:40,
                            }
                            }).done(function(res){
                            _this.lists=[].concat(_this.lists,res.data.list);
                            _this.lists=[].concat([],res.data.list);
                            _this.loading = false;
                     })
            },
@@ -499,11 +617,14 @@
                {
                    switch(plat)
                        {
                        case "tb":
                            case "tb":
                                this.getTbGoodsList();
                                break;
                            case "dy":
                                this.getDyGoodsList();
                                break;
                            case"jd":
                                this.getJdGoodsList();
                                break;
                        }
                },
@@ -516,7 +637,7 @@
                    headers:{
                        "token":_this.getUrlPar("token")
                    },
                   url:_this.posturl+'/api/user/check_isfirst_free',
                   url:'/api/user/check_isfirst_free',
                   type:"post",
                    dataType:"json",
                    data:{
@@ -548,6 +669,7 @@
        mounted: function () {
            this.getIsSd();
            var that=this;
            this.touch();
            document.addEventListener('UniAppJSBridgeReady', function() {
            that.isUniReady=true;
            });