feat: 交流模块完成

src/views/CommunicationPage/CommunicationDetail.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="course-detail-page">
+  <div class="communication-detail-page">
     <!--课程信息-->
-    <div class="course-detail-container">
+    <div class="communication-detail-container">
       <!--课程基本信息-->
       <el-card>
         <div class="header">
-          <img :src="communicationInfo.img" alt="err" class="course-img">
-          <div class="course-info">
+          <img :src="titleImg" alt="err" class="communication-img">
+          <div class="communication-info">
             <el-row style="font-size: xx-large; font-weight: bold">
                 {{ communicationInfo.title }}
             </el-row>
-            <div class="course-info-main">
+            <div class="communication-info-main">
               <el-row>发布作者: {{ communicationInfo.publisherName }}</el-row>
               <el-row>所属组织: {{ communicationInfo.organization }}</el-row>
               <el-row>持续时间:</el-row>
@@ -32,31 +32,38 @@
             <el-row>
               联系方式：
             </el-row>
-            <el-row v-if="communicationInfo.phone != null">
+            <el-row v-if="communicationInfo.phone !== ''">
               电话：{{communicationInfo.phone}}
             </el-row>
-            <el-row v-if="communicationInfo.qq != null">
+            <el-row v-if="communicationInfo.qq !== ''">
               qq：{{communicationInfo.qq}}
             </el-row>
-            <el-row v-if="communicationInfo.wechat != null">
+            <el-row v-if="communicationInfo.wechat !== ''">
               微信：{{communicationInfo.wechat}}
             </el-row>
-            <el-row v-if="communicationInfo.email != null">
+            <el-row v-if="communicationInfo.email !== ''">
               邮箱：{{communicationInfo.email}}
             </el-row>
           </div>
         </div>
         <el-divider/>
         <div class="introduce">
-          <div class="title">详细描述</div>
+          <div class="title">详细描述:</div>
           <div class="introduce-content">{{ communicationInfo.description }}</div>
         </div>
+        <div class="pictureList">
+          <div class="title">图片:</div>
+          <div v-for="image in imgList" :key="image.id">
+            <img :src="image.fileUrl" alt="err" class="picture">
+          </div>
+
+        </div>
         <div class="attachment">
           <div class="title">附件:</div>
           <div class="attachment-list"
               v-for="attachment in attachments"
               :key="attachment.id"
-              @click="downloadAttachment"
+              @click="downloadAttachment(attachment.fileUrl, attachment.fileName)"
           >
             {{attachment.fileName}}{{attachment.fileExtention}}({{attachment.fileSize}})
           </div>
@@ -68,14 +75,15 @@
 
 <script>
 import {ElMessage} from "element-plus";
+import communication from "@/api/communication";
 
 export default {
   name: "CommunicationDetail",
   data(){
     return{
-      communicationInfo: {
-        img: "",
-      },
+      communicationInfo: {},
+      titleImg: "",
+      imgList: [],
       attachments: [],
       starersList: [],
       starersListString: "",
@@ -90,13 +98,14 @@ export default {
     fetchData(){
       this.$apis.getCommunicationDetail(this.$route.params.communicationId).then(res=>{
         this.communicationInfo = res.data.data;
-        if (this.communicationInfo.photos.length != 0){
-          this.communicationInfo.img = this.communicationInfo.photos[0].fileUrl;
+        if (this.communicationInfo.photos.length !== 0){
+          this.titleImg = this.communicationInfo.photos[0].fileUrl;
+          this.imgList =  this.communicationInfo.photos;
         }
-        else this.communicationInfo.img = this.$variables.noImgUrl;
+        else this.titleImg = this.$variables.noImgUrl;
         this.attachments = this.communicationInfo.attachments;
         this.publishTime = this.communicationInfo.publishTime.substring(0,10) + " " + this.communicationInfo.publishTime.substring(11,19);
-        if (this.deadline != ""){
+        if (this.deadline !== ""){
           this.deadline = this.communicationInfo.deadline.substring(0,10) + " " + this.communicationInfo.deadline.substring(11,19);
         }
         else this.deadline = "无截止日期";
@@ -123,8 +132,26 @@ export default {
       this.$apis.cancelStarCommunication(this.$store.state.user.id, this.communicationInfo.id);
       ElMessage.success("取消收藏成功");
     },
-    downloadAttachment(){
+    downloadAttachment(url, fileName){
       console.log("下载！");
+      const data = url;
+      let file = new Blob(["\ufeff" + data]);
+      if (window.navigator.msSaveOrOpenBlob)
+          // IE10+
+        window.navigator.msSaveOrOpenBlob(file, fileName);
+      else {
+        // Others
+        let a = document.createElement("a"),
+            url = URL.createObjectURL(file);
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(function() {
+          document.body.removeChild(a);
+          window.URL.revokeObjectURL(url);
+        }, 0);
+      }
     }
   },
 };
@@ -150,12 +177,12 @@ export default {
   color: #337ecc;
   cursor: pointer;
 }
-.course-detail-page {
+.communication-detail-page {
   margin: 40px 0 80px 0;
   min-height: calc(100vh - 100px);
 }
 
-.course-detail-container {
+.communication-detail-container {
   box-sizing: border-box;
   padding: 0 100px;
   margin-top: 32px;
@@ -167,27 +194,37 @@ export default {
   margin: 40px 10vw 80px 10vw;
 }
 
-.course-img {
-    width: 400px;
+.communication-img {
+    width: 320px;
     height: 230px;
-    margin-left: -80px
+    margin-left: -120px;
 }
 
-.course-img > img {
+.communication-img > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
 }
 
-.course-info {
+.pictureList{
+  margin-top: 20px;
+  text-align: center;
+}
+
+.picture{
+  max-width: 600px;
+  text-align: center;
+}
+
+.communication-info {
   font-size: 16px;
   color: #333333;
   margin-left: 32px;
   margin-right: -80px;
 }
 
-.course-info-main {
+.communication-info-main {
   background-color: #f6f6f6;
   color: #777777;
   margin-top: 10px;
@@ -196,20 +233,20 @@ export default {
   width: 350px;
 }
 
-.course-info > div {
+.communication-info > div {
   margin-bottom: 16px;
 }
 
-.course-info > div:last-child {
+.communication-info > div:last-child {
   margin-bottom: 0;
 }
 
-.course-info .mooc-link .el-link {
+.communication-info .mooc-link .el-link {
   font-size: 16px;
   color: #409eff;
 }
 
-.course-info .mooc-link .el-link:hover {
+.communication-info .mooc-link .el-link:hover {
   color: #79bbff;
 }
 
@@ -228,6 +265,7 @@ export default {
   color: #333333;
   font-weight: 500;
   font-size: 20px;
+  text-align: left;
 }
 
 .new-notice-content .new-notice-item {

src/views/CommunicationPage/CommunicationPage.vue

@@ -2,32 +2,32 @@
   <el-row id="test-page-body">
     <el-col :span="3">
       <el-card style="position: fixed;">
-        <el-menu default-active="1">
-          <el-menu-item index="0" @click="toPage('Portal')">
+        <el-menu  :default-active="activeIndex" router>
+          <el-menu-item index="/portal">
             <el-icon>
               <Back/>
             </el-icon>
             <span style="padding-left: 20px">返回首页</span>
           </el-menu-item>
-          <el-menu-item index="1" @click="toPage('CommunicationExplore')">
+          <el-menu-item index="/communication/explore">
             <el-icon>
               <Search/>
             </el-icon>
             <span style="padding-left: 20px">发现交流</span>
           </el-menu-item>
-          <el-menu-item index="2" @click="toPage('CommunicationPublish')">
+          <el-menu-item index="/communication/publish">
             <el-icon>
               <Edit/>
             </el-icon>
             <span style="padding-left: 20px">发布交流</span>
           </el-menu-item>
-          <el-menu-item index="3" @click="toPage('CommunicationStar')">
+          <el-menu-item index="/communication/star">
             <el-icon>
               <Star/>
             </el-icon>
             <span style="padding-left: 20px">我的收藏</span>
           </el-menu-item>
-          <el-menu-item index="4" @click="toPage('CommunicationManage')">
+          <el-menu-item index="/communication/manage">
             <el-icon>
               <User/>
             </el-icon>
@@ -48,7 +48,7 @@ export default {
   name: "Communication",
   data(){
     return{
-      activeIndex: "1",
+      activeIndex: this.$route.path,
     };
   },
   mounted() {

src/views/CommunicationPage/PublishPage.vue

@@ -37,12 +37,19 @@
                 <el-input v-model="form.email"></el-input>
             </el-form-item>
             <el-form-item label="图片" >
-                <el-upload action="" :auto-upload="false" :limit="3" :on-remove="handlePictureChange" :on-change="handlePictureChange" :on-exceed="handleExceed" list-type="picture">
+                <el-upload action="" :auto-upload="false" :limit="3" accept="image/*"
+                           :on-change="handlePictureChange"
+                           :before-remove="beforeRemoved"
+                           :on-exceed="handleExceed" list-type="picture"
+                >
                     <el-button size="small" type="primary">点击上传</el-button>
                 </el-upload>
             </el-form-item>
             <el-form-item label="附件">
-                <el-upload action="" :auto-upload="false" :limit="3" :on-remove="handleFileChange" :on-change="handleFileChange" :on-exceed="handleExceed">
+                <el-upload action="" :auto-upload="false" :limit="3"
+                           :on-change="handleFileChange"
+                           :before-remove="beforeRemoved"
+                           :on-exceed="handleExceed">
                     <el-button size="small" type="primary">点击上传</el-button>
                 </el-upload>
             </el-form-item>
@@ -69,16 +76,16 @@ export default {
         title: "",
         organization: "",
         phone: "",
-          wechat:"",
-          qq:"",
-          email:"",
-          deadline:null,
+        wechat:"",
+        qq:"",
+        email:"",
+        deadline:null,
         type: null,
         textarea: "",
-        pictureList:[],
-        fileList:[],
-          photos:[],
-          attachments:[],
+        //pictureList:[],
+        //fileList:[],
+        photos:[],
+        attachments:[],
       },
       typeOptions: [
         {
@@ -92,29 +99,25 @@ export default {
   },
     methods: {
         handlePictureChange(file,fileList) {
-            this.form.pictureList=fileList;
+            //this.form.pictureList=fileList;
+            this.$apis.uploadFile(file.raw).then(res=>{
+              this.form.photos.push(res.data.data);
+            });
         },
         handleFileChange(file,fileList){
-            this.form.fileList=fileList;
+            //this.form.fileList=fileList;
+          this.$apis.uploadFile(file.raw).then(res=>{
+            this.form.attachments.push(res.data.data);
+          });
+        },
+        beforeRemoved(){
+          ElMessage.error("不允许删除！") ;
+          return false;
         },
         handleExceed(file,fileList){
             ElMessage.error("最多上传3个!");
         },
-        async upload(){
-            for (let i=0;i<this.form.pictureList.length;i++){
-                this.$apis.uploadFile(this.form.pictureList[i].raw).then(res=>{
-                    this.form.photos.push(res.data.data);
-                });
-            }
-            for (let i=0;i<this.form.fileList.length;i++){
-                this.$apis.uploadFile(this.form.fileList[i].raw).then(res=>{
-                    this.form.attachments.push(res.data.data);
-                });
-            }
-            return 0;
-        },
         publish(){
-            this.upload().then(res=>{
                 const communication={
                     publisherId: Number(this.$store.state.user.id),
                     title: this.form.title,
@@ -131,14 +134,11 @@ export default {
                     attachments:this.form.attachments,
                     publisherName:this.$store.state.user.username
                 };
-                console.log(communication);
-                this.$apis.postCommunication(communication).then(res=>{
-                  console.log(res.data.data);
-                    ElMessage.success("发布成功");
-                    // this.$router.go(0);
-                    this.$router.push("/communication/publish");
-                });
-            });
+                 this.$apis.postCommunication(communication).then(res=>{
+                     console.log(res.data.data);
+                     ElMessage.success("发布成功");
+                     this.$router.go(0);
+                 });
         }
     }
 };
@@ -150,4 +150,5 @@ export default {
     margin: 10px 10px 0;
     /*overflow: scroll;*/
 }
+
 </style>

src/views/CommunicationPage/components/ExploreItem.vue

@@ -22,6 +22,7 @@
             <div style="font-size: 14px;margin-top: 5px;margin-left: 10px;">
               <span style="color: var(--el-color-danger)" v-if="type==='PROBLEM'">难题</span>
               <span style="color: var(--el-color-success)" v-if="type==='NOTICE'">通知</span>
+              <span style="color: var(--el-color-primary)" v-if="type!=='PROBLEM' && type!=='NOTICE'">其他</span>
                 <span style="margin-left: 14px">{{ publisherName }}</span>
                 <span style="margin-left: 14px">{{ organization }}</span>
                 <span style="margin-left: 14px">{{ contact }}</span>