接口初始化 第一版

src/views/discuss/DiscussPage.vue

@@ -53,18 +53,25 @@
                 style="margin-left: 20px">最热
         </button>
       </div>
-      <div class="discusslist" v-for="d in data.rows">
+      <div class="discusslist" v-for="(d,i) in data.rows">
         <div class="itemtitle">{{ d.discussSubmitTitle }}</div>
         <div class="itemdiscuss">
           {{ d.discussSubmitContent }}
         </div>
         <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count"> {{ d.discussReviewCount }}</div>
-          <div class="sameone dianzan"></div>
-          <div class="count"> {{ d.discussLikeCount }}</div>
-          <div class="sameone shoucang"></div>
-          <div class="count"> {{ d.discussCollectionCount }}</div>
+          <div @click="comment(i)" style="display: flex;cursor: pointer">
+            <span class="iconfont icon-pinglun" style="color:#b3bdc4"></span>
+            <div class="count"> {{ d.discussReviewCount }}</div>
+          </div>
+          <div @click="like(i)"  style="display: flex;cursor: pointer">
+            <span class="iconfont icon-dianzan" :style="{color:d.isLike?'red':'#b3bdc4',marginLeft: '19px'}"></span>
+            <div class="count"> {{ d.discussLikeCount }}</div>
+          </div>
+          <div @click="collection(i)"  style="display: flex;cursor: pointer">
+            <span class="iconfont icon-shoucang"
+                  :style="{color:d.isCollection?'red':'#b3bdc4',marginLeft: '19px'}"></span>
+            <div class="count"> {{ d.discussCollectionCount }}</div>
+          </div>
         </div>
         <div class="thinline"></div>
       </div>
@@ -73,38 +80,44 @@
   </div>
 </template>
 
-<script>
-import {useRequest} from "@/api/request";
-import {DISCUSS_DETAIL, DISCUSS_LIST, TASK_VOTE_DETAIL} from "@/api/api";
+<script setup>
+import {request, useRequest} from "@/api/request";
+import {DISCUSS_COLLECTION, DISCUSS_DETAIL, DISCUSS_LIKE, DISCUSS_LIST, TASK_VOTE_DETAIL} from "@/api/api";
 import {reactive, ref, toRefs} from "vue";
 import {useRoute, useRouter} from "vue-router";
 
-export default {
-  name: "DiscussPage",
-  setup() {
-    const {query: {id: discussId}} = useRoute()
-    const param = ref({
-      searchType: 1,
-      discussId
-    })
-    const {data} = useRequest(DISCUSS_LIST, param.value)
-    const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
-    const state = reactive({
-      activeName: "first",
-    });
+const router = useRouter()
+const {query: {id: discussId}} = useRoute()
 
-    const handleClick = (id) => {
+const param = ref({
+  searchType: 1,
+  discussId
+})
+const {data} = useRequest(DISCUSS_LIST, param.value)
+const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
+const state = reactive({
+  activeName: "first",
+});
 
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-      data,
-      param,
-      disDetail
-    };
-  },
-};
+function comment(i) {
+  const id = data.value.rows[i].discussId
+  router.push({path: 'discussdetail', query: {id}})
+}
+
+//todo 帖子点赞收藏 是否已经点赞收藏
+function like(i) {
+  data.value.rows[i].isLike ? (data.value.rows[i].discussLikeCount -= 1) : (data.value.rows[i].discussLikeCount += 1)
+  data.value.rows[i].isLike = !data.value.rows[i].isLike
+  const discussSubmitId = data.value.rows[i].discussSubmitId
+  request(DISCUSS_LIKE, {discussSubmitId})
+}
+
+function collection(i) {
+  data.value.rows[i].isCollection ? (data.value.rows[i].discussCollectionCount -= 1) : (data.value.rows[i].discussCollectionCount += 1)
+  data.value.rows[i].isCollection = !data.value.rows[i].isCollection
+  const discussSubmitId = data.value.rows[i].discussSubmitId
+  request(DISCUSS_COLLECTION, {discussSubmitId})
+}
 </script>
 
 <style scoped lang="scss">
@@ -115,6 +128,10 @@ export default {
   clear: both;
 }
 
+.active {
+  color: red;
+}
+
 .surveydetail {
   .crumb {
     color: #fff;