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

common/mixins/wxshare.mixin.js

@@ -1,20 +1,20 @@
 // 微信分享配置
 import HaloTokenConfig from '@/config/token.config.js'
-import {
+import {jsonToUrlParams2} from '@/utils/url.params.js'
-	jsonToUrlParams2
+
-} from '@/utils/url.params.js'
 export const haloWxShareMixin = {
     computed: {
         haloWxShareData() {
             const configs = this.$tm.vx.getters().getConfigs;
-			return configs.shareConfig || {}
+            return configs?.shareConfig || {}
         }
     },
     //#ifdef MP-WEIXIN
     onShareAppMessage(res) {
         return {
             ...this.haloWxShareData,
-			success: res => {}
+            success: res => {
+            }
         }
     },
     //#endif
@@ -36,7 +36,7 @@ export const haloWxShareMixin = {
     },
 
     // 分享到朋友圈-这里封装不够，在页面还要声明一次，否则是拿不到参数的，被分享者在朋友圈打开链接是空的
-	onShareTimeline: function() {
+    onShareTimeline: function () {
         return {
             title: this.haloWxShareData.title,
             query: {},
@@ -60,7 +60,6 @@ export const haloWxShareMixin = {
             }, config)
 
             uni.$tm.vx.commit('setWxShare', _config);
-			this.haloWxShareData = _config;
         }
     }
 }

components/comment-list/comment-list.vue

@@ -4,33 +4,35 @@
         <view class="comment-list_head">
             <view class="title">
                 <text>评论列表</text>
-				<text class="count">（{{ (result&& result.total) || 0 }}条）</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 !== 'success'" class="loading-wrap flex">
-				<view v-if="loading == 'loading'" class="loading flex flex-center flex-col">
+                <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">
+                <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>
+                                   @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">
+                <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>
+                                   @click="fnToComment(null)">抢沙发
+                        </tm-button>
                     </tm-empty>
                 </view>
                 <block v-else>
@@ -38,22 +40,23 @@
                     <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>
+                                      @on-todo="fnToDo" @on-detail="fnShowCommentDetail"></comment-item>
 
                         <!-- 二级评论 -->
-						<block v-if="comment.replies && comment.replies.items.length != 0">
+                        <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>
+                                              @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>
+                                   size="m">点击查看全部评论
+                        </tm-button>
                     </view>
                 </block>
             </block>
@@ -62,11 +65,11 @@
 </template>
 
 <script>
-	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-	import tmAlerts from '@/tm-vuetify/components/tm-alerts/tm-alerts.vue';
+import tmAlerts from '@/tm-vuetify/components/tm-alerts/tm-alerts.vue';
 
-	export default {
+export default {
     name: 'comment-list',
     components: {
         tmEmpty,
@@ -85,7 +88,8 @@
         },
         post: {
             type: Object,
-				default: () => {}
+            default: () => {
+            }
         }
     },
     data() {
@@ -114,7 +118,7 @@
     },
     methods: {
         fnOnSort(refresh = false) {
-				if (refresh == false) return;
+            if (refresh === false) return;
             this.fnGetData();
         },
         fnGetData() {
@@ -141,7 +145,6 @@
             if (this.disallowComment) {
                 return uni.$tm.toast('文章已禁止评论！');
             }
-				console.log('data', data);
             let _comment = {};
             if (data) {
                 let {
@@ -169,29 +172,27 @@
                 };
             }
 
-				uni.$tm.vx.commit('comment/setCommentInfo', _comment);
+            this.$emit("on-comment", {
-				this.$Router.push({
+                _comment
-					path: '/pagesA/comment/comment',
+            })
-					query: _comment
-				});
         },
         fnCopyContent(content) {
             uni.$tm.u.setClipboardData(content);
             uni.$tm.toast('内容已复制成功！');
         },
 
-			fnShowCommetnDetail(comment) {
+        fnShowCommentDetail(comment) {
             this.$emit('on-comment-detail', {
                 postName: this.postName,
                 comment: comment
             });
         }
     }
-	};
+};
 </script>
 
 <style lang="scss" scoped>
-	.comment-list {
+.comment-list {
     &_head {
         display: flex;
         align-items: center;
@@ -241,9 +242,9 @@
         margin-top: 24rpx;
         padding-bottom: 36rpx;
     }
-	}
+}
 
-	.loading-wrap {
+.loading-wrap {
     width: 100%;
     height: 506rpx;
 
@@ -254,9 +255,9 @@
     .e-loading-icon {
         font-size: 100rpx;
     }
-	}
+}
 
-	.to-more-comment {
+.to-more-comment {
     width: 100%;
     display: flex;
     align-items: center;
@@ -268,5 +269,5 @@
             height: 70rpx;
         }
     }
-	}
+}
 </style>

components/comment-modal/comment-modal.vue

@@ -1,45 +1,62 @@
 <template>
-    <view class="app-page pa-6">
+    <tm-poup v-model="isShow" position="bottom" height="71vh" @change="handleOnChange">
-        <view class="content pt-24 pb-24 round-4">
+        <view class="title text-align-center">{{ calcTitle }}</view>
-            <!-- 表单区域 -->
         <tm-form @submit="fnOnSubmit">
-                <tm-input :auto-focus="true" name="content" :vertical="true" required :height="220"
+            <tm-input :auto-focus="true" name="content" :vertical="true" required :height="220" input-type="textarea"
-                          input-type="textarea" bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false"
+                      bg-color="grey-lighten-5" :maxlength="200" :borderBottom="false" placeholder="请输入内容,不超过200字符..."
-                          placeholder="请输入内容,不超过200字符..." v-model="form.content"></tm-input>
+                      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="请输入您的头像..."
+            <tm-input name="avatar" align="right" title="我的头像" placeholder="请输入您的头像..."
                       v-model="form.avatar"></tm-input>
-                <tm-input name="email" align="right" required title="邮箱地址" placeholder="请输入您的邮箱..."
+            <tm-input name="email" align="right" title="邮箱地址" placeholder="请输入您的邮箱..." v-model="form.email"></tm-input>
-                          v-model="form.email"></tm-input>
+            <tm-input name="authorUrl" align="right" title="我的网站" placeholder="请输入您的网址..."
-                <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"
+                <tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>提交
-                               block>提交
                 </tm-button>
             </view>
         </tm-form>
-        </view>
+    </tm-poup>
-    </view>
 </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);
         }
-
+    },
-        try {
+    computed: {
+        calcTitle() {
+            if (this.isComment) {
+                return this.title
+            }
+            return `回复用户：${this.title}`
+        }
+    },
+    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) {
+                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) {
+            // if (!this.form.email) {
-                return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
+            // 	return uni.$tm.toast('未填写邮箱地址，将无法接收提醒！');
-            }
+            // }
-            if (this.form.email && !uni.$tm.test.email(this.form.email)) {
+            // if (this.form.email && !uni.$tm.test.email(this.form.email)) {
-                return uni.$tm.toast('请填写正确的邮箱地址！');
+            // 	return uni.$tm.toast('请填写正确的邮箱地址！');
-            }
+            // }
-            if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
+            // if (this.form.authorUrl && !uni.$tm.test.url(this.form.authorUrl)) {
-                return uni.$tm.toast('请输入正确的Url地址！');
+            // 	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(() => {
+                        this.handleClose(true)
-                            uni.navigateBack()
+                        this.handleResetForm()
-                        }, 1500)
                     })
                     .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(() => {
+                    this.handleClose(true)
-                        uni.navigateBack()
+                    this.handleResetForm()
-                    }, 1500)
                 })
                 .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">
+<style lang="scss" scoped>
-.app-page {
+.title {
-    width: 100vw;
+    margin: 24rpx 0;
-    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);
-    }
-}
-
-.poup-content {
-    width: 500rpx;
-
-    ::v-deep {
-        .slider_id {
-            width: 100% !important;
-        }
-    }
 }
 </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"
+                        <commentList ref="commentListRef" :disallowComment="!result.spec.allowComment"
-                                     :post="result" @on-comment-detail="fnOnShowCommentDetail" @on-loaded="fnOnCommentLoaded">
+                                     :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,9 +414,7 @@ export default {
                 });
         },
         fnHandleSetFlotButtonItems(configs) {
-
+            const actions = [{
-            const actions = [
-                {
                 icon: 'icon-share1',
                 color: 'bg-gradient-blue-accent',
                 use: true,
@@ -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({
+            this.commentModal.isComment = true;
-                path: '/pagesA/comment/comment',
+            this.commentModal.postName = this.result.metadata.name;
-                query: {
+            this.commentModal.title = this.result.spec.title;
-                    isComment: true,
+            this.commentModal.show = true;
-                    postName: this.result.metadata.name,
+        },
-                    title: this.result.spec.title,
+        fnOnComment(data) {
-                    from: 'posts',
+            this.commentModal.isComment = data.isComment;
-                    formPage: 'comment_list',
+            this.commentModal.postName = data.name;
-                    type: 'post'
+            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 => {