zhaojs
2023-06-09 9df5e4341a95c35b00e651d49ff789576f28e897
public/html/freebuy.html
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,413 @@
<!--
 * @Author: your name
 * @Date: 2021-02-26 14:25:42
 * @LastEditTime: 2021-10-20 16:31:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /www/dtk_static_www_user_center/html/单页html/首页.html
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script type="text/javascript" src="https://public.ffquan.cn/lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/vue-lazyload.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/taobaoCode/taobaoCode.js?v=1.2.1"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/clipboard.min.js"></script>
    <script type="text/javascript" src="https://img.ushopvip.com/js/uni-webview-js.js"></script>
    <title>新人专享</title>
    <script>
        var _config = {
            appKey: 'emkhhs',//此处替换成用户appKey
            // éœ€è¦è‡ªè¡ŒæŽ¥å…¥ç‚¹å‡»å•†å“åŽçš„逻辑 ï¼ˆéžå¿…填)
            // jumpGoodsUrl: function (items) {   // æ›¿æ¢ä¸ºè¯¦ç»†é¡µé¢çš„地址或转链逻辑
         //     window.open('https://xxxx&gid=' + items.goodsid);
            // }
        };
    </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}
        #appMain{
            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;
            height: .7rem;
            background: url('https://sr.ffquan.cn/dtk_www/20210226/c0sbpgn6vrkfhsos6qvg0.png') no-repeat 50%;
            background-size: 100% auto;
            margin: 0 auto .1rem;
        }
        .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%;
             color: #fff;
            max-width: 800px;
        }
        .act_header .centent{
            text-align: center;
        }
        .act_header .centent img{
            width:100%;
        }
        .act_header .share a{
            text-decoration: none;
            position: relative;
            top: -.2rem;
            height: 2em;color: #fff;width: 100%;line-height: 2em;text-align: center;display: block;margin-bottom: 1px;background: rgba(0,0,0,.3);border-radius: 0 0 .1rem .1rem;
        }
        .act_header .share a::before{
            content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAdVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////li2ZAAAAAJnRSTlMA+z+lT+K/8lPr5pVEHO91X0s2MwTIsmUmDNmBSS6HbFnR2LSvggRdL7IAAAGQSURBVEjH5ZbZloIwDIa7UBg2QRYFUUdn8f0fcRrsORWCP861/4Wek/QjXdKk4l1UDTo8ROb4OqHS5HaXeRWpwzvgoUsSXb/T4qNuniC5vnm56cU3p83n8sxi59al6npnNP4zS9Rejq5dNplI5qmYM+fR0So+6eriVnpiccgqC7GkD3mHgvl6yB5tAcMXlcfEnJ4zkmaYTh2a7FvABKX9/ZmeKQUvECOU/btOPBS7hYzI53uuKJACjEuN5NGV0pkihhQk8eXRR3mdQYaronxrIMP1a316neGHVGKGK1zauwAz4mDd3cy2XWCO5qFuRNbfzyDDGbIZDHGmp5yG08sMK2GdHfbFNwKLki3kW45VTo5zmB0uOM6BpRFWs7HDKpawWJkdlPCrgbXzRQJfQjaGX3eoljYcFhaugkbUqyWM568WoFhynSg941yAsszjECPZTsEGUEjy7ZkdtBrVjo6zt6w1tSbbjUbp48D22Xeq1BvXAyk+bNRcOl97EjCF9WuPD68kVf955kSHUA+VeBP9AQg5RZhPUvaEAAAAAElFTkSuQmCC) center center no-repeat;
            width: 1.1em;height: 1.1em;display: inline-block;position: relative;top: .15em;margin-right: .4em;
            background-size: 100% auto;
        }
        .act_nav {
            background: linear-gradient(90deg,#ffa033,#ff8030) no-repeat;background-size: 100%;min-height: .7rem;margin-top: 1px;position: fixed;width: 100%;top: .85rem;z-index: 999;
            max-width: 800px;
        }
        .act_nav .swiper-wrapper{white-space: nowrap;display: -webkit-flex;display: flex;}
        .act_nav .tab{
            padding: 0 .2rem;font-weight: 500;font-size: .3rem;color: hsla(0,0%,100%,.6);position: relative;
        }
        .act_nav .tab.active{
            color: #fff;
        }
        .act_nav .tab.active:after {
            height: .04rem;border-radius: .02rem;content: "";overflow: hidden;width: 0;background: #fff;display: block;position: absolute;z-index: 1;zoom: 1;margin: auto;transition: all .3s;left: 0;bottom: -.12rem;right: 0;
            width: 50%;
        }
        .reclassify_swiper{
            margin: .33rem 0 .22rem;padding: 0 .14rem;
        }
        .reclassify_swiper .swiper-wrapper{white-space: nowrap;display: -webkit-flex;display: flex;}
        .reclassify_swiper .reclassify{
            height: .4rem;background: hsla(0,0%,100%,.6);border-radius: .2rem;padding: 0 .24rem;line-height: .4rem;font-size: .26rem;color: #ff7300;margin-right: .2rem;
        }
        .reclassify_swiper .reclassify.active{
            background: #fff;
        }
        .hot_goods{
        }
        .goods_hot .bt{
            height: .42rem;font-size: .3rem;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #fff;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;padding: 0 .14rem 0 .16rem;
        }
        .goods_hot .bt > div:last-child {
            height: .36rem;
            font-size: .26rem;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #fff;
            display: flex;
        }
        .hot_goods_list{
            white-space: nowrap;display: -webkit-flex;display: flex;padding: 0 .14rem;margin: .24rem 0;
            overflow: hidden; overflow-x: auto;
        }
        .hot_goods_list .listTmp{
            width: 2.2rem;background: #fff;border-radius: .16rem;padding: .1rem;margin-right: .1rem;box-sizing: border-box;
        }
        .hot_goods_list .listTmp .productImg {
            width: 2rem;height: 2rem;border-radius: .1rem;position: relative;margin-bottom: .34rem
        }
        .hot_goods_list .listTmp .productImg img {
            width: 100%; height: 100%
        }
        .hot_goods_list .listTmp .productImg .topMsg {
            padding: 0 .16rem;height: .28rem;line-height: .26rem;background: linear-gradient(90deg,#ffedc9,#ffe3af);font-size: .2rem;color: #cc600e;text-align: center;position: absolute;right: 0;top: 0;border-radius: 0 0 0 .1rem;max-width: 100%;overflow: hidden;white-space: pre-wrap;max-height: .28rem
        }
        .hot_goods_list .listTmp .productImg .scale {
            width: 1.72rem;height: .36rem;background: linear-gradient(270deg,#ffbe50,#ff570c);box-shadow: 0 .04rem .06rem 0 rgba(255,153,67,.33);border-radius: .36rem;text-align: center;position: absolute;bottom: -.18rem;left: 0;right: 0;margin: auto;font-size: .22rem;color: #fff;line-height: .39rem
        }
        .hot_goods_list .listTmp .title {
            width: 100%;height: .32rem;font-size: .22rem;color: #333;line-height: .32rem;overflow: hidden;margin-bottom: .05rem;white-space: pre-wrap;max-height: .32rem
        }
        .hot_goods_list .listTmp .price .juanPrice {
            font-size: .34rem;font-weight: 500;color: #fe3738;font-family: PingFangSC-Medium,PingFang SC
        }
        .hot_goods_list .listTmp .price .originPrice {
            text-decoration: line-through;height: .26rem;font-size: .2rem;font-family: PingFangSC-Regular,PingFang SC;color: #999;line-height: .26rem;margin-left: .05rem
        }
        .hot_goods_list .listTmp .price .currency {
            font-size: .24rem;font-weight: 500;font-family: PingFangSC-Medium,PingFang SC;color: #fe3738;margin: 0 .02rem 0 .06rem
        }
        .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%;
        }
        .list-section .listTmp{
            width: 49%;background: #fff;border-radius: .08rem;margin-bottom: .14rem;box-sizing: border-box;
        }
        .list-section .listTmp .productImg {
            border-radius: .08rem .08rem 0 0;position: relative
        }
        .list-section .listTmp .productImg img {width: 100%;height: 100%;border-radius: .08rem .08rem 0 0
        }
        .list-section .listTmp .productInfo {padding: .18rem .2rem .2rem;position: relative
        }
        .list-section .listTmp .title {width: 100%;margin-bottom: .16rem;height: .36rem;font-size: .26rem;color: #333;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400
        }
        .list-section .listTmp .title span {    overflow: hidden;
     text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
        }
        .list-section .listTmp .price {font-size: .2rem;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #666
        }
        .list-section .listTmp .price .juanPrice {font-size: .38rem;font-weight: 500;color: #fe3738;font-family: PingFangSC-Medium,PingFang SC
        }
        .list-section .listTmp .price .currency {font-size: .24rem;font-weight: 500;font-family: PingFangSC-Medium,PingFang SC;color: #fe3738;margin: 0 .02rem 0 .06rem
        }
        .list-section .listTmp .labels {margin-top: .05rem;display: -webkit-flex;display: flex;min-height: .24rem
        }
        .list-section .listTmp .scale {font-size: .2rem;color: #888;margin-top: .12rem;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400
        }
        .list-section .listTmp .scale .divider {width: .02rem;height: .18rem;background: #b3b3b3;margin: 0 .06rem
        }
        .list-section .listTmp .scale span:last-child {max-width: 2rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap
        }
        .list-section .listTmp .label {
            margin-top: .05rem;display: -webkit-flex;display: flex;min-height: .24rem
        }
        .list-section .listTmp .tag{
            font-size: .19rem;color: #ff6305;border-radius: .04rem;border: 1px solid #f57224;padding: 0 .08rem;height: .24rem;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center
        }
        .list-section .listTmp .coupon {
            height: .24rem;background: linear-gradient(90deg,#ff8873,#ff4f4f);border-radius: .04rem;display: inline-block;line-height: .24rem;padding: 0 .06rem 0 .02rem;font-size: .19rem;font-family: PingFangSC-Regular,PingFang SC;color: #fff;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: -webkit-max-content;width: -moz-max-content;width: max-content
        }
        .list-section .listTmp .coupon span {
            display: inline-block;font-size: .18rem;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #ff5351;line-height: .19rem;padding: 1px .04rem;background: #fff;border-radius: .02rem 0 0 .02rem;text-align: center;margin-right: .06rem
        }
        .loading{
            line-height: 2rem; text-align: center; font-size: .3rem; color: #999;
        }
        .sys{
            width: 100%;
            height: 100vh;
            position: fixed;
            z-index: 9999999;
            background: rgba(0, 0, 0, 0.6)
            url('https://sr.ffquan.cn/dtk_yunying/20210803/c44albf6vrkd4bd59itg0.png')
            center center no-repeat;
            background-size: 2.4rem auto;
        }
    </style>
</head>
<body >
    <div id="appMain" >
    <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 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">
                                    </div>
                                    <div class="productInfo">
                                         <div class="title">
                                            <span>{{data.dtitle}}</span>
                                        </div>
                                        <div class="price">
                                            <span>新人专享</span>
                                            <span class="currency">Â¥</span>
                                            <span class="juanPrice">0</span>
                                            <span style="text-decoration: line-through; margin-left:10px">原价¥{{data.originalPrice}}</span>
                                        </div>
                                      <!--   <div class="label">
                                            <span class="tag" v-if="data.labelOne && data.labelOne!='' " style="color: rgb(255, 53, 96); border-color: rgb(255, 1, 55); margin-right: 10px;">{{data.labelOne}}</span>
                                            <div class="coupon">
                                                <span>券</span>{{data.couponPrice}}元
                                            </div>
                                        </div> -->
                                        <div class="scale"><span>{{data.shopName}}</span></div>
                                    </div>
                                </div>
                            </div>
                <!-- <span :class="`reclassify swiper-slide ${item.id == activeTwo ? 'active' :''}`"  v-for="(item,key) in twoNav" :key="item.id" v-on:click="handleSwiperNavTwo(key,item)"  >{{item.title}}</span> -->
            </div>
            <div class="swiper-pagination"></div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
</div>
</body>
</html>
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script>
    (function(){
        var size1=document.body.clientWidth;
        var size2=document.documentElement.clientWidth;
        var size=size1<=0?size2:size1;
        size=size<=0?400:size;
        document.documentElement.style.fontSize = (size > 750 ? 750 : size) / 7.5 + 'px';
    })();
    Vue.use(VueLazyload, {
        preLoad: 1.3,//
        error: 'https://sr.ffquan.cn/cms_pic/20200622/bro7s7f6vrkd3jat4ujg0.png',
      //  loading: 'https://sr.ffquan.cn/cms_pic/20200612/brhjkf76vrkcrfpi79eg0.png',
        attempt: 1
    })
    new Vue({
        el: '#appMain',
        data: {
            sys:false,
            hotGoodsItem:{
                goodsList:[],
                robbingNum:0,
            },
            goodsItem: [],
            lists:[],
            nav:[],
            active:0,
            twoNav:false,
            activeTwo:undefined,
            loading:true,
            isUniReady:false
        },
        methods: {
            targetItem:function(item){
                uni.navigateTo({
                  url: '/pages/goods/goodsDetail?id=' + item.goodsId+'&frompage=freebuy'
                });
                /* if(this.isUniReady)
                {
                    uni.postMessage({
                      data: {
                         action: 'target_tb',
                         data:item
                      }
                     });
                } */
            },
            getUrlPar:function(name)
            {
                var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                 var r=window.location.search.substr(1).match(reg);
                if(r !=null)return unescape(r[2]);
                 return null;
            },
            getGoodsList:function(){
                var _this = this;
                this.loading=true;
                //判断是否首单
                $.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',
                            type:"post",
                                dataType:"json",
                            data:{
                                page: 1,
                                pageSize:40,
                            }
                            }).done(function(res){
                            _this.lists=[].concat(_this.lists,res.data.list);
                            _this.loading = false;
                     })
                    }
                    else{
                        alert("您已下过首单,不可再次购买,请浏览其他商品吧~");
                        setTimeout(function(){
                            if(_this.isUniReady)
                            {
                                uni.postMessage({
                                data: {
                                    action: 'back'
                                }
                                });
                           }
                        }, 1000 )
                    }
                })
            },
        },
        mounted: function () {
            this.getGoodsList();
            var that=this;
            document.addEventListener('UniAppJSBridgeReady', function() {
            that.isUniReady=true;
            });
        },
    })
</script>