完成发帖 模块

pages/index/articleDetail copy.scss

@@ -0,0 +1,774 @@
+// 导入FontAwesome
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
+
+page {
+  background-color: #ffffff;
+  width: 100%;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
+}
+.page {
+  background-color: #ffffff;
+  width: 100%;
+}
+
+/* 自定义导航栏样式 */
+.custom-navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 90rpx;
+  padding: 0 20rpx;
+  padding-top: var(--status-bar-height);
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  .navbar-left {
+    width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .fa-angle-left {
+      font-size: 48rpx;
+      color: #333;
+    }
+  }
+
+  .navbar-center {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 10rpx;
+
+    .navbar-title {
+      display: flex;
+      align-items: center;
+
+      .navbar-avatar {
+        width: 50rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        margin-right: 10rpx;
+      }
+
+      .navbar-text {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+        margin-right: 10rpx;
+      }
+
+      .navbar-badge {
+        font-size: 22rpx;
+        color: #f0ad4e;
+        background-color: rgba(240, 173, 78, 0.1);
+        padding: 2rpx 10rpx;
+        border-radius: 10rpx;
+        border: 1rpx solid #f0ad4e;
+      }
+    }
+  }
+
+  .navbar-right {
+    min-width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .fa-ellipsis-h {
+      font-size: 36rpx;
+      color: #333;
+    }
+    image {
+      width: 64rpx;
+      height: 64rpx;
+    }
+    .followTheAuthor {
+      padding: 6rpx 20rpx 8rpx 15rpx;
+      border-radius: 26rpx;
+      margin-right: 16rpx;
+      transition: all 0.6s;
+      border: 2rpx solid transparent;
+      &.followTheAuthor1 {
+        color: #acf934;
+        background: #1f1f1f;
+      }
+      &.followTheAuthor0 {
+        border: 2rpx solid #1f1f1f;
+        background: #fff;
+      }
+    }
+  }
+}
+
+// 评论区域样式
+.comment-section {
+  background-color: #f8f8f8;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+  border-radius: 30rpx 30rpx 0 0;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    padding: 0 30rpx 20rpx;
+    border-bottom: 1rpx solid #eee;
+    margin-bottom: 20rpx;
+
+    .fa {
+      font-size: 36rpx;
+      color: #2979ff;
+    }
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin: 0 10rpx;
+      color: #333;
+    }
+
+    .comment-count {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+
+  .comment-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 650rpx;
+    height: 90rpx;
+    background-color: #2979ff;
+    color: #fff;
+    border-radius: 45rpx;
+    margin: 40rpx auto 20rpx;
+    font-size: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+    transition: all 0.3s ease;
+
+    .fa {
+      margin-right: 10rpx;
+    }
+
+    &:active {
+      transform: scale(0.97);
+      background-color: #2567db;
+    }
+  }
+}
+/* 确保评论按钮样式 */
+.comment-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 650rpx;
+  height: 90rpx;
+  background-color: #2979ff;
+  color: #fff;
+  border-radius: 45rpx;
+  margin: 40rpx auto 20rpx;
+  font-size: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 750rpx;
+  height: 320rpx;
+  padding-top: calc(var(--status-bar-height) + 0rpx);
+  .left {
+    display: flex;
+    flex-direction: row;
+    width: 200rpx;
+    height: 120rpx;
+    justify-content: center;
+    padding-left: 50rpx;
+    image {
+      width: 124rpx;
+      height: 40rpx;
+    }
+  }
+}
+.thread {
+  height: 20rpx;
+}
+.thread2 {
+  height: 60rpx;
+}
+.topUser {
+  width: 750rpx;
+  height: 750rpx;
+  position: relative;
+  overflow: hidden;
+  .home_image {
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s ease;
+
+    &:active {
+      transform: scale(1.05);
+    }
+  }
+  .image-indicator {
+    position: absolute;
+    top: 30rpx;
+    right: 30rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    padding: 8rpx 16rpx;
+    border-radius: 20rpx;
+    font-size: 24rpx;
+  }
+  .list {
+    position: absolute;
+    bottom: 20rpx;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 0 20rpx;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .img {
+      width: 84rpx;
+      height: 84rpx;
+      margin: 0 10rpx;
+      transition: all 0.3s ease;
+      image {
+        width: 84rpx;
+        height: 84rpx;
+        border-radius: 16rpx;
+        border: solid 4rpx #fff;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+      }
+    }
+    .active {
+      width: 136rpx;
+      height: 136rpx;
+      image {
+        width: 136rpx;
+        height: 136rpx;
+        border-radius: 24rpx;
+        border: solid 4rpx #fff;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+.body {
+  width: 750rpx;
+  margin-top: -60rpx;
+  border-radius: 40rpx 40rpx 0 0;
+  padding-top: 30rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 10;
+  .article-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 40rpx 50rpx 20rpx;
+    width: 100%;
+    box-sizing: border-box;
+
+    .title {
+      font-size: 40rpx;
+      font-weight: bold;
+      color: #222;
+      margin-bottom: 20rpx;
+      line-height: 1.4;
+    }
+
+    .meta-info {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      color: #999;
+      font-size: 26rpx;
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        margin-right: 30rpx;
+        margin-bottom: 10rpx;
+
+        .meta-text {
+          margin-left: 8rpx;
+        }
+      }
+    }
+  }
+  .divider {
+    height: 1rpx;
+    background-color: #eee;
+    width: 650rpx;
+    margin: 10rpx auto 30rpx;
+  }
+  .article-content {
+    padding: 0 50rpx 40rpx;
+    width: 100%;
+    box-sizing: border-box;
+
+    .content {
+      font-size: 32rpx;
+      color: #333;
+      line-height: 1.8;
+      text-align: justify;
+    }
+  }
+  .article-footer {
+    width: 100%;
+    padding: 20rpx 0;
+    border-top: 1rpx solid #f0f0f0;
+
+    .action-bar {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .action-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20rpx 0;
+
+        .fa {
+          font-size: 40rpx;
+          color: #666;
+          margin-bottom: 10rpx;
+
+          &.liked {
+            color: #ff5151;
+          }
+        }
+
+        .action-text {
+          font-size: 24rpx;
+          color: #666;
+        }
+
+        &:active {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+.list_wish {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  color: #fff;
+  width: 750rpx;
+
+  .item {
+    margin-top: 20rpx;
+    color: #fff;
+    font-size: 28rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 690rpx;
+    height: 156rpx;
+    background: #28292d;
+    border-radius: 28rpx;
+    .avator {
+      width: 116rpx;
+      height: 116rpx;
+      margin-left: 14rpx;
+      background: #161616;
+      border-radius: 28rpx;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 20rpx;
+      }
+    }
+    .left {
+      width: 370rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-left: 20rpx;
+      .name {
+        font-size: 32rpx;
+        margin-bottom: 20rpx;
+      }
+      .jindu {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        .bord {
+          width: 216rpx;
+          height: 20rpx;
+          margin-left: 0rpx;
+          background: #0f0f0f;
+          border-radius: 24rpx;
+          .active {
+            width: 0%;
+            height: 20rpx;
+            background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
+            border-radius: 24rpx;
+          }
+        }
+        .tips {
+          margin-left: 20rpx;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ff3d83;
+        }
+      }
+    }
+    .right {
+      width: 190rpx;
+      .btn_submit {
+        width: 168rpx;
+        height: 72rpx;
+        background: linear-gradient(142deg, #ff5967 0%, #ff2a95 100%);
+        border-radius: 28rpx 28rpx 28rpx 28rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .state {
+        width: 168rpx;
+        height: 72rpx;
+        text-align: center;
+        line-height: 72rpx;
+      }
+    }
+  }
+}
+.list_info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  color: #fff;
+  width: 750rpx;
+
+  .item {
+    width: 690rpx;
+    margin: 0rpx 0;
+    color: #fff;
+    font-size: 28rpx;
+    padding: 20rpx 0 0rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .avator {
+      width: 88rpx;
+      .icon {
+        width: 72rpx;
+        height: 72rpx;
+        border-radius: 36rpx;
+      }
+    }
+    .tit {
+      width: 470rpx;
+      .list1 {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        .name {
+          font-size: 32rpx;
+          padding-right: 10rpx;
+          height: 40rpx;
+          line-height: 40rpx;
+        }
+        .sex1 {
+          width: 76rpx;
+          height: 40rpx;
+          background: #423339;
+          border-radius: 16rpx 16rpx 16rpx 16rpx;
+          border: 2rpx solid #36d6ff;
+          color: #36d6ff;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          image {
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 4rpx;
+            margin-right: 4rpx;
+          }
+        }
+        .sex2 {
+          width: 76rpx;
+          height: 40rpx;
+          background: #423339;
+          border-radius: 16rpx 16rpx 16rpx 16rpx;
+          border: 2rpx solid #ff7d88;
+          color: #ff7d88;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          image {
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 4rpx;
+            margin-right: 4rpx;
+          }
+        }
+        .xinzuo {
+          width: 92rpx;
+          height: 44rpx;
+          margin-left: 10rpx;
+          line-height: 44rpx;
+          border-radius: 16rpx 16rpx 16rpx 16rpx;
+          border: 2rpx solid #404040;
+          font-size: 20rpx;
+          color: #d0d0d0;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .time {
+        color: #d0d0d0;
+        font-size: 24rpx;
+      }
+    }
+    .state {
+      width: 130rpx;
+      font-size: 28rpx;
+      font-weight: normal;
+      text-align: right;
+      .status_1 {
+        color: #999;
+      }
+      .status_9 {
+        color: #36d6ff;
+      }
+      .status_2 {
+        color: #fe2d56;
+      }
+    }
+  }
+  .content {
+    width: 690rpx;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #ffffff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding: 20rpx 0;
+    padding-left: 88rpx;
+  }
+  .photo_list {
+    width: 690rpx;
+    margin-bottom: 0rpx;
+    padding-left: 88rpx;
+    border-radius: 28rpx;
+    font-size: 28rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    .img {
+      width: 186rpx;
+      height: 186rpx;
+      margin-bottom: 24rpx;
+      margin-right: 12rpx;
+      image {
+        width: 186rpx;
+        height: 186rpx;
+        border-radius: 28rpx;
+        border: solid 1px rgba(255, 255, 255, 0.2);
+      }
+    }
+    .right {
+      color: #fff;
+    }
+  }
+  .desc {
+    width: 690rpx;
+    padding: 0rpx 0 0rpx;
+    padding-left: 88rpx;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #999999;
+    line-height: 0rpx;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    .addr {
+      width: 200rpx;
+    }
+    .img {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 0 0rpx 0 30rpx;
+      font-size: 28rpx;
+      color: #fff;
+      image {
+        margin-top: -8rpx;
+      }
+    }
+  }
+}
+.btn_submit {
+  width: 336rpx;
+  height: 100rpx;
+  margin: 50rpx auto;
+  background: linear-gradient(90deg, #ff536d 0%, #ff3b84 100%);
+  border-radius: 50rpx 50rpx 50rpx 50rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #ffffff;
+  image {
+    width: 44rpx;
+    height: 44rpx;
+    margin-right: 8rpx;
+    margin-top: 4rpx;
+  }
+}
+.btn {
+  text-align: center;
+  color: #fff;
+  padding: 20rpx;
+  margin: 50rpx;
+  border-radius: 20rpx;
+  background-color: #2979ff;
+}
+
+.font-awesome-import {
+  display: none;
+}
+
+.fa {
+  font-family: "FontAwesome";
+  margin-right: 6rpx;
+}
+
+// 评论区域样式
+.comment-section {
+  background-color: #f8f8f8;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+  border-radius: 30rpx 30rpx 0 0;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    padding: 0 30rpx 20rpx;
+    border-bottom: 1rpx solid #eee;
+    margin-bottom: 20rpx;
+
+    .fa {
+      font-size: 36rpx;
+      color: #2979ff;
+    }
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin: 0 10rpx;
+      color: #333;
+    }
+
+    .comment-count {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+
+  .comment-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 650rpx;
+    height: 90rpx;
+    background-color: #2979ff;
+    color: #fff;
+    border-radius: 45rpx;
+    margin: 40rpx auto 20rpx;
+    font-size: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+    transition: all 0.3s ease;
+
+    .fa {
+      margin-right: 10rpx;
+    }
+
+    &:active {
+      transform: scale(0.97);
+      background-color: #2567db;
+    }
+  }
+}
+/* 确保评论按钮样式 */
+.comment-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 650rpx;
+  height: 90rpx;
+  background-color: #2979ff;
+  color: #fff;
+  border-radius: 45rpx;
+  margin: 40rpx auto 20rpx;
+  font-size: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+}
+
+.comment-button .fa {
+  margin-right: 10rpx;
+}
+
+.comment-button:active {
+  opacity: 0.9;
+  transform: scale(0.98);
+}

pages/index/articleDetail copy.vue

@@ -0,0 +1,551 @@
+<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="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>
+
+
+		<!-- 文章头图区域 -->
+		<view class="topUser" v-if="articleInfo.type == 'user'">
+			<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="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>
+
+		<!-- 文章内容区域 -->
+		<view class="body">
+			<!-- 文章标题与元信息 -->
+			<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>
+				</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 ref="commentSection" @totalNumberOfComments="totalNumberOfComments" :myInfo="myInfo"
+			:userInfo="userInfo" :articleId="arcID" :type="'article'">
+		</CommentSection>
+
+		<view class="thread2"></view>
+		<!-- 自定义 ActionSheet -->
+		<ActionSheet ref="actionSheet" :items="items" @select="handleActionSelect" @cancel="handleActionCancel" />
+	</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'; //引用插件
+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
+	},
+	data() {
+		return {
+			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
+			},
+
+			myInfo: {
+				user_id: 1, // 用户id
+				user_name: "", // 用户名
+				user_avatar: "", // 用户头像地址
+			},
+			// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
+			userInfo: {
+				user_id: 2, // 用户id
+				user_name: "", // 用户名
+				user_avatar: "", // 用户头像地址
+			},
+		}
+	},
+	onLoad(parms) {
+		let self = this;
+		this.arcID = parms.id || 133;
+	},
+	onShow() {
+		uni.$emit('check_update');
+		this.$nextTick(() => {
+			if (this.$refs.commentSection) {
+				this.$refs.commentSection.loadCommentData();
+			}
+		});
+		this.loadData();
+	},
+	methods: {
+		// 返回上一页
+		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];
+		},
+		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.author = res.data.author;
+						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,);
+		},
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+@import 'articleDetail.scss';
+</style>

pages/make/relatedWorks.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="page">
+		<view class="nav-bar">
+			<view class="left">
+				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+			</view>
+			<view class="center">全部作品</view>
+			<view class="right">
+				<view class="btn" @click="onSubmit">确定</view>
+			</view>
+		</view>
+
+		<view class="listContent">
+			<view class="list-item" v-for="(item, index) in listItems" :key="index" @click="selectItem(item)">
+				<view class="img-box">
+					<image :src="item.images"></image>
+				</view>
+				<view class="info">
+					<view class="title">{{ item.title }}</view>
+					<view class="desc">{{ item.tdate }}</view>
+				</view>
+				<view class="select-box">
+					<image v-if="selectedItem === item" src="../../static/icon/wd_icon_gouxuan05.png"></image>
+					<image v-else src="../../static/icon/wd_icon_gouxuan04.png"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	components: {},
+	data() {
+		return {
+			skey: '',
+			uinfo: {},
+			selectedItem: null,
+			listItems: []
+		}
+	},
+	onLoad(params) {
+		if (getApp().globalData.skey != "") {
+			this.skey = getApp().globalData.skey;
+		} else {
+			this.skey = params.skey || ''; //1234567xef
+		}
+		this.id = params.id || '117';
+		let that = this;
+		that.getInfo();
+	},
+	onShow() {
+		let that = this;
+	},
+	methods: {
+		goBack() {
+			uni.navigateTo({
+				url: '/pages/make/manageArticle'
+			})
+		},
+		selectItem(item) { // 添加选择项目的方法
+			this.selectedItem = item;
+		},
+		onSubmit() {
+			if (this.selectedItem) {
+				uni.$emit('selectItem', this.selectedItem);
+				uni.navigateBack(); // 返回上一页
+			} else {
+				uni.showToast({
+					title: '请选择一个项目',
+					icon: 'none'
+				});
+			}
+		},
+		getInfo() {
+			var that = this;
+
+
+			uni.request({
+				url: this.$apiHost + '/Work/getlist', //仅为示例，并非真实接口地址。
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.id,
+					type: "select"
+				},
+				header: {
+					'content-type': 'application/json' //自定义请求头信息
+				},
+				success: (res) => {
+					console.log('获取到作品信息列表', res.data.list);
+
+					this.listItems = res.data.list;
+
+
+				}
+			});
+		},
+		checkField(str, tips) {
+			if (str.length < 2) {
+				uni.showToast({
+					title: tips,
+					icon: 'none'
+				});
+				return false;
+			}
+			return true;
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+page {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	display: flex;
+	background-color: #f2f6f2;
+	min-height: 100vh;
+}
+
+.status_bar {
+	height: 44rpx;
+	width: 100%;
+}
+
+.page {
+	background-color: #f2f6f2;
+	display: flex;
+	flex-direction: column;
+	width: 750rpx;
+	min-height: 100vh;
+}
+
+
+.nav-bar {
+	width: calc(100ve - 73rpx);
+	height: calc(96rpx + var(--status-bar-height));
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0;
+	padding-right: 40rpx;
+	padding-left: 33rpx;
+	box-sizing: border-box;
+
+	.left {
+		display: flex;
+		align-items: center;
+		font-family: PingFang SC-Bold;
+		font-weight: 400;
+		font-size: 32rpx;
+		color: #1f1f1f;
+
+		.uni-btn-icon {
+			font-size: 45rpx;
+			font-weight: bold;
+			color: #1f1f1f;
+			transition: color 0.2s;
+			margin-right: 20rpx;
+
+			&:active {
+				color: #2b85e4;
+			}
+		}
+	}
+
+	.center {
+		font-size: 36rpx;
+		font-family: "PingFang SC-Bold";
+		font-weight: 400;
+		color: #1f1f1f;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		font-size: 28rpx;
+		font-family: "PingFang SC-Bold";
+		font-weight: 400;
+
+		.btn {
+			border-radius: 26rpx;
+			background: #1f1f1f;
+			padding: 6rpx 32rpx;
+			color: #acf934;
+			font-size: 28rpx;
+		}
+	}
+}
+
+.listContent {
+	padding: 20rpx;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	row-gap: 20rpx;
+
+	image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.list-item {
+		background: #fff;
+		height: 220rpx;
+		border-radius: 20rpx;
+		padding: 22rpx 48rpx 22rpx 26rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+
+		.img-box {
+			width: 130rpx;
+			height: 166rpx;
+			border-radius: 15rpx;
+			overflow: hidden;
+		}
+
+		.info {
+			width: 450rpx;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 10rpx;
+
+			.title {
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #1F1F1F;
+			}
+
+			.desc {
+				font-family: 'PingFang SC-Medium';
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #999999;
+			}
+
+		}
+
+		.select-box {
+			width: 40rpx;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			image {
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+	}
+}
+</style>