139 lines
2.8 KiB
JavaScript
139 lines
2.8 KiB
JavaScript
class Index {
|
|
constructor() {
|
|
this.getBanner();
|
|
|
|
this.getType();
|
|
|
|
this.getThreeMeals();
|
|
}
|
|
|
|
async getIndexClass() {
|
|
var res = await indexService.indexClass({type:1,page:1});
|
|
}
|
|
|
|
//轮播图
|
|
async getBanner() {
|
|
var res = await indexService.banner();
|
|
let banners=document.querySelector('.swiper-wrapper');
|
|
res.forEach((item,index) => {
|
|
|
|
banners.innerHTML+=`
|
|
<li>
|
|
<a href="./bannerInfo.html?id=${item.url}">
|
|
<img src="${item.img}" alt="">
|
|
</a>
|
|
</li>
|
|
`;
|
|
});
|
|
new Swiper(".swiper",{
|
|
time: 1000,
|
|
initialSlide: 0,
|
|
loop: false,
|
|
speed: 300,
|
|
autoplay: false,
|
|
grabCursor: true,
|
|
});
|
|
}
|
|
|
|
//轮播图下面的九宫格
|
|
async getType() {
|
|
var res = await indexService.type();
|
|
let jiugong=document.querySelector('.jiu ul');
|
|
res.forEach((item,index)=>{
|
|
jiugong.innerHTML+=`
|
|
<li>
|
|
<a href="./jiugongInfo.html?id=${item.href}">
|
|
<img src="${item.img}" alt="">
|
|
<span>${item.title}</span>
|
|
</a>
|
|
</li>
|
|
`;
|
|
|
|
})
|
|
}
|
|
|
|
//每日三餐
|
|
async getThreeMeals() {
|
|
var res = await indexService.threeMeals();
|
|
let sancan=document.querySelector('.sancan_ul');
|
|
let three=document.querySelector('.wrapper_list');
|
|
res.forEach((item,index)=>{
|
|
sancan.innerHTML+=`
|
|
<li class='${index==0?'activesan':''}'>${item.title}</li>
|
|
`;
|
|
});
|
|
|
|
res.forEach((item,index)=>{
|
|
three.innerHTML+=`
|
|
<li class="three_meals_list">
|
|
${
|
|
( item.content.map((a,b)=>{
|
|
return ` <div class="three_meals_item">
|
|
<img src="${a.img}" alt="">
|
|
<div class="text">${a.title}</div>
|
|
<div class="yang"></div>
|
|
<div class="desc">${a.des}</div>
|
|
</div>`
|
|
})).join('')
|
|
}
|
|
</li>
|
|
`;
|
|
});
|
|
|
|
var thress=document.querySelectorAll('.sancan_ul li');
|
|
|
|
|
|
|
|
var threeSwiper= new Swiper(".swiper_list",{
|
|
time: 1000,
|
|
initialSlide: 0,
|
|
loop: false,
|
|
speed: 300,
|
|
autoplay: false,
|
|
grabCursor: true,
|
|
swiperWrapper: '.wrapper_list',
|
|
pagination: {
|
|
el: '.pagination'
|
|
},
|
|
on:{
|
|
slideChange:function (index) {
|
|
thress.forEach((q,w)=>{
|
|
q.className='';
|
|
thress[index].className='activesan';
|
|
})
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
thress.forEach((item,index)=>{
|
|
|
|
item.onclick=()=>{
|
|
thress.forEach((i,j)=>{
|
|
i.className='';
|
|
})
|
|
item.className='activesan';
|
|
threeSwiper.slideTo(index)
|
|
}
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initSwiper(){
|
|
// 初始banner轮播
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
new Index(); |