收藏功能和跳转优化

Author: flytam

README.md

@@ -37,6 +37,7 @@ npm run dev
   - const.js 常量
   - utils 一些工具函数
 - static 静态图片部分
+
 目前已经完成了绝大部分功能，尚未完成的功能在和遇到的问题在todo中
 
 目前存在的问题
@@ -46,8 +47,8 @@ npm run dev
 
 todo
 
-  - 帖子收藏和取消收藏功能
-  - 评论点赞和收藏的UI同步 // 好像后端有bug
+  - 帖子收藏和取消收藏功能 // API字段有问题
+  - 评论点赞和收藏的UI同步 // API那个字段有点问题
   - 编辑自己发过的主题
   - 展示未读消息数和消息已读
 
@@ -59,7 +60,7 @@ todo
 
 后话：
 
-这个项目没有涉及到太多复杂的部分，主要到是业务逻辑的开发，对于作为一个vue和mpvue小程序入门项目是非常合适的。由于开发时间短，部分代码质量和交互做得不太好。对于未完成的部分和部分未知bug欢迎各位star、提issue、提pr一起来玩2333.
+这个项目没有涉及到太多复杂的部分，主要到是业务逻辑的开发，所有的对于作为一个vue和mpvue小程序入门项目是非常合适的。由于开发时间短，部分代码质量和交互做得不太好。对于未完成的部分和部分未知bug欢迎各位star、提issue、提pr一起来玩2333.
 
 效果图
 

src/App.vue

@@ -1,4 +1,7 @@
 <script>
 export default {
-}
+  onError(err) {
+    console.log(err);
+  }
+};
 </script>

src/components/card.vue

@@ -44,14 +44,11 @@ export default {
   methods: {
     goAuthorPage(e) {
       // e.currentTarget.dataset.author
-      console.log(e);
-      wx.setStorageSync("loginname", e.currentTarget.dataset.loginname);
-      wx.navigateTo({ url: "../user/main" });
+      wx.navigateTo({ url: `../user/main?loginname=${e.currentTarget.dataset.loginname}`});
     },
     goDetail() {
-      wx.setStorageSync("topicid", this.item.id);
       wx.navigateTo({
-        url: "../detail/main"
+        url: `../detail/main?topicid=${this.item.id}`
       });
     }
   }

src/pages/detail/index.vue

@@ -9,9 +9,8 @@
           <img class='author-img' :src='detailData.author && detailData.author.avatar_url' alt="头像">
           <span class='name'>{{detailData.author&& detailData.author.loginname}}</span>
         </div>
-        <span>楼主</span>
+        <div class='list'><img @click.stop="collect" :src="detailData.is_collect?'../../../static/star2.png':'../../../static/star1.png'" style='width:40rpx;height:40rpx;'><span>楼主</span></div>
       </div>
-
       <scroll-view class='body' scroll-y='true'  :scroll-top="top" enable-back-to-top='true' @scrolltolower='getMore'>
         <div class='title'>
           <p class='big'>{{detailData.title}}</p>
@@ -79,7 +78,7 @@ export default {
 
   methods: {
     async getData() {
-      this.id = wx.getStorageSync("topicid");
+      //this.id = wx.getStorageSync("topicid");
       wx.showLoading({
         title: "加载中"
       });
@@ -95,8 +94,41 @@ export default {
       } else {
       }
     },
+    async collect() {
+      const accesstoken = wx.getStorageSync("accesstoken");
+      const topic_id = this.id;
+      if (this.detailData.is_collect) {
+        // /topic_collect/de_collect
+        const res = await this.$http.post(`${api}/topic_collect/de_collect`, {
+          accesstoken,
+          topic_id
+        });
+        if (res.data.success) {
+          wx.showToast({
+            title: "取消收藏成功",
+            icon: "none",
+            duration: 2000
+          });
+          this.detailData.is_collect = false;
+        }
+      } else {
+        //  /topic_collect/collect
+        const res = await this.$http.post(`${api}/topic_collect/collect`, {
+          accesstoken,
+          topic_id
+        });
+        if (res.data.success) {
+          wx.showToast({
+            title: "收藏成功",
+            icon: "none",
+            duration: 2000
+          });
+        }
+        this.detailData.is_collect = true;
+      }
+    },
     goTop() {
-      console.log(11);
+      // console.log(11);
       setTimeout(() => (this.top = 0));
       this.top = 1;
       // wx.pageScrollTo({
@@ -179,6 +211,9 @@ export default {
       this.sendVisible = false;
     }
   },
+  onLoad() {
+    this.id = this.$root.$mp.query.topicid;
+  },
   data() {
     return {
       detailData: {},
@@ -214,6 +249,10 @@ $color: rgb(65, 184, 131);
         height: 64rpx;
       }
     }
+    .list {
+      display: flex;
+      align-items: center;
+    }
   }
   .body {
     height: 90vh;

src/pages/user/index.vue

@@ -44,7 +44,7 @@ export default {
       this.tab = e.target.dataset.tab;
     },
     async getData() {
-      const loginname = wx.getStorageSync("loginname");
+      const loginname = this.$root.$mp.query.loginname;
       if (loginname) {
         const res = await this.$http.get(`${api}/user/${loginname}`);
         if (res.data.success) {