cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 13:19:31 +08:00
Code Issues Activity

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

Browse Source
This commit is contained in:
小莫唐尼
2024-06-26 00:19:35 +08:00
parent e7a00c5b69
commit 85227a8aa4
5 changed files with 477 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesA/article-detail/article-detail.vue
+55 -31
View File
@@ -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 => {
pagesA/comment/comment.vue
-201
View File
@@ -1,201 +0,0 @@
<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>
</template>
<script>
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 {
components: {
tmForm,
tmInput,
tmSwitch,
tmButton
},
data() {
return {
isComment: true,
params: {
postName: '',
title: '', // 被回复的标题 type=user =用户名 否则为文章标题
form: '',
formPage: '', // 来自哪个页面
type: 'post' // 来源文章/页面 还是用户 user=用户
},
form: {
allowNotification: true,
author: '', // 作者
avatar: '',
authorUrl: '', // 作者主页
content: '', // 评论内容
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 {
let visitor = uni.getStorageSync('Visitor')
if (visitor) {
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: {
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地址！');
}
this.fnHandle();
},
handleSetVisitor() {
uni.setStorageSync('Visitor', JSON.stringify({
author: this.form.author,
avatar: this.form.avatar,
email: this.form.email,
authorUrl: this.form.authorUrl,
}))
},
fnHandle() {
uni.showLoading({
title: '正在提交...'
});
// 评论
if (this.isComment) {
const commentForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
subjectRef: {
group: "content.halo.run",
kind: "Post",
name: this.form.postName,
version: "v1alpha1",
}
}
this.$httpApi.v2.addPostComment(commentForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("评论失败");
});
return;
}
// 回复
const replyForm = {
allowNotification: true,
raw: this.form.content,
content: this.form.content,
owner: {
avatar: this.form.avatar,
displayName: this.form.author,
email: this.form.email,
website: this.form.authorUrl,
},
quoteReply: this.form.postName
}
this.$httpApi.v2.addPostCommentReply(this.form.postName, replyForm)
.then(res => {
uni.$tm.toast('提交成功！');
// 更新评论者信息
this.handleSetVisitor();
setTimeout(() => {
uni.navigateBack()
}, 1500)
})
.catch(err => {
uni.$tm.toast("回复失败");
});
}
}
};
</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>