接口初始化 第一版

src/api/api.js

@@ -15,8 +15,12 @@ export const TASK_VOTE_COMMIT = '/stu/task/vote/commit'
 export const TASK_VOTE_DETAIL = '/stu/task/vote/detail'
 export const TASK_WORK_COMMIT = '/stu/task/work/commit'
 export const TASK_WORK_DETAIL = '/stu/task/work/detail'
+export const VOTE_DETAIL = '/queryVoteSubmitDetailById'
+export const TASK_VOTE_LIST = '/queryVoteSubmitDetailListByTaskId'
+
 export const STU_OFFCOURSE_DETAIL = '/stu/offcourse/detail'
 export const WORK_QUERYWORKDETAILBYID = '/work/queryWorkDetailById'
+export const WORK_HISTROY = '/workSubmit/queryWorkDetailListByStuId'
 export const EXAMINATION_QUERYEXAMINATIONDETAILBYID = '/examination/queryExaminationDetailById'
 export const DISCUSS_COLLECTION = '/discussSubmit/clickDiscussCollectionCountOr POST'
 export const DISCUSS_LIKE = '/discussSubmit/clickDiscussLikeCountOr POST'

src/api/utils.js

@@ -0,0 +1,3 @@
+export function useImage(src){
+    return new URL(`../assets/image/${src}`, import.meta.url).href
+}

src/assets/scss/iconfont.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3783986 */
+  src:
+          url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQEAAsAAAAACDgAAAO1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDFAqDbIMuATYCJAMQCwoABCAFhGcHRhssB8gekqQHgzo4hwXVG4AgIgjXyNkkTwiWChIVgapCIVv5quwqfDWS8GjJiJuQa08G0RPNCfTUtbWWeaCyQpW6qifVOVlg9aSPsvtH2Zv9XNFVGGAny0Zdyt88ImsPAGmtU/NM6MDeAvyAKaVbx4BnIkxRgJ3BWuR/jUCjdQpARzXOR7B03VkYNkEYwiCujeve2oMm71BqakO9UItOLeK+GtJB2sQ9//vx32YgSGoyY5VT1w5C+LwbePjPSVUS+QdXIJDdE2qQsbwwV1ytD5xXCQvLwBrL2letAqhVhDRorKrw6T+Fqqs1//JIQiZqGdXNYJuyZUeltHkSf5Z4gj/LRlfJFGe9qyk9xWeaGx6SJDFC0VvZvs0w3zUlSWY7Q9MtOMwKm8spLdsp9krJZ/aJYfbFja1l5G27Gfu8JSXlxalRZK2r6evRKIt0VPNsczcQWD6ZsoRyhneGsYKxZgadMTPGXMVUyQQsfIKWRr+n2xmVCpF9jAag0t8AwXff5t/4GpDuvHJuXJ4fsiyhsGivn+G0zKC0rNhYGzAvQps3TdVymRWSm5fNLs5aFJMxVXjDXBwnSUlXxuXBknrSSJrc4ymUk53S1WsX8tBN0doi9r5S+rlY9pI6ME/JgTaNodbmQeiIXb/ZTXl3RwXQvUoEtTg2+/H9oI0uqwpwvC3B76M4h+5sICt8SU+Zrv+9ICG5Awy8QaVsD2ST+3J32ZqcvWhqtDDjp2jHbMt865YdeQyc6O7ZhvoLLK+alaSFGdxfrbTBZ/UmJ0tKJl0rBzwVvbpnEFZ6uhmFwH8G3X7W7mMygByg2s0dmRcAqN7zaOZQS0e5K3N+224+ESAxjstyv/Xoc2v5Xfv9zY9XuwXQrUK9BKz4ksaLILGoSUop09iqf4fpUOdcQqPp5OPVQ6ezIUxdcI5Qn1JySOoMIas3SRVuETWabKJWvR00WqI+u0mXIBVRGjArlUBo14ak1XNk7Vaowu2jRq971Gr3j0anA7tck9lwVbXkCYXoEo3eroaVZRZf7IB0kXq2KDshO4vINAq3u9nyETHZPkaERuh+WJhCjxCToQa7G6WpwaAQE1Mgba8wyR3Bjiq7Sds1MIM9FvEIEkIuriFvAYMplyzp3xsgWiHlsSA18VkzWk6JR8IECAHUkYGhhgtZJdQFrS+MUJAHS5QySIP3kVQpGCiovFOMBESbV4dcziFokjxQQ3t6U3b35FwTxtIlUuQoUaPutjfrtOCGm7fHN1a7ZqiXKQKPNQAAAAA=') format('woff2'),
+          url('//at.alicdn.com/t/c/font_3783986_mjwv9ktyno9.woff?t=1669022536484') format('woff'),
+          url('//at.alicdn.com/t/c/font_3783986_mjwv9ktyno9.ttf?t=1669022536484') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-pinglun:before {
+  content: "\e8c5";
+}
+
+.icon-dianzan:before {
+  content: "\e619";
+}
+
+.icon-shoucang:before {
+  content: "\e8c6";
+}

src/main.js

@@ -7,6 +7,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import "@/assets/scss/common.scss"
+import "@/assets/scss/iconfont.css"
 
 const app = createApp(App)
 app.use(store).use(router).mount('#app')

src/mock/mocks/ballot.js

@@ -7,7 +7,19 @@ export default {
             "rows": [
                 {
                     "chapterId": 0,
-                    "name": ""
+                    "name": "初级"
+                },
+                {
+                    "chapterId": 0,
+                    "name": "中级"
+                },
+                {
+                    "chapterId": 0,
+                    "name": "高级"
+                },
+                {
+                    "chapterId": 0,
+                    "name": "专家"
                 }
             ]
         },

src/mock/mocks/discuss.js

@@ -11,8 +11,8 @@ export default {
                     "createUser": 0,
                     "discussCollectionCount": 12,
                     "discussId": "",
-                    "discussLikeCount": "123",
-                    "discussReviewCount": "12",
+                    "discussLikeCount": 123,
+                    "discussReviewCount": 11,
                     "discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，\n" +
                         "          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。",
                     "discussSubmitId": "",
@@ -24,7 +24,7 @@ export default {
                         {
                             "createTime": "",
                             "createUser": 0,
-                            "discussLikeCount": "12",
+                            "discussLikeCount": 12,
                             "discussReviewContent": "",
                             "discussReviewFlag": "",
                             "discussReviewId": "",
@@ -89,7 +89,7 @@ export default {
             "discussCollectionCount": 222,
             "discussId": "",
             "discussLikeCount": 123,
-            "discussReviewCount": "",
+            "discussReviewCount": 12,
             "discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说， 不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力",
             "discussSubmitId": "",
             "discussSubmitPictureAddress": "",
@@ -100,9 +100,10 @@ export default {
                 {
                     "createTime": "2022-06-21 21:35:12",
                     "createUser": 0,
-                    "discussLikeCount": "12",
+                    "discussLikeCount": 12,
                     "discussReviewContent": "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
                     "discussReviewFlag": "",
+                    discussReviewCount:12,
                     "discussReviewId": "",
                     "discussReviewPictureAddress": "",
                     "discussSubmitId": "",
@@ -111,7 +112,9 @@ export default {
                     "submitReplyVoList": [
                         {
                             "createTime": "2022-06-21 21:35:12",
+                            discussReviewCount:12,
                             "createUser": 0,
+                            "discussLikeCount": 12,
                             "discussReplyId": 0,
                             "discussReviewId": "",
                             "replyContent": "教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进",

src/views/ballot/BallotPage.vue

@@ -62,7 +62,7 @@
                 <div class="imgone" style="margin-right: 10px"></div>
                 <div class="imgone"></div>
               </div>
-<!--              todo #投票任务 参与投票下面这段文字是固定的么-->
+              <!--              todo #投票任务 参与投票下面这段文字是固定的么-->
               <div class="ontitle">
                 通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;
                 <br/>
@@ -98,13 +98,16 @@
             </div>
             <div class="timebox clearfix">
               <div class="innertime">
-                {{data.detail?.voteStartTime
+                {{
+                  data.detail?.voteStartTime
                 }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{ data.detail?.voteEndTime }}
               </div>
               <div class="endtime clearfix">
                 <div class="endtimetext">
                   距离结束还有&nbsp;&nbsp;
-                  <span class="te">{{parseInt(dayjs(data.detail?.voteEndTime).diff(dayjs(),'minute')/60)}}</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{dayjs(data.detail?.voteEndTime).diff(dayjs(),'minute')%60}}</span>&nbsp;&nbsp;分钟
+                  <span class="te">{{ parseInt(dayjs(data.detail?.voteEndTime).diff(dayjs(), 'minute') / 60) }}</span>&nbsp;&nbsp;
+                  小时&nbsp;&nbsp;<span
+                    class="te">{{ dayjs(data.detail?.voteEndTime).diff(dayjs(), 'minute') % 60 }}</span>&nbsp;&nbsp;分钟
                 </div>
               </div>
             </div>
@@ -129,45 +132,17 @@
   </div>
 </template>
 
-<script>
-import {reactive, toRefs, ref} from "vue";
-import axios from 'axios';
+<script setup>
 import {useRequest} from "@/api/request";
 import {ROUTER_CHAPTER_LIST, ROUTER_LIST, TASK_VOTE_DETAIL} from "@/api/api";
 import dayjs from "dayjs";
-export default {
-  name: "balloT",
-  setup() {
-    const {data} = useRequest(TASK_VOTE_DETAIL, {})
 
-    const state = reactive({
-      activeName: "first",
-    });
-    const test = ref({
-      activeName: "first",
-    });
-    const testAsync = () => {
-      axios({url: ROUTER_CHAPTER_LIST})
-          .then(res => {
-            console.log("login", res.data);
-          })
-          .catch(err =>
-              console.error(err)
-          )
-    }
-    const handleClick = (tab, event) => {
+const {data} = useRequest(TASK_VOTE_DETAIL, {})
+
+const handleClick = (tab, event) => {
   console.log(tab, event);
-    };
-    return {
-      ...toRefs(state),
-      test,
-      handleClick,
-      testAsync,
-      dayjs,
-      data
-    };
-  },
 };
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/debate/DebatePage.vue

@@ -26,7 +26,7 @@
             style="margin-left: 48px; margin-right: 48px; background-color: pink"
         >
           <div class="title">
-            <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+            <img width="20px" height="20px" src="../../assets/image/yuan.png"/>
             <div class="text">参与情况</div>
             <div class="box"></div>
           </div>
@@ -45,114 +45,9 @@
               <div class="item2">浏览数</div>
             </div>
           </div>
-<!--          todo #提交投票 提交投票时投票列表如何来的？-->
+          <!--          todo #提交投票 提交投票时投票列表如何来的？-->
           <div class="vsbox">
             <div class="yes">
-              <!-- <div class="choose" style="color: #fe6a64; font-size: 14px">
-                <div class="infor" style="padding-top: 26px; margin-left: 42px">
-                  <span>熊*铭&nbsp;已选择正方观点</span>
-                  <span>2022.7.1</span>
-                </div>
-              </div>
-              <div class="stay">
-                <div class="stayinfor">保留</div>
-                <div class="box"></div>
-              </div>
-              <div class="discuss">
-                <img
-                  style="margin-left: 24px; margin-top: 17px"
-                  src="../../assets/image/yinhao.png"
-                />
-                <div class="titleinfor">
-                  关键人才掌握核心技术<br />
-                  人才流失会对团队带来不良影响
-                </div>
-                <div class="line"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      高阶人才不只对金钱有需求，就算有也是极少数，因为关键
-                      核心人才往往已经是能够独立、优秀的为企业创造价值了。
-                    </div>
-                  </div>
-                </div>
-                <div class="line" style="margin-top: 10px"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
-                      十的人力成本；更重要的是，很多位置的员工需要一定的招
-                      聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
-                      即用。因此，一般认为，招聘新员工会使得成本增加百分之
-                      五十左右。
-                    </div>
-                  </div>
-                </div>
-                <div class="line" style="margin-top: 10px"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
-                    </div>
-                  </div>
-                </div>
-                <div class="yourdiscuss clearfix">
-                  <div class="your">留下你的评论</div>
-                </div>
-                <div>
-                  <button class="btn">提交</button>
-                </div>
-              </div>
-              <div class="jindu1"></div>
-              <div class="jindu2"></div> -->
             </div>
             <div class="vs clearfix">
               <img
@@ -170,181 +65,37 @@
               </div>
             </div>
             <div class="no">
-              <!-- <div class="choose" style="color: #58a4e8; font-size: 14px">
-                <div class="infor" style="padding-top: 26px; margin-left: 42px">
-                  <span>熊*铭&nbsp;已选择反方观点</span>
-                  <span>2022.7.1</span>
-                </div>
-              </div>
-              <div class="stay">
-                <div class="stayinfor">不保留</div>
-                <div class="box"></div>
-              </div>
-              <div class="discuss">
-                <img
-                  style="margin-left: 24px; margin-top: 17px"
-                  src="../../assets/image/yinhao2.png"
-                />
-                <div class="titleinfor">
-                  “能分开的都不是爱情”<br />
-                  留住的留不住心，随他去
-                </div>
-                <div class="line"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      高阶人才不只对金钱有需求，就算有也是极少数，因为关键
-                      核心人才往往已经是能够独立、优秀的为企业创造价值了。
-                    </div>
-                  </div>
-                </div>
-                <div class="line" style="margin-top: 10px"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      根据调查，招聘同等能力的员工顶替跳槽者要增加百分之二
-                      十的人力成本；更重要的是，很多位置的员工需要一定的招
-                      聘时间和磨合周期，绝非如模具化零件那样，可以随时即装
-                      即用。因此，一般认为，招聘新员工会使得成本增加百分之
-                      五十左右。
-                    </div>
-                  </div>
-                </div>
-                <div class="line" style="margin-top: 10px"></div>
-                <div class="xiongming">
-                  <div class="xmheader" style="">
-                    <img class="imgstyle" src="../../assets/image/avator.png" />
-                    <div
-                      style="
-                        display: inline-block;
-                        position: relative;
-                        top: -5px;
-                      "
-                    >
-                      <span
-                        class="headerxm"
-                        style="margin-left: 12px; margin-right: 140px"
-                      >
-                        熊*铭
-                      </span>
-                      <span class="headerxm">2022-7-20&nbsp;16:38:56</span>
-                    </div>
-                    <div class="discusscontent">
-                      地球当然不会因为少了一个人而停转，但组织的运转却是依靠人的推动。一个螺丝钉被人拔走都可能导致机器运行故障而员工甚至还无法像零件那样被等价并且立刻得到替换。
-                    </div>
-                  </div>
-                </div>
-                <div class="yourdiscuss clearfix">
-                  <div class="your">留下你的评论</div>
-                </div>
-                <div>
-                  <button class="btn">提交</button>
-                </div>
-              </div>
-              <div class="jindu1"></div>
-              <div class="jindu2"></div> -->
+
             </div>
           </div>
         </div>
         <!-- 左侧 -->
       </div>
-      <!-- 右侧 -->
-      <!-- <div class="right">
-        <div class="righttitle">
-          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
-          <div class="text">辩论时间</div>
-          <div class="box"></div>
-        </div>
-        <div class="timebox clearfix">
-          <div class="innertime">
-            2022-7-20
-            00:00&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
-            23:59:59
-          </div>
-          <div class="endtime clearfix">
-            <div class="endtimetext">
-              距离结束还有&nbsp;&nbsp;
-              <span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
-                class="te"
-                >42</span
-              >&nbsp;&nbsp;分钟
-            </div>
-          </div>
-        </div>
-        <div class="righttitle">
-          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
-          <div class="text">辩论说明</div>
-          <div class="box"></div>
-        </div>
-        <div class="explain clearfix">
-          <div class="explaincontent">
-            为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式,每位学员可投票2个选项
-            ，我们将选 取最高选项的两个做后续讲解。
-          </div>
-        </div>
-      </div> -->
-      <!-- 右侧 -->
     </div>
     <!-- 详细信息 -->
   </div>
 </template>
 
-<script>
-import { reactive, toRefs } from "vue";
+<script setup>
+import {reactive, toRefs} from "vue";
 import {useRequest} from "@/api/request";
-import {TASK_VOTE_DETAIL} from "@/api/api";
-export default {
-  name: "debatE",
-  setup() {
-    const {data} = useRequest(TASK_VOTE_DETAIL,{})
-    const state = reactive({
-      activeName: "first",
-    });
-    const handleClick = (id) => {
+import {TASK_VOTE_DETAIL, VOTE_DETAIL} from "@/api/api";
+import {useRoute} from "vue-router/dist/vue-router";
+
+const {query: {id: voteSubmitId}} = useRoute()
+const {data} = useRequest(TASK_VOTE_DETAIL, {voteSubmitId})
+const {data:voteDetail} = useRequest(VOTE_DETAIL, {voteSubmitId})
+
+const state = reactive({
+  activeName: "first",
+});
+const {activeName} = toRefs(state)
+
+const handleClick = (id) => {
 
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-      data
-    };
-  },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .moreactive {
   .crumb {
@@ -358,6 +109,7 @@ export default {
   .preNext {
     position: absolute;
     right: 0px;
+
     .content {
       font-size: 14px;
       color: #fff;
@@ -368,6 +120,7 @@ export default {
       top: -6px;
       cursor: pointer;
     }
+
     .btn {
       width: 23px;
       height: 23px;
@@ -375,9 +128,11 @@ export default {
       border: 0;
       cursor: pointer;
     }
+
     .btn01 {
       background-image: url("../../assets/image/prev.png");
     }
+
     .btn02 {
       background-image: url("../../assets/image/next.png");
     }
@@ -400,6 +155,7 @@ export default {
     border-radius: 8px;
     color: rgba(51, 51, 51, 1);
     display: flex;
+
     .detail {
       flex: 1;
       // margin-right: 20px;
@@ -410,12 +166,14 @@ export default {
         padding-top: 39px;
         position: relative;
       }
+
       .title .text {
         margin-left: 8px;
         font-size: 16px;
         color: rgba(51, 51, 51, 1);
         font-weight: 800;
       }
+
       .title .box {
         width: 75px;
         height: 10px;
@@ -424,10 +182,12 @@ export default {
         left: 23px;
         top: 53px;
       }
+
       .all {
         display: flex;
         justify-content: space-between;
         margin-top: 43px;
+
         .allbox1 {
           margin-right: 22px;
           background: linear-gradient(
@@ -436,6 +196,7 @@ export default {
                   rgba(161, 195, 231, 0.2) 100%
           );
         }
+
         .allbox2 {
           margin-right: 22px;
           background: linear-gradient(
@@ -444,6 +205,7 @@ export default {
                   rgba(172, 216, 227, 0.2) 100%
           );
         }
+
         .allbox3 {
           background: linear-gradient(
                   0deg,
@@ -451,17 +213,20 @@ export default {
                   rgba(191, 206, 231, 0.2) 100%
           );
         }
+
         .item {
           width: calc(100% - 44px);
           height: 149px;
           text-align: center;
           border-radius: 4px;
+
           .item1 {
             color: #089dff;
             font-size: 24px;
             font-weight: bold;
             margin-top: 36px;
           }
+
           .item2 {
             color: #333330;
             font-size: 14px;
@@ -469,33 +234,39 @@ export default {
           }
         }
       }
+
       .vsbox {
         display: flex;
         margin-top: 26px;
         justify-content: space-between;
         width: 100%;
         background-color: red;
+
         .yes {
           position: relative;
           width: calc((100% - 297px) / 2);
+
           .choose {
             width: 435px;
             height: 66px;
             background: #ffffff;
             box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
             border-radius: 8px;
+
             .infor {
               width: 350px;
               display: flex;
               justify-content: space-between;
             }
           }
+
           .stay {
             margin-top: 15px;
             width: 435px;
             height: 59px;
             background: #faf1f1;
             border-radius: 8px;
+
             .stayinfor {
               font-size: 18px;
               font-weight: 800;
@@ -503,6 +274,7 @@ export default {
               margin-left: 199px;
               padding-top: 11px;
             }
+
             .box {
               width: 43px;
               height: 6px;
@@ -511,6 +283,7 @@ export default {
               margin-left: 195px;
             }
           }
+
           .discuss {
             margin-top: 8px;
             width: 435px;
@@ -521,6 +294,7 @@ export default {
                     rgba(226, 104, 119, 0.1) 100%
             );
             border-radius: 8px;
+
             .titleinfor {
               // height: 41px;
               width: 254px;
@@ -532,6 +306,7 @@ export default {
               margin-top: 44px;
               text-align: center;
             }
+
             .line {
               margin-left: 24px;
               margin-top: 68px;
@@ -539,15 +314,18 @@ export default {
               // height: 1px;
               border: 1px solid #fae4e7;
             }
+
             .imgstyle {
               width: 24px;
               height: 24px;
               margin-left: 24px;
               margin-top: 14px;
             }
+
             .headerxm {
               color: #818a92;
             }
+
             .discusscontent {
               width: 366px;
               color: #333330;
@@ -557,6 +335,7 @@ export default {
               line-height: 24px;
             }
           }
+
           .yourdiscuss {
             margin-top: 27px;
             margin-left: 24px;
@@ -564,6 +343,7 @@ export default {
             height: 83px;
             background: #faf1f1;
             border-radius: 8px;
+
             .your {
               margin-left: 15px;
               margin-top: 18px;
@@ -573,6 +353,7 @@ export default {
               line-height: 24px;
             }
           }
+
           .jindu1 {
             position: absolute;
             width: 4px;
@@ -583,6 +364,7 @@ export default {
             right: 10px;
             top: 355px;
           }
+
           .jindu2 {
             position: absolute;
             right: 10px;
@@ -592,6 +374,7 @@ export default {
             background: #fe826c;
             border-radius: 2px;
           }
+
           .btn {
             width: 377px;
             height: 35px;
@@ -601,6 +384,7 @@ export default {
             color: #fff;
             margin: 6px 0 20px 24px;
           }
+
           .clearfix:before,
           .clearfix:after {
             content: "";
@@ -611,6 +395,7 @@ export default {
 
         .vs {
           width: 297px;
+
           .count {
             font-size: 18px;
             font-weight: 800;
@@ -618,6 +403,7 @@ export default {
             margin-top: 40px;
             margin-left: 68px;
           }
+
           .toupiao {
             .btn {
               font-size: 14px;
@@ -629,11 +415,13 @@ export default {
               border: 0;
               background-color: rgba(255, 255, 255, 0);
             }
+
             .btn1 {
               margin-left: 20px;
               margin-top: 45px;
               background-image: url("../../assets/image/toupiao1.png");
             }
+
             .btn2 {
               margin-left: -24px;
               border-radius: 0px 15px 15px 0px;
@@ -645,24 +433,28 @@ export default {
         .no {
           position: relative;
           width: calc((100% - 297px) / 2);
+
           .choose {
             width: 435px;
             height: 66px;
             background: #ffffff;
             box-shadow: 0px 5px 18px 0px rgba(226, 104, 119, 0.09);
             border-radius: 8px;
+
             .infor {
               width: 350px;
               display: flex;
               justify-content: space-between;
             }
           }
+
           .stay {
             margin-top: 15px;
             width: 435px;
             height: 59px;
             background: #eef6fd;
             border-radius: 8px;
+
             .stayinfor {
               font-size: 18px;
               font-weight: 800;
@@ -670,6 +462,7 @@ export default {
               margin-left: 188px;
               padding-top: 11px;
             }
+
             .box {
               width: 43px;
               height: 6px;
@@ -678,6 +471,7 @@ export default {
               margin-left: 195px;
             }
           }
+
           .discuss {
             margin-top: 8px;
             width: 435px;
@@ -688,6 +482,7 @@ export default {
                     rgba(88, 164, 232, 0.1) 100%
             );
             border-radius: 8px;
+
             .titleinfor {
               // height: 41px;
               width: 254px;
@@ -699,6 +494,7 @@ export default {
               margin-top: 44px;
               text-align: center;
             }
+
             .line {
               margin-left: 24px;
               margin-top: 68px;
@@ -706,15 +502,18 @@ export default {
               // height: 1px;
               border: 1px solid #deecfb;
             }
+
             .imgstyle {
               width: 24px;
               height: 24px;
               margin-left: 24px;
               margin-top: 14px;
             }
+
             .headerxm {
               color: #818a92;
             }
+
             .discusscontent {
               width: 366px;
               color: #333330;
@@ -724,6 +523,7 @@ export default {
               line-height: 24px;
             }
           }
+
           .yourdiscuss {
             margin-top: 27px;
             margin-left: 24px;
@@ -731,6 +531,7 @@ export default {
             height: 83px;
             background: #eff6fd;
             border-radius: 8px;
+
             .your {
               margin-left: 15px;
               margin-top: 18px;
@@ -740,6 +541,7 @@ export default {
               line-height: 24px;
             }
           }
+
           .jindu1 {
             position: absolute;
             width: 4px;
@@ -750,6 +552,7 @@ export default {
             right: 10px;
             top: 355px;
           }
+
           .jindu2 {
             position: absolute;
             right: 10px;
@@ -759,6 +562,7 @@ export default {
             background: #58a4e8;
             border-radius: 2px;
           }
+
           .btn {
             width: 377px;
             height: 35px;
@@ -768,6 +572,7 @@ export default {
             margin: 6px 0 20px 24px;
             color: #fff;
           }
+
           .clearfix:before,
           .clearfix:after {
             content: "";
@@ -777,18 +582,22 @@ export default {
         }
       }
     }
+
     .right {
       margin-right: 45px;
+
       .righttitle {
         display: flex;
         padding-top: 39px;
         position: relative;
+
         .text {
           margin-left: 8px;
           font-size: 16px;
           color: rgba(51, 51, 51, 1);
           font-weight: 800;
         }
+
         .box {
           width: 75px;
           height: 10px;
@@ -798,6 +607,7 @@ export default {
           top: 53px;
         }
       }
+
       .timebox {
         width: 417px;
         height: 149px;
@@ -805,12 +615,14 @@ export default {
         border-radius: 4px;
         margin-top: 42px;
       }
+
       .clearfix:before,
       .clearfix:after {
         content: "";
         display: table;
         clear: both;
       }
+
       .innertime {
         margin-top: 17px;
         margin-left: 55px;
@@ -819,6 +631,7 @@ export default {
         color: #ffffff;
         line-height: 24px;
       }
+
       .endtime {
         margin-left: 10px;
         margin-top: 16px;
@@ -826,9 +639,11 @@ export default {
         height: 81px;
         background: #f2f5f7;
         border-radius: 0px 8px 0px 8px;
+
         .endtimetext {
           margin-top: 25px;
           margin-left: 46px;
+
           .te {
             font-size: 28px;
             font-weight: 800;
@@ -837,12 +652,14 @@ export default {
           }
         }
       }
+
       .explain {
         margin-top: 30px;
         width: 416px;
         background: #f2f5f7;
         border-radius: 8px;
       }
+
       .explaincontent {
         width: 368px;
         font-size: 16px;

src/views/discuss/DiscussPage.vue

@@ -53,19 +53,26 @@
                 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 @click="comment(i)" style="display: flex;cursor: pointer">
+            <span class="iconfont icon-pinglun" style="color:#b3bdc4"></span>
             <div class="count"> {{ d.discussReviewCount }}</div>
-          <div class="sameone dianzan"></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 class="sameone shoucang"></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>
     </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({
+const router = useRouter()
+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({
+})
+const {data} = useRequest(DISCUSS_LIST, param.value)
+const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
+const state = reactive({
   activeName: "first",
-    });
+});
 
-    const handleClick = (id) => {
+function comment(i) {
+  const id = data.value.rows[i].discussId
+  router.push({path: 'discussdetail', query: {id}})
+}
 
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-      data,
-      param,
-      disDetail
-    };
-  },
-};
+//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;

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 v-for="replay in row.submitReplyVoList">
+                <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,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">

src/views/faceteach/FaceTeach.vue

@@ -14,7 +14,7 @@
         <div class="title">【其他活动】{{ data.offCourseInfo?.name }}</div>
         <div class="time" style="margin-top: 26px">
           <img width="15px" height="17px" src="../../assets/image/time.png"/>
-          <div style="margin-left: 8px">{{ data.offCoursePlanInfo.beginTime }}</div>
+          <div style="margin-left: 8px">{{ data.offCoursePlanInfo?.beginTime }}</div>
         </div>
         <div class="time" style="margin-top: 23px">
           <img
@@ -22,10 +22,10 @@
               height="18px"
               src="../../assets/image/position.png"
           />
-          <div style="margin-left: 8px">{{ data.offCoursePlanInfo.address }}</div>
+          <div style="margin-left: 8px">{{ data.offCoursePlanInfo?.address }}</div>
         </div>
       </div>
-      <div class="btn" v-if="data.offCoursePlanInfo.evalFlag && !data.evalFlag">评估</div>
+      <div class="btn" v-if="data.offCoursePlanInfo?.evalFlag && !data.evalFlag">评估</div>
     </div>
     <!-- 基本信息 -->
 
@@ -63,10 +63,8 @@
                 }"
               >
                 <div class="enclosureL">
-                  <img
-                      style="width: 22px; height: 26px; margin-left: 10px"
-                      :src="{pdf,word,ppt,zip,excel}[el.split('.').slice(-1)]"
-                  />
+                  <FileTypeImg v-model="data.offCoursePlanInfo.attach.split(',')[index]"
+                               :style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
                   <div style="margin-left: 20px">{{ el }}</div>
                 </div>
                 <div class="download">
@@ -81,27 +79,27 @@
             <el-tab-pane label="课程作业" name="second">
               <div class="work">
                 <div>
-                  <div class="question">{{data.workItem.name}}</div>
+                  <div class="question">{{ data.workItem?.name }}</div>
                   <div style="margin-top: 16px; display: flex">
                     <div class="tag1">必修</div>
                     <div class="tag3" style="margin-left: 11px">作业</div>
                   </div>
                 </div>
-                <div class="submit" @click="toWork" v-if="!data.workFlag">提交</div>
+                <div class="submit" @click="toWork(data.workItem)" v-if="!data.workFlag">提交</div>
               </div>
             </el-tab-pane>
             <el-tab-pane label="课程考试" name="third">
               <div class="work">
                 <div>
                   <div class="question">
-                    {{data.examItem.name}}
+                    {{ data.examItem?.name }}
                   </div>
                   <div style="margin-top: 16px; display: flex">
                     <div class="tag1">必修</div>
                     <div class="tag3" style="margin-left: 11px">考试</div>
                   </div>
                 </div>
-                <div class="submit" @click="toExamItem" v-if="!data.examFlag">去考试</div>
+                <div class="submit" @click="toExamItem(data.examItem)" v-if="!data.examFlag">去考试</div>
               </div>
             </el-tab-pane>
           </el-tabs>
@@ -116,7 +114,7 @@
           <div class="text">直播讲师</div>
           <div class="box"></div>
         </div>
-<!--        todo #面授课接口 讲师缺少img和介绍-->
+        <!--        todo #面授课接口 讲师缺少img和介绍-->
         <div
             v-for="(el, index) in teacher"
             :key="el.id"
@@ -143,109 +141,35 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {reactive, toRefs, watch} from "vue";
-import word from '@/assets/image/file/word.png'
-import ppt from '@/assets/image/file/ppt.png'
-import pdf from '@/assets/image/file/pdf.png'
-import zip from '@/assets/image/file/zip.png'
-import md from '@/assets/image/file/md.png'
-import excel from '@/assets/image/file/excel.png'
-import medal1 from '@/assets/image/medal/medal1.png'
-import medal2 from '@/assets/image/medal/medal2.png'
-import medal3 from '@/assets/image/medal/medal3.png'
-import img from '@/assets/image/uploadimg.png'
+import FileTypeImg from "@/components/FileTypeImg.vue";
 import {request, useRequest} from "@/api/request";
 import {STU_OFFCOURSE_DETAIL} from "@/api/api";
+import {useRouter} from "vue-router";
 
-export default {
-  name: "FaceTeach",
-  setup() {
-    const {data} = useRequest(STU_OFFCOURSE_DETAIL, {})
-    const state = reactive({
+const router = useRouter()
+
+const {data} = useRequest(STU_OFFCOURSE_DETAIL, {})
+const state = reactive({
   activeName: "first",
-      enclosure: [
-        {
-          id: 1,
-          name: "项目参考文档.doc",
-          img: word,
-        },
-        {
-          id: 2,
-          name: "人工智能启蒙讲解讲义.pptx",
-          img: ppt,
-        },
-        {
-          id: 3,
-          name: "人工智能启蒙讲解讲义.xlsx",
-          img: excel,
-        },
-      ],
-      teacher: [
-        {
-          id: 1,
-          name: "王星天（显示事业）",
-          introduce: "教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-            medal3,
-          ],
-        },
-        {
-          id: 2,
-          name: "王星天（显示事业）",
-          introduce: "教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-          ],
-        },
-        {
-          id: 3,
-          name: "王星天（显示事业）",
-          introduce:
-              "教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-            medal3,
-          ],
-        },
-      ],
-      workers: [],
-      examinations: [],
-    })
-    const handleClick = (tab, event) => {
+  enclosure: ''
+})
+const {activeName, enclosure} = toRefs(state)
+const handleClick = (tab, event) => {
   console.log(tab, event);
-    };
-    const download=(url)=>{
-      window.open(url)
-    }
-    function toWork(){
-
-    }
-    function toExamItem(){
-
-    }
-    return {
-      ...toRefs(state),
-      handleClick,
-      download,
-      toExamItem,
-      toWork,
-      data,
-      pdf,
-      word,
-      ppt,
-      zip,
-      excel,
-    };
-  },
 };
+const download = (url) => {
+  window.open(url)
+}
+
+function toWork(obj) {
+  router.push({path: '/homeworkpage', query: {id: obj.courseId}})
+}
+
+function toExamItem(obj) {
+  router.push({path: '/starttest', query: {id: obj.courseId}})
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/homework/HomeworkPage.vue

@@ -154,7 +154,7 @@
                   class="historytitle2"
                   :style="{
                   'border-bottom':
-                    index === history.length - 1
+                    index === data.workSubmitList.length - 1
                       ? '1px solid rgba(215, 229, 253, 0)'
                       : '1px solid rgba(215, 229, 253, 1)',
                 }"
@@ -219,50 +219,29 @@
 <script setup>
 import {reactive, ref, toRefs} from "vue";
 import {request, useRequest} from "@/api/request";
-import {TASK_WORK_COMMIT, TASK_WORK_DETAIL} from "@/api/api";
+import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, WORK_HISTROY} from "@/api/api";
 import dayjs from "dayjs";
 import {useRouter} from "vue-router";
 import UploadImg from '@/components/img/UploadImg.vue'
 import FileTypeImg from "@/components/FileTypeImg.vue";
+import {useRoute} from "vue-router/dist/vue-router";
+
 
-const {data} = useRequest(TASK_WORK_DETAIL, {})
 const fileList = ref([])
 const uploadRef = ref()
 const showFileList = ref(0)
 const state = reactive({
   textarea1: "",
-  history: [
-    {
-      id: 1,
-      time: "2022-7-20 00:00",
-      content: "大唐之音鉴赏 - 2022/7/20.zip",
-    },
-    {
-      id: 2,
-      time: "2022-7-18 00:00",
-      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-    },
-    {
-      id: 3,
-      time: "2022-7-17 00:00",
-      content: "湖北黄冈语文压卷题.doc",
-    },
-    {
-      id: 2,
-      time: "2022-7-18 00:00",
-      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-    },
-    {
-      id: 3,
-      time: "2022-7-17 00:00",
-      content: "湖北黄冈语文压卷题.doc",
-    },
-  ],
 })
-const {history, textarea1} = toRefs(state);
+const {textarea1} = toRefs(state);
 const router = useRouter()
+
+const {query: {id: workId}} = useRoute()
+
+const {data} = useRequest(TASK_WORK_DETAIL, {workId})
+
 const handleClick = () => {
-  request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
+  request(TASK_WORK_COMMIT, {workSubmitDto: {workId,workUploadContent: state.textarea1}}).then(() => {
     router.back()
   })
 };

src/views/liveBroadcast/LiveBroadcast.vue

@@ -20,10 +20,10 @@
     <!-- 基本信息 -->
     <div class="bascinfo">
       <div style="margin-left: 46px">
-        <div class="title">【直播】{{data.detail?.liveName}}</div>
+        <div class="title">【直播】{{ data.detail?.liveName }}</div>
         <div class="time" style="margin-top: 26px">
           <img width="15px" height="17px" src="../../assets/image/time.png"/>
-          <div style="margin-left: 8px">{{data.detail?.liveStartTime}}</div>
+          <div style="margin-left: 8px">{{ data.detail?.liveStartTime }}</div>
         </div>
         <div class="time" style="margin-top: 23px">
           <img
@@ -31,7 +31,7 @@
               height="18px"
               src="../../assets/image/position.png"
           />
-<!--          todo #直播详情 没有位置字段-->
+          <!--          todo #直播详情 没有位置字段-->
           <div style="margin-left: 8px">大族广场</div>
         </div>
       </div>
@@ -58,7 +58,7 @@
               <div class="box"></div>
             </div>
             <div style="display: flex; align-items: center">
-<!--              todo 没有课前预习字段-->
+              <!--              todo 没有课前预习字段-->
               <div class="content">
                 通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用;<br/>
                 ● 培训目标
@@ -77,7 +77,7 @@
                   height="20px"
                   src="../../assets/image/write.png"
               />
-<!--              todo 课后作业-->
+              <!--              todo 课后作业-->
               <div class="text">课后作业</div>
               <div class="box"></div>
             </div>
@@ -110,7 +110,7 @@
                 style="width: 21px; height: 23px"
                 src="../../assets/image/livelecturer.png"
             />
-<!--            todo #直播详情 没有直播讲师-->
+            <!--            todo #直播详情 没有直播讲师-->
             <div class="text">直播讲师</div>
             <div class="box"></div>
           </div>
@@ -141,17 +141,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {reactive, toRefs} from "vue";
 import img from '@/assets/image/uploadimg.png'
 import {request, useRequest} from "@/api/request";
 import {TASK_BROADCAST_COMMIT, TASK_BROADCAST_DETAIL, TASK_BROADCAST_SIGN} from "@/api/api";
 
-export default {
-  name: "LiveBroadcast",
-  setup() {
-    const {data} = useRequest(TASK_BROADCAST_DETAIL,{})
-    const state = reactive({
+
+const {data} = useRequest(TASK_BROADCAST_DETAIL, {})
+const state = reactive({
   activeName: "first",
   teacher: [
     {
@@ -168,30 +166,23 @@ export default {
       peopleimg: img,
     },
   ],
-    });
-    const signClick = (id) => {
+});
+const {activeName, teacher} = toRefs(state)
+const signClick = (id) => {
   request(TASK_BROADCAST_SIGN, {id}).then(() => {
     console.log(data.value)
     data.value.signFlag = 1
   })
-    };
-    const commitClick = (id) => {
+};
+const commitClick = (id) => {
   request(TASK_BROADCAST_COMMIT, {id}).then(() => {
     data.value.evalFlag = 1
   })
-    };
-    const showClick = (id) => {
-
-    };
-    return {
-      ...toRefs(state),
-      data,
-      signClick,
-      commitClick,
-      showClick,
-    };
-  },
 };
+
+function showClick() {
+
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/moreActive/MoreActive.vue

@@ -68,7 +68,7 @@
           <div class="text">活动公告</div>
           <div class="box"></div>
         </div>
-<!--        todo #活动任务详情 活动公告没有-->
+        <!--        todo #活动任务详情 活动公告没有-->
         <div class="content">
           为拓宽人民群众的表达途径、畅听民意，及时了解
           和解决人民群众反映强烈的公共法律服务问题，我
@@ -88,32 +88,18 @@
   </div>
 </template>
 
-<script>
-import {reactive, toRefs} from "vue";
+<script setup>
+
+import {TAS_ACTIVITY_DETAIL, TASK_ACTIVITY_SIGN} from "@/api/api";
 import {request, useRequest} from "@/api/request";
-import {TAS_ACTIVITY_DETAIL, TASK_ACTIVITY_SIGN, TASK_BROADCAST_DETAIL} from "@/api/api";
 
-export default {
-  name: "MoreActive",
-  setup() {
-    const {data} = useRequest(TAS_ACTIVITY_DETAIL, {})
+const {data} = useRequest(TAS_ACTIVITY_DETAIL, {})
 
-    const state = reactive({
-      activeName: "first",
-    });
-
-    const signClick = (tab, event) => {
+const signClick = (tab, event) => {
   request(TASK_ACTIVITY_SIGN, {}).then(res => {
     console.log(22)
     data.value.signFlag = 1
   })
-    };
-    return {
-      ...toRefs(state),
-      signClick,
-      data,
-    };
-  },
 };
 </script>
 

src/views/roadmap/LearnPath.vue

@@ -32,7 +32,7 @@
                    class="tasks"
                    :style="{
                   'border-bottom':
-                    index === unfinishedTasks.length - 1
+                    index === unCompleteTaskList.length - 1
                       ? null
                       : '1px solid rgba(229, 228, 228, 1)',
                 }"
@@ -93,7 +93,7 @@
               </el-popover>
             </el-table-column>
 
-            <el-table-column align="center" prop="target" label="目标人群" />
+            <el-table-column align="center" prop="target" label="目标人群"/>
             <el-table-column
                 #default="scope"
                 align="center"
@@ -101,13 +101,7 @@
                 prop="state"
                 label="状态"
             >
-              <img :src="
-                  scope.row.status === 0
-                  ? nostarted
-                    : scope.row.state === 1
-                    ? completed
-                    : ongoing
-                "
+              <img :src="{0:nostarted,1:completed,2:ongoing}[scope.row.status]"
                    style="width: 99px; height: 99px"
               />
             </el-table-column>
@@ -120,94 +114,58 @@
           :style="{ display: showmapdetail ? 'flex' : 'none' }"
           class="mapdetail"
       >
-        <img
-            src="../../assets/image/mapdetail.png"
-            style="width: calc(100% - 168px); height: 425px"
-        />
+        <div v-for="(item,i) in detail?.rows">
+          <img :src="useImage(`222_0${i+2}.png`)">
+        </div>
+<!--        <div class="modal"-->
+<!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
+<!--        </div>-->
       </div>
       <!-- 路径详情图 -->
     </div>
   </div>
 </template>
-<script>
-import {reactive, toRefs} from "vue";
+<script setup>
+import {reactive, toRefs, ref} from "vue";
 import nostarted from '../../assets/image/nostarted.png'
 import completed from '../../assets/image/completed.png'
 import ongoing from '../../assets/image/ongoing.png'
-import roadmap1 from "../../assets/image/roadmap1.png"
-import roadmap2 from "../../assets/image/roadmap2.png"
-import {useRequest} from "@/api/request";
-import {ROUTER_LIST, ROUTER_UNCOMPLETE_LIST} from "@/api/api";
+import {request, useRequest} from "@/api/request";
+import {ROUTER_CHAPTER_LIST, ROUTER_LIST, ROUTER_UNCOMPLETE_LIST} from "@/api/api";
+import {useImage} from "@/api/utils";
 
-export default {
-  name: "LearnPath",
-  setup() {
-
-    const {data} = useRequest(ROUTER_LIST, {})
-    const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {})
-
-    const state = reactive({
-      tableData: [
-        {
-          img: roadmap1,
-          name: "产品经理学习路径图",
-          introduce:
-              "为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径",
-          target: "Band8-Band12",
-          state: 1,
-        },
-        {
-          img: roadmap2,
-          name: "管理者进阶学习路径图",
-          introduce:
-              "为了XXXXX，集团CHRO组织为各级管理者配置了统一的学习成长路径……",
-          target: "Band8-Band12",
-          state: 0,
-        },
-      ],
-      unfinishedTasks: [
-        {
-          id: 1,
-          text: "产品经理学习路径图-第三阶段",
-        },
-        {
-          id: 2,
-          text: "管理者进阶-启航班-",
-        },
-        // {
-        //   id: 3,
-        //   text: "产品经理学习路径图-第三阶段",
-        // },
-      ],
+const detail = ref()
+const {data} = useRequest(ROUTER_LIST, {})
+const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {})
+const state = reactive({
   showmapdetail: false,
-    });
-    const returnfun = () => {
+});
+const {showmapdetail} = toRefs(state)
+
+const returnfun = () => {
   state.showmapdetail = false;
-    };
-    const gofun = (row, column, event) => {
-      console.log("点击了", row, column, event);
-      state.showmapdetail = true;
-    };
-    function toUnTask(){
-
-    }
-
-    return {
-      ...toRefs(state),
-      data,
-      returnfun,
-      toUnTask,
-      unCompleteTaskList,
-      gofun,
-      nostarted,
-      completed,
-      ongoing,
-
-    };
-  },
 };
+
+async function gofun(routerId) {
+  const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
+  detail.value = data.data
+  state.showmapdetail = true;
+}
+
+function toUnTask() {
+
+}
+
 </script>
 <style lang="scss">
+.modal {
+
+}
+
+.modal:after {
+  content: "";
+}
+
 .learnpath {
   width: 100%;
   min-height: 734px;