提交

pages/square/detiles.vue

@@ -2,7 +2,9 @@
   <view class="detail-page">
     <uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000"
       backgroundColor="#fff" :statusBar="true" :title="detail.sku.product_name"></uni-nav-bar>
-
+	<button open-type="share" class="circle-btn">
+		<image src="/static/image/shares.png" class="share" mode=""></image>
+	</button>
     <scroll-view scroll-y class="page-scroll">
       <!-- 图集 -->
       <view class="gallery">
@@ -49,7 +51,7 @@
 
       <!-- 详情 -->
       <view v-if="currentTab === 'detail'" class="detail-box">
-        <text class="detail-text" v-html="detail.sku.desc"></text>
+        <rich-text :nodes="processedDesc"></rich-text>
       </view>
 
       <!-- 评论 -->
@@ -62,7 +64,7 @@
 	  	<view v-else>
 	  		<view v-for="(item, index) in comments" :key="index" class="comment-item">
 				<view class="comment-heard">
-					<image class="comment-avatar" :src="item.user.avatar"></image>
+					<image class="comment-avatar" :src="item.user.avatar_pull"></image>
 					<view class="comment-header">
 						<view class="comment-header-left">
 							<view class="comment-name">{{item.user.nickname}}</view>
@@ -80,7 +82,7 @@
 	  				<view v-if="item.child && item.child.length" class="comment-reply-box">
 	  					<view v-for="(reply, rIndex) in item.child" :key="rIndex" class="reply-item">
 	  						<view class="reply-item-left"> 
-	  							<image class="reply-avatar" :src="reply.user.avatar"></image>
+	  							<image class="reply-avatar" :src="reply.user.avatar_pull"></image>
 	  							<text class="reply-name">{{reply.user.nickname}}：</text>
 	  							<uni-icons type="trash" @click="delComment(reply.id)" v-if="openid==reply.user.openid||openid==detail.user.openid" color="#999" size="20"></uni-icons>
 	  						</view>
@@ -152,6 +154,13 @@ export default {
 		currentIndex: 0
     }
   },
+  computed: {
+    // 处理富文本内容，让图片自适应
+    processedDesc() {
+      if (!this.detail.sku || !this.detail.sku.desc) return ''
+      return this.processRichText(this.detail.sku.desc)
+    }
+  },
   onLoad(options) {
   	this.postid = options.id;
   	this.share = options.share
@@ -160,6 +169,30 @@ export default {
   	this.getCommentCount()
   },
   methods: {
+    // 处理富文本HTML，让图片自适应
+    processRichText(html) {
+      if (!html) return ''
+      // 使用正则表达式给所有 img 标签添加样式
+      return html.replace(/<img([^>]*)>/gi, (match, attrs) => {
+        // 检查是否已有 style 属性
+        if (attrs.includes('style=')) {
+          // 如果已有 style，添加 max-width
+          return match.replace(/style=["']([^"']*)["']/i, (styleMatch, styleContent) => {
+            // 移除已有的 max-width 和 width
+            let newStyle = styleContent.replace(/max-width\s*:\s*[^;]+;?/gi, '').replace(/width\s*:\s*[^;]+;?/gi, '')
+            newStyle = newStyle.trim()
+            if (newStyle && !newStyle.endsWith(';')) {
+              newStyle += ';'
+            }
+            newStyle += 'max-width: 100%; height: auto;'
+            return `style="${newStyle}"`
+          })
+        } else {
+          // 如果没有 style，添加 style 属性
+          return `<img${attrs} style="max-width: 100%; height: auto;">`
+        }
+      })
+    },
     setCurrent(idx) {
       this.currentIndex = idx
     },
@@ -627,7 +660,7 @@ export default {
   	return {
   	  title: this.article.content,
   	  path: `/pages/square/detiles?share=share&id=${this.article.id}`,
-  	  imageUrl: "/static/image/share.jpg" // 封面图
+  	  imageUrl:this.article.media[0].url_pull // 封面图
   	}
   },
   // 分享到朋友圈
@@ -775,19 +808,23 @@ page,
   background: #dcdcdc;
 }
 .detail-box {
+  margin-bottom: 80rpx;
   background: #fff;
-  padding: 20rpx 24rpx 40rpx;
+  padding: 20rpx 24rpx 190rpx;
   font-size: 26rpx;
   color: #444;
   line-height: 1.7;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 .icons20{
 	width: 36rpx;
 	height: 36rpx;
 	margin-right: 20rpx;
 }
-.comment-section {
-	padding: 20rpx 30rpx 140rpx;
+.comment-section {    
+	padding: 20rpx 30rpx 190rpx;
 	background: #fff;
 }
 
@@ -979,4 +1016,23 @@ page,
 		align-items: center;
 		gap: 6rpx;
 	}
+	.circle-btn {
+		z-index: 11;
+		position: fixed;
+		right: 20rpx;
+		margin-top: 20rpx;
+		top: 180rpx;
+		border-radius: 50%;
+		width: 80rpx;
+		height: 80rpx;
+		background: #fff;
+		padding: 10rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.share{
+			width: 34rpx;
+			height: 34rpx;
+		}
+	}
 </style>