{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/communtiy/pages.vue?vue&type=style&index=1&id=5b1f106a&scoped=true&lang=css","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/communtiy/pages.vue","mtime":1742741088688},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CmJ1dHRvbiB7CiAgY29sb3I6ICNmZmZmZmY7CiAgYmFja2dyb3VuZC1jb2xvcjogIzM2OTBjZjsKICBoZWlnaHQ6IDMwcHg7CiAgd2lkdGg6IDg4cHg7CiAgYm9yZGVyLXRvcC13aWR0aDogMDsKICBib3JkZXItcmlnaHQtd2lkdGg6IDA7CiAgYm9yZGVyLWJvdHRvbS13aWR0aDogMDsKICBib3JkZXItbGVmdC13aWR0aDogMDsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgZmxvYXQ6IHJpZ2h0OwogIG1hcmdpbjogMnB4IDEwcHggMCAxMHB4Owp9Cgoucm91dGVyLWxpbmstZXhhY3QtYWN0aXZlIHsKICBjb2xvcjogbm9uZTsKfQo="},{"version":3,"sources":["pages.vue"],"names":[],"mappings":";AAsVA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"pages.vue","sourceRoot":"src/views/communtiy","sourcesContent":["<template>\n  <div>\n    <div class=\"user-coin-card mb-4\">\n      <div class=\"row\" style=\"width: 100%\">\n        <!-- 内容 -->\n        <div class=\"container\">\n          <div class=\"content-wrap\" style=\"float: none\">\n            <div class=\"content-layout\">\n              <div class=\"fixed-wrap bbs-home-tab\">\n                <div class=\"fixed-wrap-content\">\n                  <div class=\"tab-content bbs-main-tab-content\">\n                    <!-- 文章列表 -->\n                    <div class=\"ajaxpager active\" id=\"home-tab-2\">\n                      <div class=\"forum-posts detail alone ajax-item\">\n                        <div class=\"user-info flex ac mb10\">\n                          <!-- <a href=\"/\"> -->\n                          <div @click=\"showConfirm\">\n                            <span class=\"avatar-img\"\n                              ><img\n                                src=\"https://onlinephoto.oss-cn-chengdu.aliyuncs.com/hangtian/touxiang.jpg\"\n                                data-src=\"//www.cmstui.com/wp-content/themes/zibll/img/avatar-default.png\"\n                                class=\"lazyload avatar avatar-id-1\"\n                              />\n                            </span>\n                          </div>\n                          <!-- </a> -->\n                          <div class=\"user-right flex flex1 ac jsb ml10\">\n                            <div class=\"flex1\">\n                              <div class=\"flex ac flex1\">\n                                <a\n                                  class=\"display-name text-ellipsis\"\n                                  href=\"/\"\n                                  >{{ getUserName(forums.userId) }}</a\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                        <div>\n                          <div class=\"content mt6\">\n                            <a\n                              target=\"_blank\"\n                              href=\"#\"\n                              class=\"excerpt\"\n                              v-html=\"forums.articleContent\"\n                            ></a>\n                          </div>\n                        </div>\n                        <div class=\"flex ac jsb mt10\">\n                          <div class=\"action-meta flex0 flex jsb\">\n                            <div class=\"score-btns\">\n                              <a\n                                href=\"javascript:;\"\n                                ajax-action=\"score_extra\"\n                                class=\"btn-score extra\"\n                                ><svg class=\"icon\" aria-hidden=\"true\">\n                                  <use\n                                    xlink:href=\"#icon-extra-points\"\n                                  ></use></svg></a\n                              ><text>评分</text>\n                              <a\n                                href=\"javascript:;\"\n                                ajax-action=\"score_deduct\"\n                                class=\"btn-score deduct\"\n                                ><svg class=\"icon\" aria-hidden=\"true\">\n                                  <use\n                                    xlink:href=\"#icon-deduct-points\"\n                                  ></use></svg\n                              ></a>\n                            </div>\n                            <a href=\"#\" class=\"item\"\n                              ><svg class=\"icon\" aria-hidden=\"true\">\n                                <use xlink:href=\"#icon-comment\"></use></svg\n                              ><text>回复</text></a\n                            >\n                            <a\n                              mobile-bottom=\"true\"\n                              data-height=\"243\"\n                              class=\"btn-share item\"\n                              href=\"javascript:;\"\n                              data-toggle=\"RefreshModal\"\n                              ><svg class=\"icon\" aria-hidden=\"true\">\n                                <use xlink:href=\"#icon-share\"></use></svg\n                              ><text>分享</text></a\n                            >\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <section id=\"comments\" class=\"box-show wow fadeInDown\">\n            <div id=\"comt-respond\" class=\"commentpost\">\n              <h4>\n                发表评论<span\n                  ><a\n                    rel=\"nofollow\"\n                    id=\"cancel-reply\"\n                    href=\"#comment\"\n                    class=\"page_speeder_1817808094\"\n                  ></a\n                ></span>\n              </h4>\n              <form id=\"frmSumbit\">\n                <input type=\"hidden\" id=\"inpId\" value=\"413\" />\n                <input type=\"hidden\" id=\"inpRevID\" value=\"0\" />\n\n                <div id=\"comment-tools\">\n                  <div class=\"tools_text\">\n                    <textarea\n                      placeholder=\"请输入您的评论\"\n                      name=\"txaArticle\"\n                      id=\"txaArticle\"\n                      class=\"text input-block-level comt-area\"\n                      cols=\"50\"\n                      rows=\"4\"\n                      tabindex=\"5\"\n                      v-model=\"text\"\n                    ></textarea>\n                  </div>\n                </div>\n              </form>\n              <div class=\"psumbit\">\n                <a-button type=\"primary\" @click=\"PublishComments\">\n                  提交\n                </a-button>\n              </div>\n            </div>\n            <div id=\"commentlist\" class=\"commentlist\">\n              <div class=\"comment-tab\">\n                <div class=\"come-comt\">\n                  评论列表 <span id=\"comment_div\"></span>\n                </div>\n              </div>\n            </div>\n            <h2 class=\"comment-text-center\" v-if=\"!this.msg\">\n              <i class=\"icon font-meiyou\"></i> 还没有评论，来说两句吧...\n            </h2>\n            <label id=\"AjaxCommentBegin\"></label>\n            <div v-for=\"(item, index) in comments\" :key=\"index\">\n              <div\n                class=\"shadow-box msg noimg wow fadeInRight\"\n                data-wow-delay=\"0.25s\"\n                id=\"cmt225\"\n              >\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: row;\n                    align-items: end;\n                    justify-content: flex-end;\n                  \"\n                  @click=\"DeleteComments(item)\"\n                >\n                  删除\n                </div>\n                <div class=\"msgimg\">\n                  <img\n                    class=\"avatar\"\n                    src=\"https://q2.qlogo.cn/headimg_dl?dst_uin=36926842&spec=100\"\n                    alt=\"网友昵称：访客\"\n                    title=\"网友昵称：访客\"\n                  />\n                </div>\n\n                <div class=\"msgtxt\">\n                  <div class=\"msgname\">\n                    <span class=\"autlv aut-6 vs\">V</span\n                    ><span class=\"autlv autlvname aut-6\">游客</span>\n                    <span class=\"dot shafa\">沙发</span>\n                  </div>\n                  <div class=\"interact-bar\">\n                    <span class=\"interact-time\" title=\"评论时间\">{{\n                      item.publishTime | formatTime\n                    }}</span>\n                  </div>\n                  <div class=\"msgarticle\">\n                    {{ item.commentContent }}<label id=\"AjaxComment225\"></label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        </div>\n        <!-- 评论列表 -->\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport {\n  ArticleById,\n  CommentsById,\n  PublishComments,\n  DeleteComments,\n  AllUser,\n} from \"@/api\";\nimport ColumnSetting from \"@/components/common/ColumnSetting.vue\";\nexport default {\n  name: \"UserCenter\",\n  data() {\n    return {\n      userId: this.$store.state.user.userId,\n      userName: this.$store.state.user.userName,\n      likes: \"\",\n      dianzan: \"\",\n      forums: {},\n      ArticleId: this.$route.query.id,\n      text: \"\",\n      msg: \"\",\n      comments: [],\n      users: [],\n    };\n  },\n\n  mounted() {\n    this.fetchData();\n    this.getuser();\n  },\n  filters: {\n    formatTime(time) {\n      // 将 ISO 8601 格式的时间转换为 Date 对象\n      const date = new Date(time);\n      // 获取年月日时分秒\n      const year = date.getFullYear();\n      const month = String(date.getMonth() + 1).padStart(2, \"0\");\n      const day = String(date.getDate()).padStart(2, \"0\");\n      const hours = String(date.getHours()).padStart(2, \"0\");\n      const minutes = String(date.getMinutes()).padStart(2, \"0\");\n      const seconds = String(date.getSeconds()).padStart(2, \"0\");\n      // 返回格式化后的时间字符串\n      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;\n    },\n  },\n  methods: {\n    showConfirm() {\n      this.$confirm({\n        title: \"添加好友?\",\n        content: \"是否现在与该用户进行聊天\",\n        onOk: () => {\n          // 使用箭头函数定义回调函数\n          let data = {\n            friendId: this.forums.userId,\n            friendName: this.getUserName(this.forums.userId),\n          };\n          console.log(data);\n          this.$api.addFriend(data).then((res) => {\n            console.log(res);\n          });\n        },\n        onCancel() {},\n      });\n    },\n\n    PublishComments() {\n      // 发布评论\n      let formdata = {\n        articleId: this.ArticleId,\n        commentContent: this.text,\n        userId: this.userId,\n      };\n      // console.log(formdata);\n      PublishComments(formdata)\n        .then((res) => {\n          if (res.code == 200) {\n            this.$message.success(\"发布成功\");\n\n            // 发布成功后重新获取评论\n            this.fetchData();\n          }\n        })\n        .catch((error) => {\n          console.log(error);\n          this.$message.error(error.msg || \"发布失败\");\n        });\n    },\n\n    fetchData() {\n      // 获取文章\n      let datas = { id: this.ArticleId };\n      ArticleById(datas)\n        .then((res) => {\n          if (res.code === 200) {\n            this.forums = res.data;\n            // 获取文章成功后再获取评论\n            this.getuser();\n            this.fetchComments();\n          }\n        })\n        .catch((error) => {\n          console.log(error);\n        });\n    },\n    // 删除评论\n    DeleteComments(item) {\n      DeleteComments(item.commentId)\n        .then((res) => {\n          if (res.code == 200) {\n            this.$message.success(\"删除成功\");\n            // 获取文章成功后再获取评论\n            this.fetchComments();\n          }\n        })\n        .catch((error) => {\n          this.$message.error(error || \"删除失败\");\n        });\n    },\n    fetchComments() {\n      // 获取评论\n      let data = { id: this.ArticleId };\n      CommentsById(data)\n        .then((res) => {\n          this.msg = res.data.length || 0;\n          this.comments = res.data;\n          // console.log(this.comments);\n          console.log(this.comments);\n        })\n        .catch((error) => {\n          console.log(error);\n        });\n    },\n    getuser() {\n      AllUser()\n        .then((response) => {\n          this.users = response.data;\n        })\n        .catch((error) => {\n          console.error(\"Failed to load users:\", error);\n        });\n    },\n    getUserName(userId) {\n      const user = this.users.find((u) => u.userId === userId);\n      return user ? user.userName : \"未知用户\";\n    },\n  },\n};\n</script>\n<style src=\"@/assets/pages.css\"></style>\n<style scoped>\nbutton {\n  color: #ffffff;\n  background-color: #3690cf;\n  height: 30px;\n  width: 88px;\n  border-top-width: 0;\n  border-right-width: 0;\n  border-bottom-width: 0;\n  border-left-width: 0;\n  border-radius: 4px;\n  float: right;\n  margin: 2px 10px 0 10px;\n}\n\n.router-link-exact-active {\n  color: none;\n}\n</style>\n"]}]}