first commit

历届学生/韩想/项目开发/课程项目/美食/js/page/index.js

@@ -0,0 +1,256 @@
+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'}">
+              <a href="./info.html?url=${v.path}">
+              <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>`
+                : ''
+              }
+          </a>
+        </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()
+      }
+    });
+  }
+}
+
+new Index()

历届学生/韩想/项目开发/课程项目/美食/js/page/info.js

@@ -0,0 +1,163 @@
+class Info {
+    constructor() {
+        this.Url = GetQueryString("url")
+        this.getIndexInfo();
+    }
+
+    async getIndexInfo() {
+        let res = await indexService.indexInfo({
+            url: this.Url
+        });
+
+        $(".img_hidden img").attr("src", res.backImg);
+        $(".info_list h1 span").text(res.title);
+
+        $(".posttime").text(res.posttime);
+
+        res.stepInfo.arr.forEach((v,i)=>{
+            $(".ddd").append(`
+                <li>
+                    <div class="i" style="background-position: 0px ${v.position /20}rem;"></div>
+                    <p>${v.title}</p>
+                </li>
+            `)
+        });
+
+        res.stepInfo.message = res.stepInfo.message;
+        $(".list_text p").text(res.stepInfo.message)
+        if(res.stepInfo.message.length > 44) {
+            $(".list_text").append(`
+                <div class="more">
+                    <span>展开</span>
+                    <i class="iconfont icon-houtui-copy-copy"></i>
+                </div>
+            `);
+            $(".more").on("click", function() {
+                $(".list_text").css({
+                    height: 'auto'
+                })
+                $(".list_text .more").remove()
+
+            });
+        };
+
+        res.material.main.forEach((v,i)=>{
+           $(".ms .main ul").eq(0).append(`
+            <li>
+                <span>${v.title}</span>
+                <span>${v.nums}</span>
+             </li>
+           `)
+        })
+
+        res.material.accessories.forEach((v,i)=>{
+            $(".ms .main ul").eq(1).append(`
+             <li>
+                 <span>${v.title}</span>
+                 <span>${v.nums}</span>
+              </li>
+            `)
+         })
+
+         var successImg = 0;
+
+         res.DetailedSteps.forEach((v,i)=>{
+             console.log(v.step_img);
+            if(Array.isArray(v.step_img) && v.step_img.length >=2) {
+                successImg = i
+                $(".content_list").append(`
+                    <li>
+                        <div class="step 2">${v.step_title}</div>
+                        <img src="${v.step_img[0]}" alt="">
+                        <p>${v.step_text || ''}</p>
+                        <div class="tabs_img">
+                        </div>
+                    </li>
+                `)  
+            } else{
+                $(".content_list").append(`
+                    <li>
+                        <div class="step">${v.step_title}</div>
+                        <img src="${v.step_img}" alt="">
+                        <p>${v.step_text || ''}</p>
+                    </li>
+                `)
+            }
+         });
+        
+         if (successImg != 0) {
+            res.DetailedSteps[successImg].step_img.forEach((a,b)=>{
+                $(".content_list li").eq(successImg).find(".tabs_img").append(`
+                    <img style="width: 70px;height:70px" src="${a}" alt=""/>
+                `)
+            });
+    
+            $(".content_list li").eq(successImg).find(".tabs_img img").on("click", function(){
+                $(".content_list li").eq(successImg).find("img").eq(0).attr('src', $(this).attr("src"))
+               
+            });
+         }
+
+        var arr = [],
+            self = this;
+         if (localStorage.getItem("like") != null) {
+             arr = JSON.parse(localStorage.getItem("like"))
+         }
+
+         console.log("arr: ", arr);
+         // 如果已经收藏了
+         (arr.filter((v,index)=> v.url == self.Url).length == 0) ? '' :  $(".icon-shoucang").removeClass().addClass("iconfont icon-ai-mark")
+
+        //  for (let i = 0; i < arr.length; i++) {
+        //     if (arr[i].url.includes(self.Url)) {
+        //         $(".icon-shoucang").removeClass().addClass("iconfont icon-ai-mark");
+        //     }
+        // }
+
+        var xxx;
+         $(".icon-shoucang").on("click", function () {
+             if (arr.length === 0) {
+                addData()
+             } else {
+
+                (arr.filter((v,index)=> v.url == self.Url).length == 0) ? addData() : ''
+                    
+                // for (let i = 0; i < arr.length; i++) {
+                //     if (arr[i].url.includes(self.Url)) {
+                //         xxx = true
+                //         break;
+                //     } else {
+                //         xxx = false
+                //     }   
+                // }
+
+                // if (xxx) {
+                //     console.log("已经收藏了");
+                // } else {
+                //     addData()
+                // }
+             }
+
+             
+            
+         });
+
+
+         function addData() {
+            $(".icon-shoucang").removeClass().addClass("iconfont icon-ai-mark");
+            arr.push({
+                title: res.title,
+                url: self.Url,
+                img: res.backImg
+            })
+            localStorage.setItem("like", JSON.stringify(arr))
+         }
+
+        
+
+
+
+    }
+}
+
+new Info()

历届学生/韩想/项目开发/课程项目/美食/js/page/likeInfo.js

@@ -0,0 +1,32 @@
+class LikeInfo {
+    constructor() {
+        this.ListData = JSON.parse(localStorage.getItem("like"))
+        this.renderList()
+    }
+
+    renderList() {
+        this.ListData.forEach((v,ix) => {
+            $("ul").append(`
+              <li>
+                ${v.title} 
+                <span data-index="${ix}">删除${ix}</span>
+              </li>
+            `)
+        });
+
+        console.log($("ul li span"));
+        // $("ul li span").each(function(index,val){
+        //    $(val).on('click', function() {
+        //        console.log(index);
+        //    })
+        // })
+        var sss = this;
+        $("ul li span").on("click", function() {
+            sss.ListData.splice($(this).attr("data-index"),1)
+            localStorage.setItem("like", JSON.stringify(sss.ListData))
+            $(this).parent().remove()
+        })
+    }
+}
+
+new LikeInfo()

历届学生/韩想/项目开发/课程项目/美食/js/page/list.js

@@ -0,0 +1,36 @@
+class ListService {
+    constructor(props) {
+        this.page = 1
+        this.list()
+        this.scrollLoadData()
+    }
+
+    async list() {
+        let res = await listervice.rightMenuList({
+            url: GetQueryString("url"),
+            p: this.page
+        });
+
+        res.forEach((v,i)=>{
+            $(".content ul").append(`
+              <img src="${v.img}" alt="">
+              <li>${v.title}</li>
+            `)
+        })
+    }
+
+    scrollLoadData() {
+        var scroll = new auiScroll({
+            listen: true,
+            distance: 10 //判断到达底部的距离，isToBottom为true
+        }, (ret) => {
+            if(ret.isToBottom){
+                this.page += 1;
+                this.list()
+            }
+        });
+    }
+
+}
+
+new ListService()

历届学生/韩想/项目开发/课程项目/美食/js/page/type.js

@@ -0,0 +1,46 @@
+class Type {
+    constructor() {
+        this.leftMenu()
+        this.renderRight("/fenlei/shiyongfenlei/")
+    }
+
+    async leftMenu() {
+        let res = await typeService.leftMenu({})
+
+        res.forEach((val,index)=>{
+            $(".left_menu").append(`
+              <li class="${index==0?'active_menu':''}">
+                <div style="background-position: 0 ${val.position}px;" class="img"></div>
+                <p>${val.title}</p>
+              </li>
+            `)
+        });
+
+        var leftMenuLi = $(".left_menu li"),
+            index = 0,
+            self = this;
+
+        $(".left_menu li").on('click', function () {
+            index = $(this).index();
+            self.renderRight(res[index].url)
+            leftMenuLi.eq($(this).index()).addClass("active_menu").siblings().removeClass("active_menu")
+        });
+    }
+
+    async renderRight(index) {
+        let res = await typeService.rightMenu({ url: index })
+        $(".right_content").empty();
+        res.forEach((v,i)=>{
+            $(".right_content").append(`
+                <li>
+                   <a href="./list.html?url=${v.id}">
+                     <img src="${v.img}" alt="">
+                     <p>${v.title.substring(0,4)}</p>
+                   </a>
+                </li>
+            `);
+        })
+    }
+}
+
+new Type();