MoeNovaClient/pages/index/workDetail.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" @click="goToUserHomepage(author.id)">
          <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="true"
          @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>

    <!-- 灵感 -->
    <template v-if="articleInfo.task_type == 1">
      <view class="inspiration-content" v-if="home_image">
        <image
          v-if="home_image"
          src="../../static/makedetail/cz_img_zhanshi.png"
          mode="widthFix"
        ></image>
        <image
          :src="home_image"
          class="inspirationPictures"
          mode="widthFix"
        ></image>
      </view>
    </template>
    <!-- 音乐 -->
    <template v-else-if="articleInfo.task_type == 2">
      <view class="musicContentBox">
        <view class="headCard">
          <image :src="home_image" class="songCover"></image>
          <view class="songInfo">
            <view class="songTitle">{{ addBrackets(articleInfo.title) }}</view>
            <view class="songTag">
              <view
                class="tag"
                v-for="(item, index) in commaToArray(articleInfo.style)"
                :key="index + item"
                >{{ item }}</view
              >
            </view>
          </view>
          <template v-if="articleInfo.task_type == 2">
            <image
              @click="toggleAudio"
              v-if="isPlaying"
              src="@/static/makedetail/cz_icon_zanting.png"
              class="playerButton"
            ></image>
            <image
              @click="toggleAudio"
              v-else
              src="@/static/makedetail/cz_icon_bofang.png"
              class="playerButton"
            ></image>
          </template>
        </view>
        <view class="contentHeader">
          <view class="musicContent">
            <text> {{ articleInfo.lyrics }}</text>
            <image class="roll" src="@/static/icon/roll.png"></image>
          </view>
          <view class="maskLayer"></view>
        </view>
      </view>
    </template>

    <!-- 作品描述 -->
    <view class="workDescription">
      <view class="workDescription-title">
        <view>创作说明 </view>
        <!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
      </view>
      <view class="workDescription-content">
        {{ content || "暂无内容" }}
      </view>
    </view>

    <view class="goCreate" @click="goCreate()">去创作</view>
    <DialogBox ref="customConfirm"></DialogBox>

    <!-- 文章头图区域 -->
    <view class="topUser" v-if="false">
      <image :src="home_image" class="home_image" mode="aspectFill"></image>
      <!-- 图片指示器 -->
      <view class="image-indicator" v-if="image_list.length > 1">
        <text>{{ selImg + 1 }}/{{ image_list.length }}</text>
      </view>
      <!-- 音乐类型时显示歌词 -->
      <view class="lyrics-overlay" v-if="articleInfo.task_type == 2">
        <text class="lyrics-text">{{ articleInfo.lyrics }}</text>
      </view>
      <!-- 音乐类型时显示播放按钮 -->
      <view
        class="play-button"
        v-if="articleInfo.task_type == 2 && articleInfo.result_audio"
        @click="toggleAudio"
      >
        <text class="fa" :class="isPlaying ? 'fa-pause' : 'fa-play'"></text>
      </view>
      <!-- 缩略图列表 -->
      <view class="list">
        <view
          class="img"
          :class="selImg == index ? 'active' : ''"
          v-for="(item, index) in image_list"
          :key="index"
          @click="selPhoto(item, index)"
        >
          <image :src="item" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 音频元素 -->
    <audio
      id="audioPlayer"
      :src="articleInfo.result_audio"
      style="display: none"
      v-if="false"
    ></audio>

    <!-- 文章内容区域 -->
    <view class="body" v-if="false">
      <!-- 文章标题与元信息 -->
      <view class="article-header">
        <view class="title">
          {{ articleInfo.title || "暂无标题" }}
        </view>
        <view 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="divider"></view>

      <!-- 文章内容 -->
      <!-- <view class="article-content" v-if="articleInfo.type == 'user'">
				<view class="content">{{ articleInfo.content || '暂无内容' }}</view>
			</view> -->
      <view class="article-content">
        <view class="content">
          <!-- <rich-text :nodes="content" style="font-size: 14px"></rich-text> -->
          <uv-parse :content="articleInfo.content"></uv-parse>
        </view>
      </view>

      <!-- 文章底部区域 -->
      <view class="article-footer">
        <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 class="list_info">
        <view class="blankHeight"></view>
      </view>
    </view>

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

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

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

    <!-- 自定义 ActionSheet -->
    <ActionSheet
      ref="actionSheet"
      :items="items"
      @select="handleActionSelect"
      @cancel="handleActionCancel"
    />
    <view class="thread2"></view>
  </view>
</template>

<script>
import htmlParser from "../../common/html-parser";
import previewImage from "@/components/kxj-previewImage/kxj-previewImage.vue"; //引用插件
import CommentSection from "@/components/CommentSection/CommentSection.vue";
import ActionSheet from "@/components/ActionSheet/ActionSheet.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,
    ActionSheet,
  },
  data() {
    return {
      title: "",
      arcID: 0,
      selImg: 0,
      home_image: "",
      articleInfo: {},
      tag_list: [],
      image_list: [],
      imgs: [],
      descs: [],
      list_wish: [],
      content: "",
      author: {},
      // 添加文章信息字段
      articleInfo: {
        title: "",
        content: "",
        create_time: "",
        images: "",
        view_count: 0,
        author: "",
        like_count: 0,
        is_like: false,
      },
      items: [],
      myInfo: {
        user_id: getApp().globalData.user_id, // 用户id
        user_name: getApp().globalData.nickname, // 用户名
        user_avatar: getApp().globalData.avator, // 用户头像地址
      },
      // 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
      userInfo: {
        user_id: 0, // 用户id
        user_name: "", // 用户名
        user_avatar: "", // 用户头像地址
      },
      deleteMode: "all", //删除模式
      // 评论总数
      tableTotal: 4,
      // 评论表
      tableData: [],
      isPlaying: false, // 添加播放状态
      audioPlayer: null, // 添加音频播放器实例
      sms_id: 0,
			isMessage: true,
    };
  },
  onLoad(parms) {
    let self = this;
    this.arcID = parms.id  
    if (parms.type == "sms") {
			this.isMessage = false;
		}
		if (parms.sms_id) {
			this.sms_id = parms.sms_id; 
		}
  },
  onShow() {
    uni.$emit("check_update");
    this.loadData();
    this.$nextTick(() => {
      if (this.$refs.commentSection) {
        this.$refs.commentSection.loadCommentData();
      }
    });
  },
  onReady() {
    // 初始化音频播放器
    this.audioPlayer = uni.createInnerAudioContext();
    this.audioPlayer.onEnded(() => {
      this.isPlaying = false;
    });
  },
  onUnload() {
    // 页面卸载时停止音频播放
    if (this.audioPlayer) {
      this.audioPlayer.stop();
      this.audioPlayer.destroy();
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    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];
    },
    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 + "/Work/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") {
            console.log("文章信息:", res.data.data);

            // 更新文章信息
            if (res.data.article) {
							this.articleInfo = res.data.article;
						}
            this.articleInfo = res.data.data;
            this.articleInfo.sms_id = this.sms_id;
            this.content = res.data.data.content;
            this.home_image = res.data.data.images;
            this.author = res.data.author;

            this.userInfo.user_id = res.data.id; // 用户id
            this.userInfo.user_name = res.data.nickname; // 用户名
            this.userInfo.user_avatar = res.data.avator; // 用户头像地址
          } else {
            uni.showToast({
              title: "获取信息失败",
              icon: "none",
            });
          }
        },
        complete: (com) => {
          // uni.hideLoading();
        },
        fail: (e) => {
          console.log("请求失败:", e);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        },
      });
    },
    // 唤起新评论弹框
    openComment() {
      if (this.$refs.commentSection) {
        this.$refs.commentSection.openComment();
      }
    },
    // 文章点赞
    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",
          });
        },
      });
    },
    // 分享文章
    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));
          },
        });
      }
    },
    // 切换音频播放状态
    toggleAudio() {
      if (!this.articleInfo.result_audio) return;

      if (this.isPlaying) {
        this.audioPlayer.pause();
        this.isPlaying = false;
      } else {
        this.audioPlayer.src = this.articleInfo.result_audio;
        this.audioPlayer.play();
        this.isPlaying = true;
      }
    },
    // 新增过滤器方法
    commaToArray(str) {
      if (!str) return "";
      return str.split(",");
    },

    // 新增过滤器方法
    addBrackets(str) {
      if (!str) return "";
      if (!str.startsWith("《")) {
        str = "《" + str;
      }
      if (!str.endsWith("》")) {
        str = str + "》";
      }
      return str;
    },
    getInfoData() {
      uni.request({
        url: this.$apiHost + "/Member/getinfoData",
        data: {
          uuid: getApp().globalData.uuid,
        },
        header: {
          "content-type": "application/json",
        },
        success: (res) => {
          console.log("用户信息", res.data);
        },
      });
    },
    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);
    },
    goCreate() {
      // 切换到标签页
      uni.switchTab({
        // 指定要切换到的页面路径
        url: "/pages/make/index",
      });
    },
    	goToUserHomepage(id) {
			if (!id) {
				return;
			} 
      uni.navigateTo({
        url: "/pages/my/userHomepage?id=" + id,
      });
    },
  },
};
</script>

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