288 lines
7.7 KiB
JavaScript
288 lines
7.7 KiB
JavaScript
// class Index {
|
||
// constructor() {
|
||
// this.index = 0;
|
||
// this.doTogetherData = [
|
||
// {
|
||
// type: 1,
|
||
// title: '推荐',
|
||
// content: [],
|
||
// page: 1
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// title: '时令',
|
||
// content: [],
|
||
// page: 1
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// title: '食肉',
|
||
// content: [],
|
||
// page: 1
|
||
// },
|
||
// {
|
||
// type: 4,
|
||
// title: '素食',
|
||
// content: [],
|
||
// page: 1
|
||
// },
|
||
// {
|
||
// type: 5,
|
||
// title: '烘焙',
|
||
// content: [],
|
||
// page: 1
|
||
// }
|
||
// ];
|
||
// this.getBannerList();
|
||
// this.renderMenu();
|
||
// this.getThreeMeals();
|
||
|
||
// this.renderDoTogether();
|
||
// this.DoTogether();
|
||
|
||
// this.scrollLoadData();
|
||
// }
|
||
|
||
// /**
|
||
// * 获取轮播图列表
|
||
// */
|
||
// async getBannerList() {
|
||
// var banner = $(".banner_swiper .swiper-wrapper");
|
||
// let res = await indexService.bannerIndex({ id: 1 });
|
||
// res.forEach((val,index) => {
|
||
// banner.append(`
|
||
// <div class="swiper-slide">
|
||
// <a href="bannerInfo.html?url=${val.url}">
|
||
// <img src="${val.img}" alt=""/>
|
||
// </a>
|
||
// </div>
|
||
// `)
|
||
// });
|
||
|
||
// this.initBannerSwiper();
|
||
// }
|
||
|
||
// // 初始化banner轮播图
|
||
// initBannerSwiper() {
|
||
// var mySwiper = new Swiper('.banner_swiper', {
|
||
// direction: 'horizontal',
|
||
// loop: true,
|
||
// // 如果需要分页器
|
||
// pagination: {
|
||
// el: '.swiper-pagination',
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
// async getThreeMeals() {
|
||
// var mrscUl = $(".mrsc ul");
|
||
// var mrscSwiper = $(".mrsc_swiper .swiper-wrapper");
|
||
|
||
// let res = await indexService.threeMeals({});
|
||
// console.log(res)
|
||
// res.forEach((val,index)=>{
|
||
// mrscUl.append(`
|
||
// <li class="${index==0? 'active': ''}">${val.title}</li>
|
||
// `)
|
||
|
||
// mrscSwiper.append(
|
||
// `<div class="swiper-slide">
|
||
// <div class="mrsc_list">
|
||
// </div>
|
||
// </div>
|
||
// `
|
||
// );
|
||
|
||
// val.content.forEach((v,i)=>{
|
||
// $(".mrsc_swiper .swiper-wrapper .mrsc_list")
|
||
// .eq(index).append(
|
||
// `<div class="mrsc_list_item">
|
||
// <img src="${v.img}" alt="">
|
||
// <p class="tips_titles">${v.title}</p>
|
||
// <span class="tips_text">养</span>
|
||
// <p class="tips">${v.des}</p>
|
||
// </div>
|
||
// `
|
||
// );
|
||
// })
|
||
|
||
// });
|
||
|
||
// this.initMrsc()
|
||
// }
|
||
|
||
// initMrsc() {
|
||
// var MrscUl = $(".mrsc ul li");
|
||
|
||
// var MrscSwiper = new Swiper('.mrsc_swiper', {
|
||
// direction: 'horizontal',
|
||
// on: {
|
||
// slideChangeTransitionEnd: function(){
|
||
// console.log(this.activeIndex);
|
||
// MrscUl.eq(this.activeIndex).addClass("active").siblings().removeClass("active")
|
||
// },
|
||
// },
|
||
// });
|
||
|
||
// MrscUl.each(function(i,e) {
|
||
// $(this).on("click", function() {
|
||
// MrscSwiper.slideTo(i)
|
||
// });
|
||
// });
|
||
// }
|
||
|
||
// async renderMenu() {
|
||
// let res = await indexService.type({});
|
||
// console.log(res)
|
||
// res.forEach((v,i)=>{
|
||
// $(".menu").append(`
|
||
// <li>
|
||
// <a href="./info.html?url=${v.href}">
|
||
// <img src="${v.img}" alt="">
|
||
// <p>${v.title}</p>
|
||
// </a>
|
||
// </li>
|
||
// `)
|
||
// })
|
||
// }
|
||
|
||
// /**
|
||
// * 渲染内容的
|
||
// * @returns {Promise<void>}
|
||
// * @constructor
|
||
// */
|
||
// async DoTogether() {
|
||
|
||
// let res = await indexService.indexClass({
|
||
// type: this.doTogetherData[this.index].type,
|
||
// page: this.doTogetherData[this.index].page
|
||
// });
|
||
|
||
// this.doTogetherData[this.index].content
|
||
// = [ ...this.doTogetherData[this.index].content, ...res.items ]
|
||
|
||
// $(".do_together_content .roll_father").eq(this.index).empty()
|
||
|
||
// // 渲染列表的
|
||
// this.doTogetherData[this.index].content.forEach((v,i)=>{
|
||
// $(".do_together_content .roll_father").eq(this.index).append(`
|
||
// <div class="do_together_item"
|
||
// style="height: ${ typeof v.img == 'string' ? 'auto' : '12rem !important' }">
|
||
// <div class="item_img">
|
||
// ${
|
||
// typeof v.img == 'string'
|
||
// ? `<img src="${v.img}" alt="">`
|
||
// : `<img src="${v.img[0]}" alt="">`
|
||
// }
|
||
// </div>
|
||
|
||
// <div class="item_padd">
|
||
// <div class="tips_titles">${v.title}</div>
|
||
// <span class="tips_text">养</span>
|
||
// ${
|
||
// v.label == null || v.label.length == 0
|
||
// ? ''
|
||
// : `<p class="tips">${v.label.desc}</p>`
|
||
// }
|
||
// </div>
|
||
// ${
|
||
// v.author.hasOwnProperty("avatar_url")
|
||
// ? `<div class="item_avatr item_pa">
|
||
// <div class="avatr_left">
|
||
// <img src="${v.author.avatar_url}" alt="">
|
||
// <span>${v.author.nickname}</span>
|
||
// </div>
|
||
// <div class="avatr_view">
|
||
// <i class="iconfont icon-yanjing"></i>
|
||
// <span>${v.viewed_amount}</span>
|
||
// </div>
|
||
// </div>`
|
||
// : ''
|
||
// }
|
||
// </div>
|
||
// `)
|
||
// })
|
||
|
||
|
||
// // console.log("RenderDoTogether: ", res);
|
||
// }
|
||
|
||
// /**
|
||
// * 渲染标题
|
||
// */
|
||
// renderDoTogether() {
|
||
// this.doTogetherData.forEach((v,i)=>{
|
||
// $(".do_together_title").append(`
|
||
// <li class="${i==0?'active':''}">${v.title}</li>
|
||
// `);
|
||
|
||
// $(".do_together_content").append(`
|
||
// <div class="roll_father ${i==0?'showRoll':''}"></div>
|
||
// `)
|
||
// });
|
||
|
||
// var titleLi = $(".do_together_title li"),
|
||
// RollFather = $(".do_together_content .roll_father");
|
||
|
||
// var a = this;
|
||
// titleLi.on('click', function () {
|
||
// a.index = $(this).index();
|
||
// $(this).addClass("active").siblings().removeClass("active")
|
||
|
||
// if (a.doTogetherData[a.index].content.length == 0) {
|
||
// a.DoTogether()
|
||
// }
|
||
|
||
// RollFather.eq($(this).index()).addClass("showRoll").siblings().removeClass("showRoll")
|
||
// })
|
||
// }
|
||
|
||
// scrollLoadData() {
|
||
// var scroll = new auiScroll({
|
||
// listen:true,
|
||
// distance: 10 //判断到达底部的距离，isToBottom为true
|
||
// }, (ret) => {
|
||
// if(ret.isToBottom){
|
||
// console.log("滚动到底部")
|
||
// this.doTogetherData[this.index].page += 1;
|
||
// this.DoTogether()
|
||
// }
|
||
// });
|
||
// }
|
||
// }
|
||
|
||
|
||
|
||
|
||
|
||
class Index {
|
||
constructor() {
|
||
this.initSwiper()
|
||
}
|
||
initSwiper() {
|
||
var mySwiper = new Swiper('.swiper-container', {
|
||
direction: 'horizontal', // 垂直切换选项
|
||
loop: true, // 循环模式选项
|
||
|
||
// 如果需要分页器
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
},
|
||
|
||
// 如果需要前进后退按钮
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
|
||
// 如果需要滚动条
|
||
scrollbar: {
|
||
el: '.swiper-scrollbar',
|
||
},
|
||
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
new Index()
|