接口初始化 第一版

src/views/discuss/DiscussPage.vue

@@ -2,7 +2,7 @@
   <div class="surveydetail">
     <!-- 面包屑导航 -->
     <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,92 +37,73 @@
       <!-- 中间部分 -->
       <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="allbtn">
-        <button class="btnone">最新</button>
-        <button class="btntwo" style="margin-left: 20px">最热</button>
+        <button :class="`btnone ${param.searchType==1?'active':''}`" @click="param.searchType=1">最新</button>
+        <button :class="`btntwo ${param.searchType==2?'active':''}`" @click="param.searchType=2"
+                style="margin-left: 20px">最热
+        </button>
       </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
+      <div class="discusslist" v-for="d 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">317</div>
+          <div class="count"> {{ d.discussReviewCount }}</div>
           <div class="sameone dianzan"></div>
-          <div class="count">317</div>
+          <div class="count"> {{ d.discussLikeCount }}</div>
           <div class="sameone shoucang"></div>
-          <div class="count">317</div>
+          <div class="count"> {{ d.discussCollectionCount }}</div>
         </div>
         <div class="thinline"></div>
       </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline"></div>
-      </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline"></div>
-      </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline" style="margin-bottom: 60px"></div>
-      </div>
     </div>
     <!-- 详细内容 -->
   </div>
 </template>
 
 <script>
+import {useRequest} from "@/api/request";
+import {DISCUSS_DETAIL, 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 handleClick = (id) => {
+
+    };
+    return {
+      ...toRefs(state),
+      handleClick,
+      data,
+      param,
+      disDetail
+    };
+  },
 };
 </script>
 
@@ -133,6 +114,7 @@ export default {
   display: table;
   clear: both;
 }
+
 .surveydetail {
   .crumb {
     color: #fff;
@@ -140,18 +122,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;
@@ -160,6 +145,7 @@ export default {
     margin-top: 17px;
     margin-left: -11px;
   }
+
   .bascinfo {
     min-height: 800px;
     width: 100%;
@@ -173,6 +159,7 @@ export default {
       display: flex;
       margin-top: 64px;
       position: relative;
+
       .title {
         font-size: 24px;
         font-weight: 800;
@@ -180,11 +167,13 @@ export default {
         margin-left: 79px;
         margin-right: 210px;
       }
+
       @media screen and (max-width: 1574px) {
         .title {
           margin-bottom: -24px;
         }
       }
+
       .btn {
         cursor: pointer;
         position: absolute;
@@ -201,6 +190,7 @@ export default {
         top: 5px;
       }
     }
+
     .line {
       display: flex;
       margin: 47px 45px 0 75px;
@@ -208,12 +198,14 @@ export default {
       // height: 50px;
       background: #f9f9f9;
       position: relative;
+
       .linetitle {
         margin: 14px 120px 17px 28px;
         font-size: 16px;
         font-weight: 800;
         color: #333333;
       }
+
       .radi {
         position: absolute;
         width: 11px;
@@ -223,6 +215,7 @@ export default {
         margin-top: 19px;
         right: 91px;
       }
+
       .intime {
         position: absolute;
         margin-top: 15px;
@@ -233,20 +226,28 @@ export default {
         right: 36px;
       }
     }
+
     .allbtn {
       margin-top: 21px;
       margin-left: 105px;
+
+      .active {
+        background: #387df7 !important;
+        color: #ffffff !important;
+      }
+
       .btnone {
         width: 44px;
         height: 26px;
-        background: #387df7;
         border-radius: 4px;
         border: 0;
+        background-color: #fff;
         font-size: 14px;
         font-weight: 500;
-        color: #ffffff;
+        color: #6e7b84;
         cursor: pointer;
       }
+
       .btntwo {
         font-size: 14px;
         font-weight: 500;
@@ -256,15 +257,18 @@ export default {
         cursor: pointer;
       }
     }
+
     .discusslist {
       margin-left: 105px;
       margin-top: 39px;
+
       .itemtitle {
         font-size: 16px;
         font-weight: 500;
         color: #333333;
         margin-right: 88px;
       }
+
       .itemdiscuss {
         margin-top: 15px;
         width: 812px;
@@ -274,6 +278,7 @@ export default {
         color: #666666;
         line-height: 24px;
       }
+
       .allstar {
         display: flex;
         margin-top: 18px;
@@ -282,24 +287,29 @@ export default {
           width: 14px;
           height: 14px;
         }
+
         .count {
           margin-left: 7px;
           font-size: 14px;
           font-weight: 500;
           color: #b3bdc4;
         }
+
         .pinglun {
           background-image: url(../../assets/image/pinglun.png);
         }
+
         .dianzan {
           margin-left: 19px;
           background-image: url(../../assets/image/dianzan2.png);
         }
+
         .shoucang {
           margin-left: 19px;
           background-image: url(../../assets/image/shoucang.png);
         }
       }
+
       .thinline {
         // max-width: 1450px;
         width: calc(100% - 88px);