feat: 完善交流详情页面

src/views/CommunicationPage/CommunicationDetail.vue

@@ -5,48 +5,69 @@
       <!--课程基本信息-->
       <el-card>
         <div class="header">
-<!--          <div class="course-img">-->
-<!--            <img :src="img" alt="err">-->
-<!--          </div>-->
           <img :src="communicationInfo.img" alt="err" class="course-img">
           <div class="course-info">
             <el-row style="font-size: xx-large; font-weight: bold">
-              {{ communicationInfo.title }}
+                {{ communicationInfo.title }}
             </el-row>
             <div class="course-info-main">
-              <el-row>{{ communicationInfo.publisherName }}</el-row>
-              <el-row>{{ communicationInfo.deadline }}</el-row>
+              <el-row>发布作者: {{ communicationInfo.publisherName }}</el-row>
+              <el-row>所属组织: {{ communicationInfo.organization }}</el-row>
+              <el-row>持续时间: {{ communicationInfo.publishTime }}~{{ communicationInfo.deadline }}</el-row>
             </div>
-<!--            <el-row class="mooc-link">-->
-<!--              MOOC链接：-->
-<!--              <el-link v-if="courseInfo.moocUrl!==null" :href="courseInfo.moocUrl" target="_blank">点击此处<i-->
-<!--                  class="el-icon-link el-icon&#45;&#45;right"></i></el-link>-->
-<!--              <span v-else>无</span>-->
-<!--            </el-row>-->
-<!--            <el-row v-if="isCreator">-->
-<!--              邀请码：{{courseInfo.invitationCode}}-->
-<!--            </el-row>-->
-<!--            <el-row v-if="isStudent">-->
-<!--              <el-button :disabled="isCourseSelected" size="mini" @click="handleSelectCourse">-->
-<!--                {{ isCourseSelected ? "已选课" : "确认选课" }}-->
-<!--              </el-button>-->
-<!--              <el-button v-if="isCourseSelected" size="mini" type="danger" @click="handleDropCourse">-->
-<!--                退课-->
-<!--              </el-button>-->
-<!--            </el-row>-->
+            <div class="explore-item-star" >
+              <el-tooltip placement="top-start" effect="light">
+                <template #content>
+                  <p style="max-width:500px;">用户{{starersListString}}收藏了本交流</p>
+                </template>
+                <div>
+                  <el-icon v-if="communicationInfo.starred===true" style="font-size: 20px" @click="star()"><Star /></el-icon>
+                  <el-icon v-if="communicationInfo.starred===false" style="font-size: 20px;color: orange" @click="cancelStar()">
+                    <StarFilled />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </div>
+            <el-row>
+              联系方式：
+            </el-row>
+            <el-row v-if="communicationInfo.phone != null">
+              电话：{{communicationInfo.phone}}
+            </el-row>
+            <el-row v-if="communicationInfo.qq != null">
+              qq：{{communicationInfo.qq}}
+            </el-row>
+            <el-row v-if="communicationInfo.wechat != null">
+              微信：{{communicationInfo.wechat}}
+            </el-row>
+            <el-row v-if="communicationInfo.email != null">
+              邮箱：{{communicationInfo.email}}
+            </el-row>
           </div>
         </div>
         <el-divider/>
-<!--        <div class="introduce">-->
-<!--          <div class="title">简介</div>-->
-<!--          <div class="introduce-content">{{ description }}</div>-->
-<!--        </div>-->
+        <div class="introduce">
+          <div class="title">详细描述</div>
+          <div class="introduce-content">{{ communicationInfo.description }}</div>
+        </div>
+        <div class="attachment">
+          <div class="title">附件:</div>
+          <div class="attachment-list"
+              v-for="attachment in attachments"
+              :key="attachment.id"
+              @click="downloadAttachment"
+          >
+            {{attachment.fileName}}{{attachment.fileExtention}}({{attachment.fileSize}})
+          </div>
+        </div>
       </el-card>
     </div>
   </div>
 </template>
 
 <script>
+import {ElMessage} from "element-plus";
+
 export default {
   name: "CommunicationDetail",
   data(){
@@ -54,10 +75,10 @@ export default {
       communicationInfo: {
         img: "",
       },
+      attachments: [],
+      starersList: [],
+      starersListString: "",
     };
-  },
-  computed: {
-
   },
   async mounted() {
     this.fetchData();
@@ -67,13 +88,55 @@ export default {
       this.$apis.getCommunicationDetail(this.$route.params.id).then(res=>{
         this.communicationInfo = res.data.data;
         this.communicationInfo.img = this.communicationInfo.photos[0].fileUrl;
+        this.attachments = this.communicationInfo.attachments;
+      });
+      this.$apis.getCommunicationStarers(this.$route.params.id).then(starRes=>{
+            this.starersList = starRes.data.data;
+            this.starersListString = "";
+            this.starersList.forEach(starer=>{
+              this.starersListString = this.starersListString + starer.userName + ",";
+            });
+            if (this.starersListString === ""){
+              this.starersListString = "暂无用户";
+            }
+            else this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
       });
     },
+    star(){
+      this.communicationInfo.starred = !this.communicationInfo.starred;
+      ElMessage.success("收藏成功");
+    },
+    cancelStar(){
+      this.communicationInfo.starred = !this.communicationInfo.starred;
+      ElMessage.success("取消收藏成功");
+    },
+    downloadAttachment(){
+      console.log("下载！");
+    }
   },
 };
 </script>
 
 <style scoped>
+.explore-item-star{
+  cursor: pointer;
+}
+.attachment{
+  margin-top: 20px;
+}
+.attachment-list{
+  margin-top: 20px;
+  text-indent: 20px;
+  text-decoration: underline;
+  color: #409eff;
+}
+.attachment-list:hover{
+  margin-top: 20px;
+  text-indent: 20px;
+  text-decoration: underline;
+  color: #337ecc;
+  cursor: pointer;
+}
 .course-detail-page {
   margin: 40px 0 80px 0;
   min-height: calc(100vh - 100px);

src/views/CommunicationPage/components/ExploreItem.vue

@@ -4,7 +4,7 @@
         <div class="explore-item-star" >
           <el-tooltip placement="top-start" effect="light">
             <template #content>
-              <p style="max-width:500px;">用户{{starersListString}}收藏了本交流</p>
+              <p style="max-width:500px;">{{starersListString}}收藏了本交流</p>
             </template>
             <div>
               <el-icon v-if="starred===true" style="font-size: 20px" @click="star()"><Star /></el-icon>
@@ -102,7 +102,10 @@ export default {
           this.starersList.forEach(starer=>{
             this.starersListString = this.starersListString + starer.userName + ",";
           });
-          this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
+          if (this.starersListString === ""){
+            this.starersListString = "暂无用户";
+          }
+          else this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
       });
     },
   },
@@ -116,7 +119,9 @@ export default {
 el-card {
     width: 100%;
 }
-
+.explore-item-star{
+  cursor: pointer;
+}
 .explore-item {
     --explore-item-height: 130px;
     height: var(--explore-item-height);