接口初始化 第一版

src/views/discussdetail/DiscussDetail.vue

@@ -2,7 +2,7 @@
   <div class="surveydetailpage">
     <!-- 面包屑导航 -->
     <div
-      style="display: flex; align-items: center; justify-content: space-between"
+        style="display: flex; align-items: center; justify-content: space-between"
     >
       <div class="crumb">
         <div>混合制项目</div>
@@ -14,16 +14,16 @@
       <div class="prevnext">
         <div class="prev">
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/prev.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/prev.png"
           />
           <div style="margin-left: 7px">上一个</div>
         </div>
         <div class="prev" style="margin-left: 31px">
           <div style="margin-right: 7px">下一个</div>
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/next.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/next.png"
           />
         </div>
       </div>
@@ -37,33 +37,26 @@
       <!-- 中间部分 -->
       <div class="middletitle">
         <div class="title">
-          请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
+          {{ disDetail.discussName }}
         </div>
         <button class="btn">回复</button>
       </div>
 
       <div class="line clearfix">
-        <div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div>
+        <div class="linetitle">{{ disDetail.discussExplain }}</div>
         <div class="radi"></div>
         <div class="intime">进行中</div>
       </div>
       <div class="discusscontent clearfix">
         <div class="contenttop clearfix">
-          <div class="contenttitle">从营销角度分析：我的团队需要这些能力</div>
-          <div class="same dianzan"></div>
-          <div class="count">103</div>
-          <div class="same shoucang"></div>
-          <div class="count">103</div>
+          <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>
         <div class="contentmid">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br />
-          包容成员<br />
-          团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，
-          这是最有效的方法。 <br />
-          获得支持<br />
-          要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />
-          保持谦虚<br />
-          任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任何一位成员，都有自己的专长，所以必须保持足够的谦虚。
+          {{ data.discussSubmitTitle }}
         </div>
       </div>
     </div>
@@ -71,117 +64,110 @@
     <div class="bascinfor">
       <div class="inputone">
         <el-input
-          v-model="textarea1"
-          :autosize="{ minRows: 5, maxRows: 5 }"
-          resize="none"
-          maxlength="100"
-          type="textarea"
-          placeholder="写评论~"
-          @input="textareaInput"
+            v-model="textarea1"
+            :autosize="{ minRows: 5, maxRows: 5 }"
+            resize="none"
+            maxlength="100"
+            type="textarea"
+            placeholder="写评论~"
+            @input="textareaInput"
         />
         <div class="words">{{ textarealength }}/100</div>
         <div class="upload">
-          <div class="allimg">
-            <div>
-              <div class="imgone"></div>
-              <div class="cha"></div>
-            </div>
-            <div style="margin-left: 15px">
-              <div class="imgone"></div>
-              <div class="cha" style="right: 131px"></div>
-            </div>
-            <div style="margin-left: 15px">
-              <div class="imgone"></div>
-              <div class="cha" style="right: 61px"></div>
+          <div style="display: flex">
+            <div class="allimg" v-for="(img,i) in commentSubmitFileList">
+              <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+              <div class="cha" @click="removeCommentImg(i)"></div>
             </div>
           </div>
           <datagrid class="uploadAnd">
-            <button class="btnone clearfix">
-              <img class="image" src="../../assets/image/uploadimg.png" />
-              <div class="shangchuan">上传图片</div>
-            </button>
+            <UploadImg v-model="commentSubmitFileList">
+              <button class="btnone clearfix">
+                <img class="image" src="../../assets/image/uploadimg.png"/>
+                <div class="shangchuan">上传图片</div>
+              </button>
+            </UploadImg>
+
             <button class="btntwo">发表</button>
           </datagrid>
         </div>
 
         <div class="thinline"></div>
         <div class="bottom">
-          <div class="header">
-            <div class="avator"></div>
-            <div class="id">罗宗梅</div>
-            <div class="showCareer">(显示事业)</div>
-            <div class="idThink">理性思考，崇尚科学</div>
-          </div>
-          <div class="discuss clearfix">
-            <div class="discussmain clearfix">
-              <div class="talkmain">
-                教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。
+          <div v-for="row in data.submitReviewVoList">
+            <div class="header">
+              <div class="avator"></div>
+              <div class="id">{{ row.stuName }}</div>
+              <div class="showCareer">(显示事业)</div>
+              <div class="idThink">理性思考，崇尚科学</div>
+            </div>
+            <div class="discuss clearfix">
+              <div class="discussmain clearfix">
+                <div class="talkmain">
+                  {{ row.discussReviewContent }}
+                </div>
               </div>
-              <!-- <div class="talk"></div> -->
-            </div>
-            <div class="intime">2022-06-21&nbsp;21:35:12</div>
-            <div class="likeYou">
-              <div class="same pinglun"></div>
-              <div class="count">317</div>
-              <div class="same dianzan" style="margin-left: 19px"></div>
-              <div class="count">111</div>
-            </div>
-            <div class="reply">
-              <div class="sameava avaone"></div>
-              <div class="sameuser">赵雪莉</div>
-              <div class="centerreply">回复</div>
-              <div class="sameava avatwo"></div>
-              <div class="sameuser">罗宗梅</div>
-              <div class="replytime">2022-06-21 21:35:12</div>
-            </div>
-            <div class="allreplyimg">
-              <div class="singleimg"></div>
-              <div class="singleimg"></div>
-              <div class="singleimg"></div>
-            </div>
-            <div class="mainreply">
-              <div class="replydetail">
-                教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进
+              <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>
+              <div v-for="replay in row.submitReplyVoList">
+                <div class="reply">
+                  <div class="sameava avaone"></div>
+                  <div class="sameuser">{{ replay.stuName }}</div>
+                  <div class="centerreply">回复</div>
+                  <div class="sameava avatwo"></div>
+                  <div class="sameuser">{{ row.stuName }}</div>
+                  <div class="replytime">{{ replay.createTime }}</div>
+                </div>
+                <div class="allreplyimg">
+                  <div class="singleimg"></div>
+                </div>
+                <div class="mainreply">
+                  <div class="replydetail">
+                    {{ replay.replyContent }}
+                  </div>
+                  <!-- <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>
               </div>
-              <!-- <div class="talk"></div> -->
-            </div>
-            <div class="likeYou">
-              <div class="same pinglun"></div>
-              <div class="count">317</div>
-              <div class="same dianzan" style="margin-left: 19px"></div>
-              <div class="count">111</div>
             </div>
 
+
+          </div>
+          <div class="discuss clearfix">
             <div class="inreply">
               <el-input
-                v-model="textarea2"
-                :autosize="{ minRows: 5, maxRows: 5 }"
-                resize="none"
-                maxlength="100"
-                type="textarea"
-                @input="textareaInputdown"
+                  v-model="textarea2"
+                  :autosize="{ minRows: 5, maxRows: 5 }"
+                  resize="none"
+                  maxlength="100"
+                  type="textarea"
+                  @input="textareaInputdown"
               />
               <div class="words">{{ textarealength2 }}/100</div>
               <div class="upload">
-                <div class="allimg">
-                  <div>
-                    <div class="imgone"></div>
-                    <div class="cha"></div>
-                  </div>
-                  <div style="margin-left: 15px">
-                    <div class="imgone"></div>
-                    <div class="cha" style="right: 131px"></div>
-                  </div>
-                  <div style="margin-left: 15px">
-                    <div class="imgone"></div>
-                    <div class="cha" style="right: 61px"></div>
+                <div style="display: flex">
+                  <div class="allimg" v-for="(img,i) in fileList">
+                    <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+                    <div class="cha" @click="removeImg(i)"></div>
                   </div>
                 </div>
                 <datagrid class="uploadAnd">
-                  <button class="btnone clearfix">
-                    <img class="image" src="../../assets/image/uploadimg.png" />
-                    <div class="shangchuan">上传图片</div>
-                  </button>
+                  <UploadImg v-model="fileList">
+                    <button class="btnone clearfix">
+                      <img class="image" src="../../assets/image/uploadimg.png"/>
+                      <div class="shangchuan">上传图片</div>
+                    </button>
+                  </UploadImg>
                   <button class="btntwo">发表</button>
                 </datagrid>
               </div>
@@ -194,34 +180,70 @@
   </div>
 </template>
 
-<script>
-import { reactive, toRefs } from "vue";
-// import { expandKeys } from "element-plus/es/components/table-v2/src/common";
-export default {
-  name: "DiscussDetail",
-  setup() {
-    const state = reactive({
-      textarea1: "",
-      textarealength: 0,
-      textarea2: "",
-      textarealength2: 0,
-    });
-    const textareaInput = (e) => {
-      // console.log("eee", e);
-      state.textarea1 = e;
-      state.textarealength = e.length;
-    };
-    const textareaInputdown = (e) => {
-      state.textarea2 = e;
-      state.textarealength2 = e.length;
-    };
-    return {
-      ...toRefs(state),
-      textareaInput,
-      textareaInputdown,
-    };
-  },
+<script setup>
+import {reactive, ref, toRefs} from "vue";
+import {useRoute} from "vue-router/dist/vue-router";
+import {request, useRequest} from "@/api/request";
+import {
+  DISCUSS_COLLECTION,
+  DISCUSS_DETAIL,
+  DISCUSS_LIKE,
+  DISCUSS_LIST,
+  DISCUSS_SUBMIT_REVIEW_LIST,
+  FILE_UPLOAD
+} from "@/api/api";
+import UploadImg from '@/components/img/UploadImg.vue'
+
+const {query: {id: discussSubmitId, discussId}} = useRoute()
+
+const {data} = useRequest(DISCUSS_SUBMIT_REVIEW_LIST, {discussSubmitId})
+
+const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
+
+const fileList = ref([])
+const commentSubmitFileList = ref([])
+
+const state = reactive({
+  textarea1: "",
+  textarealength: 0,
+  textarea2: "",
+  textarealength2: 0,
+});
+const {
+  textarea1,
+  textarealength,
+  textarea2,
+  textarealength2
+} = toRefs(state)
+
+const textareaInput = (e) => {
+  state.textarea1 = e;
+  state.textarealength = e.length;
 };
+const textareaInputdown = (e) => {
+  state.textarea2 = e;
+  state.textarealength2 = e.length;
+};
+
+
+function removeImg(i) {
+  fileList.value.splice(i, 1)
+}
+
+function removeCommentImg() {
+  commentSubmitFileList.value.splice(i, 1)
+}
+
+function like(discussSubmitId) {
+  data.value.discussLikeCount += 1
+  request(DISCUSS_LIKE, {discussSubmitId})
+  //todo 帖子和评论 返回是否点赞和收藏
+}
+
+function collection(discussSubmitId) {
+  data.value.discussCollectionCount += 1
+  request(DISCUSS_COLLECTION, {discussSubmitId})
+}
 </script>
 
 <style lang="scss">
@@ -231,6 +253,7 @@ export default {
   display: table;
   clear: both;
 }
+
 .surveydetailpage {
   .crumb {
     color: #fff;
@@ -238,18 +261,21 @@ export default {
     font-size: 14px;
     line-height: 24px;
   }
+
   .prevnext {
     display: flex;
     align-items: center;
     font-size: 14px;
     font-weight: 500;
     color: #ffffff;
+
     .prev {
       display: flex;
       align-items: center;
       cursor: pointer;
     }
   }
+
   .title {
     font-size: 20px;
     font-weight: 800;
@@ -258,6 +284,7 @@ export default {
     margin-top: 17px;
     margin-left: -11px;
   }
+
   .bascinfo {
     width: 100%;
     background: #ffffff;
@@ -268,6 +295,7 @@ export default {
       display: flex;
       margin-top: 64px;
       position: relative;
+
       .title {
         font-size: 24px;
         font-weight: 800;
@@ -275,11 +303,13 @@ export default {
         margin-left: 79px;
         margin-right: 210px;
       }
+
       @media screen and (max-width: 1574px) {
         .title {
           margin-bottom: -24px;
         }
       }
+
       .btn {
         cursor: pointer;
         position: absolute;
@@ -296,6 +326,7 @@ export default {
         top: 5px;
       }
     }
+
     .line {
       display: flex;
       margin: 47px 45px 0 75px;
@@ -303,12 +334,14 @@ export default {
       height: 50px;
       background: #f9f9f9;
       position: relative;
+
       .linetitle {
         margin: 14px 0 17px 28px;
         font-size: 16px;
         font-weight: 800;
         color: #333333;
       }
+
       .radi {
         position: absolute;
         width: 11px;
@@ -318,6 +351,7 @@ export default {
         margin-top: 19px;
         right: 91px;
       }
+
       .intime {
         position: absolute;
         margin-top: 15px;
@@ -328,22 +362,27 @@ export default {
         right: 36px;
       }
     }
+
     .discusscontent {
       margin-left: 105px;
       margin-top: 35px;
+
       .contenttop {
         display: flex;
+
         .contenttitle {
           font-size: 16px;
           font-weight: 500;
           color: #333333;
         }
+
         .same {
           width: 14px;
           height: 14px;
           margin-top: 4px;
           margin-left: 20px;
         }
+
         .count {
           font-size: 14px;
           font-weight: 500;
@@ -351,15 +390,18 @@ export default {
           margin-top: 4px;
           margin-left: 7px;
         }
+
         .dianzan {
           background-image: url(../../assets/image/dianzan2.png);
           // background-size: 100%;
         }
+
         .shoucang {
           background-image: url(../../assets/image/shoucang.png);
           // background-size: 100%;
         }
       }
+
       .contentmid {
         margin: 15px 47px 30px 0;
         font-size: 14px;
@@ -369,6 +411,7 @@ export default {
       }
     }
   }
+
   .bascinfor {
     width: 100%;
     background: #ffffff;
@@ -382,6 +425,7 @@ export default {
       // max-height: 110px;
       margin-left: 88px;
       margin-top: 44px;
+
       .words {
         position: absolute;
         right: 15px;
@@ -391,6 +435,7 @@ export default {
         font-weight: 500;
         color: #333330;
       }
+
       .el-textarea__inner {
         font-size: 14px;
         font-weight: 500;
@@ -401,12 +446,14 @@ export default {
         background-color: rgba(245, 246, 247, 1);
         padding: 11px 25px;
       }
+
       .el-textarea__inner::placeholder {
         font-size: 14px;
         font-weight: 500;
         color: #666666;
         line-height: 24px;
       }
+
       // .el-input__inner {
       //   &::-webkit-input-placeholder {
       //     /* WebKit browsers 适配谷歌 */
@@ -419,6 +466,7 @@ export default {
         .allimg {
           position: relative;
           display: flex;
+
           .imgone {
             margin-top: 24px;
             width: 55px;
@@ -427,6 +475,7 @@ export default {
             background-image: url(../../assets/image/px.png);
             background-size: 100%;
           }
+
           .cha {
             cursor: pointer;
             top: 15px;
@@ -440,12 +489,15 @@ export default {
             background-size: 100%;
           }
         }
+
         .uploadAnd {
           margin-top: 21px;
+
           .btnone {
             cursor: pointer;
             position: absolute;
             right: 140px;
+
             .image {
               padding-top: 8px;
               width: 18px;
@@ -453,6 +505,7 @@ export default {
               // margin-top: 10px;
               margin-left: -60px;
             }
+
             .shangchuan {
               position: absolute;
               right: 20px;
@@ -464,12 +517,14 @@ export default {
               color: #2478ff;
               line-height: 24px;
             }
+
             width: 126px;
             height: 36px;
             border: 1px solid #2478ff;
             border-radius: 4px;
             background-color: #fff;
           }
+
           .btntwo {
             cursor: pointer;
             position: absolute;
@@ -485,6 +540,7 @@ export default {
           }
         }
       }
+
       .thinline {
         margin-top: 26px;
         // width: 1635px;
@@ -492,6 +548,7 @@ export default {
         margin-left: -50px;
         opacity: 0.2;
       }
+
       .bottom {
         margin-top: 31px;
         // width: 100px;
@@ -499,6 +556,7 @@ export default {
         // background-color: #bfa;
         .header {
           display: flex;
+
           .avator {
             width: 41px;
             height: 41px;
@@ -506,6 +564,7 @@ export default {
             background-image: url(../../assets/image/px.png);
             background-size: 100%;
           }
+
           .id {
             margin-left: 8px;
             font-size: 14px;
@@ -514,6 +573,7 @@ export default {
             color: #333333;
             line-height: 41px;
           }
+
           .showCareer {
             margin-left: 7px;
             height: 41px;
@@ -522,6 +582,7 @@ export default {
             color: #666666;
             line-height: 41px;
           }
+
           .idThink {
             margin-left: 17px;
             height: 41px;
@@ -531,11 +592,12 @@ export default {
             line-height: 41px;
           }
         }
+
         .discuss {
           margin-left: 48px;
           margin-top: 23px;
           // width: 100px;
-          widows: 100%;
+          width: 100%;
           // height: 100px;
           // background-color: orange;
           .discussmain {
@@ -543,6 +605,7 @@ export default {
             width: 100%;
             display: flex;
             position: relative;
+
             .talkmain {
               margin-right: 25px;
               margin-top: 2px;
@@ -550,6 +613,7 @@ export default {
               font-weight: 500;
               color: #666666;
             }
+
             // .talk {
             //   position: absolute;
             //   right: 0;
@@ -559,27 +623,33 @@ export default {
             //   background-size: 100%;
             // }
           }
+
           .intime {
             margin-top: 11px;
             font-size: 14px;
             font-weight: 500;
             color: #999999;
           }
+
           .likeYou {
             margin-top: 15px;
             display: flex;
+
             .same {
               width: 14px;
               height: 14px;
             }
+
             .pinglun {
               background-image: url(../../assets/image/pinglun.png);
               background-size: 100%;
             }
+
             .dianzan {
               background-image: url(../../assets/image/dianzan2.png);
               background-size: 100%;
             }
+
             .count {
               margin-left: 7px;
               margin-top: -1px;
@@ -588,6 +658,7 @@ export default {
               color: #b3bdc4;
             }
           }
+
           .reply {
             display: flex;
             margin-top: 32px;
@@ -599,6 +670,7 @@ export default {
               height: 29px;
               border-radius: 50%;
             }
+
             .sameuser {
               margin-left: 14px;
               line-height: 29px;
@@ -607,6 +679,7 @@ export default {
               color: #333333;
               font-size: 14px;
             }
+
             .centerreply {
               height: 29px;
               font-size: 14px;
@@ -616,14 +689,17 @@ export default {
               margin-left: 23px;
               margin-right: 17px;
             }
+
             .avaone {
               background-image: url(../../assets/image/px.png);
               background-size: 100%;
             }
+
             .avatwo {
               background-image: url(../../assets/image/px.png);
               background-size: 100%;
             }
+
             .replytime {
               margin-left: 17px;
               height: 29px;
@@ -633,9 +709,11 @@ export default {
               line-height: 29px;
             }
           }
+
           .allreplyimg {
             display: flex;
             margin-top: 21px;
+
             .singleimg {
               margin-right: 7px;
               width: 65px;
@@ -645,9 +723,11 @@ export default {
               background-size: 100%;
             }
           }
+
           .mainreply {
             display: flex;
             margin-top: 16px;
+
             .replydetail {
               // width: 462px;
               height: 23px;
@@ -657,6 +737,7 @@ export default {
               line-height: 23px;
               margin-right: 11px;
             }
+
             // .talk {
             //   width: 23px;
             //   height: 23px;