小记者

src/components/Upload.vue

@@ -22,14 +22,14 @@
     >
       <template v-if="styleType === 'upload'">
         <div class="upload-style">
-          <i class="el-icon-plus avatar-uploader-icon"></i>
+          <i class="el-icon-plus avatar-uploader-icon" />
           <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" />
           上传
         </el-button>
       </template>
@@ -69,12 +69,12 @@ export default {
   },
   computed: {
     url() {
-      let userInfor = getToken();
+      const userInfor = getToken();
       let access_token = "";
       if (this.pageName) {
         access_token = Cookies.get("registerToken");
       } else if (userInfor) {
-        let user = JSON.parse(getToken());
+        const user = JSON.parse(getToken());
         access_token = user.access_token;
       }
       return (
@@ -142,8 +142,8 @@ export default {
         this.uploadType === "mp4" ||
         this.uploadType === "image/video/mp3"
       ) {
-        if (file.size > 500 * 1024 * 1024) {
-          this.$message.warning("上传文件大小不能超过500M");
+        if (file.size > 4000 * 1024 * 1024) {
+          this.$message.warning("上传文件大小不能超过4G");
           return false; // 必须返回false
         }
       } else if (file.size > 20 * 1024 * 1024) {
@@ -176,7 +176,7 @@ export default {
     },
     initUpload() {
       this.fileList = this.datafileList || [];
-      let name = "只能上传";
+      const name = "只能上传";
       switch (this.uploadType) {
         case "image":
           this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
@@ -194,7 +194,7 @@ export default {
           this.accept = "video/*";
           this.fileTypeName = "视频";
           this.uploadName = name + "视频";
-          this.uploadTip = "只能上传视频文件，大小不超 2GB";
+          this.uploadTip = "只能上传视频文件，大小不超 4GB";
           break;
         case "pdf":
           this.accept = ".pdf";

src/views/reporter/components/PublishReport.vue

@@ -111,7 +111,7 @@ const Base64 = require("js-base64").Base64;
 export default {
   components: { Upload },
   name: "publishReport",
-  props: [],
+  props: ["info", "editId"],
   data() {
     return {
       title: "",
@@ -151,10 +151,15 @@ export default {
             url: file.response.file_info_list[0].file_url,
             type: this.handleJudgeType(type),
             coverFlag: false,
+            id: file.response.file_info_list[0].file_id,
           };
           this.fileIdList.push(file.response.file_info_list[0].file_id);
           this.fileList.push(file);
           this.fileListShow.push(obj);
+        } else if (file.editFlag) {
+          this.fileIdList.push(file.id);
+          this.fileList.push(file);
+          this.fileListShow.push(file);
         }
       });
     },
@@ -210,11 +215,16 @@ export default {
       this.passwordLoading = true;
       let MethodName = "/PaperServer/Client/Xjz/XjzArticleAdd";
       let data = {
-        res_file_ids: this.fileIdList,
+        art_type: 0,
+        res_arr: this.fileListShow,
         art_title: this.title,
         art_tags: this.tabsList,
         art_content: this.content,
       };
+      if (this.editId) {
+        MethodName = "/PaperServer/Client/Xjz/XjzArticleEdit";
+        data.id = this.editId;
+      }
       getLogin(MethodName, data)
         .then((res) => {
           this.passwordLoading = false;
@@ -228,7 +238,24 @@ export default {
         });
     },
   },
-  created() {},
+  created() {
+    if (this.info) {
+      this.title = this.info.art_title;
+      this.content = this.info.art_content;
+      this.tabsList = this.info.art_tags;
+      this.info.res_arr.forEach((item) => {
+        let obj = JSON.parse(JSON.stringify(item));
+        obj.coverFlag = false;
+        obj.editFlag = true;
+        (obj.response = {
+          status: "success",
+        }),
+          this.fileIdList.push(item.id);
+        this.fileList.push(obj);
+        this.fileListShow.push(obj);
+      });
+    }
+  },
   mounted() {},
   beforeDestroy() {},
 };

src/views/reporter/components/ReportDetail.vue

@@ -69,12 +69,16 @@
           条评论
         </h4>
         <div class="comment-box">
-          <div class="comment-item">
+          <div
+            class="comment-item"
+            v-for="(itemc, indexc) in infoDetail.comment_list"
+            :key="indexc"
+          >
             <div class="comment-top">
               <el-image
                 :src="
-                  infoDetail.creator_img_url
-                    ? infoDetail.creator_img_url
+                  itemc.creator_img_url
+                    ? itemc.creator_img_url
                     : require('../../../assets/avatar.png')
                 "
                 fit="cover"
@@ -82,37 +86,34 @@
               >
               </el-image>
               <div class="comment-top-right">
-                <span class="name">{{ infoDetail.creator_name }}</span>
-                <p>{{ infoDetail.art_content }}</p>
+                <span class="name">{{ itemc.creator_name }}</span>
+                <p>{{ itemc.cmt_content }}</p>
                 <div class="comment-top-bottom">
-                  <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
+                  <b>{{ itemc.create_time.substring(0, 10) }}</b>
                   <div class="ding-box">
                     <svg-icon
                       icon-class="like-line"
                       className="chat"
                     ></svg-icon>
                     <span>{{
-                      infoDetail.ding_count < 1000
-                        ? infoDetail.ding_count
-                        : "999+"
+                      itemc.ding_count < 1000 ? itemc.ding_count : "999+"
                     }}</span>
                     <svg-icon
                       icon-class="chat-line"
                       className="chat"
                     ></svg-icon>
                     <span>{{
-                      infoDetail.comment_count < 1000
-                        ? infoDetail.comment_count
-                        : "999+"
+                      itemc.comment_count < 1000 ? itemc.comment_count : "999+"
                     }}</span>
                     <svg-icon
                       icon-class="delete-line"
                       className="chat"
+                      @click="deleteCmt(itemc)"
                     ></svg-icon>
                   </div>
                 </div>
                 <div class="comment-bottom">
-                  <div class="comment-bottom-item">
+                  <!-- <div class="comment-bottom-item">
                     <el-image
                       :src="
                         infoDetail.creator_img_url
@@ -133,20 +134,11 @@
                             icon-class="like-line"
                             className="chat"
                           ></svg-icon>
-                          <span>{{
-                            infoDetail.ding_count < 1000
-                              ? infoDetail.ding_count
-                              : "999+"
-                          }}</span>
                           <svg-icon
                             icon-class="chat-line"
                             className="chat"
+                            style="margin: 0 16px"
                           ></svg-icon>
-                          <span>{{
-                            infoDetail.comment_count < 1000
-                              ? infoDetail.comment_count
-                              : "999+"
-                          }}</span>
                           <svg-icon
                             icon-class="delete-line"
                             className="chat"
@@ -179,20 +171,11 @@
                             icon-class="like-line"
                             className="chat"
                           ></svg-icon>
-                          <span>{{
-                            infoDetail.ding_count < 1000
-                              ? infoDetail.ding_count
-                              : "999+"
-                          }}</span>
                           <svg-icon
                             icon-class="chat-line"
                             className="chat"
+                            style="margin: 0 16px"
                           ></svg-icon>
-                          <span>{{
-                            infoDetail.comment_count < 1000
-                              ? infoDetail.comment_count
-                              : "999+"
-                          }}</span>
                           <svg-icon
                             icon-class="delete-line"
                             className="chat"
@@ -200,7 +183,7 @@
                         </div>
                       </div>
                     </div>
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -218,14 +201,28 @@
             infoDetail.comment_count < 1000 ? infoDetail.comment_count : "999+"
           }}</span>
         </div>
-        <el-input placeholder="输入评论" v-model="searchInput" maxlength="100">
-        </el-input>
+        <div class="comment-input-box">
+          <el-input
+            placeholder="输入评论"
+            v-model="searchInput"
+            maxlength="100"
+          >
+          </el-input>
+          <!-- <el-button
+            type="primary"
+            @click="sendComment"
+            size="small"
+            v-if="searchInput.trim()"
+            >发送</el-button
+          > -->
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getLogin } from "@/api/ajax";
 export default {
   components: {},
   name: "publishReport",
@@ -266,6 +263,31 @@ export default {
     closeDialog() {
       this.$emit("closeDetail");
     },
+    // 评论
+    sendComment() {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleAddComment";
+      let data = {
+        art_id: this.info.id,
+        top_id: "",
+        parent_id: null,
+        cmt_content: this.searchInput.trim(),
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+        }
+      });
+    },
+    deleteCmt(item) {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleDelComment";
+      let data = {
+        art_id: this.info.id,
+        id: item.id,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+        }
+      });
+    },
   },
   created() {},
   mounted() {
@@ -374,6 +396,12 @@ export default {
       background: #f4f4f4;
     }
   }
+  .comment-input-box {
+    display: flex;
+    .el-button {
+      margin-left: 8px;
+    }
+  }
   .comment-box {
     .comment-item {
       padding: 24px 0;

src/views/reporter/index.vue

@@ -58,6 +58,7 @@
                 height: Math.random() * (260 - 180) + 180 + 'px',
                 borderRadius: '8px',
               }"
+              v-if="props.value.cover_img_url"
             >
               <div
                 slot="placeholder"
@@ -88,9 +89,24 @@
             </el-image>
             <span class="name">{{ props.value.creator_name }}</span>
             <div class="ding-box">
-              <svg-icon icon-class="like-line" className="chat"></svg-icon>
+              <svg-icon
+                @click="handleLike(props.value)"
+                icon-class="like"
+                className="like-icon"
+                v-if="props.value.ding_opt === 1"
+              ></svg-icon>
+              <svg-icon
+                @click="handleLike(props.value)"
+                icon-class="like-line"
+                className="chat"
+                v-else
+              ></svg-icon>
               <span>{{ props.value.ding_count }}</span>
-              <svg-icon icon-class="chat-line" className="chat"></svg-icon>
+              <svg-icon
+                @click="lookDetail(props.value.id)"
+                icon-class="chat-line"
+                className="chat"
+              ></svg-icon>
               <span>{{ props.value.comment_count }}</span>
             </div>
             <el-dropdown trigger="click" @command="handleChange">
@@ -113,6 +129,10 @@
         <div slot="waterfall-over"></div>
       </vue-waterfall-easy>
     </div>
+    <div class="nodata" v-if="imgsArr.length === 0">
+      <img src="../../assets/nodata.png" />
+      <p>还没有发布内容</p>
+    </div>
     <el-dialog
       :visible.sync="publishFlag"
       :show-close="false"
@@ -122,7 +142,11 @@
       class="login-dialog publish-report-box"
       v-if="publishFlag"
     >
-      <publish-report @closeDialog="closeDialog"></publish-report>
+      <publish-report
+        :editId="editId"
+        :info="reportInfo"
+        @closeDialog="closeDialog"
+      ></publish-report>
     </el-dialog>
     <el-dialog
       :visible.sync="reportDetailFlag"
@@ -188,7 +212,7 @@ export default {
       pageNumber: 1,
       publishFlag: false, // 发布弹窗
       searchInput: "",
-      labelList: ["中英双语", "少儿必读", "3-6 岁"],
+      labelList: [],
       labelActiveIndex: null,
       reportDetailFlag: false,
       reportInfo: null,
@@ -222,6 +246,7 @@ export default {
         if (res.status === 1) {
           this.labelList = res.tags;
           this.imgsArr = this.imgsArr.concat(res.data.list);
+          if (this.imgsArr.length === 0) return;
           if (this.pageNumber === res.data.total_page) {
             this.$refs.waterfall.waterfallOver();
           } else {
@@ -232,6 +257,8 @@ export default {
     },
     // 点击发布按钮
     changePublist() {
+      this.editId = "";
+      this.reportInfo = null;
       this.publishFlag = true;
     },
     // 点击label
@@ -248,7 +275,7 @@ export default {
       this.getData(1);
     },
     // 查看详情
-    lookDetail(id) {
+    lookDetail(id, flag) {
       let MethodName = "/PaperServer/Client/Xjz/XjzArticleDetail";
       let data = {
         id: id,
@@ -256,21 +283,60 @@ export default {
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {
           this.reportInfo = res.data;
-          this.reportDetailFlag = true;
+          if (flag) {
+            this.publishFlag = true;
+          } else {
+            this.reportDetailFlag = true;
+          }
         }
       });
     },
     closeDetail() {
       this.reportDetailFlag = false;
     },
-    handleChange(com) {
+    async handleChange(com) {
       const arr = com.split("&&&");
       if (arr[0] === "edit") {
-        console.log("edit");
+        await this.lookDetail(arr[1], true);
+        this.editId = arr[1];
       } else {
-        console.log("delete");
+        this.handleDel(arr[1]);
       }
     },
+    //删除小记者文章
+    handleDel(id) {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        let MethodName = "/PaperServer/Client/Xjz/XjzArticleDel";
+        let data = {
+          id: id,
+        };
+        getLogin(MethodName, data).then((res) => {
+          if (res.status === 1) {
+            this.getData(1);
+          }
+        });
+      });
+    },
+    // 点赞/取消赞
+    handleLike(item) {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleOptDing";
+      let data = {
+        bound_id: item.id,
+        ding_opt: item.ding_opt === 1 ? 0 : 1,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          item.ding_count =
+            item.ding_opt === 1 ? item.ding_count - 1 : item.ding_count + 1;
+          item.ding_opt = item.ding_opt === 1 ? 0 : 1;
+          this.$forceUpdate();
+        }
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -479,21 +545,24 @@ export default {
       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;
+    > div {
+      > 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;
@@ -520,6 +589,9 @@ export default {
           &.chat {
             color: rgba(0, 0, 0, 0.65);
           }
+          &.like-icon {
+            color: #f62727;
+          }
         }
         span {
           margin: 0 8px 0 3px;