first commit

历届学生/fontendseven/项目练习/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,87 @@
+class Info {
+    constructor() {
+        this.getInfo();
+
+        this.like =
+            localStorage.getItem("like") == null
+            ? []
+            : JSON.parse(localStorage.getItem("like"))
+    }
+
+    async getInfo() {
+        var res = await server.agentInfo({
+            id: query("id")
+        })
+
+        header(res.title, `<i class="iconfont like icon-xin"></i>`);
+
+        if (this.checkIsLike().length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+        res.imgs.forEach(v => {
+            var img = document.createElement("img");
+            img.src = v;
+            img.onload = () => {
+                $(".info").innerHTML+= `
+                  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                    <a href="${v}" itemprop="contentUrl" data-size="${img.width}x${img.height}">
+                      <img src="${v}" itemprop="thumbnail" alt="${res.title}" />
+                    </a>
+                    <figcaption itemprop="caption description">${res.title}</figcaption>
+                  </figure>
+                `
+            }
+
+        });
+
+        initPhotoSwipeFromDOM('.my-gallery');
+        // icon-aixin 实心，icon-xin 空心
+        document.querySelector(".like")
+        var self = this;
+
+        $(".like").onclick = function () {
+
+
+            // 本地没收藏，进行收藏
+            if (self.checkIsLike().length == 0) {
+                self.like.push({
+                    id: query("id"),
+                    total: res.shuliang,
+                    preview: res.img_src,
+                    title: res.title,
+                    user: res.renwulist[0].name,
+                    source: res.jigoulist[0].name,
+                    tags: res.biaoqianlist
+                })
+            // 已经收藏过了，点击的时候取消收藏
+            } else {
+                self.like = self.like.filter(v => {
+                    if (v.id != query("id")) {
+                        return v
+                    }
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(self.like))
+
+            // 如果为空心，点击变成实心，收藏
+            this.classList.contains("icon-xin")
+            ? this.classList.replace("icon-xin", "icon-aixin")
+            // 如果为实心，点击变成空心，取消收藏
+            : this.classList.replace("icon-aixin", "icon-xin")
+
+        }
+    }
+
+    // 判断本地是否有你当前正在浏览的这个写真
+    checkIsLike() {
+        return this.like.filter(v => {
+            if (v.id == query("id")) {
+                return v
+            }
+        })
+    }
+}
+
+new Info();