接口初始化 第一版

src/views/discussdetail/DiscussDetail.vue

@@ -49,11 +49,20 @@
       </div>
       <div class="discusscontent clearfix">
         <div class="contenttop clearfix">
+
+
           <div class="contenttitle">{{ data.discussSubmitTitle }}</div>
-          <div class="same dianzan" @click="like(data.discussId)"></div>
-          <div class="count">{{ data.discussLikeCount }}</div>
-          <div class="same shoucang" @click="collection(data.discussId)"></div>
-          <div class="count">{{ data.discussCollectionCount }}</div>
+          <div @click="like(data.discussId)"
+               style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
+            <span class="iconfont icon-dianzan" :style="{color:data.isLike?'red':'#b3bdc4',marginLeft: '19px'}"></span>
+            <div class="count"> {{ data.discussLikeCount }}</div>
+          </div>
+          <div @click="collection(data.discussId)"
+               style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
+            <span class="iconfont icon-shoucang"
+                  :style="{color:data.isCollection?'red':'#b3bdc4',marginLeft: '19px'}"></span>
+            <div class="count"> {{ data.discussCollectionCount }}</div>
+          </div>
         </div>
         <div class="contentmid">
           {{ data.discussSubmitTitle }}
@@ -88,13 +97,13 @@
               </button>
             </UploadImg>
 
-            <button class="btntwo">发表</button>
+            <button class="btntwo" @click="submitComment">发表</button>
           </datagrid>
         </div>
 
         <div class="thinline"></div>
         <div class="bottom">
-          <div v-for="row in data.submitReviewVoList">
+          <div v-for="(row,i) in data.submitReviewVoList">
             <div class="header">
               <div class="avator"></div>
               <div class="id">{{ row.stuName }}</div>
@@ -109,12 +118,18 @@
               </div>
               <div class="intime">{{ row.createTime }}</div>
               <div class="likeYou">
-                <div class="same pinglun"></div>
-                <div class="count">{{ row.discussReviewCount }}</div>
-                <div class="same dianzan" style="margin-left: 19px"></div>
-                <div class="count">{{ row.discussLikeCount }}</div>
+                <div @click="commentComment(row)" style="display: flex;cursor: pointer;align-items: baseline;">
+                  <span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span>
+                  <div class="count"> {{ row.discussLikeCount }}</div>
+                </div>
+                <div @click="commentLike(row)"
+                     style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
+                  <span class="iconfont icon-shoucang"
+                        :style="{color:data.submitReviewVoList[i].isLike?'red':'#b3bdc4'}"></span>
+                  <div class="count"> {{ row.discussLikeCount }}</div>
+                </div>
               </div>
-              <div v-for="replay in row.submitReplyVoList">
+              <div v-for="(replay,j) in row.submitReplyVoList">
                 <div class="reply">
                   <div class="sameava avaone"></div>
                   <div class="sameuser">{{ replay.stuName }}</div>
@@ -133,10 +148,16 @@
                   <!-- <div class="talk"></div> -->
                 </div>
                 <div class="likeYou">
-                  <div class="same pinglun"></div>
-                  <div class="count">无</div>
-                  <div class="same dianzan" style="margin-left: 19px"></div>
-                  <div class="count">无</div>
+                  <div @click="commentComment(replay)" style="display: flex;cursor: pointer;align-items: baseline;">
+                    <span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span>
+                    <div class="count"> {{ replay.discussLikeCount }}</div>
+                  </div>
+                  <div @click="commentLike(replay)"
+                       style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
+                  <span class="iconfont icon-shoucang"
+                        :style="{color:replay.isLike?'red':'#b3bdc4'}"></span>
+                    <div class="count"> {{ replay.discussLikeCount }}</div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -152,6 +173,7 @@
                   maxlength="100"
                   type="textarea"
                   @input="textareaInputdown"
+                  :placeholder="placeholder"
               />
               <div class="words">{{ textarealength2 }}/100</div>
               <div class="upload">
@@ -179,7 +201,7 @@
     <!-- 详细内容 -->
   </div>
 </template>
-
+<!--todo #评论详情 发表和回复共功能-->
 <script setup>
 import {reactive, ref, toRefs} from "vue";
 import {useRoute} from "vue-router/dist/vue-router";
@@ -208,12 +230,15 @@ const state = reactive({
   textarealength: 0,
   textarea2: "",
   textarealength2: 0,
+  placeholder: '',
+  rId:''
 });
 const {
   textarea1,
   textarealength,
   textarea2,
-  textarealength2
+  textarealength2,
+  placeholder
 } = toRefs(state)
 
 const textareaInput = (e) => {
@@ -234,16 +259,35 @@ function removeCommentImg() {
   commentSubmitFileList.value.splice(i, 1)
 }
 
+//todo 帖子是否点赞收藏
 function like(discussSubmitId) {
-  data.value.discussLikeCount += 1
+  data.value.isLike ? (data.value.discussLikeCount -= 1) : (data.value.discussLikeCount += 1)
+  data.value.isLike = !data.value.isLike
   request(DISCUSS_LIKE, {discussSubmitId})
   //todo 帖子和评论 返回是否点赞和收藏
 }
 
 function collection(discussSubmitId) {
-  data.value.discussCollectionCount += 1
+  data.value.isCollection ? (data.value.discussCollectionCount -= 1) : (data.value.discussCollectionCount += 1)
+  data.value.isCollection = !data.value.isCollection
   request(DISCUSS_COLLECTION, {discussSubmitId})
 }
+
+function commentLike(obj) {
+  obj.isLike ? (obj.discussLikeCount -= 1) : (obj.discussLikeCount += 1)
+  obj.isLike = !obj.isLike
+  const discussSubmitId = obj.discussSubmitId
+  request(DISCUSS_LIKE, {discussSubmitId})
+}
+
+function commentComment(obj) {
+  state.placeholder = '@ '+obj.stuName
+  state.rId = obj.discussSubmitId
+}
+
+function submitComment() {
+
+}
 </script>
 
 <style lang="scss">