first commit

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/edit.js

@@ -0,0 +1,58 @@
+class Edit {
+    constructor() {
+      this.principal = JSON.parse(localStorage.getItem("principal"))
+      this.additional = JSON.parse(localStorage.getItem("additional"))
+      header("分类编辑");
+      this.renderType()
+    }
+  
+  
+    renderType() {
+      $(".default ul").innerHTML = ""
+      this.principal.forEach((v,i) => {
+        $(".default ul").innerHTML += `
+           <li>${i == 0 ? '':v.title}</li>
+          `
+      })
+  
+      _(".default ul li").forEach((v,i) => {
+        v.onclick = () => {
+  
+          this.additional.push(this.principal[i])
+  
+          this.principal = this.principal.filter(item => {
+            return item.id != this.principal[i].id
+          })
+          localStorage.setItem("principal", JSON.stringify(this.principal))
+          localStorage.setItem("additional", JSON.stringify(this.additional))
+          this.renderType()
+        }
+      })
+  
+  
+      $(".add ul").innerHTML = ""
+      this.additional.forEach((v,i) => {
+        $(".add ul").innerHTML += `
+           <li>${v.title}</li>
+          `
+      })
+  
+  
+      _(".add ul li").forEach((v,i) => {
+       v.onclick = () => {
+         this.principal.push(this.additional[i]);
+  
+         this.additional = this.additional.filter(item => {
+           return item.id != this.additional[i].id
+         })
+  
+         localStorage.setItem("principal", JSON.stringify(this.principal))
+         localStorage.setItem("additional", JSON.stringify(this.additional))
+         this.renderType()
+       }
+      })
+  
+    }
+  }
+  
+  new Edit();

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/home.js

@@ -0,0 +1,126 @@
+class Home {
+  constructor() {
+    footer()
+    this.tabs = [];
+    this.index = 0
+    this.getHome()
+    this.getType()
+
+  }
+
+  async getType() {
+    var res;
+    if(localStorage.getItem("principal")==null){
+      var data = await indexServe.type();
+      res = data.principal
+      localStorage.setItem("principal",JSON.stringify(data.principal))
+      localStorage.setItem("additional",JSON.stringify(data.additional))
+    }else{
+      res = JSON.parse(localStorage.getItem("principal"))
+    }
+    
+    this.tabs = res
+    console.log( this.tabs)
+    // 渲染横向菜单
+    res.forEach((v,i) => {
+      if (i != 0 ) {
+        $(".page-wrapper").innerHTML+=`
+          <div class="padding swiper-slide side_${i} pitem"></div>
+        `
+      }
+      $(".left_menu").innerHTML+=`
+       <li class="${i == 0 ? 'active':''}">${v.title}</li>
+      `
+    })
+
+    var li = _(".left_menu li");
+
+    var self = this;
+    // 初始化页面轮播图
+    var page = new swiper('.page-container', {
+      wrapper: '.page-wrapper',
+      on: {
+        slideChangeTransitionStart(index) {
+          li.forEach(item => item.className ="");
+          li[index].classList.add("active")
+          if (index != 0) {
+            self.index = index;
+            self.getClassList()
+          }
+        }
+      }
+    })
+
+    // 点击菜单的事件
+
+    li.forEach((v,i) => {
+      v.onclick = () => {
+        li.forEach(item => item.className ="");
+        v.classList.add("active")
+        page.slideTo(i)
+        if (i != 0) {
+          this.index = i;
+          this.getClassList()
+        }
+      }
+    })
+  }
+
+  async getHome() {
+    var res = await indexServe.index();
+    console.log(res)
+    res.model.res.forEach((v,i) => {
+      $(".model-wrapper").innerHTML+=`
+       <div class="swiper-slide model-slide">
+         ${
+            v.map((item,index)=>{
+              console.log(item);
+              return `
+              <a href="./modelList.html?id=${item.id}&text=${item.title}">
+                <div class="model-item">
+                  <div class="item-img">
+                    <img src="${item.preview}" alt="">
+                    <span>${item.total}</span>
+                  </div>
+                  <p>${item.title}</p>
+                </div>
+              </a>
+              `
+            }).toString().replaceAll(",","")
+          }
+       </div>
+      `
+    });
+
+    item(".news ul", res.newest.data)
+    item(".tuijian ul", res.recommended.data)
+
+
+    var model = new swiper('.mode-container', {
+      wrapper: '.model-wrapper',
+    })
+
+
+  }
+
+  async getClassList() {
+    if (this.tabs[this.index].content.length == 0) {
+      var res = await indexServe.classList({
+        page: this.tabs[this.index].page,
+        id: this.tabs[this.index].id
+      });
+      this.tabs[this.index].content = res.data
+      this.tabs[this.index].total_page = res.total_page
+
+      item(`.side_${this.index}`, this.tabs[this.index].content)
+
+    }
+
+  }
+
+
+}
+
+new Home();
+
+

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/info.js

@@ -0,0 +1,103 @@
+class Info {
+    constructor() {
+        this.res = {};
+        this.page = 1;
+        this.total_page = 0
+        this.like = localStorage.getItem("likeArr") == null
+            ? []
+            : JSON.parse(localStorage.getItem("likeArr"))
+        this.getInfo().then(()=>{
+            this.bindInfoEvent()
+        })
+        
+    }
+
+    bindInfoEvent(){
+        header(this.res.title, `
+            <i class="like iconfont icon-xin"></i>
+            <i class="iconfont icon-home"></i>
+        `);
+        $(".icon-xiangxia").onclick = () => {
+            this.page += 1;
+            if (this.page <= this.total_page) {
+                this.getInfo()
+                if (this.page == this.total_page)
+                    $(".icon-xiangxia").style.display = "none"
+            }
+        }
+
+
+        
+        var isHave = this.like.filter(v=>{
+            return v.id == query("id")
+        })
+
+        if(isHave.length !=0){
+            $(".like").classList.remove("icon-xin")
+            $(".like").classList.add("icon-aixin")
+        }
+
+
+
+        $(".like").onclick = () => {
+            if ($(".like").classList.contains("icon-xin")) {
+                $(".like").classList.remove("icon-xin")
+                $(".like").classList.add("icon-aixin")
+                this.like.push({
+                    id: query("id"),
+                    title: this.res.title,
+                    total: this.res.total,
+                    source: this.res.source,
+                    info: this.res.info,
+                    preview: query("url")
+                });
+                localStorage.setItem("likeArr", JSON.stringify(this.like))
+            } else {
+                $(".like").classList.remove("icon-aixin")
+                $(".like").classList.add("icon-xin")
+                this.like = this.like.filter((v)=>{
+                    return v.id != query("id")
+                })
+                console.log(this.like);
+                localStorage.setItem("likeArr", JSON.stringify(this.like))
+            }
+        }
+    }
+
+
+    async getInfo() {
+        this.res = await indexServe.info({
+            page: this.page,
+            // 浏览器上的id
+            id: query("id")
+        });
+        this.total_page = this.res.total_page
+        
+        console.log(this.res);
+        this.res.data.forEach(v => {
+            // var img = new Image();
+            var img = document.createElement("img")
+            img.src = v.src;
+            img.onload = () => {
+                $(".info_img").innerHTML += `
+                <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                    <a href="${v.src}" itemprop="contentUrl" data-size="${img.width}x${img.height}">
+                        <img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
+                    </a>
+                    <figcaption itemprop="${v.title}">${v.title}</figcaption>
+                </figure>
+                `
+            }
+
+
+        });
+
+        initPhotoSwipeFromDOM(".info_img")
+        item(".recomm", this.res.recommend)
+        item(".relevant", this.res.relevant)
+
+        
+    }
+}
+
+new Info();

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/mechanism.js

@@ -0,0 +1,25 @@
+class Mechanism {
+  constructor() {
+    footer();
+    header("机构");
+    this.mechanism()
+  }
+
+  async mechanism(){
+    var res = await indexServe.mechanism({});
+    console.log(res);
+    res.forEach(v => {
+      $(".content_mechanism").innerHTML+=`
+      <li class="content_mechanism_list">
+        <a href="./mechanismList.html?id=${v.id}&text=${v.title}&type=me">
+          <p>${v.title}</p>
+          <span>${v.quantity}</span>
+        </a>
+      </li>
+      `
+    });
+  }
+
+}
+
+new Mechanism()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/mechanismList.js

@@ -0,0 +1,31 @@
+class MechanismList{
+    constructor(){
+        query("type")=="tags"
+            ?this.classList()
+            :this.mechanismListType()
+        header(query("text"));
+        
+    }
+
+
+
+
+    async mechanismListType(){
+        var res = await indexServe.mechanismList({
+            page:0,
+            id: query("id"),
+        });
+        console.log(res);
+        item(".pitem",res.data)
+    }
+    async classList(){
+        var res = await indexServe.classList({
+            page:0,
+            id: query("id"),
+        });
+        console.log(res);
+        item(".pitem",res.data)
+    }
+}
+
+new MechanismList()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/model.js

@@ -0,0 +1,45 @@
+class Model {
+  constructor() {
+    footer();
+    header("模特");
+    this.modelType()
+  }
+
+
+
+  async modelType(){
+    var res = await indexServe.allModel({});
+    console.log(res);
+    var hot = res.hot_models;
+    var news = res.newest;
+    hot.forEach(v => {
+      $(".hot_list").innerHTML+=`
+      <li>
+          <a href="./modelList.html?id=${v.id}&text=${v.title}">
+            <div class="hot_list_top">
+              <img src="${v.preview}" alt="">
+              <div class="xiao">${v.total}</div>
+            </div>
+            <p class="hot_list_botton">${v.title}</p>
+          </a>
+        </li>
+      `
+    });
+    news.forEach(v => {
+      $(".new_list").innerHTML+=`
+      <li>
+          <a href="./modelList.html?id=${v.id}&t=${v.title}">
+            <div class="new_list_top">
+              <img src="${v.preview}" alt="">
+            </div>
+            <p class="new_list_botton">${v.title}</p>
+          </a>
+        </li>
+      `
+    });
+    
+  }
+  
+}
+
+new Model()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/modelList.js

@@ -0,0 +1,40 @@
+class ModelList{
+    constructor(){
+        header(query("text"))
+        // var similar = res.similar;
+        this.modelList()
+    }
+    async modelList(){
+        var res = await indexServe.modelList({
+            page:0,
+            id:query("id"),
+        
+        })
+        console.log(res);
+        $(".introduction").innerHTML+=`
+        <div class="introduction_hs">
+                <img src="${res.model_info.portrait}" alt="">
+            </div>
+            <div class="introduction_text">
+            <p>${res.model_info.name}</p>
+            <span>${res.model_info.explain}</span>
+            </div>
+        `;
+        item(".pitem",res.data)
+        res.similar.forEach(v => {
+            $(".similar_list").innerHTML+=`
+            <li>
+                    <a href="">
+                        <div class="similar_list_top">
+                            <img src="${v.preview}" alt="">
+                            <div class="xiao">${v.total}</div>
+                        </div>
+                        <p class="similar_list_botton">${v.title}</p>
+                    </a>
+                </li>
+            `
+        });
+    }
+}
+
+new ModelList()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/my.js

@@ -0,0 +1,7 @@
+class My {
+  constructor() {
+    footer();
+  }
+}
+
+new My()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/myinfo.js

@@ -0,0 +1,46 @@
+class Myinfo {
+  constructor() {
+    header("我的收藏", `
+            <i class="like iconfont icon-xin"></i>
+            <i class="iconfont icon-home"></i>
+        `);
+    this.res = localStorage.getItem("likeArr")==null 
+                ? [] 
+                : JSON.parse(localStorage.getItem("likeArr")) 
+    this.getType()
+  }
+  getType() {
+    if (this.res == 0) {
+      $(".content").innerHTML += `
+            <div class="content_ul">
+                <div class="kong">
+                    <i class="iconfont icon-wushuju"></i>
+                    <p>暂无收藏</p>
+                </div>
+            </div>
+          `
+    } else {
+      this.res.forEach(v => {
+        $(".content_ddd").innerHTML+=`
+        <li>
+          <div class="top">
+            <a href="./info.html?id=${v.id}&url=${v.preview}">
+              <img src="${v.preview}" alt="">
+              <span>${v.total}</span>
+            </a>
+           </div>
+          <a href="./info.html?id=${v.id}&url=${v.preview}">
+            <div class="title">${v.title}儿</div>
+            <div class="source">${v.info}</div>
+            <div class="source">${v.source}</div>
+          </a>
+        </li>
+        `
+      });
+      
+    }
+  }
+
+}
+
+new Myinfo()

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.16/js/page/search.js

@@ -0,0 +1,43 @@
+class Searvh{
+    constructor(){
+        this.searchType()
+    }
+
+    
+
+    searchType(){
+        $(".icon-search").onclick=async()=>{
+            
+            var put = $("input").value
+            var res =  await indexServe.search({
+                keyword:put
+            })
+            console.log(res);
+            res.forEach(v => {
+                $(".content_list").innerHTML+=`
+                    <li>
+                        <div class="content_list_img">
+                            <a href="./info.html?id=${v.id}&url=${v.preview}">
+                                <img src="${v.preview}" alt="">
+                                <div class="shuzi">49p</div>
+                            </a>
+                        </div>
+                        <div class="content_list_text">
+                            <a href="./info.html?id=${v.id}&url=${v.preview}">
+                                <p>${v.title}</p>
+                            </a>
+                        </div>
+                    </li>
+                    `
+                
+            });
+        }
+        
+    }
+
+    
+
+    
+}
+
+new Searvh()