mirror of
https://github.com/crmeb/CRMEB.git
synced 2025-12-27 14:10:35 +00:00
472 lines
25 KiB
HTML
472 lines
25 KiB
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>
|
|
<li class="swiper-slide"><a href="{:url('store/combination')}"><img src="{__WAP_PATH}sx/images/pt-bg.png" alt=""></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>
|
|
<!-- 商品精品推荐模板 -->
|
|
<div class="template-prolist" v-show="is_bestList.length > 0" >
|
|
<div class="title-like flex" 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 is_bestList" 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>
|
|
<!-- 商品新品推荐模板 -->
|
|
<div class="template-prolist" v-show="is_newList.length > 0">
|
|
<div class="title-like flex" 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 is_newList" 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>
|
|
<!-- 商品热卖推荐模板 -->
|
|
<div class="template-prolist" v-show="is_hotList.length > 0">
|
|
<div class="title-like flex" 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 is_hotList" 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>
|
|
<!-- 商品促销推荐模板 -->
|
|
<div class="template-prolist" v-show="is_benefitList.length > 0">
|
|
<div class="title-like flex" 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 is_benefitList" 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>
|
|
<!-- 秒杀列表 -->
|
|
{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="days">00</span>
|
|
<em>:</em>
|
|
<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="buyspell-list" v-cloak="" v-show="combinationList.length > 0">
|
|
<div class="index-common-title border-1px">
|
|
<span class="color-red">拼团 . </span>花少钱买好货 <i class="icon" @click="window.location.href='{:url('store/combination')}'"></i>
|
|
</div>
|
|
<div class="product-banner"><img src="{$pinkImage}"></div>
|
|
<div class="bslist-box">
|
|
<div class="bs-item flex" v-for="item in combinationList">
|
|
<div class="picture">
|
|
<img :src="item.image">
|
|
</div>
|
|
<div class="bs-item-info flex">
|
|
<div class="info-title">{{item.title}}</div>
|
|
<div class="count-wrapper">
|
|
<span class="price">￥{{item.price}}</span>
|
|
<span class="old-price">￥{{item.product_price}}</span>
|
|
<span class="count">已拼{{item.sales}}单</span>
|
|
</div>
|
|
<a class="people-num flex">
|
|
<span class="numbers">{{item.people}}人团</span>
|
|
<span class="peo-txt" @click="window.location.href='{:url('store/combination_detail',[],false)}/id/'+item.id">去开团</span>
|
|
<i class="index-icon people-icon"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 商品分类模板 -->
|
|
<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 type="text/javascript">
|
|
function loadCRMEB() {
|
|
var anim;
|
|
var elem = document.getElementById('lottie');
|
|
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)
|
|
|
|
}
|
|
if(!window.name) {
|
|
loadCRMEB();
|
|
window.name = "CRMEB";
|
|
}else{
|
|
$('.lottie-bg').hide();
|
|
}
|
|
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: [],
|
|
is_bestList: [],//精品推荐
|
|
is_newList:[],//首发新品
|
|
is_hotList: [],//热卖单品
|
|
is_benefitList:[],//促销
|
|
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;
|
|
if(this.$refs.banners){
|
|
var liDom = $(this.$refs.banners).find('li');
|
|
if(liDom.length > 0 ){
|
|
liDom.width(document.body.offsetWidth);
|
|
$(this.$refs.banners).find('ul').width((document.body.offsetWidth * liDom.length)+'px');
|
|
var myBanner = new Swiper('.banner', {
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: false,
|
|
autoplay: 4500,
|
|
loop: true,
|
|
speed: 2500,
|
|
autoplayDisableOnInteraction: false
|
|
});
|
|
}
|
|
}
|
|
$('.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
|
|
});
|
|
},
|
|
getproductList: function (type) {
|
|
var that = this;
|
|
storeApi.getPublicProductList({first:0, limit: 4,type:type}, function (res) {
|
|
if(type=='is_best')
|
|
that.is_bestList = res.data.data;
|
|
if(type=='is_hot')
|
|
that.is_hotList = res.data.data;
|
|
if(type=='is_new')
|
|
that.is_newList = res.data.data;
|
|
if(type=='is_benefit')
|
|
that.is_benefitList = res.data.data;
|
|
}, function () {
|
|
|
|
});
|
|
},
|
|
},
|
|
mounted: function () {
|
|
var that = this;
|
|
this.elInit();
|
|
this.getIssueCouponList();
|
|
this.getproductList('is_best');//精品
|
|
this.getproductList('is_hot');//热卖
|
|
this.getproductList('is_benefit');//促销
|
|
this.getproductList('is_new');//首发新品
|
|
this.getIssueCouponList();
|
|
this.getCateData();
|
|
this.getCombinationList();//猜猜喜欢
|
|
setTimeout(function() {
|
|
that.getList();
|
|
},0);
|
|
|
|
}
|
|
})
|
|
});
|
|
}());</script>
|
|
{/block} |