first commit

项目合集/菜谱App/fontend/js/page/.pydio

@@ -0,0 +1 @@
+b7260bde-637b-451b-b883-0f65c005233c

项目合集/菜谱App/fontend/js/page/bannerinfo.js

@@ -0,0 +1,23 @@
+class Banerinfo {
+    constructor() {
+        this.bannerinfoMenu();
+    }
+    async bannerinfoMenu() {
+        let res = await Banerservice.BanerInfo({
+            url: GetQueryString("url"),
+        });
+        console.log(res);
+        $(".img_hidden img").attr("src", res.banner)
+        $(".content .content_title").text(res.title)      
+        $(".content").append(`${res.content}`)
+        $(".goodsitem").remove()
+        $(".headportrait").attr("src", res.comment.img)
+        $(".content .content_title").text(res.comment.name) 
+        $(".content .content_title").text(res.comment.time) 
+        $(".content .content_title").text(res.comment.content)
+    }
+
+
+}
+
+new Banerinfo()

项目合集/菜谱App/fontend/js/page/fllist.js

@@ -0,0 +1,49 @@
+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 .content_list ul").append(`
+            <li>
+            <a  href="info.html?url=${v.url}">
+                <img src="${v.img}" alt="">
+                <div class="list_right">
+                    <p>${v.title}</p>
+                    <img src="../img/xingxing.png" alt="">
+                    <div class="evaluate">
+                        <i class="iconfont icon-xin"></i>
+                        <span>${v.like}</span>
+                        <i class="iconfont icon-faxian"></i>
+                        <span>${v.view}</span>
+                    </div>
+                </div>
+            </a>
+        </li>
+            `)
+        })
+    }
+
+    scrollLoadData() {
+        var scroll = new auiScroll({
+            listen: true,
+            distance: 10 //判断到达底部的距离，isToBottom为true
+        }, (ret) => {
+            if(ret.isToBottom){
+                this.page += 1;
+                this.list()
+            }
+        });
+    }
+
+}
+
+new ListService()

项目合集/菜谱App/fontend/js/page/index.js

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

项目合集/菜谱App/fontend/js/page/info.js

@@ -0,0 +1,178 @@
+class Info {
+    constructor() {
+        this.getIndexInfo();
+        this.Url = GetQueryString("url")
+    }
+
+    async getIndexInfo() {
+        let res = await indexfoService.indexInfo({
+            url: GetQueryString("url")
+        })
+
+        $(".img_hidden img").attr("src", res.backImg)
+        $(".info_list .list_title h2").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>
+            `)
+        });
+        $(".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)=>{
+            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;margin-right: .5rem;" 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"))
+         }
+         // 如果已经收藏了
+        //  (arr.filter((v,index)=> v.url == self.Url).length == 0) ? '' :  $(".icon-shoucang1").removeClass().addClass("iconfont icon-shoucang")
+
+         for (let i = 0; i < arr.length; i++) {
+            if (arr[i].url.includes(self.Url)) {
+                $(".icon-shoucang1").removeClass().addClass("iconfont icon-shoucang");
+            }
+        }
+        var xxx;
+            $(".icon-shoucang1").on("click", function (){
+                    if (arr.length === 0){
+                        addData()
+                    }else{
+                        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-shoucang1").removeClass().addClass("iconfont icon-shoucang");
+            arr.push({
+                title: res.title,
+                url: self.Url,
+                img: res.backImg
+            })
+            localStorage.setItem("like", JSON.stringify(arr))
+         }
+        
+        
+
+         res.OtherRecommen.forEach((v,i)=>{
+            $(".Otherpractices ul").append(`
+            <li>
+                <a href="info.html?url=${v.url}">
+                <img src="${v.img}" alt="">
+                <p>${v.title.substring(0,6)}</p>
+                </a>
+            </li>
+            `)
+         })
+         res.RelatedRecommen.forEach((v,i)=>{
+            $(".recommend ul").append(`
+            <li>
+            <a href="info.html?url=${v.url}">
+              <img src="${v.img}" alt="">
+              <div class="recommend_left">
+                <h3>${v.title}</h3>
+                <p>${v.view}</p>
+              </div>
+            </a>
+          </li>
+            `)
+         })
+
+
+
+    }
+}
+
+new Info()

项目合集/菜谱App/fontend/js/page/likeinfo.js

@@ -0,0 +1,83 @@
+class LikeInfo {
+    constructor() {
+        this.ListData = JSON.parse(localStorage.getItem("like"))
+        this.actionsheet = new auiActionsheet();
+        this.renderList()
+        this.deleat()
+        // this.deleatli()
+    }
+
+    renderList() {
+        this.ListData.forEach((v, ix) => {
+            $(".content ul").append(`
+            <li>
+                <a href="./info.html?url=${v.url}">
+                    <img src="${v.img}" alt="">
+                </a>
+                    <p>${v.title}</p>
+            </li>
+            `)
+        });
+       
+        
+       
+    }
+    // deleatli(){
+    //         var sss = this;
+    //         $(".content ul li").each(function(i,v){
+    //             console.log(sss.ListData.splice($(this).i, 1));
+    //         })
+            
+    //         // localStorage.setItem("like", JSON.stringify(sss.ListData))
+    //         // $.remove()
+    //     }
+
+    deleat() {
+        var self = this;
+        var longClick = 0,
+            timeOutEvent;
+        $(".content ul li").on({
+            touchstart: function (e) {
+                longClick = 0;//设置初始为0
+                timeOutEvent = setTimeout(function () {
+                    //此处为长按事件-----在此显示遮罩层及删除按钮
+                    // longClick = 1;//假如长按，则设置为1
+                    // $(".shadow").css("display", "block")
+
+                    self.openActionsheet()
+                    e.preventDefault();
+
+                }, 300);
+            },
+            touchmove: function () {
+                clearTimeout(timeOutEvent);
+                timeOutEvent = 0;
+                e.preventDefault();
+            },
+        });
+        $(".cancel").on("click", function () {
+            $(".shadow").css("display", "none")
+        })
+    }
+
+    openActionsheet(){
+        var ss =this
+        this.actionsheet.init({
+            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
+            destructiveTitle:'删除',
+            buttons:['取消']
+        },function(ret){
+            if(ret){
+                if (ret.buttonIndex == 2) {
+                    // ss.deleatli()
+                    ss.ListData.splice($(this).attr("data-index"), 1)
+                    localStorage.setItem("like", JSON.stringify(ss.ListData))
+                    $(this).attr("data-index").remove()
+                }
+            }
+        })
+    }
+
+}
+
+new LikeInfo()

项目合集/菜谱App/fontend/js/page/search.js

@@ -0,0 +1,50 @@
+class search {
+  constructor() {
+    this.page = 1
+    this.searchfunction();
+    this.scrollLoadData()
+  }
+  searchfunction(){
+    var dd = this;
+    $(".header p").on('click',()=>{
+            this.searchss()
+    })   
+    }
+    async searchss(){
+        var dd=this,
+        value =$(".header input").val();
+        console.log($(".header input").val());
+        let res = await SearchService.search({
+            q:value,
+            page:this.page
+        });
+        res.forEach((v,i)=>{
+            $(".content ul").append(`
+            <li>
+            <a href="./info.html?url=${v.href}">
+                <div class="img">
+                    <img src="${v.img}" alt="">
+                </div>  
+                <div class="name">
+                    <h3>${v.title}</h3>
+                    <p>${v.des}</p>
+                </div>
+            </a>
+        </li>                
+            `)  
+        })
+    }
+    scrollLoadData() {
+        var scroll = new auiScroll({
+            listen: true,
+            distance: 10 //判断到达底部的距离，isToBottom为true
+        }, (ret) => {
+            if(ret.isToBottom){
+                this.page += 1;
+                this.searchss()
+            }
+        });
+    }
+  }
+  
+  new search()

项目合集/菜谱App/fontend/js/page/type.js

@@ -0,0 +1,42 @@
+class Type {
+    constructor() {
+        this.leftMenu()
+        this.renderRight("/fenlei/shiyongfenlei/")
+    }
+    async leftMenu() {
+        let res = await TypeService.leftMenu({});
+        res.forEach((value, index) => {
+            $(".content .left_menu").append(`
+            <li class="${index==0?'active_menu':''}"> 
+                    <div class="img" style="background-position: 0 ${value.position}px;"></div>
+                    <p>${value.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="./fllist.html?url=${v.id}">
+                     <img src="${v.img}" alt="">
+                     <p>${v.title.substring(0,4)}</p>
+                   </a>
+                </li>
+            `);
+        })
+    }
+}
+
+new Type()

项目合集/菜谱App/fontend/js/page/video.js

@@ -0,0 +1,73 @@
+class Video {
+    constructor() {
+        this.videoMenu();
+        // this.Url = GetQueryString("url")\
+        this.page = 1
+        this.scrollLoadData()
+    }
+    async videoMenu() {
+        let res = await VideoService.Foodrecipes({
+            page:this.page
+        });
+
+        res.items.forEach((v, i) => {
+            $(".content").append(`
+             <li>
+                <a >
+                    <div class="content_pic" style="background-image: url(${v.bd_photo});">
+                        <div class="pic_yingyin">
+                            <i class="iconfont icon-play"></i>
+                        </div>
+                    </div>
+                    <p>${v.seo_title.substring(0,7)}</p>
+                    <div class="pic_pinglun">
+                        <div class="toux_left">
+                            <img src="../img/ms.jpg" alt="">
+                            <span>美食杰</span>
+                        </div>
+                        <div class="toux_right">
+                            <i class="iconfont icon-faxian"></i>
+                            <span>${v.click_num}</span>
+                        </div>
+                    </div>
+                </a>
+              </li>
+          `)
+        })
+        var videoarr = {};
+        
+        $(function() {
+        $('.content').find('li').each(function() {
+            $(this).click(function() {
+                addData($(this).index());
+            })
+        })
+
+        })          
+        function addData(index) {
+            videoarr.title= res.items[index].seo_title,
+            videoarr.practice= res.items[index].intro,
+            videoarr.video= res.items[index].xhz_video_url
+
+            console.log(videoarr);
+            localStorage.setItem("video", JSON.stringify(videoarr))
+
+            location.href = "./videoinfo.html"
+        }
+    }
+    scrollLoadData(){
+        var scroll = new auiScroll({
+            listen: true,
+            distance: 10 //判断到达底部的距离，isToBottom为true
+        }, (ret) => {
+            if(ret.isToBottom){
+                this.page += 1;
+                this.videoMenu()
+            }
+        });
+    }
+
+
+}
+
+new Video()

项目合集/菜谱App/fontend/js/page/videoinfo.js

@@ -0,0 +1,16 @@
+class VideoInfo {
+    constructor() {
+        this.ListData = JSON.parse(localStorage.getItem("video"))
+        this.renderList()
+    }
+
+    renderList() {
+        var data =this  
+        console.log(this.ListData);
+        $(".img_hidden a video").attr("src", data.ListData.video)
+        $(".conten h1").text(data.ListData.title)
+        $(".conten p").text(data.ListData.practice)
+    }
+}
+
+new VideoInfo()