MoeNovaClient/pages/index/articleDetail.vue

<template>
  <view class="page">
    <!-- 引入FontAwesome -->
    <view>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      />
    </view>

    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <text class="fa fa-angle-left"></text>
      </view>
      <view class="navbar-center">
        <view class="navbar-title">
          <image
            class="navbar-avatar"
            :src="author.avator"
            mode="aspectFill"
          ></image>
          <text class="navbar-text">{{ author.nickname }}</text>
          <!-- <text class="navbar-badge" v-if="author.is_vip > 0">VIP</text> -->
        </view>
      </view>
      <view class="navbar-right">
        <text
          class="followTheAuthor followTheAuthor1"
          v-if="author.is_attention == 0"
          @click="followTheAuthor(1)"
          >+关注</text
        >
        <text
          class="followTheAuthor followTheAuthor0"
          v-if="author.is_attention == 1"
          @click="followTheAuthor(0)"
          >已关注</text
        >
        <image
          v-if="false"
          @click="showActionSheet(0)"
          src="@/static/icon/sy_icon_fenxiang.png"
          mode="widthFix"
        ></image>
        <view v-else class="navbar-right" @click="showActionSheet(1)">
          <text class="fa fa-ellipsis-h"></text>
        </view>
      </view>
    </view>
    <view class="topStatusBar inProgress" v-if="0"> 审核中</view>
    <view class="topStatusBar fail" v-if="0" @click="openConfirmationBox">
      审核未通过，点击查看原因</view
    >

    <!--  轮播图部分 -->
    <uv-swiper
      v-if="articleInfo.type == 'user'"
      class="swiper-box"
      height="1032rpx"
      :list="swperImages"
      indicator
      indicatorMode="dot"
      bgColor="#fff"
      :autoplay="false"
    >
    </uv-swiper>

    <!-- 文章内容区域 -->
    <view class="body">
      <!-- 文章标题与元信息 -->
      <view class="article-header">
        <view class="title">
          {{ articleInfo.title || "暂无标题" }}
        </view>
        <view class="article-content">
          <view class="content">
            <rich-text :nodes="content" style="font-size: 14px"></rich-text>
          </view>
        </view>
        <view class="cardLink" @click="goToDetails(workInfo.id)">
          <image :src="workInfo.images" mode="heightFix"></image>
          <view class="content">
            <view class="tit">作品一号</view>
            <view class="tex">{{
              cutTime(workInfo.create_time) || "暂无时间"
            }}</view>
          </view>
        </view>
        <view v-if="false" class="meta-info">
          <view class="meta-item">
            <text class="fa fa-calendar"></text>
            <text class="meta-text">{{
              articleInfo.create_time || "暂无时间"
            }}</text>
          </view>
          <view class="meta-item">
            <text class="fa fa-eye"></text>
            <text class="meta-text">{{ articleInfo.num_view || 0 }}次阅读</text>
          </view>
          <view class="meta-item" v-if="articleInfo.author">
            <text class="fa fa-user"></text>
            <text class="meta-text">{{ articleInfo.author }}</text>
          </view>
        </view>
      </view>

      <!-- 文章底部区域 -->
      <view class="article-footer" v-if="false">
        <view class="action-bar">
          <view class="action-item" @tap="likeArticle">
            <text
              class="fa"
              :class="
                articleInfo.is_like ? 'fa-thumbs-up liked' : 'fa-thumbs-o-up'
              "
            ></text>
            <text class="action-text">{{ articleInfo.like_count || 0 }}</text>
          </view>
          <view class="action-item" @tap="openComment">
            <text class="fa fa-comment-o"></text>
            <text class="action-text">{{ tableTotal || 0 }}</text>
          </view>
          <view class="action-item" @tap="shareArticle">
            <text class="fa fa-share-alt"></text>
            <text class="action-text">分享</text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="btn_submit" @click="chatTA()">
			<image class="icon" src="../../static/icon/icon_chat_white.png" mode="widthFix"></image>
			私聊
		</view> -->

    <previewImage
      ref="previewImage"
      :opacity="0.8"
      :circular="true"
      :imgs="imgs"
      :descs="descs"
    ></previewImage>

    <!-- 评论区域 -->
    <CommentSection
      v-if="userInfo.id != 0"
      ref="commentSection"
      @totalNumberOfComments="totalNumberOfComments"
      :articleInfo="articleInfo"
      :myInfo="myInfo"
      :userInfo="userInfo"
      :articleId="arcID"
      :type="'article'"
    >
    </CommentSection>

    <view class="thread2"></view>
    <!-- 自定义 ActionSheet -->
    <ActionSheet
      ref="actionSheet"
      :items="items"
      @select="handleActionSelect"
      @cancel="handleActionCancel"
    />
    <CustomPopup ref="confirmationBox">
      <view class="failureReason">
        <view class="title"> 审核未通关</view>
        <view class="reviewContent">
          <!-- {{ fileInformation.reason }} -->
          不通过原因
        </view>
        <view class="btn-box" @click="closeConfirmationBox">知道了</view>
      </view>
    </CustomPopup>
  </view>
</template>

<script>
import htmlParser from "../../common/html-parser";
import CommentSection from "@/components/CommentSection/CommentSection.vue";
import previewImage from "@/components/kxj-previewImage/kxj-previewImage.vue"; //引用插件
import CustomPopup from "@/components/CustomPopup/CustomPopup.vue";
function parseImgs(nodes) {
  nodes.forEach((node) => {
    if (node.name === "img" && node.attrs && node.attrs["data-img-size-val"]) {
      const sizes = node.attrs["data-img-size-val"].split(",");
      const width = uni.upx2px(720 * 0.9);
      const height = parseInt(width * (sizes[1] / sizes[0]));
      node.attrs.style = `width:${width};height:${height};`;
    }
    if (Array.isArray(node.children)) {
      parseImgs(node.children);
    }
  });
  return nodes;
}
export default {
  components: {
    previewImage,
    CommentSection,
    CustomPopup,
  },
  data() {
    return {
      swperImages: [],
      items: [],
      title: "",
      arcID: 0,
      selImg: 0,
      home_image: "",
      myinfo: {},
      tag_list: [],
      image_list: [],
      imgs: [],
      descs: [],
      list_wish: [],
      content: "",
      tableTotal: 0,
      author: {},
      // 添加文章信息字段
      articleInfo: {
        title: "",
        content: "",
        create_time: "",
        images: "",
        view_count: 0,
        author: "",
        like_count: 0,
        is_like: false,
      },
      workInfo: {},
      myInfo: {
        user_id: getApp().globalData.mobile, // 用户id
        user_name: getApp().globalData.nickname, // 用户名
        user_avatar: getApp().globalData.avator, // 用户头像地址
      },
      // 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
      userInfo: {
        user_id: 0, // 用户id
        user_name: "", // 用户名
        user_avatar: "", // 用户头像地址
      },
    };
  },
  onLoad(parms) {
    let self = this;
    this.arcID = parms.id || 396;
  },
  onShow() {
    uni.$emit("check_update");
    this.$nextTick(() => {
      if (this.$refs.commentSection) {
        this.$refs.commentSection.loadCommentData();
      }
    });
    this.loadData();
  },
  methods: {
    openConfirmationBox() {
      this.$refs.confirmationBox.open();
    },
    closeConfirmationBox() {
      this.$refs.confirmationBox.close();
    },
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },

    // 文章点赞
    likeArticle() {
      uni.request({
        url: this.$apiHost + "/Work/zanTA",
        data: {
          uuid: getApp().globalData.uuid,
          id: this.arcID,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("点赞结果:", res.data);
          if (res.data.success === "yes") {
            // 更新点赞状态
            if (!this.articleInfo.is_like) {
              this.articleInfo.like_count =
                (this.articleInfo.like_count || 0) + 1;
              this.articleInfo.is_like = true;
              uni.showToast({
                title: "点赞成功",
                icon: "none",
              });
            } else {
              this.articleInfo.like_count =
                (this.articleInfo.like_count || 0) - 1;
              this.articleInfo.is_like = false;
              uni.showToast({
                title: res.data.str,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.str,
              icon: "none",
            });
          }
        },
        fail: (e) => {
          console.log("点赞失败:", e);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        },
      });
    },
    // 关注作者
    followTheAuthor(n) {
      uni.request({
        url: this.$apiHost + "/Member/attention",
        data: {
          uuid: getApp().globalData.uuid,
          id: this.author.id,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("点赞结果:", res.data);
          uni.showToast({
            title: res.data.str,
            icon: "none",
          });
          if (res.data.success === "yes") {
            console.log("关注结果:", res.data, n);

            this.author.is_attention = n;
          }
        },
        fail: (e) => {
          console.log("关注失败:", e);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        },
      });
    },
    totalNumberOfComments(tableTotal) {
      this.tableTotal = tableTotal;
    },
    onLinqu(item) {
      uni.navigateTo({
        url: "/pages/my/wishHelp?id=" + item.myid,
      });
    },
    selPhoto(item, sel) {
      this.selImg = sel;
      this.home_image = this.image_list[sel];
    },
    goToDetails(id) {
      console.log("goToDetails", id);
      uni.navigateTo({
        url: "/pages/index/workDetail?id=" + id,
      });
      console.log("goToDetails", id);
    },
    toArr(imgs) {
      let arr = imgs.split("|");
      return arr;
    },
    previewOpen(imgs1, index) {
      this.imgs = imgs1.split("|");
      setTimeout(() => this.$refs.previewImage.open(index), 0);
      return; //如需测试和uni原生预览差别可注释这两行
    },
    loadData() {
      uni.request({
        url: this.$apiHost + "/Article/getinfo",
        data: {
          uuid: getApp().globalData.uuid,
          id: this.arcID,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("文章信息:", res.data);
          if (res.data.success === "yes") {
            // 更新文章信息
            this.articleInfo = res.data.article;
            this.swperImages = this.imageString(res.data.article.images);
            console.log("swperImages", this.swperImages);
            this.userInfo.user_id = res.data.id; // 用户id
            this.userInfo.user_name = res.data.nickname; // 用户名
            this.userInfo.user_avatar = res.data.avator; // 用户头像地址
            this.author = res.data.author;
            this.workInfo = res.data.work_info;
            const nodes = htmlParser(res.data.article.content);
            // #ifdef APP-PLUS-NVUE
            parseImgs(nodes);
            // #endif
            this.content = nodes;

            // 更新图片列表
            if (res.data.article.images && res.data.article.images !== "") {
              this.image_list = res.data.article.images.split(",");
              this.home_image = this.image_list[0];
            } else {
              this.home_image = "../../static/home/avator.png";
            }
            console.log("img", this.home_image);

            // 更新标签列表
            // if (res.data.data.tags && res.data.data.tags !== "") {
            // 	this.tag_list = res.data.data.tags.split(",");
            // }
          } else {
            uni.showToast({
              title: "获取文章信息失败",
              icon: "none",
            });
          }
        },
        complete: (com) => {
          // uni.hideLoading();
        },
        fail: (e) => {
          console.log("请求失败:", e);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        },
      });
    },
    // 评论相关方法已移至CommentSection组件

    // 唤起新评论弹框
    openComment() {
      if (this.$refs.commentSection) {
        this.$refs.commentSection.openComment();
      }
    },
    // 文章点赞
    // 分享文章
    shareArticle() {
      // 如果在微信小程序环境
      if (uni.getSystemInfoSync().platform === "mp-weixin") {
        uni.showShareMenu({
          withShareTicket: true,
          menus: ["shareAppMessage", "shareTimeline"],
        });
      } else {
        // 其他环境，如APP
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          title: this.articleInfo.title,
          summary: this.articleInfo.content.substring(0, 40) + "...",
          imageUrl: this.home_image,
          success: function (res) {
            console.log("分享成功：" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("分享失败：" + JSON.stringify(err));
          },
        });
      }
    },
    // 评论回调事件
    replyFun({ params }, callback) {
      // params = {
      // 	...params,
      // 	user_id: this.myInfo.user_id, // 用户id
      // 	user_name: this.myInfo.user_name, // 用户名
      // 	user_avatar: this.myInfo.user_avatar, // 用户头像地址
      // 	user_content: this.commentValue, // 用户评论内容
      // 	is_like: false, // 是否点赞
      // 	like_count: 0, // 点赞数统计
      // 	create_time: "刚刚", // 创建时间
      // 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
      // };
      console.log("replyFun", {
        uuid: getApp().globalData.uuid,
        article_id: this.arcID, // 文章ID
        content: params.user_content, // 评论内容
        parent_id: params.parent_id || 0, // 父评论ID
        reply_id: params.reply_id || 0, // 回复的评论ID
        reply_name: params.reply_name || "", // 被回复人名称
      });
      uni.request({
        url: this.$apiHost + "/Article/newComment",
        data: {
          uuid: getApp().globalData.uuid,
          type: "article",
          article_id: this.arcID, // 文章ID
          content: params.user_content, // 评论内容
          parent_id: params.parent_id || 0, // 父评论ID
          reply_id: params.reply_id || 0, // 回复的评论ID
          reply_name: params.reply_name || "", // 被回复人名称
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("评论结果:", res.data);
          if (res.data.success === "yes") {
            callback(res.data); // 评论成功，传入后端返回的数据
          }
        },
        fail: (e) => {
          console.log("评论失败:", e);
          uni.showToast({
            title: "评论失败，请重试",
            icon: "none",
          });
        },
      });
    },
    /** 删除回调事件
     * mode 删除模式
     * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
     * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
     * -- all : 删除所有评论包括回复评论 前端遍历子评论上报
     */

    deleteFun({ params, mode }, callback) {
      console.log("deleteFun", {
        params,
        mode,
      });
      // 将params转换为逗号分隔的字符串
      const idsString = Array.isArray(params)
        ? params.join(",")
        : params.toString();

      console.log("删除评论", idsString, mode);
      uni.request({
        url: this.$apiHost + "/Article/delComment",
        data: {
          uuid: getApp().globalData.uuid,
          ids: idsString, // 将params转换为逗号分隔的字符串传递给ids
          mode: mode,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("删除结果:", res.data);
          if (res.data.success === "yes") {
            callback(res);
          }
        },
        fail: (e) => {},
      });
      // switch (mode) {
      // 	case "bind":
      // 		// 逻辑: 调用接口进行评论内容修改 update
      // 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
      // 		break;
      // 	case "only":
      // 		// 逻辑: 调用接口删除一个评论 delete
      // 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
      // 		break;
      // 	default:
      // 		// all
      // 		// 逻辑: 调用接口删除多个评论 [delete]
      // 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
      // 		break;
      // }
    },

    showActionSheet(n) {
      if (n == 0) {
        this.items = [
          {
            text: "分享作品",
            icon: "../../static/icon/cz_icon_fenxiangzuopin.png",
          },
        ];
      }
      if (n == 1) {
        this.items = [
          {
            text: "分享作品",
            icon: "../../static/icon/cz_icon_fenxiangzuopin.png",
          },
          {
            text: "修改帖子",
            icon: "../../static/icon/cz_icon_xiugaifengmian.png",
          },
          {
            text: "删除作品",
            icon: "../../static/icon/sy_icon_shanchu.png",
            danger: true,
          },
        ];
      }
      this.$refs.actionSheet.show();
    },
    handleActionCancel() {
      console.log("ActionSheet cancelled");
    },
    handleActionSelect(index, item) {
      console.log("ActionSheet selected index:", item.text);
      switch (item.text) {
        case "分享作品":
          console.log("分享作品"); 
          break;
        case "修改帖子":
          console.log("修改帖子");
          uni.navigateTo({
            url: "/pages/make/fabuArticle?id=" + this.fileInformation.id,
          });
          break;
        case "删除作品":
          console.log("删除作品");

          break;
      }
    },
    imageString(str) {
      if (!str) {
        return [];
      }
      return str.split("|");
    },
    cutTime(time) {
      if (!time) {
        return "";
      }
      return time.split(" ")[0];
    },
  },
};
</script>

<style scoped lang="scss">
@import "articleDetail.scss";
</style>