From 395e230c189f68ea07886a1308d6dfa4d1a4aa30 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Wed, 1 Oct 2025 14:27:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(comment):=20=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8F=91=E5=B8=83=E5=8A=9F=E8=83=BD=E4=B8=BA?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将评论发布功能从commentList和commentDetail中提取为独立的commentPublish组件
优化评论发布交互流程，直接打开弹窗而非显示输入框
统一处理评论发布成功后的回调逻辑
---
 pages_order/comment/commentDetail.vue              | 124 +++--------
 .../components/list/comment/commentList.vue        | 243 ++++++---------------
 .../components/list/comment/commentPublish.vue     | 170 ++++++++++++++
 3 files changed, 271 insertions(+), 266 deletions(-)
 create mode 100644 pages_order/components/list/comment/commentPublish.vue

diff --git a/pages_order/comment/commentDetail.vue b/pages_order/comment/commentDetail.vue
index f8532c9..56c2da9 100644
--- a/pages_order/comment/commentDetail.vue
+++ b/pages_order/comment/commentDetail.vue
@@ -98,25 +98,18 @@
 			<text @click="loadMoreReplies">加载更多</text>
 		</view>
 		
-		<!-- 回复输入框 -->
-		<view class="reply-input-container" v-if="showInput">
-			<view class="input-wrapper">
-				<input 
-					class="reply-input" 
-					v-model="replyContent" 
-					:placeholder="replyPlaceholder"
-					focus
-					confirm-type="send"
-					@confirm="submitReply"
-				/>
-				<button class="send-btn" :disabled="!replyContent.trim()" @click="submitReply">发送</button>
-			</view>
-		</view>
+		<!-- 评论发布组件 -->
+		<commentPublish ref="commentPublish" :params="commentParams" :placeholder="replyPlaceholder" @success="handleCommentSuccess" />
 	</view>
 </template>
 
 <script>
+	import commentPublish from '../components/list/comment/commentPublish.vue'
+	
 	export default {
+		components: {
+			commentPublish
+		},
 		data() {
 			return {
 				commentId: '', // 当前评论ID
@@ -134,13 +127,23 @@
 				totalReplies: 0,
 				
 				// 回复相关
-				showInput: false,
-				replyContent: '',
 				replyToId: '', // 回复的评论ID
 				replyToUserName: '', // 回复的用户名
 				replyPlaceholder: '写回复...'
 			}
 		},
+		computed: {
+			// 评论参数
+			commentParams() {
+				return {
+					type: this.sourceType,
+					orderId: this.sourceId,
+					pid: this.commentId,
+					replyToId: this.replyToId,
+					replyToUserName: this.replyToUserName
+				}
+			}
+		},
 		onLoad(options) {
 			// 获取参数
 			if (options.id) {
@@ -219,51 +222,23 @@
 				this.loadReplies();
 			},
 			
-			// 显示回复输入框
+			// 显示回复输入框并直接打开弹窗
 			showReplyInput(commentId, userName = '') {
-				this.showInput = true;
 				this.replyToId = commentId;
 				this.replyToUserName = userName;
 				this.replyPlaceholder = userName ? `回复 @${userName}` : '写回复...';
-				this.replyContent = '';
+				// 直接打开评论发布弹窗
+				this.$refs.commentPublish.open();
 			},
 			
-			// 提交回复
-			submitReply() {
-				if (!this.replyContent.trim()) return;
+			// 评论发布成功回调
+			handleCommentSuccess() {
+				// 重新加载回复列表
+				this.page = 1;
+				this.loadReplies();
 				
-				// 调用API提交回复
-				this.$api('addComment', {
-					userValue: this.replyContent,
-					pid: this.commentId,
-					replyToId: this.replyToId,
-					replyToUserName: this.replyToUserName,
-					type: this.sourceType,
-					orderId: this.sourceId
-				}, res => {
-					if (res.code === 200) {
-						// 清空输入框
-						this.replyContent = '';
-						this.showInput = false;
-						
-						// 重新加载回复列表
-						this.page = 1;
-						this.loadReplies();
-						
-						// 更新回复总数
-						this.totalReplies++;
-						
-						uni.showToast({
-							title: '回复成功',
-							icon: 'success'
-						});
-					} else {
-						uni.showToast({
-							title: res.message || '回复失败',
-							icon: 'none'
-						});
-					}
-				});
+				// 更新回复总数
+				this.totalReplies++;
 			},
 			
 			// 导航到子评论详情
@@ -579,45 +554,4 @@
 		color: #666;
 	}
 }
-
-.reply-input-container {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: #fff;
-	padding: 20rpx 30rpx;
-	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
-	z-index: 100;
-	padding-bottom: env(safe-area-inset-bottom);
-	
-	.input-wrapper {
-		display: flex;
-		align-items: center;
-		
-		.reply-input {
-			flex: 1;
-			height: 70rpx;
-			background-color: #f5f5f5;
-			border-radius: 35rpx;
-			padding: 0 30rpx;
-			font-size: 28rpx;
-		}
-		
-		.send-btn {
-			margin-left: 20rpx;
-			background-color: $uni-color-primary;
-			color: #fff;
-			font-size: 28rpx;
-			height: 70rpx;
-			line-height: 70rpx;
-			padding: 0 30rpx;
-			border-radius: 35rpx;
-			
-			&[disabled] {
-				background-color: #cccccc;
-			}
-		}
-	}
-}
 </style>
\ No newline at end of file
diff --git a/pages_order/components/list/comment/commentList.vue b/pages_order/components/list/comment/commentList.vue
index 1b7a103..98f850c 100644
--- a/pages_order/components/list/comment/commentList.vue
+++ b/pages_order/components/list/comment/commentList.vue
@@ -1,184 +1,85 @@
 <template>
-	<view class="commemt">
-		<view class="comment-list">
-			<commentItem 
-			v-for="(item,index) in list" 
-			:key="index"
-			:parentId="item.id"
-			:sourceType="params.type"
-			:sourceId="params.orderId"
-			:item="item" />
-		</view>
+    <view class="commemt">
+        <view class="comment-list">
+            <commentItem v-for="(item, index) in list" :key="index" :parentId="item.id" :sourceType="params.type"
+                :sourceId="params.orderId" :item="item" />
+        </view>
 
-		<view class="submit-box">
-			<view class="top">
-				<button 
-				class="share"
-				open-type="share">
-					<uv-icon
-					color="#00cf05"
-					size="50rpx"
-					name="weixin-fill"></uv-icon>
-				</button>
-				
-				<input type="text"
-				disabled
-				@click="$refs.popup.open('bottom')"
-				:placeholder="'评论给' + params.name"
-				v-model="form.userValue"/>
-				
-				<!-- <view class="submit"
-				@click="submit">
-					发布
-				</view> -->
-			</view>
-		</view>
-		
-		<uv-popup ref="popup" :round="30">
-			<view class="popup">
-				<view class="content-input">
-					<uv-textarea 
-					v-model="form.userValue" 
-					:maxlength="200" 
-					autoHeight
-					count
-					focus
-					:placeholder="'评论给' + params.name"></uv-textarea>
-				</view>
-				
-				
-				<view class="images box">
-					<uv-upload 
-					:fileList="fileList" 
-					:maxCount="imageMax" 
-					multiple 
-					width="150rpx" 
-					height="150rpx"
-					@delete="deleteImage"
-					@afterRead="afterRead"
-					:previewFullImage="true"></uv-upload>
-				</view>
-				
-				<view class="uni-color-btn"
-				@click="submit">
-					发布
-				</view>
-			</view>
-		</uv-popup>
-	</view>
+        <view class="submit-box">
+            <view class="top">
+                <button class="share" open-type="share">
+                    <uv-icon color="#00cf05" size="50rpx" name="weixin-fill"></uv-icon>
+                </button>
+
+                <input type="text" disabled @click="openCommentPublish" :placeholder="'评论给' + params.name" />
+            </view>
+        </view>
+
+        <!-- 评论发布组件 -->
+        <commentPublish ref="commentPublish" :params="params" :placeholder="'评论给' + params.name" @success="handleCommentSuccess" />
+    </view>
 </template>
 
 <script>
-	import commentItem from './commentItem.vue'
-	export default {
-		components: {
-			commentItem,
-		},
-		props: ['list', 'params'],
-		data() {
-			return {
-				form : {},
-				imageMax : 9,
-				fileList : [],
-			}
-		},
-		methods: {
-			submit(){
-				
-				let data = {
-					...this.form,
-					...this.params,
-				}
-				
-				if (this.$utils.verificationAll(data, {
-						userValue: '说点什么吧',
-						type: '缺少type',
-						orderId: '缺少orderId',
-					})) {
-					return
-				}
-				
-				data.userImage = this.fileList.map((item) => item.url).join(",")
-				
-				
-				this.$api('addComment', data, res => {
-					if(res.code == 200){
-						this.$refs.popup.close()
-						this.form.userValue = ''
-						uni.showToast({
-							title: '发布成功!',
-							icon: 'none'
-						})
-						this.$emit('getData')
-					}
-				})
-			},
-			
-			deleteImage(e){
-				this.fileList.splice(e.index, 1)
-			},
-			afterRead(e){
-				let self = this
-				e.file.forEach(file => {
-					self.$Oss.ossUpload(file.url).then(url => {
-						self.fileList.push({
-							url
-						})
-					})
-				})
-			},
-		}
-	}
+import commentItem from './commentItem.vue'
+import commentPublish from './commentPublish.vue'
+
+export default {
+    components: {
+        commentItem,
+        commentPublish,
+    },
+    props: ['list', 'params'],
+    data() {
+        return {}
+    },
+    methods: {
+        // 打开评论发布弹窗
+        openCommentPublish() {
+            this.$refs.commentPublish.open()
+        },
+
+        // 评论发布成功回调
+        handleCommentSuccess() {
+            this.$emit('getData')
+        }
+    }
+}
 </script>
 
 <style scoped lang="scss">
-	.commemt{
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-	.comment-list {
-		margin-top: 20rpx;
-		padding-bottom: 150rpx;
-	}
+.commemt {
+    padding-bottom: env(safe-area-inset-bottom);
+}
 
-	.submit-box {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		background-color: #fff;
-		width: 100%;
-		box-shadow: 0 0 6rpx 6rpx #00000011;
-		padding-bottom: env(safe-area-inset-bottom);
+.comment-list {
+    margin-top: 20rpx;
+    padding-bottom: 150rpx;
+}
 
-		.top {
-			align-items: center;
-			display: flex;
-			justify-content: center;
+.submit-box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    box-shadow: 0 0 6rpx 6rpx #00000011;
+    padding-bottom: env(safe-area-inset-bottom);
 
-			input {
-				background-color: #f3f3f3;
-				width: 460rpx;
-				height: 40rpx;
-				border-radius: 40rpx;
-				margin: 20rpx;
-				padding: 20rpx 30rpx;
-				font-size: 28rpx;
-			}
+    .top {
+        align-items: center;
+        display: flex;
+        justify-content: center;
 
-			.submit {}
-		}
-	}
-	.popup{
-		.content-input{
-			min-height: 400rpx;
-		}
-		
-		.box{
-			padding: 0 20rpx;
-		}
-		.images{
-			display: flex;
-			flex-wrap: wrap;
-			padding: 20rpx;
-		}
-	}
+        input {
+            background-color: #f3f3f3;
+            width: 460rpx;
+            height: 40rpx;
+            border-radius: 40rpx;
+            margin: 20rpx;
+            padding: 20rpx 30rpx;
+            font-size: 28rpx;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/pages_order/components/list/comment/commentPublish.vue b/pages_order/components/list/comment/commentPublish.vue
new file mode 100644
index 0000000..8438e76
--- /dev/null
+++ b/pages_order/components/list/comment/commentPublish.vue
@@ -0,0 +1,170 @@
+<template>
+    <uv-popup ref="popup" :round="30">
+        <view class="comment-publish">
+            <view class="content-input">
+                <uv-textarea v-model="form.userValue" :maxlength="200" autoHeight count focus
+                    :placeholder="placeholder"></uv-textarea>
+            </view>
+
+            <view class="images box">
+                <uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx"
+                    @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
+            </view>
+
+            <view class="uni-color-btn" @click="submit">
+                发布
+            </view>
+        </view>
+    </uv-popup>
+</template>
+
+<script>
+export default {
+    name: 'CommentPublish',
+    props: {
+        // 评论参数
+        params: {
+            type: Object,
+            default: () => ({})
+        },
+        // 输入框占位符
+        placeholder: {
+            type: String,
+            default: '说点什么吧...'
+        }
+    },
+    data() {
+        return {
+            form: {
+                userValue: ''
+            },
+            imageMax: 9,
+            fileList: [],
+        }
+    },
+    methods: {
+        // 打开弹窗
+        open() {
+            this.$refs.popup.open('bottom')
+        },
+
+        // 关闭弹窗
+        close() {
+            this.$refs.popup.close()
+        },
+
+        async submit() {
+            await this.onSubscribeMessageTap()
+
+            let data = {
+                ...this.form,
+                ...this.params,
+            }
+
+            if (this.$utils.verificationAll(data, {
+                userValue: '说点什么吧',
+                type: '缺少type',
+                orderId: '缺少orderId',
+            })) {
+                return
+            }
+
+            data.userImage = this.fileList.map((item) => item.url).join(",")
+
+            this.$api('addComment', data, res => {
+                if (res.code == 200) {
+                    this.close()
+                    this.resetForm()
+                    uni.showToast({
+                        title: '发布成功!',
+                        icon: 'none'
+                    })
+                    this.$emit('success')
+                }
+            })
+        },
+
+        // 重置表单
+        resetForm() {
+            this.form.userValue = ''
+            this.fileList = []
+        },
+
+        deleteImage(e) {
+            this.fileList.splice(e.index, 1)
+        },
+
+        afterRead(e) {
+            let self = this
+            e.file.forEach(file => {
+                self.$Oss.ossUpload(file.url).then(url => {
+                    self.fileList.push({
+                        url
+                    })
+                })
+            })
+        },
+
+        //订阅模版消息
+        onSubscribeMessageTap() {
+            return new Promise((resolve, reject) => {
+                let templateIds = [
+                    'uXZnHWrjtcX9JHlnMpdlWmzgJp71sKxCRiMn3TrE-EE',
+                    'gTzGpOfJcYxtbvPG9OHnhbureKz5XLG8NPyECUGb2lw',
+                ];
+                wx.requestSubscribeMessage({
+                    tmplIds: templateIds, // 需要订阅的模板ID列表
+                    success(res) {
+                        resolve(res)
+                        console.log('订阅消息调用成功', res);
+                        // res[tmplId] 表示用户是否同意订阅该模板ID对应的消息
+                        // 例如：res['your_template_id_1'] === 'accept' 表示用户同意订阅
+                        templateIds.forEach(tmplId => {
+                            if (res[tmplId] === 'accept') {
+                                console.log(`用户同意订阅模板ID：${tmplId}`);
+                                // 这里可以添加用户同意后的逻辑，比如发送消息等（注意：发送消息需要在后端进行）
+                            } else if (res[tmplId] === 'reject') {
+                                console.log(`用户拒绝订阅模板ID：${tmplId}`);
+                            } else {
+                                console.log(`用户对该模板ID的订阅请求：${res[tmplId]}`); // 'ban' 表示用户被禁止订阅该模板
+                            }
+                        });
+                    },
+                    fail(err) {
+                        resolve(res)
+                        console.error('订阅消息调用失败', err);
+                    }
+                });
+            })
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.comment-publish {
+    .content-input {
+        min-height: 400rpx;
+    }
+
+    .box {
+        padding: 0 20rpx;
+    }
+
+    .images {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 20rpx;
+    }
+
+    .uni-color-btn {
+        background-color: $uni-color-primary;
+        color: #fff;
+        text-align: center;
+        padding: 20rpx;
+        margin: 20rpx;
+        border-radius: 10rpx;
+        font-size: 32rpx;
+    }
+}
+</style>
\ No newline at end of file