refactor: 重构评论功能，评论页面改为弹窗方式

common/mixins/wxshare.mixin.js

@@ -1,66 +1,65 @@
 // 微信分享配置
 import HaloTokenConfig from '@/config/token.config.js'
-import {
-	jsonToUrlParams2
-} from '@/utils/url.params.js'
+import {jsonToUrlParams2} from '@/utils/url.params.js'
+
 export const haloWxShareMixin = {
-	computed: {
-		haloWxShareData() {
-			const configs = this.$tm.vx.getters().getConfigs;
-			return configs.shareConfig || {}
-		}
-	},
-	//#ifdef MP-WEIXIN
-	onShareAppMessage(res) {
-		return {
-			...this.haloWxShareData,
-			success: res => {}
-		}
-	},
-	//#endif
-	/* 分享到微信好友 */
-	onShareAppMessage(res) {
-		const promise = new Promise(resolve => {
-			setTimeout(() => {
-				resolve({
-					title: this.haloWxShareData.title,
-					path: this.haloWxShareData.path,
-				})
-			}, 2000)
-		})
-		return {
-			title: this.haloWxShareData.title,
-			path: '',
-			promise
-		}
-	},
+    computed: {
+        haloWxShareData() {
+            const configs = this.$tm.vx.getters().getConfigs;
+            return configs?.shareConfig || {}
+        }
+    },
+    //#ifdef MP-WEIXIN
+    onShareAppMessage(res) {
+        return {
+            ...this.haloWxShareData,
+            success: res => {
+            }
+        }
+    },
+    //#endif
+    /* 分享到微信好友 */
+    onShareAppMessage(res) {
+        const promise = new Promise(resolve => {
+            setTimeout(() => {
+                resolve({
+                    title: this.haloWxShareData.title,
+                    path: this.haloWxShareData.path,
+                })
+            }, 2000)
+        })
+        return {
+            title: this.haloWxShareData.title,
+            path: '',
+            promise
+        }
+    },
 
-	// 分享到朋友圈-这里封装不够，在页面还要声明一次，否则是拿不到参数的，被分享者在朋友圈打开链接是空的
-	onShareTimeline: function() {
-		return {
-			title: this.haloWxShareData.title,
-			query: {},
-			imageUrl: this.haloWxShareData.imageUrl,
-		}
-	},
-	methods: {
-		// 设置分享信息（需要在页面调用）
-		fnSetWxShareConfig(config = {}) {
-			let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
-			let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由(分销思路，分享者点开使用的小程序将获取到分享者的id)
-			let sharePath = currentRoutes
-			if (config.params) {
-				const URLParams = config.params ? jsonToUrlParams2(config.params) : {};
-				sharePath += URLParams
-			}
-			let _config = Object.assign({}, {
-				path: sharePath,
-				copyLink: HaloTokenConfig.BASE_API,
-				query: {}
-			}, config)
+    // 分享到朋友圈-这里封装不够，在页面还要声明一次，否则是拿不到参数的，被分享者在朋友圈打开链接是空的
+    onShareTimeline: function () {
+        return {
+            title: this.haloWxShareData.title,
+            query: {},
+            imageUrl: this.haloWxShareData.imageUrl,
+        }
+    },
+    methods: {
+        // 设置分享信息（需要在页面调用）
+        fnSetWxShareConfig(config = {}) {
+            let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
+            let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由(分销思路，分享者点开使用的小程序将获取到分享者的id)
+            let sharePath = currentRoutes
+            if (config.params) {
+                const URLParams = config.params ? jsonToUrlParams2(config.params) : {};
+                sharePath += URLParams
+            }
+            let _config = Object.assign({}, {
+                path: sharePath,
+                copyLink: HaloTokenConfig.BASE_API,
+                query: {}
+            }, config)
 
-			uni.$tm.vx.commit('setWxShare', _config);
-			this.haloWxShareData = _config;
-		}
-	}
-}
+            uni.$tm.vx.commit('setWxShare', _config);
+        }
+    }
+}

components/comment-list/comment-list.vue

@@ -1,272 +1,273 @@
 <template>
-	<view class="comment-list">
-		<!-- 顶部区域 -->
-		<view class="comment-list_head">
-			<view class="title">
-				<text>评论列表</text>
-				<text class="count">（{{ (result&& result.total) || 0 }}条）</text>
-			</view>
-		</view>
-		<!-- 内容区域 -->
-		<view class="comment-list_content">
-			<view v-if="loading != 'success'" class="loading-wrap flex">
-				<view v-if="loading == 'loading'" class="loading flex flex-center flex-col">
-					<text class="e-loading-icon iconfont icon-loading text-blue"></text>
-					<view class="text-size-n text-grey-lighten-1 py-12 mt-12">加载中，请稍等...</view>
-				</view>
-				<view v-else-if="loading == 'error'" class="error">
-					<tm-empty icon="icon-wind-cry" label="加载失败">
-						<tm-button theme="bg-gradient-light-blue-accent" size="m" v-if="!disallowComment"
-							@click="fnToComment()">刷新试试</tm-button>
-					</tm-empty>
-				</view>
-			</view>
-			<block v-else>
-				<tm-alerts v-if="disallowComment && dataList.length !== 0" color="red" text :margin="[0, 0]" :shadow="0"
-					label="Ծ‸Ծ博主已设置该文章禁止评论!" :round="3"></tm-alerts>
-				<view class="empty pt-50" v-if="dataList.length == 0">
-					<tm-empty v-if="disallowComment" icon="icon-shiliangzhinengduixiang-" label="暂无评论">
-						<text class="text-red text-size-s">- 文章已开启禁止评论 -</text>
-					</tm-empty>
-					<tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无评论">
-						<tm-button theme="light-blue" :dense="true" :shadow="0" size="m"
-							@click="fnToComment(null)">抢沙发</tm-button>
-					</tm-empty>
-				</view>
-				<block v-else>
-					<!-- 评论内容 : 目前仅支持二级评论 -->
-					<block v-for="(comment, index) in dataList" :key="comment.metadata.name">
-						<comment-item :useContentBg="false" :isChild="false" :comment="comment" :postName="postName"
-							:disallowComment="disallowComment" @on-copy="fnCopyContent" @on-comment="fnToComment"
-							@on-todo="fnToDo" @on-detail="fnShowCommetnDetail"></comment-item>
+    <view class="comment-list">
+        <!-- 顶部区域 -->
+        <view class="comment-list_head">
+            <view class="title">
+                <text>评论列表</text>
+                <text class="count">（{{ (result && result.total) || 0 }}条）</text>
+            </view>
+        </view>
+        <!-- 内容区域 -->
+        <view class="comment-list_content">
+            <view v-if="loading !== 'success'" class="loading-wrap flex">
+                <view v-if="loading === 'loading'" class="loading flex flex-center flex-col">
+                    <text class="e-loading-icon iconfont icon-loading text-blue"></text>
+                    <view class="text-size-n text-grey-lighten-1 py-12 mt-12">加载中，请稍等...</view>
+                </view>
+                <view v-else-if="loading === 'error'" class="error">
+                    <tm-empty icon="icon-wind-cry" label="加载失败">
+                        <tm-button theme="bg-gradient-light-blue-accent" size="m" v-if="!disallowComment"
+                                   @click="fnToComment()">刷新试试
+                        </tm-button>
+                    </tm-empty>
+                </view>
+            </view>
+            <block v-else>
+                <tm-alerts v-if="disallowComment && dataList.length !== 0" color="red" text :margin="[0, 0]" :shadow="0"
+                           label="Ծ‸Ծ博主已设置该文章禁止评论!" :round="3"></tm-alerts>
+                <view class="empty pt-50" v-if="dataList.length === 0">
+                    <tm-empty v-if="disallowComment" icon="icon-shiliangzhinengduixiang-" label="暂无评论">
+                        <text class="text-red text-size-s">- 文章已开启禁止评论 -</text>
+                    </tm-empty>
+                    <tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无评论">
+                        <tm-button theme="light-blue" :dense="true" :shadow="0" size="m"
+                                   @click="fnToComment(null)">抢沙发
+                        </tm-button>
+                    </tm-empty>
+                </view>
+                <block v-else>
+                    <!-- 评论内容 : 目前仅支持二级评论 -->
+                    <block v-for="(comment, index) in dataList" :key="comment.metadata.name">
+                        <comment-item :useContentBg="false" :isChild="false" :comment="comment" :postName="postName"
+                                      :disallowComment="disallowComment" @on-copy="fnCopyContent" @on-comment="fnToComment"
+                                      @on-todo="fnToDo" @on-detail="fnShowCommentDetail"></comment-item>
 
-						<!-- 二级评论 -->
-						<block v-if="comment.replies && comment.replies.items.length != 0">
-							<block v-for="(childComment, childIndex) in comment.replies.items"
-								:key="childComment.metadata.name">
-								<comment-item :useContentBg="false" :isChild="true" :comment="childComment"
-									:postName="postName" :disallowComment="disallowComment" @on-copy="fnCopyContent"
-									@on-comment="fnToComment" @on-todo="fnToDo"
-									@on-detail="fnShowCommetnDetail"></comment-item>
-							</block>
-						</block>
-					</block>
-					<view v-if="false" class="to-more-comment">
-						<tm-button item-class="btn" :block="true" width="90vw" theme="bg-gradient-light-blue-lighten"
-							size="m">点击查看全部评论</tm-button>
-					</view>
-				</block>
-			</block>
-		</view>
-	</view>
+                        <!-- 二级评论 -->
+                        <block v-if="comment.replies && comment.replies.items.length !== 0">
+                            <block v-for="(childComment, childIndex) in comment.replies.items"
+                                   :key="childComment.metadata.name">
+                                <comment-item :useContentBg="false" :isChild="true" :comment="childComment"
+                                              :postName="postName" :disallowComment="disallowComment" @on-copy="fnCopyContent"
+                                              @on-comment="fnToComment" @on-todo="fnToDo"
+                                              @on-detail="fnShowCommentDetail"></comment-item>
+                            </block>
+                        </block>
+                    </block>
+                    <view v-if="false" class="to-more-comment">
+                        <tm-button item-class="btn" :block="true" width="90vw" theme="bg-gradient-light-blue-lighten"
+                                   size="m">点击查看全部评论
+                        </tm-button>
+                    </view>
+                </block>
+            </block>
+        </view>
+    </view>
 </template>
 
 <script>
-	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-	import tmAlerts from '@/tm-vuetify/components/tm-alerts/tm-alerts.vue';
+import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+import tmAlerts from '@/tm-vuetify/components/tm-alerts/tm-alerts.vue';
 
-	export default {
-		name: 'comment-list',
-		components: {
-			tmEmpty,
-			tmButton,
-			tmAlerts
-		},
-		props: {
-			// 是否禁用评论
-			disallowComment: {
-				type: Boolean,
-				default: false
-			},
-			postName: {
-				type: String,
-				default: ""
-			},
-			post: {
-				type: Object,
-				default: () => {}
-			}
-		},
-		data() {
-			return {
-				loading: 'loading',
-				queryParams: {
-					group: "content.halo.run",
-					kind: "Post",
-					version: "v1alpha1",
-					name: "",
-					page: 1,
-					size: 50,
-					withReplies: true,
-					replySize: 10
-				},
-				result: null,
-				dataList: []
-			};
-		},
-		created() {
-			this.queryParams.name = this.postName;
-			this.fnGetData();
-			uni.$on('comment_list_refresh', () => {
-				this.fnOnSort(true);
-			});
-		},
-		methods: {
-			fnOnSort(refresh = false) {
-				if (refresh == false) return;
-				this.fnGetData();
-			},
-			fnGetData() {
-				this.loading = 'loading';
-				this.$httpApi.v2.getPostCommentList(this.queryParams)
-					.then(res => {
-						console.log("日志：", res)
-						this.result = res;
-						this.dataList = res.items;
-						this.loading = 'success';
-						this.$emit('on-loaded', this.dataList);
-					})
-					.catch(err => {
-						this.loading = 'error';
-					})
-					.finally(() => {
-						uni.hideLoading();
-					});
-			},
-			fnToDo() {
-				uni.$tm.toast('Halo暂未支持！');
-			},
-			fnToComment(data) {
-				if (this.disallowComment) {
-					return uni.$tm.toast('文章已禁止评论！');
-				}
-				console.log('data', data);
-				let _comment = {};
-				if (data) {
-					let {
-						type,
-						comment
-					} = data;
-					// 来自用户
-					_comment = {
-						isComment: false,
-						postName: comment.metadata.name,
-						title: comment.owner.displayName,
-						from: 'posts',
-						formPage: 'comment_list',
-						type: 'user'
-					};
-				} else {
-					// 来自文章
-					_comment = {
-						isComment: true,
-						postName: this.post.metadata.name,
-						title: '评论文章：' + this.post.spec.title,
-						formPage: 'comment_list',
-						from: 'posts',
-						type: 'post'
-					};
-				}
+export default {
+    name: 'comment-list',
+    components: {
+        tmEmpty,
+        tmButton,
+        tmAlerts
+    },
+    props: {
+        // 是否禁用评论
+        disallowComment: {
+            type: Boolean,
+            default: false
+        },
+        postName: {
+            type: String,
+            default: ""
+        },
+        post: {
+            type: Object,
+            default: () => {
+            }
+        }
+    },
+    data() {
+        return {
+            loading: 'loading',
+            queryParams: {
+                group: "content.halo.run",
+                kind: "Post",
+                version: "v1alpha1",
+                name: "",
+                page: 1,
+                size: 50,
+                withReplies: true,
+                replySize: 10
+            },
+            result: null,
+            dataList: []
+        };
+    },
+    created() {
+        this.queryParams.name = this.postName;
+        this.fnGetData();
+        uni.$on('comment_list_refresh', () => {
+            this.fnOnSort(true);
+        });
+    },
+    methods: {
+        fnOnSort(refresh = false) {
+            if (refresh === false) return;
+            this.fnGetData();
+        },
+        fnGetData() {
+            this.loading = 'loading';
+            this.$httpApi.v2.getPostCommentList(this.queryParams)
+                .then(res => {
+                    console.log("日志：", res)
+                    this.result = res;
+                    this.dataList = res.items;
+                    this.loading = 'success';
+                    this.$emit('on-loaded', this.dataList);
+                })
+                .catch(err => {
+                    this.loading = 'error';
+                })
+                .finally(() => {
+                    uni.hideLoading();
+                });
+        },
+        fnToDo() {
+            uni.$tm.toast('Halo暂未支持！');
+        },
+        fnToComment(data) {
+            if (this.disallowComment) {
+                return uni.$tm.toast('文章已禁止评论！');
+            }
+            let _comment = {};
+            if (data) {
+                let {
+                    type,
+                    comment
+                } = data;
+                // 来自用户
+                _comment = {
+                    isComment: false,
+                    postName: comment.metadata.name,
+                    title: comment.owner.displayName,
+                    from: 'posts',
+                    formPage: 'comment_list',
+                    type: 'user'
+                };
+            } else {
+                // 来自文章
+                _comment = {
+                    isComment: true,
+                    postName: this.post.metadata.name,
+                    title: '评论文章：' + this.post.spec.title,
+                    formPage: 'comment_list',
+                    from: 'posts',
+                    type: 'post'
+                };
+            }
 
-				uni.$tm.vx.commit('comment/setCommentInfo', _comment);
-				this.$Router.push({
-					path: '/pagesA/comment/comment',
-					query: _comment
-				});
-			},
-			fnCopyContent(content) {
-				uni.$tm.u.setClipboardData(content);
-				uni.$tm.toast('内容已复制成功！');
-			},
+            this.$emit("on-comment", {
+                _comment
+            })
+        },
+        fnCopyContent(content) {
+            uni.$tm.u.setClipboardData(content);
+            uni.$tm.toast('内容已复制成功！');
+        },
 
-			fnShowCommetnDetail(comment) {
-				this.$emit('on-comment-detail', {
-					postName: this.postName,
-					comment: comment
-				});
-			}
-		}
-	};
+        fnShowCommentDetail(comment) {
+            this.$emit('on-comment-detail', {
+                postName: this.postName,
+                comment: comment
+            });
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.comment-list {
-		&_head {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			position: relative;
-			box-sizing: border-box;
-			padding-left: 24rpx;
-			font-size: 30rpx;
-			font-weight: bold;
+.comment-list {
+    &_head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        box-sizing: border-box;
+        padding-left: 24rpx;
+        font-size: 30rpx;
+        font-weight: bold;
 
-			&:before {
-				content: '';
-				position: absolute;
-				left: 0rpx;
-				top: 8rpx;
-				width: 8rpx;
-				height: 26rpx;
-				background-color: rgb(3, 174, 252);
-				border-radius: 6rpx;
-			}
+        &:before {
+            content: '';
+            position: absolute;
+            left: 0rpx;
+            top: 8rpx;
+            width: 8rpx;
+            height: 26rpx;
+            background-color: rgb(3, 174, 252);
+            border-radius: 6rpx;
+        }
 
-			.title {
-				.count {
-					font-size: 28rpx;
-					font-weight: normal;
-				}
-			}
+        .title {
+            .count {
+                font-size: 28rpx;
+                font-weight: normal;
+            }
+        }
 
-			.filter {
-				font-size: 26rpx;
-				font-weight: normal;
+        .filter {
+            font-size: 26rpx;
+            font-weight: normal;
 
-				&-item {
-					margin-left: 20rpx;
-					color: #666;
+            &-item {
+                margin-left: 20rpx;
+                color: #666;
 
-					&.active {
-						font-weight: bold;
-						color: rgb(255, 152, 0);
-						font-size: 26rpx;
-					}
-				}
-			}
-		}
+                &.active {
+                    font-weight: bold;
+                    color: rgb(255, 152, 0);
+                    font-size: 26rpx;
+                }
+            }
+        }
+    }
 
-		&_content {
-			margin-top: 24rpx;
-			padding-bottom: 36rpx;
-		}
-	}
+    &_content {
+        margin-top: 24rpx;
+        padding-bottom: 36rpx;
+    }
+}
 
-	.loading-wrap {
-		width: 100%;
-		height: 506rpx;
+.loading-wrap {
+    width: 100%;
+    height: 506rpx;
 
-		.loading {
-			width: 100%;
-		}
+    .loading {
+        width: 100%;
+    }
 
-		.e-loading-icon {
-			font-size: 100rpx;
-		}
-	}
+    .e-loading-icon {
+        font-size: 100rpx;
+    }
+}
 
-	.to-more-comment {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 80rpx;
+.to-more-comment {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 80rpx;
 
-		::v-deep {
-			.tm-button .tm-button-btn uni-button {
-				height: 70rpx;
-			}
-		}
-	}
-</style>
+    ::v-deep {
+        .tm-button .tm-button-btn uni-button {
+            height: 70rpx;
+        }
+    }
+}
+</style>

pagesA/comment/comment.vue → components/comment-modal/comment-modal.vue

@@ -1,45 +1,62 @@
 <template>
-    <view class="app-page pa-6">
-        <view class="content pt-24 pb-24 round-4">
-            <!-- 表单区域 -->
-            <tm-form @submit="fnOnSubmit">
-                <tm-input :auto-focus="true" name="content" :vertical="true" required :height="220"
-                          input-type="textarea" bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false"
-                          placeholder="请输入内容,不超过200字符..." v-model="form.content"></tm-input>
-                <tm-input name="author" align="right" required title="我的昵称" placeholder="请输入您的昵称..."
-                          v-model="form.author"></tm-input>
-                <tm-input name="avatar" align="right" required title="我的头像" placeholder="请输入您的头像..."
-                          v-model="form.avatar"></tm-input>
-                <tm-input name="email" align="right" required title="邮箱地址" placeholder="请输入您的邮箱..."
-                          v-model="form.email"></tm-input>
-                <tm-input name="authorUrl" align="right" required title="我的网站" placeholder="请输入您的网址..."
-                          v-model="form.authorUrl"></tm-input>
-                <view class="pa-24 pl-30 pr-30">
-                    <tm-button navtie-type="form" theme="bg-gradient-blue-accent"
-                               block>提交
-                    </tm-button>
-                </view>
-            </tm-form>
-        </view>
-    </view>
+    <tm-poup v-model="isShow" position="bottom" height="71vh" @change="handleOnChange">
+        <view class="title text-align-center">{{ calcTitle }}</view>
+        <tm-form @submit="fnOnSubmit">
+            <tm-input :auto-focus="true" name="content" :vertical="true" required :height="220" input-type="textarea"
+                      bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false" placeholder="请输入内容,不超过200字符..."
+                      v-model="form.content"></tm-input>
+            <tm-input name="author" align="right" required title="我的昵称" placeholder="请输入您的昵称..."
+                      v-model="form.author"></tm-input>
+            <tm-input name="avatar" align="right" title="我的头像" placeholder="请输入您的头像..."
+                      v-model="form.avatar"></tm-input>
+            <tm-input name="email" align="right" title="邮箱地址" placeholder="请输入您的邮箱..." v-model="form.email"></tm-input>
+            <tm-input name="authorUrl" align="right" title="我的网站" placeholder="请输入您的网址..."
+                      v-model="form.authorUrl"></tm-input>
+            <view class="pa-24 pl-30 pr-30">
+                <tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>提交
+                </tm-button>
+            </view>
+        </tm-form>
+    </tm-poup>
 </template>
 
 <script>
+import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
 import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
 import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
 import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
 import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
 
 export default {
+    name: 'CommentModal',
     components: {
+        tmPoup,
         tmForm,
         tmInput,
         tmSwitch,
         tmButton
     },
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        isComment: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        postName: {
+            type: String,
+            default: ""
+        }
+    },
     data() {
         return {
-            isComment: true,
+            isShow: false,
             params: {
                 postName: '',
                 title: '', // 被回复的标题 type=user =用户名  否则为文章标题
@@ -56,45 +73,66 @@ export default {
                 email: '', // 邮件
                 postName: ""
             }
-        };
+        }
     },
-    onLoad() {
-        this.params = this.$Route.query;
-        this.isComment = this.params.isComment;
-        this.form.postName = this.params.postName;
-
-        if (!this.isComment) {
-            this.fnSetPageTitle('回复用户：' + this.params.title);
-        } else {
-            this.fnSetPageTitle(this.params.title);
+    computed: {
+        calcTitle() {
+            if (this.isComment) {
+                return this.title
+            }
+            return `回复用户：${this.title}`
         }
-
-        try {
-            let visitor = uni.getStorageSync('Visitor')
-            if (visitor) {
+    },
+    watch: {
+        show: {
+            immediate: true,
+            handler: function (newVal) {
+                if (!newVal) return;
+                this.isShow = true;
+                this.handleResetForm();
+                this.form.postName = this.postName;
+                let visitor = uni.getStorageSync('Visitor')
+                if (!visitor) return;
                 visitor = JSON.parse(visitor)
                 this.form.author = visitor.author;
                 this.form.avatar = visitor.avatar;
                 this.form.email = visitor.email;
                 this.form.authorUrl = visitor.authorUrl;
             }
-        } catch (e) {
         }
     },
     methods: {
+        handleResetForm() {
+            this.params = {
+                postName: '',
+                title: '',
+                form: '',
+                formPage: '',
+                type: 'post'
+            }
+            this.form = {
+                allowNotification: true,
+                author: '',
+                avatar: '',
+                authorUrl: '',
+                content: '',
+                email: '',
+                postName: ""
+            }
+        },
         fnOnSubmit(e) {
             if (e === false) {
                 return uni.$tm.toast('请检查所有的必填项是否填写完整！');
             }
-            if (!this.form.email) {
-                return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
-            }
-            if (this.form.email && !uni.$tm.test.email(this.form.email)) {
-                return uni.$tm.toast('请填写正确的邮箱地址！');
-            }
-            if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
-                return uni.$tm.toast('请输入正确的Url地址！');
-            }
+            // if (!this.form.email) {
+            // 	return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
+            // }
+            // if (this.form.email && !uni.$tm.test.email(this.form.email)) {
+            // 	return uni.$tm.toast('请填写正确的邮箱地址！');
+            // }
+            // if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
+            // 	return uni.$tm.toast('请输入正确的Url地址！');
+            // }
             this.fnHandle();
         },
         handleSetVisitor() {
@@ -131,12 +169,11 @@ export default {
                 }
                 this.$httpApi.v2.addPostComment(commentForm)
                     .then(res => {
-                        uni.$tm.toast('提交成功！');
+                        uni.$tm.toast('评论成功！');
                         // 更新评论者信息
                         this.handleSetVisitor();
-                        setTimeout(() => {
-                            uni.navigateBack()
-                        }, 1500)
+                        this.handleClose(true)
+                        this.handleResetForm()
                     })
                     .catch(err => {
                         uni.$tm.toast("评论失败");
@@ -159,43 +196,36 @@ export default {
             }
             this.$httpApi.v2.addPostCommentReply(this.form.postName, replyForm)
                 .then(res => {
-                    uni.$tm.toast('提交成功！');
+                    uni.$tm.toast('回复成功！');
                     // 更新评论者信息
                     this.handleSetVisitor();
-                    setTimeout(() => {
-                        uni.navigateBack()
-                    }, 1500)
+                    this.handleClose(true)
+                    this.handleResetForm()
                 })
                 .catch(err => {
                     uni.$tm.toast("回复失败");
                 });
+        },
+        handleOnChange(isOpen) {
+            this.isShow = isOpen;
+            if (!isOpen) {
+                this.$emit("on-close", {
+                    refresh: false
+                })
+            }
+        },
+        handleClose(refresh = false) {
+            this.isShow = false;
+            this.$emit("on-close", {
+                refresh: refresh
+            })
         }
     }
-};
-</script>
-
-<style scoped lang="scss">
-.app-page {
-    width: 100vw;
-    min-height: 100vh;
-    box-sizing: border-box;
-    // background-color: #fafafd;
-    background-color: #ffffff;
-
-    .content {
-        overflow: hidden;
-        background-color: #fff;
-        // box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
-    }
 }
+</script>
 
-.poup-content {
-    width: 500rpx;
-
-    ::v-deep {
-        .slider_id {
-            width: 100% !important;
-        }
-    }
+<style lang="scss" scoped>
+.title {
+    margin: 24rpx 0;
 }
 </style>

pages.json

@@ -225,16 +225,6 @@
             }
           }
         },
-        {
-          "path": "comment/comment",
-          "style": {
-            "navigationBarTitleText": "",
-            "enablePullDownRefresh": false
-          },
-          "meta": {
-            "auth": "login"
-          }
-        },
         {
           "path": "disclaimers/disclaimers",
           "style": {

pagesA/article-detail/article-detail.vue

@@ -97,7 +97,8 @@
                 </view>
 
                 <!-- 版权声明 -->
-                <view v-if="postDetailConfig && postDetailConfig.copyrightEnabled" class="copyright-wrap bg-white mt-24 pa-24 round-4">
+                <view v-if="postDetailConfig && postDetailConfig.copyrightEnabled"
+                      class="copyright-wrap bg-white mt-24 pa-24 round-4">
                     <view class="copyright-title text-weight-b">版权声明</view>
                     <view
                         class="copyright-content mt-12  grey-lighten-5 text-grey-darken-2 round-4 pt-12 pb-12 pl-24 pr-24 ">
@@ -107,7 +108,8 @@
                         <view v-if="postDetailConfig.copyrightDesc" class="copyright-text text-size-s mt-12">
                             版权说明：{{ postDetailConfig.copyrightDesc }}
                         </view>
-                        <view v-if="postDetailConfig.copyrightViolation" class="copyright-text text-size-s mt-12 text-red">
+                        <view v-if="postDetailConfig.copyrightViolation"
+                              class="copyright-text text-size-s mt-12 text-red">
                             侵权处理：{{ postDetailConfig.copyrightViolation }}
                         </view>
                     </view>
@@ -116,8 +118,9 @@
                 <!-- 评论展示区域 -->
                 <block v-if="postDetailConfig && postDetailConfig.showComment">
                     <view v-if="result" class="comment-wrap bg-white mt-24 pa-24 round-4">
-                        <commentList :disallowComment="!result.spec.allowComment" :postName="result.metadata.name"
-                                     :post="result" @on-comment-detail="fnOnShowCommentDetail" @on-loaded="fnOnCommentLoaded">
+                        <commentList ref="commentListRef" :disallowComment="!result.spec.allowComment"
+                                     :postName="result.metadata.name" :post="result" @on-comment="fnOnComment"
+                                     @on-comment-detail="fnOnShowCommentDetail" @on-loaded="fnOnCommentLoaded">
                         </commentList>
                     </view>
                 </block>
@@ -203,6 +206,11 @@
         <tm-dialog v-model="showGetPassword" title="免费获取验证码" content="是否前往获取验证码？" @confirm="toAdvertise"
                    @cancel="closeAllPop"></tm-dialog>
 
+        <!-- 评论弹窗 -->
+        <block v-if="calcIsShowComment">
+            <comment-modal :show="commentModal.show" :title="commentModal.title" :postName="commentModal.postName"
+                           :isComment="commentModal.isComment" @on-close="fnOnCommentModalClose"></comment-modal>
+        </block>
     </view>
 </template>
 
@@ -220,6 +228,7 @@ import tmMore from '@/tm-vuetify/components/tm-more/tm-more.vue';
 import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
 import commentList from '@/components/comment-list/comment-list.vue';
 import commentItem from '@/components/comment-item/comment-item.vue';
+import commentModal from '@/components/comment-modal/comment-modal.vue';
 
 import rCanvas from '@/components/r-canvas/r-canvas.vue';
 import barrage from '@/components/barrage/barrage.vue';
@@ -239,7 +248,8 @@ export default {
         commentList,
         commentItem,
         rCanvas,
-        barrage
+        barrage,
+        commentModal
     },
     mixins: [haloWxShareMixin],
     data() {
@@ -277,7 +287,13 @@ export default {
             visitType: 0, // 0 未加密 1 后端部分隐藏 2 前端部分隐藏 3 全部隐藏
             visitPwd: undefined,
             showValidVisitMore: true,
-            showGetPassword: false
+            showGetPassword: false,
+            commentModal: {
+                show: false,
+                isComment: false,
+                postName: "",
+                title: ""
+            }
         };
     },
     computed: {
@@ -285,7 +301,7 @@ export default {
             return this.$tm.vx.getters().getConfigs;
         },
         postDetailConfig() {
-            return this.haloConfigs.postDetailConfig;
+            return this.haloConfigs.basicConfig.postDetailConfig;
         },
         calcUrl() {
             return url => {
@@ -297,7 +313,7 @@ export default {
         },
         // 获取博主信息
         bloggerInfo() {
-            let blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger;
+            const blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger;
             blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
             return blogger;
         },
@@ -310,12 +326,16 @@ export default {
                 return '';
             }
         },
+
+        calcIsShowComment() {
+            return this.postDetailConfig.showComment
+        }
     },
     watch: {
         haloConfigs: {
             deep: true,
             immediate: true,
-            handler: (newVal) => {
+            handler: function (newVal) {
                 if (!newVal) return;
                 this.fnHandleSetFlotButtonItems(newVal);
             }
@@ -394,13 +414,11 @@ export default {
                 });
         },
         fnHandleSetFlotButtonItems(configs) {
-
-            const actions = [
-                {
-                    icon: 'icon-share1',
-                    color: 'bg-gradient-blue-accent',
-                    use: true,
-                },
+            const actions = [{
+                icon: 'icon-share1',
+                color: 'bg-gradient-blue-accent',
+                use: true,
+            },
                 {
                     icon: 'icon-like',
                     color: 'bg-gradient-orange-accent',
@@ -431,25 +449,32 @@ export default {
         },
 
         fnToComment() {
-            if (!this.haloConfig.basicConfig.postDetailConfig.showComment) {
+            if (!this.calcIsShowComment) {
                 return;
             }
             if (!this.result.spec.allowComment) {
                 return uni.$tm.toast('文章已开启禁止评论！');
             }
-            this.$Router.push({
-                path: '/pagesA/comment/comment',
-                query: {
-                    isComment: true,
-                    postName: this.result.metadata.name,
-                    title: this.result.spec.title,
-                    from: 'posts',
-                    formPage: 'comment_list',
-                    type: 'post'
-                }
-            });
+            this.commentModal.isComment = true;
+            this.commentModal.postName = this.result.metadata.name;
+            this.commentModal.title = this.result.spec.title;
+            this.commentModal.show = true;
+        },
+        fnOnComment(data) {
+            this.commentModal.isComment = data.isComment;
+            this.commentModal.postName = data.name;
+            this.commentModal.title = data.title;
+            this.commentModal.show = true;
+        },
+        fnOnCommentModalClose(refresh) {
+            if (refresh && this.$refs.commentListRef) {
+                this.$refs.commentListRef.fnGetData()
+            }
+            this.commentModal.show = false;
+            this.commentModal.isComment = false;
+            this.commentModal.postName = "";
+            this.commentModal.title = "";
         },
-
         fnDoLikes() {
             this.$httpApi
                 .postLikePost(this.result.id)
@@ -624,7 +649,7 @@ export default {
                 // 小程序信息
                 await this.$refs.rCanvas
                     .drawImage({
-                        url: this.haloConfig.imagesConfig.miniCodeImageUrl,
+                        url: this.$utils.checkImageUrl(this.haloConfig.imagesConfig.miniCodeImageUrl),
                         x: 20,
                         y: 360,
                         w: 80,
@@ -730,7 +755,6 @@ export default {
             });
         },
         async fnOnCommentLoaded(data) {
-            console.log("data", data)
             const _list = [];
             const _handleData = list => {
                 return new Promise(resolve => {