小记者

src/components/Upload.vue

@@ -15,26 +15,23 @@
       :file-list="fileList"
       :before-remove="beforeRemove"
       :on-remove="handleRemove"
-      :show-file-list="showList?false:true"
-      :headers="{ 'Content-Type': 'multipart/form-data'}"
+      :show-file-list="showList ? false : true"
+      :headers="{ 'Content-Type': 'multipart/form-data' }"
     >
-      <template v-if="styleType==='upload'">
+      <template v-if="styleType === 'upload'">
         <div class="upload-style">
-            <i class="el-icon-plus avatar-uploader-icon"></i>
-            <br/>
-            Upload
+          <i class="el-icon-plus avatar-uploader-icon"></i>
+          <br />
+          Upload
         </div>
       </template>
       <template v-else>
         <el-button size="mini" type="primary">
-            <svg-icon icon-class="upload"></svg-icon>
-            上传
+          <svg-icon icon-class="upload"></svg-icon>
+          上传
         </el-button>
       </template>
-      <div
-        slot="tip"
-        class="el-upload__tip"
-      >
+      <div slot="tip" class="el-upload__tip">
         {{ tips || uploadTip }}
       </div>
     </el-upload>
@@ -44,7 +41,7 @@
 
 <script>
 import { getToken } from "../utils/auth";
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 export default {
   components: {},
   props: [
@@ -56,7 +53,7 @@ export default {
     "showList",
     "tips",
     "pageName",
-    "styleType"
+    "styleType",
   ],
   data() {
     return {
@@ -64,7 +61,7 @@ export default {
       accept: "",
       fileTypeName: "",
       uploadName: "",
-      uploadTip:"",
+      uploadTip: "",
       loading: false,
     };
   },
@@ -72,9 +69,9 @@ export default {
     url() {
       let userInfor = getToken();
       let access_token = "";
-      if(this.pageName){
-        access_token = Cookies.get('registerToken')
-      }else if (userInfor) {
+      if (this.pageName) {
+        access_token = Cookies.get("registerToken");
+      } else if (userInfor) {
         let user = JSON.parse(getToken());
         access_token = user.access_token;
       }
@@ -110,19 +107,17 @@ export default {
   activated() {},
   // 方法集合
   methods: {
-    handleChange(file, fileList) {
-    },
+    handleChange(file, fileList) {},
     handleSuccess(response, file, fileList) {
-        console.log(response)
       if (response.status == 1) {
         response.duration = response.file_info_list[0].media_duration
           ? response.file_info_list[0].media_duration
           : 10;
         this.$message.success("用户上传成功");
-        if(this.fileName){
-            this.changeFillId(fileList, this.fileName,file);
-        }else{
-            this.changeFillId(fileList,file);
+        if (this.fileName) {
+          this.changeFillId(fileList, this.fileName, file);
+        } else {
+          this.changeFillId(fileList, file);
         }
         this.loading.close();
       } else {
@@ -132,18 +127,21 @@ export default {
       }
     },
     handlebeforeUpload(file) {
-      if (this.uploadType === 'image') {
+      if (this.uploadType === "image") {
         if (file.size > 2 * 1024 * 1024) {
-          this.$message.warning('上传图片大小不能超过2M');
+          this.$message.warning("上传图片大小不能超过2M");
           return false; // 必须返回false
         }
-      } else if (this.uploadType === 'mp4'||this.uploadType==='image/video') {
+      } else if (
+        this.uploadType === "mp4" ||
+        this.uploadType === "image/video/mp3"
+      ) {
         if (file.size > 500 * 1024 * 1024) {
-          this.$message.warning('上传视频大小不能超过500M');
+          this.$message.warning("上传文件大小不能超过500M");
           return false; // 必须返回false
         }
       } else if (file.size > 20 * 1024 * 1024) {
-        this.$message.warning('上传文件大小不能超过20M');
+        this.$message.warning("上传文件大小不能超过20M");
         return false; // 必须返回false
       }
       this.loading = this.$loading({
@@ -178,43 +176,44 @@ export default {
           this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
           this.fileTypeName = "图片";
           this.uploadName = name + "图片";
-          this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB"
+          this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB";
           break;
         case "mp3":
           this.accept = ".mp3,.MP3,.wav,.WAV";
           this.fileTypeName = "音频";
           this.uploadName = name + "音频";
-          this.uploadTip = "只能上传音频文件，大小不超过20MB"
+          this.uploadTip = "只能上传音频文件，大小不超过20MB";
           break;
         case "mp4":
           this.accept = "video/*";
           this.fileTypeName = "视频";
           this.uploadName = name + "视频";
-          this.uploadTip = "只能上传视频文件，大小不超 2GB"
+          this.uploadTip = "只能上传视频文件，大小不超 2GB";
           break;
         case "pdf":
           this.accept = ".pdf";
           this.fileTypeName = "pdf";
           this.uploadName = name + "pdf";
-          this.uploadTip = "只能上传pdf文件，大小不超过20MB"
+          this.uploadTip = "只能上传pdf文件，大小不超过20MB";
           break;
         case "xls":
           this.accept = ".xls,.xlsx";
           this.fileTypeName = "表格";
           this.uploadName = name + "表格";
-          this.uploadTip = "只能上传excel文件，大小不超过20MB"
+          this.uploadTip = "只能上传excel文件，大小不超过20MB";
           break;
         case "lrc":
           this.accept = ".lrc";
           this.fileTypeName = "lrc";
           this.uploadName = name + "lrc";
-          this.uploadTip = "只能上传lrc文件，大小不超过20MB"
+          this.uploadTip = "只能上传lrc文件，大小不超过20MB";
           break;
-        case "image/video":
-          this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG,video/*";
+        case "image/video/mp3":
+          this.accept =
+            ".jpg, .JPG, .jpeg, .JPEG .png, .PNG,video/*,.mp3,.MP3,.wav,.WAV";
           this.fileTypeName = "";
           this.uploadName = "";
-          this.uploadTip = "只能上传图片和视频，大小㾗超过500M"
+          this.uploadTip = "只能上传图片和视频，大小㾗超过500M";
           break;
         default:
           this.accept = "*";
@@ -227,13 +226,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.upload-style{
-    padding: 8px;
-    border-radius: 2px;
-    border: 1px dashed #E5E6EB;
-    background: #F2F3F5;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 22px;
+.upload-style {
+  padding: 8px;
+  border-radius: 2px;
+  border: 1px dashed #e5e6eb;
+  background: #f2f3f5;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
 }
 </style>

src/views/reporter/components/PublishReport.vue

@@ -1,274 +1,323 @@
 <template>
   <div class="publish-report">
     <el-input
-        placeholder="输入标题"
-        v-model="title" maxlength="100" @blur="handleTrim('title')">
+      placeholder="输入标题"
+      v-model="title"
+      maxlength="100"
+      @blur="handleTrim('title')"
+    >
     </el-input>
     <el-divider></el-divider>
-    <el-input type="textarea" v-model="content" placeholder="输入正文" maxlength="500" :rows="6" show-word-limit @blur="handleTrim('content')"></el-input>
+    <el-input
+      type="textarea"
+      v-model="content"
+      placeholder="输入正文"
+      maxlength="500"
+      :rows="6"
+      show-word-limit
+      @blur="handleTrim('content')"
+    ></el-input>
     <el-divider></el-divider>
     <p class="title">标签</p>
     <el-select
-        v-model="tabsList"
-        multiple
-        filterable
-        allow-create
-        default-first-option
-        placeholder="输入标签">
-        <el-option
-            v-for="item in labelExamples"
-            :key="item"
-            :label="item"
-            :value="item">
-        </el-option>
+      v-model="tabsList"
+      multiple
+      filterable
+      allow-create
+      default-first-option
+      placeholder="输入标签"
+    >
+      <el-option
+        v-for="item in labelExamples"
+        :key="item"
+        :label="item"
+        :value="item"
+      >
+      </el-option>
     </el-select>
-    <p class="title">标签</p>
+    <p class="title">图片/音视频</p>
     <div class="file-list">
-        <upload :datafileList="fileList" :changeFillId="handleAvatarSuccess" :showList="true" uploadType="image/video" :filleNumber="6" :styleType="'upload'" :tips="' '" class="file-upload"/>
-        <div class="file-item" :class="[itemf.type==='mp4'?'file-item-mp4':'']" v-for="(itemf,indexf) in fileList" :key="indexf" @mouseover="itemf.coverFlag = true" @mouseout="itemf.coverFlag = false">
-            <template v-if="itemf.type==='img'">
-                <el-image class="image"
-                :src="itemf.url"
-                :fit="'contain'" style="width:80px;height:80px;"></el-image>
-            </template>
-            <template v-else>
-                <svg-icon icon-class="mp4"></svg-icon>
-            </template>
-            <p v-show="itemf.coverFlag"><svg-icon icon-class="eye" @click="handlePreview(indexf)"></svg-icon><i class="el-icon-delete" @click="handleDeleteFile('cover',indexf)"></i></p>
-        </div>
+      <upload
+        :datafileList="fileList"
+        :changeFillId="handleAvatarSuccess"
+        :showList="true"
+        uploadType="image/video/mp3"
+        :filleNumber="6"
+        :styleType="'upload'"
+        :tips="' '"
+        class="file-upload"
+      />
+      <div
+        class="file-item"
+        :class="[itemf.type === 'mp4' ? 'file-item-mp4' : '']"
+        v-for="(itemf, indexf) in fileList"
+        :key="indexf"
+        @mouseover="itemf.coverFlag = true"
+        @mouseout="itemf.coverFlag = false"
+      >
+        <template v-if="itemf.type === 'img'">
+          <el-image
+            class="image"
+            :src="itemf.url"
+            :fit="'contain'"
+            style="width: 80px; height: 80px"
+          ></el-image>
+        </template>
+        <template v-else-if="itemf.type === 'mp4'">
+          <svg-icon icon-class="mp4"></svg-icon>
+        </template>
+        <template v-else-if="itemf.type === 'mp3'">
+          <svg-icon icon-class="mp3"></svg-icon>
+        </template>
+        <p v-show="itemf.coverFlag">
+          <svg-icon icon-class="eye" @click="handlePreview(indexf)"></svg-icon
+          ><i
+            class="el-icon-delete"
+            @click="handleDeleteFile('cover', indexf)"
+          ></i>
+        </p>
+      </div>
     </div>
     <el-divider></el-divider>
     <div class="btn-box">
-        <el-button @click="onCancel" size="small">取消</el-button>
-        <el-button type="primary" @click="onSubmitEmail" size="small" :loading="passwordLoading">发布</el-button>
+      <el-button @click="onCancel" size="small">取消</el-button>
+      <el-button
+        type="primary"
+        @click="onSubmitEmail"
+        size="small"
+        :loading="passwordLoading"
+        >发布</el-button
+      >
     </div>
     <el-dialog
-        :visible.sync="resourceFlag"
-        :show-close="true"
-        :close-on-click-modal="false"
-        :modal-append-to-body="false"
-        width="1000px"
-        class="login-dialog"
-        v-if="resourceFlag">
-        <iframe
-          :src="resourceUrl"
-          width="100%"
-          height="600px"
-        ></iframe>
+      :visible.sync="resourceFlag"
+      :show-close="true"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      width="1000px"
+      class="login-dialog"
+      v-if="resourceFlag"
+    >
+      <iframe :src="resourceUrl" width="100%" height="600px"></iframe>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
 import { getLogin } from "@/api/ajax";
-import Upload from "@/components/Upload.vue"
-import { mapState } from 'vuex';
+import Upload from "@/components/Upload.vue";
+import { mapState } from "vuex";
 const Base64 = require("js-base64").Base64;
 export default {
-  components: {Upload},
+  components: { Upload },
   name: "publishReport",
   props: [],
   data() {
     return {
-      title: '',
-      content:'',
-      tabsList:[],
-      fileIdList:[],
-      fileList:[],
-      labelExamples:['中英双语','少儿必读','3-6 岁'],
-      resourceUrl: '', // 课节资源预览地址
+      title: "",
+      content: "",
+      tabsList: [],
+      fileIdList: [],
+      fileList: [],
+      labelExamples: ["中英双语", "少儿必读", "3-6 岁"],
+      resourceUrl: "", // 课节资源预览地址
       resourceFlag: false,
-      passwordLoading: false
+      passwordLoading: false,
     };
   },
   watch: {},
   computed: {
-    ...mapState(['file_preview_url']),
+    ...mapState(["file_preview_url"]),
   },
   methods: {
     // 去掉前后空格
-    handleTrim(fild){
-        this[fild] = this[fild].trim()
+    handleTrim(fild) {
+      this[fild] = this[fild].trim();
     },
-    handleAvatarSuccess(fileList,file) {
-        // console.log(file)
-        // fileList.forEach(item => {
-            if(file.response&&file.response.file_info_list&&file.response.file_info_list[0]){
-                let index = file.name.lastIndexOf('.');
-                let type = file.name.substring(index + 1).toLowerCase()
-                let obj = {
-                    url: file.response.file_info_list[0].file_url,
-                    type: this.handleJudgeType(type),
-                    coverFlag: false
-                }
-                this.fileIdList.push(file.response.file_info_list[0].file_id)
-                this.fileList.push(obj)
-            }
-            console.log(this.fileList)
-        // });
-        
+    handleAvatarSuccess(fileList, file) {
+      // console.log(file)
+      // fileList.forEach(item => {
+      if (
+        file.response &&
+        file.response.file_info_list &&
+        file.response.file_info_list[0]
+      ) {
+        let index = file.name.lastIndexOf(".");
+        let type = file.name.substring(index + 1).toLowerCase();
+        let obj = {
+          url: file.response.file_info_list[0].file_url,
+          type: this.handleJudgeType(type),
+          coverFlag: false,
+        };
+        this.fileIdList.push(file.response.file_info_list[0].file_id);
+        this.fileList.push(obj);
+      }
+      // });
     },
     // 判断文件类型
-    handleJudgeType(type){
-        let finalType = ''
-        if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'||type==='mp4'){
-            finalType = 'mp4'
-        }else{
-            finalType = 'img'
-        }
-        return finalType
+    handleJudgeType(type) {
+      let finalType = "";
+      if (
+        type === "avi" ||
+        type === "wmv" ||
+        type === "mpeg" ||
+        type === "mov" ||
+        type === "mp4"
+      ) {
+        finalType = "mp4";
+      } else if (type === "mp3" || type === "wav") {
+        finalType = "mp3";
+      } else {
+        finalType = "img";
+      }
+      return finalType;
     },
-    handleDeleteFile(item,i) {
-        this.$confirm("确定删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        }).then(() => {
-            this.fileIdList.splice(i, 1);
-            this.fileList.splice(i, 1);
-        });
+    handleDeleteFile(item, i) {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.fileIdList.splice(i, 1);
+        this.fileList.splice(i, 1);
+      });
     },
     // 预览文件
-    handlePreview(index){
-        let MethodName = '/FileServer/GetFileInfo'
-        let data = {
-            file_id: this.fileIdList[index]
+    handlePreview(index) {
+      let MethodName = "/FileServer/GetFileInfo";
+      let data = {
+        file_id: this.fileIdList[index],
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          let path =
+            `${this.file_preview_url}/onlinePreview?url=` +
+            Base64.encode(res.file_url);
+          this.resourceUrl = path;
+          this.resourceFlag = true;
         }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                let path =
-                `${this.file_preview_url}/onlinePreview?url=` +
-                Base64.encode(res.file_url);
-                this.resourceUrl = path;
-                this.resourceFlag = true
-            }
-        })
+      });
     },
-    onCancel(){
-        this.$emit('closeDialog')
+    onCancel() {
+      this.$emit("closeDialog");
     },
-    onSubmitEmail(){
-        this.passwordLoading = true
-        let MethodName = '/PaperServer/Client/Xjz/XjzArticleAdd'
-        let data = {
-            res_file_ids: this.fileIdList,
-            art_title: this.title,
-            art_tags: this.tabsList,
-            art_content: this.content
-        }
-        getLogin(MethodName, data)
+    onSubmitEmail() {
+      this.passwordLoading = true;
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleAdd";
+      let data = {
+        res_file_ids: this.fileIdList,
+        art_title: this.title,
+        art_tags: this.tabsList,
+        art_content: this.content,
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.passwordLoading = false
-            if(res.status===1){
-                this.$message.success('发布成功')
-                this.$emit('closeDialog')
-            }
-        }).catch(()=>{
-            this.passwordLoading = false
+          this.passwordLoading = false;
+          if (res.status === 1) {
+            this.$message.success("发布成功");
+            this.$emit("closeDialog");
+          }
         })
-    }
-  },
-  created() {
-  },
-  mounted() {
-  },
-  beforeDestroy() {
+        .catch(() => {
+          this.passwordLoading = false;
+        });
+    },
   },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
 };
 </script>
 
 <style lang="scss" scoped>
-.el-divider{
-    margin: 8px 0;
+.el-divider {
+  margin: 8px 0;
 }
-.title{
-    color: #000;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 20px;
-    margin: 0 0 8px 0;
+.title {
+  color: #000;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 0 0 8px 0;
 }
-.el-select{
-    width: 100%;
-    min-height: 28px;
+.el-select {
+  width: 100%;
+  min-height: 28px;
 }
-.file-list{
-    display: flex;
-    flex-flow: wrap;
-    .file-upload{
-        width: 80px;
-        height: 80px;
-        overflow: hidden;
+.file-list {
+  display: flex;
+  flex-flow: wrap;
+  .file-upload {
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+  }
+  .file-item {
+    width: 80px;
+    height: 80px;
+    margin-left: 8px;
+    text-align: center;
+    line-height: 80px;
+    position: relative;
+    &-mp4 {
+      border: 1px dashed #e5e6eb;
     }
-    .file-item{
-        width: 80px;
-        height: 80px;
-        margin-left: 8px;
-        text-align: center;
-        line-height: 80px;
-        position: relative;
-        &-mp4{
-            border: 1px dashed #E5E6EB;
-        }
-        p{
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 80px;
-            line-height: 80px;
-            font-size: 16px;
-            text-align: center;
-            cursor: pointer;
-            background: rgba(29, 33, 41, 0.60);
-            color: #fff;
-            margin: 0;
-            .svg-icon{
-                margin-right: 16px;
-                width: 16px;
-                height: 16px;
-            }
-        }
+    p {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      font-size: 16px;
+      text-align: center;
+      cursor: pointer;
+      background: rgba(29, 33, 41, 0.6);
+      color: #fff;
+      margin: 0;
+      .svg-icon {
+        margin-right: 16px;
+        width: 16px;
+        height: 16px;
+      }
     }
+  }
 }
-.btn-box{
-    text-align: right;
-    .el-button{
-        width: 108px;
-        text-align: center;
-        border-radius: 40px;
-    }
+.btn-box {
+  text-align: right;
+  .el-button {
+    width: 108px;
+    text-align: center;
+    border-radius: 40px;
+  }
 }
 </style>
 <style lang="scss">
-.publish-report{
-    .el-textarea__inner{
-        border: none;
-        padding: 0 2px;
-        font-size: 14px;
-        color: #000;
-    }
-    .el-input__inner{
-        padding: 0 2px;
-        line-height: 24px;
-        height: 24px;
-        font-size: 16px;
-        color: #000;
-    }
-    .el-select__tags{
-        max-width: 90% !important;
-        height: 28px;
-    }
-    .el-select__input{
-        margin: 0;
-    }
-    .upload-style{
-        width: 80px;
-        height: 80px;
-        line-height: 30px;
-    }
+.publish-report {
+  .el-textarea__inner {
+    border: none;
+    padding: 0 2px;
+    font-size: 14px;
+    color: #000;
+  }
+  .el-input__inner {
+    padding: 0 2px;
+    line-height: 24px;
+    height: 24px;
+    font-size: 16px;
+    color: #000;
+  }
+  .el-select__tags {
+    max-width: 90% !important;
+    height: 28px;
+  }
+  .el-select__input {
+    margin: 0;
+  }
+  .upload-style {
+    width: 80px;
+    height: 80px;
+    line-height: 30px;
+  }
 }
-
-</style>
+</style>

src/views/reporter/components/ReportDetail.vue

@@ -1,59 +1,84 @@
 <template>
   <div class="detail-report" v-if="infoDetail">
     <i class="el-icon-close" @click="closeDialog"></i>
-    <div class="detail-left" v-if="infoDetail.res_urls_type&&infoDetail.res_urls_type.length>0">
-        <el-carousel :interval="5000" arrow="always">
-            <el-carousel-item v-for="item in infoDetail.res_urls_type" :key="item.url">
-                <template v-if="item.type==='img'">
-                    <el-image class="image"
-                        :src="item.url"
-                        :fit="'contain'"
-                        :style="'width:802px;height:870px;'">
-                        <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
-                            加载中<span class="dot">...</span>
-                        </div>
-                    </el-image>
-                </template>
-                <template v-else>
-                    <video controls width="802" height="870">
-                        <source :src="item.url"
-                                type="video/webm">
-                        <source :src="item.url"
-                                type="video/mp4">
-                        Sorry, your browser doesn't support embedded videos.
-                    </video>
-                </template>
-            </el-carousel-item>
-        </el-carousel>
+    <div
+      class="detail-left"
+      v-if="infoDetail.res_urls_type && infoDetail.res_urls_type.length > 0"
+    >
+      <el-carousel :interval="5000" arrow="always">
+        <el-carousel-item
+          v-for="item in infoDetail.res_urls_type"
+          :key="item.url"
+        >
+          <template v-if="item.type === 'img'">
+            <el-image
+              class="image"
+              :src="item.url"
+              :fit="'contain'"
+              :style="'width:802px;height:870px;'"
+            >
+              <div
+                slot="placeholder"
+                class="image-slot"
+                :style="'line-height:130px'"
+              >
+                加载中<span class="dot">...</span>
+              </div>
+            </el-image>
+          </template>
+          <template v-else-if="item.type === 'mp4'">
+            <video controls width="802" height="870">
+              <source :src="item.url" type="video/webm" />
+              <source :src="item.url" type="video/mp4" />
+              Sorry, your browser doesn't support embedded videos.
+            </video>
+          </template>
+          <template v-else-if="item.type === 'mp3'">
+            <audio :src="item.url" controls loop muted>
+              浏览器不支持音频播放。
+            </audio>
+          </template>
+        </el-carousel-item>
+      </el-carousel>
     </div>
     <div class="detail-right">
-        <div class="right-top">
-            <div class="creator-info">
-                <el-image
-                    :src="infoDetail.creator_img_url?infoDetail.creator_img_url:require('../../../assets/avatar.png')"
-                    fit="cover" style="width:32px;height:32px;margin-right: 8px;">
-                </el-image>
-                <span class="name">{{infoDetail.creator_name}}</span>
-            </div>
-            <h3>{{infoDetail.art_title}}</h3>
-            <p>{{infoDetail.art_content}}</p>
-            <b>{{infoDetail.create_time.substring(0,10)}}</b>
+      <div class="right-top">
+        <div class="creator-info">
+          <el-image
+            :src="
+              infoDetail.creator_img_url
+                ? infoDetail.creator_img_url
+                : require('../../../assets/avatar.png')
+            "
+            fit="cover"
+            style="width: 32px; height: 32px; margin-right: 8px"
+          >
+          </el-image>
+          <span class="name">{{ infoDetail.creator_name }}</span>
         </div>
-        <div class="right-bottom">
-            <h4>共 {{infoDetail.comment_count>999?'999+':infoDetail.comment_count}} 条评论</h4>
-        </div>
-        <div class="input-box">
-            <div class="ding-box">
-                <svg-icon icon-class="like-line" className="chat"></svg-icon>
-                <span>{{infoDetail.ding_count}}</span>
-                <svg-icon icon-class="chat-line" className="chat"></svg-icon>
-                <span>{{infoDetail.comment_count}}</span>
-            </div>
-            <el-input
-                placeholder="输入评论"
-                v-model="searchInput" maxlength="100">
-            </el-input>
+        <h3>{{ infoDetail.art_title }}</h3>
+        <p>{{ infoDetail.art_content }}</p>
+        <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
+      </div>
+      <div class="right-bottom">
+        <h4>
+          共
+          {{
+            infoDetail.comment_count > 999 ? "999+" : infoDetail.comment_count
+          }}
+          条评论
+        </h4>
+      </div>
+      <div class="input-box">
+        <div class="ding-box">
+          <svg-icon icon-class="like-line" className="chat"></svg-icon>
+          <span>{{ infoDetail.ding_count }}</span>
+          <svg-icon icon-class="chat-line" className="chat"></svg-icon>
+          <span>{{ infoDetail.comment_count }}</span>
         </div>
+        <el-input placeholder="输入评论" v-model="searchInput" maxlength="100">
+        </el-input>
+      </div>
     </div>
   </div>
 </template>
@@ -66,153 +91,163 @@ export default {
   data() {
     return {
       infoDetail: JSON.parse(JSON.stringify(this.info)),
-      searchInput: ''
+      searchInput: "",
     };
   },
   watch: {},
-  computed: {
-  },
+  computed: {},
   methods: {
-    handleData(){
-        this.infoDetail.res_urls_type = []
-        this.infoDetail.res_urls.forEach(item => {
-            let index = item.lastIndexOf('.');
-            let type = item.substring(index + 1).toLowerCase()
-            let obj = {
-                type: 'img',
-                url: item
-            }
-            if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'||type==='mp4'){
-                obj.type = 'mp4'
-            }
-            this.infoDetail.res_urls_type.push(obj)
-        });
-        this.$forceUpdate()
+    handleData() {
+      this.infoDetail.res_urls_type = [];
+      this.infoDetail.res_urls.forEach((item) => {
+        let index = item.lastIndexOf(".");
+        let type = item.substring(index + 1).toLowerCase();
+        let obj = {
+          type: "img",
+          url: item,
+        };
+        if (
+          type === "avi" ||
+          type === "wmv" ||
+          type === "mpeg" ||
+          type === "mov" ||
+          type === "mp4"
+        ) {
+          obj.type = "mp4";
+        } else if (type === "mp3" || type === "wav") {
+          obj.type = "mp3";
+        }
+        this.infoDetail.res_urls_type.push(obj);
+      });
+      this.$forceUpdate();
+    },
+    closeDialog() {
+      this.$emit("closeDetail");
     },
-    closeDialog(){
-        this.$emit('closeDetail')
-    }
-  },
-  created() {
-
   },
+  created() {},
   mounted() {
-    this.handleData()
-  },
-  beforeDestroy() {
+    this.handleData();
   },
+  beforeDestroy() {},
 };
 </script>
 
 <style lang="scss" scoped>
-.detail-report{
-    display: flex;
+.detail-report {
+  display: flex;
+  position: relative;
+  .el-icon-close {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.88);
+    top: 24px;
+    right: 24px;
+    z-index: 1;
+  }
+  .detail-left {
+    width: 802px;
+    height: 870px;
+  }
+  .detail-right {
     position: relative;
-    .el-icon-close{
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        color: rgba(0, 0, 0, 0.88);
-        top: 24px;
-        right: 24px;
-        z-index: 1;
+    flex: 1;
+    padding-bottom: 150px;
+    .right-top {
+      padding: 24px 24px 16px 24px;
+      border-bottom: 1px solid #f1f1f1;
     }
-    .detail-left{
-        width: 802px;
-        height: 870px;
+    .creator-info {
+      display: flex;
+      align-items: center;
+      span {
+        color: #2f3742;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+      }
     }
-    .detail-right{
-        position: relative;
-        flex: 1;
-        .right-top{
-            padding: 24px 24px 16px 24px;
-            border-bottom: 1px solid #F1F1F1;
-        }
-        .creator-info{
-            display: flex;
-            align-items: center;
-            span{
-                color: #2F3742;
-                font-size: 14px;
-                font-weight: 500;
-                line-height: 22px;
-            }
-        }
-        h3{
-            color: #2F3742;
-            font-size: 18px;
-            font-weight: 500;
-            line-height: 24px;
-            margin: 16px 0;
-        }
-        p{
-            color: #2F3742;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 24px;
-            margin: 0 0 16px 0;
-        }
-        b{
-            color: #C6C6C6;
-            font-size: 12px;
-            font-weight: 400;
-            line-height: 20px;
-        }
+    h3 {
+      color: #2f3742;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 24px;
+      margin: 16px 0;
     }
-    .right-bottom{
-        padding: 16px 24px;
-        h4{
-            color: #2F3742;
-            font-size: 12px;
-            font-weight: 400;
-            line-height: 20px;
-            margin: 0;
-        }
+    p {
+      color: #2f3742;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+      margin: 0 0 16px 0;
     }
-    .input-box{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        padding: 24px 16px;
-        border-top: 1px solid rgba(0, 0, 0, 0.08);
-        background: #FFF;
-        .ding-box{
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 22px;
-            display: flex;
-            align-items: center;
-            margin-bottom: 16px;
-            .svg-icon{
-                width: 24px;
-                height: 24px;
-                &.chat{
-                    color: rgba(0, 0, 0, 0.85);
-                }
-            }
-            span{
-                margin: 0 16px 0 4px;
-            }
-        }
-        .el-input{
-            border-radius: 8px;
-            background: #F4F4F4;
+    b {
+      color: #c6c6c6;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+  .right-bottom {
+    padding: 16px 24px;
+    h4 {
+      color: #2f3742;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 0;
+    }
+  }
+  .input-box {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 24px 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    background: #fff;
+    .ding-box {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+      .svg-icon {
+        width: 24px;
+        height: 24px;
+        &.chat {
+          color: rgba(0, 0, 0, 0.85);
         }
+      }
+      span {
+        margin: 0 16px 0 4px;
+      }
+    }
+    .el-input {
+      border-radius: 8px;
+      background: #f4f4f4;
     }
+  }
 }
 </style>
 <style lang="scss">
-.detail-report{
-    .el-carousel__container{
-        height: 870px;
+.detail-report {
+  .el-carousel__container {
+    height: 870px;
+    .el-carousel__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    .input-box{
-        .el-input__inner{
-            background: #F4F4F4;
-        }
+  }
+  .input-box {
+    .el-input__inner {
+      background: #f4f4f4;
     }
+  }
 }
-</style>
+</style>

src/views/reporter/index.vue

@@ -12,19 +12,34 @@
         </li>
     </ul> -->
     <div class="content-top">
-        <img src="../../assets/reporter-logo.png" />
-        <el-input
-            placeholder="搜索"
-            v-model="searchInput" maxlength="100">
-            <i slot="suffix" class="el-input__icon el-icon-search" @click="getData(1)" style="cursor: pointer;"></i>
-        </el-input>
-        <!-- <span></span> -->
-        <el-button type="primary" @click="changePublist" size="small">发布</el-button>
+      <img src="../../assets/reporter-logo.png" />
+      <el-input placeholder="搜索" v-model="searchInput" maxlength="100">
+        <i
+          slot="suffix"
+          class="el-input__icon el-icon-search"
+          @click="getData(1)"
+          style="cursor: pointer"
+        ></i>
+      </el-input>
+      <el-button
+        type="primary"
+        @click="changePublist"
+        size="small"
+        v-if="userMessage"
+        >发布</el-button
+      >
+      <span v-else></span>
     </div>
     <ul>
-        <li class="label-item" :class="[labelActiveIndex===indexL?'active':'']" v-for="(itemL,indexL) in labelList" :key="indexL" @click="changeLabelIndex(indexL)">
-            # {{itemL}}
-        </li>
+      <li
+        class="label-item"
+        :class="[labelActiveIndex === indexL ? 'active' : '']"
+        v-for="(itemL, indexL) in labelList"
+        :key="indexL"
+        @click="changeLabelIndex(indexL)"
+      >
+        # {{ itemL }}
+      </li>
     </ul>
     <div class="waterfall">
       <vue-waterfall-easy
@@ -32,54 +47,79 @@
         :imgsArr="imgsArr"
         @scrollReachBottom="getData"
       >
-        <div class="info" slot-scope="props" @click="lookDetail(props.value.id)">
-            <el-image class="image"
-                :src="props.value.cover_img_url"
-                :fit="'cover'"
-                :style="{width:'246px',height:Math.random()*(260-180)+180+'px',borderRadius: '8px'}">
-                <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
-                    加载中<span class="dot">...</span>
-                </div>
+        <div
+          class="info"
+          slot-scope="props"
+          @click="lookDetail(props.value.id)"
+        >
+          <el-image
+            class="image"
+            :src="props.value.cover_img_url"
+            :fit="'cover'"
+            :style="{
+              width: '246px',
+              height: Math.random() * (260 - 180) + 180 + 'px',
+              borderRadius: '8px',
+            }"
+          >
+            <div
+              slot="placeholder"
+              class="image-slot"
+              :style="'line-height:130px'"
+            >
+              加载中<span class="dot">...</span>
+            </div>
+          </el-image>
+          <h3>{{ props.value.art_title }}</h3>
+          <p>{{ props.value.art_content }}</p>
+          <!-- <p>鼓浪屿实行最大承载量控制，每天最高5万人次，其中，游客3.5万人次，市民1.5万人次。鼓浪屿派出所出动无人机开展高空巡查，对重点区域动态监测客流，靠前化解风险隐患，守护群众安全。</p> -->
+          <div class="creator-info">
+            <el-image
+              :src="
+                props.value.creator_img_url
+                  ? props.value.creator_img_url
+                  : require('../../assets/avatar.png')
+              "
+              fit="cover"
+              style="width: 24px; height: 24px; margin-right: 12px"
+            >
             </el-image>
-            <h3>{{props.value.art_title}}</h3>
-            <p>{{props.value.art_content}}</p>
-            <!-- <p>鼓浪屿实行最大承载量控制，每天最高5万人次，其中，游客3.5万人次，市民1.5万人次。鼓浪屿派出所出动无人机开展高空巡查，对重点区域动态监测客流，靠前化解风险隐患，守护群众安全。</p> -->
-            <div class="creator-info">
-                <el-image
-                    :src="props.value.creator_img_url?props.value.creator_img_url:require('../../assets/avatar.png')"
-                    fit="cover" style="width:24px;height:24px;margin-right: 12px;">
-                </el-image>
-                <span class="name">{{props.value.creator_name}}</span>
-                <div class="ding-box">
-                    <svg-icon icon-class="like-line" className="chat"></svg-icon>
-                    <span>{{props.value.ding_count}}</span>
-                    <svg-icon icon-class="chat-line" className="chat"></svg-icon>
-                    <span>{{props.value.comment_count}}</span>
-                </div>
+            <span class="name">{{ props.value.creator_name }}</span>
+            <div class="ding-box">
+              <svg-icon icon-class="like-line" className="chat"></svg-icon>
+              <span>{{ props.value.ding_count }}</span>
+              <svg-icon icon-class="chat-line" className="chat"></svg-icon>
+              <span>{{ props.value.comment_count }}</span>
             </div>
+          </div>
         </div>
         <div slot="waterfall-over"></div>
       </vue-waterfall-easy>
     </div>
     <el-dialog
-        :visible.sync="publishFlag"
-        :show-close="false"
-        :close-on-click-modal="false"
-        width="800px"
-        :modal="false"
-        class="login-dialog publish-report-box"
-        v-if="publishFlag">
-        <publish-report @closeDialog="closeDialog"></publish-report>
+      :visible.sync="publishFlag"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="800px"
+      :modal="false"
+      class="login-dialog publish-report-box"
+      v-if="publishFlag"
+    >
+      <publish-report @closeDialog="closeDialog"></publish-report>
     </el-dialog>
     <el-dialog
-        :visible.sync="reportDetailFlag"
-        :show-close="false"
-        :close-on-click-modal="false"
-        width="1286px"
-        :modal="false"
-        class="login-dialog"
-        v-if="reportDetailFlag">
-        <report-detail :info="reportInfo" @closeDetail="closeDetail"></report-detail>
+      :visible.sync="reportDetailFlag"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="1286px"
+      :modal="false"
+      class="login-dialog"
+      v-if="reportDetailFlag"
+    >
+      <report-detail
+        :info="reportInfo"
+        @closeDetail="closeDetail"
+      ></report-detail>
     </el-dialog>
   </div>
 </template>
@@ -90,8 +130,9 @@
 import Header from "../../components/Header.vue";
 import vueWaterfallEasy from "vue-waterfall-easy";
 import { getLogin } from "@/api/ajax";
-import PublishReport from "./components/PublishReport.vue"
-import ReportDetail from './components/ReportDetail.vue';
+import PublishReport from "./components/PublishReport.vue";
+import ReportDetail from "./components/ReportDetail.vue";
+import { getToken } from "@/utils/auth";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, vueWaterfallEasy, PublishReport, ReportDetail },
@@ -101,20 +142,20 @@ export default {
     return {
       optionList: [
         {
-            label: '栏目 1',
+          label: "栏目 1",
         },
         {
-            label: '栏目 2',
+          label: "栏目 2",
         },
         {
-            label: '栏目 3',
+          label: "栏目 3",
         },
         {
-            label: '栏目 4',
+          label: "栏目 4",
         },
         {
-            label: '栏目 5',
-        }
+          label: "栏目 5",
+        },
         // ,
         // {
         //     label: '合刊',
@@ -129,482 +170,482 @@ export default {
       pageSize: 50,
       pageNumber: 1,
       publishFlag: false, // 发布弹窗
-      searchInput: '',
-      labelList:['中英双语','少儿必读','3-6 岁'],
+      searchInput: "",
+      labelList: ["中英双语", "少儿必读", "3-6 岁"],
       labelActiveIndex: null,
       reportDetailFlag: false,
-      reportInfo: null
-    }
+      reportInfo: null,
+      userMessage: getToken() ? JSON.parse(getToken()) : null,
+    };
   },
   //计算属性 类似于data概念
-  computed: {
-    
-  },
+  computed: {},
   //监控data中数据变化
   watch: {},
   //方法集合
   methods: {
-    handleClick(value){
-        this.typeValue = value
-        
+    handleClick(value) {
+      this.typeValue = value;
     },
     getData(page) {
-    //   var list = [
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
-    //     },
-    //     {
-    //       src:
-    //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
-    //     }
-    //   ];
-    //   this.page += 1;
-    //   if (this.page == 6) {
-    //     this.$refs.waterfall.waterfallOver();
-    //   } else {
-    //     this.imgsArr = this.imgsArr.concat(list);
-    //   }
-        if(page){
-            this.pageNumber = page
-            this.imgsArr = []
+      //   var list = [
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-C0IWU6OZL84WHX1KRY.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/749dcf7ae3a948ad9b99695800d2493f.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/7e8f79358274441a85ac397fbd8a2253.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "http://cdn-chenxi.auoktalk.com/invite-share/a39bca7b3e2446de9607547e7473d0d2.jpg",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/002/00201/D-SZE3JLEDEHCOEYLDKS/F-GEW2JO59G9Q2X1YHMF.png",
+      //     },
+      //     {
+      //       src:
+      //         "https://file-kf.helxsoft.cn/CSFileStore/001/00102/D-U2XDHVDGILVMLTPZI3/F-WEOZPDNMXU8L4YV7RG.png",
+      //     }
+      //   ];
+      //   this.page += 1;
+      //   if (this.page == 6) {
+      //     this.$refs.waterfall.waterfallOver();
+      //   } else {
+      //     this.imgsArr = this.imgsArr.concat(list);
+      //   }
+      if (page) {
+        this.pageNumber = page;
+        this.imgsArr = [];
+      }
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleList";
+      let data = {
+        page_capacity: this.pageSize,
+        cur_page: this.pageNumber,
+        art_tag:
+          this.labelActiveIndex !== null
+            ? this.labelList[this.labelActiveIndex]
+            : "",
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.labelList = res.tags;
+          this.imgsArr = this.imgsArr.concat(res.data.list);
+          if (this.pageNumber === res.data.total_page) {
+            this.$refs.waterfall.waterfallOver();
+          } else {
+            this.pageNumber++;
+          }
         }
-        let MethodName = "/PaperServer/Client/Xjz/XjzArticleList";
-        let data = {
-            page_capacity:this.pageSize,
-            cur_page:this.pageNumber,
-            art_tag: this.labelActiveIndex!==null?this.labelList[this.labelActiveIndex]:''
-        }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                this.labelList = res.tags
-                this.imgsArr = this.imgsArr.concat(res.data.list);
-                if (this.pageNumber === res.data.total_page ) {
-                    this.$refs.waterfall.waterfallOver();
-                } else {
-                    this.pageNumber ++
-                }
-            }
-        })
+      });
     },
     // 点击发布按钮
-    changePublist(){
-        this.publishFlag = true
+    changePublist() {
+      this.publishFlag = true;
     },
     // 点击label
-    changeLabelIndex(index){
-        if(this.labelActiveIndex === index){
-            this.labelActiveIndex = null
-        }else{
-            this.labelActiveIndex = index
-        }
-        this.getData(1)
+    changeLabelIndex(index) {
+      if (this.labelActiveIndex === index) {
+        this.labelActiveIndex = null;
+      } else {
+        this.labelActiveIndex = index;
+      }
+      this.getData(1);
     },
-    closeDialog(){
-        this.publishFlag = false
-        this.getData(1)
+    closeDialog() {
+      this.publishFlag = false;
+      this.getData(1);
     },
     // 查看详情
-    lookDetail(id){
-       let MethodName = "/PaperServer/Client/Xjz/XjzArticleDetail";
-        let data = {
-            id: id
+    lookDetail(id) {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleDetail";
+      let data = {
+        id: id,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.reportInfo = res.data;
+          this.reportDetailFlag = true;
         }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                this.reportInfo = res.data
-                this.reportDetailFlag = true
-            }
-        }) 
+      });
+    },
+    closeDetail() {
+      this.reportDetailFlag = false;
     },
-    closeDetail(){
-        this.reportDetailFlag = false
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.getData();
-    let _this = this
-    let input = document.querySelector('input');
-    input.addEventListener('keyup', function(event) {
-        // 判断是否按下回车键
-        if (event.keyCode === 13) {
-            // 回车键被按下，执行你想要的操作
-            _this.getData(1)
-        }
+    let _this = this;
+    let input = document.querySelector("input");
+    input.addEventListener("keyup", function (event) {
+      // 判断是否按下回车键
+      if (event.keyCode === 13) {
+        // 回车键被按下，执行你想要的操作
+        _this.getData(1);
+      }
     });
   },
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .reporter {
-    background: #F7F8FA;
-    height: calc(100vh - 64px);
-    .option{
-        list-style: none;
-        display: flex;
-        justify-content: center;
-        margin: 0;
-        padding: 0;
-        background: #17171A;
-        li{
-            display: flex;
-            align-items: center;
-            border-radius: 30px;
-            height: 36px;
-            padding: 7px 20px;
-            margin: 8px 4px;
-            cursor: pointer;
-            &:hover{
-                background: rgba(255, 255, 255, 0.08);
-            }
-            &.active{
-                background: rgba(255, 255, 255, 0.08);
-                .icon-img,span,b{
-                    color: rgba(255, 255, 255, 0.9);
-                }
-            }
-            .icon-img{
-                width: 14px;
-                height: 14px;
-                margin: 1px 8px 0 0;
-                color: rgba(255, 255, 255, 0.5);
-            }
-            span{
-                color: rgba(255, 255, 255, 0.5);
-                font-size: 14px;
-                line-height: 22px;
-            }
-            b{
-                font-weight: 400;
-                font-size: 14px;
-                line-height: 22px;
-                color: rgba(255, 255, 255, 0.5);
-                margin-left: 5px;
-            }
+  background: #f7f8fa;
+  height: calc(100vh - 64px);
+  .option {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    background: #17171a;
+    li {
+      display: flex;
+      align-items: center;
+      border-radius: 30px;
+      height: 36px;
+      padding: 7px 20px;
+      margin: 8px 4px;
+      cursor: pointer;
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+      }
+      &.active {
+        background: rgba(255, 255, 255, 0.08);
+        .icon-img,
+        span,
+        b {
+          color: rgba(255, 255, 255, 0.9);
         }
+      }
+      .icon-img {
+        width: 14px;
+        height: 14px;
+        margin: 1px 8px 0 0;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      span {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 14px;
+        line-height: 22px;
+      }
+      b {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-left: 5px;
+      }
     }
-    .main {
-        width: 1200px;
-        margin: 0 auto;
-        padding: 24px 0 0 0;
-        .searchChangebox{
-            display: flex;
-            justify-content: space-between;
-            .searchChange-box{
-                display: flex;
-            }
-            .searchChange {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 4px 12px;
-                height: 32px;
-                margin-right: 16px;
-                border: 1px solid #E5E6EB;
-                border-radius: 20px;
-                &.active{
-                    background: #175DFF;
-                    > span{
-                        color: #FFFFFF;
-                    }
-                    .sort {
-                        > div {
-                            svg{
-                                color: #5E89EF;
-                                &.active{
-                                    color: #FFFFFF;
-                                }
-                            }
-                        }
-                    }
-                }
-                > span{
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 22px;
-                    color: #000;
-                    margin-right: 4px;
-                }
-                .sort {
-                    cursor: pointer;
-                    height: 20px;
-                    > div {
-                        font-size: 0;
-                        svg {
-                            width: 11px;
-                            height: 11px;
-                            color: #C2C2C2;
-                            padding: 3px 2px 2px 2px;
-                            &.icon-down{
-                                height: 9px;
-                                padding: 0 2px 2px 2px;
-                            }
-                        }
-                    }
+  }
+  .main {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 24px 0 0 0;
+    .searchChangebox {
+      display: flex;
+      justify-content: space-between;
+      .searchChange-box {
+        display: flex;
+      }
+      .searchChange {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 12px;
+        height: 32px;
+        margin-right: 16px;
+        border: 1px solid #e5e6eb;
+        border-radius: 20px;
+        &.active {
+          background: #175dff;
+          > span {
+            color: #ffffff;
+          }
+          .sort {
+            > div {
+              svg {
+                color: #5e89ef;
+                &.active {
+                  color: #ffffff;
                 }
+              }
             }
-            .input-search{
-                width: 220px;
-            }
+          }
         }
-        .show-title{
-            color: #1F2C5C;
-            margin: 24px 0 0 0;
-            font-weight: 500;
-            font-size: 24px;
-            line-height: 32px;
-            b{
-                margin-left: 16px;
-                color: #ED5F00;
-            }
+        > span {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+          color: #000;
+          margin-right: 4px;
         }
-        .list {
-            margin-top: 28px;
-            display: flex;
-            flex-wrap: wrap;
-            height: calc(100vh - 256px);
-            overflow-y: scroll;
-            &::-webkit-scrollbar {
-                display: none;
-            }
-            > div {
-                width: 200px;
-                border-radius: 8px;
-                overflow: hidden;
-                background: #ffffff;
-                margin-bottom: 24px;
-            }
-            .tips{
-                width: 100%;
-                text-align: center;
-                font-size: 12px;
-                color: #929CA8;
+        .sort {
+          cursor: pointer;
+          height: 20px;
+          > div {
+            font-size: 0;
+            svg {
+              width: 11px;
+              height: 11px;
+              color: #c2c2c2;
+              padding: 3px 2px 2px 2px;
+              &.icon-down {
+                height: 9px;
+                padding: 0 2px 2px 2px;
+              }
             }
+          }
         }
+      }
+      .input-search {
+        width: 220px;
+      }
     }
-    .waterfall {
-        position: absolute;
-        top: 216px;
-        bottom: 0;
-        left: 0;
-        width: 100%;
+    .show-title {
+      color: #1f2c5c;
+      margin: 24px 0 0 0;
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 32px;
+      b {
+        margin-left: 16px;
+        color: #ed5f00;
+      }
     }
-    .info {
+    .list {
+      margin-top: 28px;
+      display: flex;
+      flex-wrap: wrap;
+      height: calc(100vh - 256px);
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      > div {
+        width: 200px;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #ffffff;
+        margin-bottom: 24px;
+      }
+      .tips {
+        width: 100%;
         text-align: center;
-        font-size: 0;
-        h3{
-            margin: 8px 0;
-            overflow: hidden;
-            color: #000;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 22px;
-            word-break: break-word;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            text-align: left;
-            padding: 0 8px;
-        }
-        >p{
-            color: rgba(0, 0, 0, 0.65);
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 22px;
-            word-break: break-word;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            text-align: left;
-            padding: 0 8px;
-            margin: 0 0 8px 0;
-        }
-        .creator-info{
-            text-align: left;
-            padding: 0 8px;
-            display: flex;
-            align-items: center;
-            >span{
-                color: #2F3742;
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 22px;
-                flex: 1;
-                overflow: hidden;
-            }
-            .ding-box{
-                color: rgba(0, 0, 0, 0.30);
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 20px;
-                display: flex;
-                align-items: center;
-                .svg-icon{
-                    width: 16px;
-                    height: 16px;
-                    &.chat{
-                        color: rgba(0, 0, 0, 0.65);
-                    }
-                }
-                span{
-                    margin: 0 8px 0 3px;
-                }
-            }
-        }
+        font-size: 12px;
+        color: #929ca8;
+      }
+    }
+  }
+  .waterfall {
+    position: absolute;
+    top: 216px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  .info {
+    text-align: center;
+    font-size: 0;
+    h3 {
+      margin: 8px 0;
+      overflow: hidden;
+      color: #000;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: left;
+      padding: 0 8px;
     }
-    .content-top{
+    > p {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: left;
+      padding: 0 8px;
+      margin: 0 0 8px 0;
+    }
+    .creator-info {
+      text-align: left;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      > span {
+        color: #2f3742;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        flex: 1;
+        overflow: hidden;
+      }
+      .ding-box {
+        color: rgba(0, 0, 0, 0.3);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
         display: flex;
-        justify-content: space-between;
-        padding: 32px 0;
-        max-width: 1440px;
-        margin: 0 auto;
-        >img{
-            height: 32px;
-        }
-        .el-input{
-            width: 480px;
-            border-radius: 40px;
-            background: #FFF;
+        align-items: center;
+        .svg-icon {
+          width: 16px;
+          height: 16px;
+          &.chat {
+            color: rgba(0, 0, 0, 0.65);
+          }
         }
-        .el-button{
-            width: 108px;
-            text-align: center;
-            border-radius: 40px;
-            font-size: 14px;
+        span {
+          margin: 0 8px 0 3px;
         }
+      }
     }
-    ul{
-        padding: 0;
-        max-width: 1440px;
-        margin: 0 auto;
-        display: flex;
-        li.label-item{
-            padding: 4px 12px;
-            border-radius: 20px;
-            margin-right: 8px;
-            cursor: pointer;
-            color: #787878;
-            font-size: 12px;
-            font-weight: 400;
-            line-height: 20px;
-            &.active{
-                background: #ECECEC;
-                color: #000000;
-            }
-        }
+  }
+  .content-top {
+    display: flex;
+    justify-content: space-between;
+    padding: 32px 0;
+    max-width: 1440px;
+    margin: 0 auto;
+    > img {
+      height: 32px;
+    }
+    .el-input {
+      width: 480px;
+      border-radius: 40px;
+      background: #fff;
     }
+    .el-button {
+      width: 108px;
+      text-align: center;
+      border-radius: 40px;
+      font-size: 14px;
+    }
+  }
+  ul {
+    padding: 0;
+    max-width: 1440px;
+    margin: 0 auto;
+    display: flex;
+    li.label-item {
+      padding: 4px 12px;
+      border-radius: 20px;
+      margin-right: 8px;
+      cursor: pointer;
+      color: #787878;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      &.active {
+        background: #ececec;
+        color: #000000;
+      }
+    }
+  }
 }
 </style>
 <style lang="scss">
 .reporter {
-    .el-input__inner{
-        border-radius: 40px;
-        border: none;
-    }
+  .el-input__inner {
+    border-radius: 40px;
+    border: none;
+  }
 }
-.publish-report-box{
-    .el-dialog__body{
-        padding: 24px;
-    }
+.publish-report-box {
+  .el-dialog__body {
+    padding: 24px;
+  }
 }
-.vue-waterfall-easy{
-    // width: 1440px !important;
-    // margin-left: -720px !important;
-    .img-inner-box{
-        box-shadow: none !important;
-    }
-    .img-box{
-        padding: 12px !important;
-        width: 270px !important;
-    }
+.vue-waterfall-easy {
+  // width: 1440px !important;
+  // margin-left: -720px !important;
+  .img-inner-box {
+    box-shadow: none !important;
+  }
+  .img-box {
+    padding: 12px !important;
+    width: 270px !important;
+  }
 }
-</style>
+</style>