cnbugs/uni-halo
1
0
派生 0
镜像自地址 https://github.com/ialley-workshop-open/uni-halo.git 已同步 2026-06-12 13:19:31 +08:00
代码 工单 活动

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

浏览代码
这个提交包含在：
小莫唐尼
2024-06-26 00:19:35 +08:00
父节点 e7a00c5b69
当前提交 85227a8aa4
共修改 5 个文件，包含 477 行新增和 433 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
common/mixins/wxshare.mixin.js
+5 -6
查看文件
@@ -1,20 +1,20 @@
// 微信分享配置
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 || {}
return configs?.shareConfig || {}
}
},
//#ifdef MP-WEIXIN
onShareAppMessage(res) {
return {
...this.haloWxShareData,
success: res => {}
success: res => {
}
}
},
//#endif
@@ -60,7 +60,6 @@ export const haloWxShareMixin = {
}, config)
uni.$tm.vx.commit('setWxShare', _config);
this.haloWxShareData = _config;
}
}
}
components/comment-list/comment-list.vue
+20 -19
查看文件
@@ -9,28 +9,30 @@
</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">
<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">
<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>
@@ -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,18 +172,16 @@
};
}
uni.$tm.vx.commit('comment/setCommentInfo', _comment);
this.$Router.push({
path: '/pagesA/comment/comment',
query: _comment
});
this.$emit("on-comment", {
_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
pagesA/comment/comment.vue → components/comment-modal/comment-modal.vue
+101 -71
查看文件
@@ -1,45 +1,62 @@
<template>
<view class="app-page pa-6">
<view class="content pt-24 pb-24 round-4">
<!-- 表单区域 -->
<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 :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="请输入您的头像..."
<tm-input name="avatar" align="right" 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="请输入您的网址..."
<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 navtie-type="form" theme="bg-gradient-blue-accent" block>提交
</tm-button>
</view>
</tm-form>
</view>
</view>
</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);
}
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) {
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);
}
}
.poup-content {
width: 500rpx;
::v-deep {
.slider_id {
width: 100% !important;
}
}
<style lang="scss" scoped>
.title {
margin: 24rpx 0;
}
</style>
pages.json
-10
查看文件
@@ -225,16 +225,6 @@
}
}
},
{
"path": "comment/comment",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
},
"meta": {
"auth": "login"
}
},
{
"path": "disclaimers/disclaimers",
"style": {
pagesA/article-detail/article-detail.vue
+51 -27
查看文件
@@ -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,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({
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 => {