<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>首页</title>
|
<!--轮播图插件-->
|
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.2.6/css/swiper.min.css"/>
|
<script src="https://cdn.bootcss.com/Swiper/4.2.6/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
<!--下拉刷新插件-->
|
<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
|
<script src="js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
|
<!--其它-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css"/>
|
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body>
|
|
<div id="allwai" class="allwai fboxCol">
|
|
<!--顶部-->
|
<div class="topwai fboxRow Ycenter">
|
<!--图标-->
|
<div class="topimg" href="splist.html"><img src="img/index_logo.png"/></div>
|
<!--输入外框-->
|
<div class="flex1 topruwai fboxRow Ycenter canclick">
|
<!--放大镜图片-->
|
<img class="topjing" src="img/index_search.png"/>
|
<!--输入组件-->
|
<div class="topinput font_gray flex1">搜淘宝/天猫宝贝领优惠券</div>
|
</div>
|
</div>
|
|
<!--内容部-->
|
<div class="flex1">
|
<div id="mescroll" class="mescroll">
|
|
<!--轮播图插件-->
|
<div class="swiper-container">
|
<!--轮播图外-->
|
<div class="swiper-wrapper">
|
<div class="swiper-slide displayNone">
|
<div class="homelunboimg fboxRow Xcenter Ycenter" name=""><img style="width: 100%;height: 100%;" src=""/></div>
|
</div>
|
</div>
|
<!--分页器-->
|
<div class="swiper-pagination"></div>
|
</div><!--轮播图插件结束-->
|
|
<!--猜你喜欢-->
|
<div class="fboxRow Xcenter Ycenter homecaiwai">
|
<img class="homecaiimg" src="img/list_z1.png"/>
|
<div class="font_moremax" style="margin: 0 1rem;">猜你喜欢</div>
|
<img class="homecaiimg" src="img/list_z2.png"/>
|
</div>
|
|
<!--放商品框的外框-->
|
<div class="fboxWrap Xbetween" style="width:100%;margin-top:1vw;">
|
|
<!--Vue循环添加商品单框-->
|
<div v-for="item in sp.list" class="homespdan canclick" v-bind:name="item.auctionId" onclick="Click_spdan(this)">
|
<!--商品图片-->
|
<div class="homespimg fboxRow Xcenter Ycenter"><img v-bind:src="item.pictUrl"/></div>
|
<!--商品标题-->
|
<div class="homespcon" style="margin-top: 0.1rem;">
|
<!--来源-->
|
<span v-if='item.shopType == 1' class="homesptitle1 font_min">淘宝</span>
|
<span v-if='item.shopType == 2' class="homesptitle2 font_min">天猫</span>
|
<!--标题文字-->
|
<span class="homesptitle"> {{item.title}}</span>
|
</div>
|
<!--商品价格-->
|
<div class="homespcon">
|
<div class="fboxRow Yend sptujiared">
|
<div v-if="item.taoBaoQuanInfo" class="font_min">券后价</div>
|
<div class="font_min">￥</div>
|
<div v-if="item.taoBaoQuanInfo" class="homespjianum">{{item.quanPrice}}</div>
|
<div v-if="!item.taoBaoQuanInfo" class="homespjianum">{{item.zkPrice}}</div>
|
</div>
|
<!--
|
<div class="fboxRow Yend sptujiared" style="margin-top: 0.4rem;">
|
<div>返利</div>
|
<div v-if="item.taoBaoHongBaoInfo.hongbao > 0">￥</div>
|
<div v-if="item.taoBaoHongBaoInfo.hongbao > 0" class="homespjianum">{{item.taoBaoHongBaoInfo.hongbao}}</div>
|
<div v-if="item.taoBaoHongBaoInfo.hongbao <= 0" class="homespjianum">{{item.taoBaoHongBaoInfo.rate}}</div>
|
</div>-->
|
</div>
|
<!--优惠券相关-->
|
<div class="homespcon" style="height:1.5rem;">
|
<!--券卡片-->
|
<div v-if="item.taoBaoQuanInfo" class="fboxRow Ycenter" style="width: 100%;height: 100%;">
|
<div class="homespquan1">
|
<div class="fboxRow Xcenter Ycenter">
|
<div class="font_min">￥</div>
|
<div class="textover" style="font-weight: bold;">{{item.taoBaoQuanInfo.couponAmount}}</div>
|
</div>
|
</div>
|
<div class="homespquan2">
|
<div class="fboxRow Xcenter Ycenter">
|
<div class="font_min textover">{{item.taoBaoQuanInfo.couponInfo}}</div>
|
</div>
|
</div>
|
</div>
|
<!--销量-->
|
<div v-if="!item.taoBaoQuanInfo" class="font_gray font_min">销量：{{item.biz30day}}</div>
|
</div>
|
</div><!--Vue循环结束-->
|
|
</div><!--fboxWrap框结束-->
|
|
</div>
|
</div><!--内容部结束-->
|
|
<!--回到顶部火箭-->
|
<div class="homeback canclick displayNone"><img src="img/search_totop.png"/></div>
|
|
<!--APP下载卡片-->
|
<div class="homeappwai fboxRow Ycenter">
|
<img class="homeappimg" src="img/list_load.png"/>
|
<div>不只领优惠券，APP客户端还返利</div>
|
<div class="flex1"></div>
|
<a class="homeappgo fboxRow Xcenter Ycenter" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yeshi.ec.rebate">下载</a>
|
</div>
|
|
</div><!--allwai结束-->
|
|
</body>
|
|
<script type="text/javascript">
|
|
$(".allwai").addClass("displayNone");
|
|
//================================== 页面数据 ==========================================
|
var https = "http://flq.yeshitv.com"; //http://flq.yeshitv.com http://192.168.1.200:8088
|
//信息
|
var alldata = new Vue({
|
el: '#allwai',
|
data: {
|
//----------------- 顶部轮播图信息 -----------------
|
lunbo: [],
|
//------------------- 商品信息 -------------------
|
sp: {
|
yema: 1, //当前页码
|
pagesize: 24, //每页数据量
|
list: [], //商品列表
|
},
|
},
|
});
|
|
//下拉刷新组件实例化
|
var mescroll = new MeScroll("mescroll",
|
{
|
down: {
|
auto: false, //取消一来就刷新一次
|
callback: downCallback //下拉刷新的回调
|
},
|
//关闭上拉加载
|
up: { use: false, }
|
});
|
|
|
//================================== 组件事件 ==========================================
|
//触发下拉刷新
|
function downCallback() { Get_lunbo(); Get_splist(); }
|
|
//搜索框点击
|
$(".topruwai").click(function(){ window.location.href = "search.html"; });
|
|
//商品 点击
|
function Click_spdan (obj) { var id = $(obj).attr("name"); var myurl = "index.html?id=" + id; window.location.href = myurl; }
|
|
//列表框滚动事件
|
var oldtime = 0;
|
$("#mescroll").scroll(function()
|
{
|
//获取时间戳
|
var newtime = new Date().getTime();
|
//获取需要高度
|
var viewH = $(this).height(); //可见高度
|
var allH = $(this)[0].scrollHeight; //总高度
|
var scrollH = $(this).scrollTop(); //滚动了多远
|
//页面滚动300px后 //让火箭显示
|
if (scrollH > 300) { $(".homeback").removeClass("displayNone"); }
|
//让火箭隐藏
|
else { $(".homeback").addClass("displayNone"); }
|
//页面滚动到底部
|
if ((viewH + scrollH) > (allH - 100))
|
{
|
if (newtime - oldtime > 500)
|
{
|
oldtime = newtime;
|
doui.showLoading("获取商品");
|
alldata.sp.yema++; Get_splist();
|
}
|
}
|
});
|
//火箭点击
|
$(".homeback").click(function() { doui.scrollBackTop("#mescroll",800); });
|
|
|
|
//================================== 数据请求 ==========================================
|
//商品列表页 轮播图
|
Get_lunbo();
|
function Get_lunbo ()
|
{
|
//数据准备
|
var myurl = https + '/fanli/api/web/v1/webRecommend/getRecommenBanner';
|
var mydata = doui.AjaxData({});
|
//数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); mescroll.endErr(); }
|
else
|
{
|
setTimeout(function(){ mescroll.endSuccess(); }, 800);
|
//轮播图保存
|
alldata.lunbo = res.data.data.data;
|
//向轮播图插件添加html
|
$(".swiper-wrapper").empty();
|
for (var i = 0; i < alldata.lunbo.length; i++)
|
{
|
var jiedian = '<div class="swiper-slide">';
|
jiedian += '<div class="homelunboimg fboxRow Xcenter Ycenter" name="'+alldata.lunbo[i].params.url+'"><img style="width: 100%;height: 100%;" src="'+alldata.lunbo[i].picture+'"/></div>';
|
jiedian += '</div>';
|
$(".swiper-wrapper").append(jiedian);
|
}
|
//进行轮播图插件实例化
|
var mySwiper = new Swiper('.swiper-container',
|
{
|
autoplay: true, //可选选项，自动滑动
|
pagination: {
|
el: '.swiper-pagination',
|
dynamicBullets: true,
|
},
|
});
|
//轮播图片点击事件
|
$(".homelunboimg").click(function(){ window.location.href = $(this).attr("name"); });
|
}
|
});
|
}
|
|
//商品列表
|
Get_splist();
|
function Get_splist ()
|
{
|
//数据准备
|
var myurl = https + '/fanli/api/web/v1/class/getCouponList';
|
var mydata = doui.AjaxData({
|
page: alldata.sp.yema,
|
pagesize: alldata.sp.pagesize,
|
});
|
//数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); mescroll.endErr(); }
|
else
|
{
|
setTimeout(function(){ mescroll.endSuccess(); }, 800);
|
//列表保存
|
if (alldata.sp.yema <= 1) { alldata.sp.list = res.data.taoBaoCoupons; }
|
else { alldata.sp.list = alldata.sp.list.concat(res.data.taoBaoCoupons); }
|
}
|
});
|
}
|
|
|
$(".allwai").removeClass("displayNone");
|
|
</script>
|
|
</html>
|
