crmeb_shop/application/wap/view/first/index/index.html

{extend name="public/container"}
{block name="head_top"}
<link rel="stylesheet" href="{__PLUG_PATH}swiper/swiper-3.4.1.min.css">
<script type="text/javascript" src="{__PLUG_PATH}swiper/swiper-3.4.1.jquery.min.js"></script>
<script type="text/javascript" src="{__PLUG_PATH}jquery-slide-up.js"></script>
<script type="text/javascript" src="{__WAP_PATH}crmeb/js/jquery.downCount.js"></script>
<script type="text/javascript" src="{__WAP_PATH}crmeb/js/car-model.js"></script>
<script type="text/javascript" src="{__WAP_PATH}crmeb/js/base.js"></script>
<script type="text/javascript" src="{__WAP_PATH}crmeb/js/lottie.min.js"></script>
{/block}
{block name="title"}
<?= \service\SystemConfigService::get('site_name') ?>
{/block}
{block name="content"}
<div class="page-index" id="app-index">
    <section ref="bsDom">
        <div>
            <div class="search-wrapper">
                <form method="post" @submit.prevent="goSearch">
                    <div class="search-box flex"><input type="text" v-model="keyword" placeholder="商品搜索: 请输入商品关键词"> <a
                            class="index-icon home-btn" href="{:url('my/notice')}">
                            {gt name="notice" value="0"} <b class="count-num">{$notice}</b> {/gt} </a></div>
                </form>
            </div>
            <!-- 滑动导航 -->
            <div class="common-slider-nav" ref="xScroll">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide on"><a href="javascript:void(0);">商城优选</a></li>
                    {volist name="category" id="vo"}
                    <li class="swiper-slide"><a href="{:Url('store/index',['cid'=>$vo['id']])}">{$vo.cate_name}</a></li>
                    {/volist}
                </ul>
            </div>
            {notempty name="banner"}
            <div class="banner" ref="banners">
                <ul class="swiper-wrapper">
                    {volist name="banner" id="vo"}
                    <li class="swiper-slide"><a href="<?= empty($vo['url']) ? 'javascript:void(0);' : $vo['url']; ?>">
                            <img src="{$vo.pic|unThumb}"/> </a></li>
                    {/volist}
                </ul>
                <div class="swiper-pagination"></div>
            </div>
            {/notempty}
            {notempty name="menus"}
            <div class="nav">
                <ul class="flex"> {volist name="menus" id="vo"}
                    <li><a href="<?= empty($vo['url']) ? 'javascript:void(0);' : $vo['url']; ?>"> <img src="{$vo.icon|unThumb}">
                            <p>{$vo.name}</p></a></li>
                    {/volist}
                </ul>
            </div>
            {/notempty}
            {notempty name="roll_news"}
            <div class="hot-txt-roll border-1px flex">
                <div class="hot-icon"><img src="{__WAP_PATH}crmeb/images/hot-icon.png"></div>
                <div class="txt-list">
                    <ul class="line"> {volist name="roll_news" id="vo"}
                        <li style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><a
                                style="display: block;"
                                href="<?= empty($vo['url']) ? 'javascript:void(0);' : $vo['url']; ?>">{$vo.info}</a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
            {/notempty}
            <div class="coupon-wrapper" v-cloak="" v-show="couponList.length > 0" style="overflow:hidden;">
                <!--<div ref="xCoupon">-->
                <!-- 已使用 typethree -->
                    <div class="coupon-list">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide coupon-item  flex" v-for="item in couponList"
                                 :class="[(isValidCoupon(item) && !item.is_use) ? 'typeone' : 'typethree']">
                                <div class="count-num flex"><em><i class="small-symbol">￥</i>{{item.coupon_price}}</em>
                                    <p>满{{item.use_min_price}}元可用</p></div>
                                <div class="count-btn flex" v-text="isValidCoupon(item) ? (item.is_use !== true ? '点击领取' : '您已领取') : '已经领完' "
                                     @click="isValidCoupon(item) && item.is_use !== true && userGetCoupon(item)"></div>
                            </div>
                        </div>
                    </div>
                <!--</div>-->
                <a class="more-wrapper" href="{:Url('store/issue_coupon')}" v-show="couponList.length >= 2">查看更多 ></a>
            </div>
          <!-- 秒杀列表 -->
            {notempty name="storeSeckill"}
            <div class="hotspike-list">
                <div class="index-common-title border-1px">限时秒杀 <a href="{:Url('store/seckill_index')}"><i class="icon"></i></a></div>
                <ul>
                    {volist name="storeSeckill" id="vo"}
                    <li class="flex">
                        <div class="picture"><img src="{$vo.image}" alt="">
                            <div class="count-down flex countdown" data-time="{$vo.stop_time|date='Y/m/d H:i:s',###}">
                                <span class="hours">00</span>
                                <em>:</em>
                                <span class="minutes">00</span>
                                <em>:</em>
                                <span class="seconds">00</span>
                            </div>
                        </div>
                        <div class="text-info flex">
                            <div class="title">{$vo.title}</div>
                            <div class="price-wrapper"><span class="price"><i>￥</i>{$vo.price}</span> <span class="old-price">￥{$vo.ot_price}</span>
                            </div>
                            <div class="schedule flex">

                                <span>已抢{$vo.round}%</span>
                                <span class="schedule-bar"  ><i class="schedule-weight" data-width="{$vo.round}%"></i></span></div>
                            <a class="link" href="{:url('store/seckill_detail',['id'=>$vo.id])}">马上抢</a></div>
                    </li>
                    {/volist}
                </ul>
            </div>
            {/notempty}
            <!-- 商品分类模板 -->
            <div class="template-prolist" v-cloak="" v-for="item in cateGroupList" v-show="cateGroupList.length > 0">
                <div class="index-common-title border-1px">
                    <a :href="'/wap/store/index/cid/'+item.id">
                        {{item.cate_name}} <i class="icon"></i> </a></div>
                <div class="product-banner"><img :src="unThumb(item.pic)" v-show="item.pic != ''"></div>
                <ul class="flex">
                    <li v-for="pro in item.product"><a :href="'/wap/store/detail/id/'+pro.id">
                            <div class="picture"><img :src="pro.image"></div>
                            <div class="product-info"><p class="title" v-text="pro.store_name"></p>
                                <p class="count-wrapper flex"><span class="price"
                                                                    v-html="getPriceStr(pro.price)"></span> <span
                                        class="count">已售{{pro.sales}}{{pro.unit_name || '件'}}</span></p></div>
                        </a></li>
                </ul>
            </div>        <!-- 商品分类模板 -->
            <div class="template-prolist">
                <div class="title-like flex" v-show="page.list.length > 0" v-cloak=""><span class="title-line left"></span> <span class="icon"></span>
                    <span>新品推荐</span> <span class="title-line right"></span></div>
                <ul class="flex">
                    <li v-for="item in page.list" v-cloak=""><a :href="'/wap/store/detail/id/'+item.id">
                            <div class="picture"><img :src="item.image"></div>
                            <div class="product-info"><p class="title" v-text="item.store_name"></p>
                                <p class="count-wrapper flex"><span class="price"
                                                                    v-html="getPriceStr(item.price)"></span> <span
                                        class="count">已售{{item.sales}}{{item.unit_name || '件'}}</span></p></div>
                        </a></li>
                </ul>
            </div>
            <p class="loading-line" v-show="loading == true"><i></i><span>正在加载中</span><i></i></p>
            <p class="loading-line" v-show="loading == false && page.loaded == false" v-cloak="" @click="getList">
                <i></i><span>点击加载</span><i></i></p>
            <p class="loading-line" v-show="loading == false && page.loaded == true" v-cloak="">
                <i></i><span>没有更多了</span><i></i></p></div>
    </section>
    {include file="public/store_menu"}
</div>
<div class="flex" id="bubble-txt" style="display: none;">
    <div class="avatar">
        <img src="" alt="" class="avater-pink">
    </div>
    <span class="nickname"></span>
</div>
<div class="lottie-bg"><div id="lottie"></div></div>
<script>
    var anim;
    var elem = document.getElementById('lottie');
    //elem.style.display = 'none';
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        rendererSettings: {
            progressiveLoad:false,
            imagePreserveAspectRatio: 'xMidYMid meet'
        },
        path: '{__WAP_PATH}crmeb/js/animation.json'
    };
    anim = lottie.loadAnimation(animData);
    anim.setSubframe(false);
    setTimeout(
        function () {
            $('.lottie-bg').hide();
        },2000)
</script>
<script type="text/javascript">
    var base = new Base64();
    (function () {
       var $pinkListUser = <?php echo json_encode($storePink);?>;
       if($pinkListUser.length > 0){
           var $i = 0,dom = $('#bubble-txt'),src = $('.avater-pink'),name = $('.nickname'),pinkShow = function (item) {
                src.attr('src',item['src']);
                name.html(item['nickname']);
                dom.show().addClass('bubble-txt');
                setTimeout(function () {
                    dom.hide().removeClass('bubble-txt');
                },5100);
           },si = setInterval(function () {
               if(document.readyState=="complete"){
                   window.clearInterval(si);
                   pinkShow($pinkListUser[$i++]);
                   setInterval(function () {
                       if($pinkListUser.length <= $i) $i = 0;
                       pinkShow($pinkListUser[$i++]);
                   },6500);
               }
           },500);
       }
        requirejs(['vue', 'store', 'helper', 'better-scroll'], function (Vue, storeApi, $h, BScroll) {
            new Vue({
                el: '#app-index',
                data: {
                    couponList: [],
                    cateGroupList: [],
                    page: {first: 0, limit: 20, list: [], loaded: false},
                    loading: false,
                    scroll: null,
                    keyword: '',
                    gettingCoupon: false,
                    combinationList:[],
                    pinkData:{
                        src:'',
                        nickname:''
                    },
                    isPinkOne:false
                },
                methods: {
                    unThumb:function(src){
                        return src.replace('/s_','/');
                    },
                    formatPrice: function (price) {
                        var format = price.toString().split('.');
                        if (format[1] == undefined) format[1] = '00';
                        if (format[1].length == 1) format[1] += '0';
                        return format;
                    },
                    getPriceStr: function (price) {
                        var format = this.formatPrice(price);
                        return "<i>￥</i>" + format[0] + "<i>." + format[1] + "</i>";
                    },
                    userGetCoupon: function (coupon) {
                        if (this.gettingCoupon) return;
                        this.gettingCoupon = true;
                        var that = this;
                        storeApi.goLogin() && storeApi.userGetCoupon(coupon.id, function () {
                            coupon.is_use = true;
                            $h.pushMsgOnce('领取成功!');
                            setTimeout(function () {
                                that.gettingCoupon = false;
                            }, 300);
                        }, function () {
                            setTimeout(function () {
                                that.gettingCoupon = false;
                            }, 300);
                            return true;
                        });
                    },
                    isValidCoupon: function (coupon) {
                        return !(coupon.total_count > 0 && coupon.remain_count == 0);
                    },
                    goSearch: function () {
                        if (!this.keyword) return;
                        location.href = $h.U({c: 'store', a: 'index', p: {keyword:  base.encode(this.keyword)}});
                    },
                    getIssueCouponList: function () {
                        var that = this;
                        storeApi.getIssueCouponList(4, function (res) {
                            that.couponList = res.data.data;
                            that.$nextTick(function () {
                                var sliderProduct = new Swiper('.coupon-list', { freeMode: true, freeModeMomentumRatio: 0, slidesPerView: 'auto', });
                            })
                        });
                    },
                    getCateData: function () {
                        var that = this;
                        storeApi.getCategoryProductList(4, function (res) {
                            that.cateGroupList = res.data.data;
//                            that.$nextTick(function () {
//                                that.scroll.refresh();
//                            })
                        })
                    },
                    getCombinationList:function () {
                        var that = this;
                        storeApi.baseGet($h.U({
                            c:"public_api",
                            a:"get_pink_host",
                            p:{limit:2}
                        }),function (res) {
                            that.combinationList = res.data.data;
//                            that.$nextTick(function () {
//                                that.scroll.refresh();
//                            })
                        })
                    },
                    elInit: function () {
                        that = this;
                        setTimeout(function(){
                            var child = that.$refs.xScroll.children[0],liDom = child.getElementsByTagName('li');
                            if(liDom.length > 0 ){
                                child.style.width = (liDom[0].offsetWidth * liDom.length)+'px';
                                new BScroll(that.$refs.xScroll,{eventPassthrough : 'vertical',scrollX: true, scrollY: false,observeDOM:false,click:true,probeType:1,cancelable:false});
//                                that.$nextTick(function(){
//                                    that.scroll.refresh();
//                                });
                            }
                        });
                        setTimeout(function () {
                            if(!that.$refs.banners) return ;
                            var child = that.$refs.banners.children[0],liDom = child.getElementsByTagName('li');
                            if(liDom.length > 0 ){
                                child.style.width = (document.body.offsetWidth * liDom.length)+'px';
                                Array.prototype.slice.call(liDom).forEach(function (item) {
                                   item.style.width = document.body.offsetWidth+'px';
                                });
                                new BScroll(that.$refs.banners,{eventPassthrough : 'vertical',scrollX: true, scrollY: false,observeDOM:false,click:true,probeType:1,cancelable:false,momentum: false,snap: {loop: false, threshold: 0.1, stepX: document.body.offsetWidth}});
//                                that.$nextTick(function(){
//                                    that.scroll.refresh();
//                                });
                            }
                        });
                        $('.schedule-weight').each(function() {
                            var _this = $(this);
                            var width =  _this.attr('data-width');
                            _this.css("width",width);
                        });
                        $('.countdown').each(function () {
                            var _this = $(this);
                            var count = _this.attr('data-time');
                            _this.downCount({date: count, offset: +8});
                        });
                        $(".line").slideUp({"li_h": $('.txt-list').height()});
                    },
                    getList: function () {
                        if (this.loading) return;
                        var that = this, group = that.page;
                        if (group.loaded) return;
                        this.loading = true;
                        storeApi.getBestProductList({first: group.first, limit: group.limit}, function (res) {
                            var list = res.data.data;
                            group.loaded = list.length < group.limit;
                            group.first += list.length;
                            group.list = group.list.concat(list);
                            that.$set(that, 'page', group);
                            that.loading = false;
//                            that.$nextTick(function () {
//                                if (list.length) that.scroll.refresh();
//                                that.scroll.finishPullUp();
//                            });
                        }, function () {
                            that.loading = false
                        });
                    },
                },
                mounted: function () {
                    var that = this;
                    this.elInit();
                    this.getIssueCouponList();
                    this.getCateData();
                    this.getCombinationList();
                    setTimeout(function() {
                        that.getList();
                    },0);

                }
            })
        });
    }());</script>{/block}