mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 05:09:29 +08:00
refactor: 重构评论功能，评论页面改为弹窗方式
This commit is contained in:
小莫唐尼
@@ -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>
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<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 {
|
||||
isShow: false,
|
||||
params: {
|
||||
postName: '',
|
||||
title: '', // 被回复的标题 type=user =用户名 否则为文章标题
|
||||
form: '',
|
||||
formPage: '', // 来自哪个页面
|
||||
type: 'post' // 来源文章/页面 还是用户 user=用户
|
||||
},
|
||||
form: {
|
||||
allowNotification: true,
|
||||
author: '', // 作者
|
||||
avatar: '',
|
||||
authorUrl: '', // 作者主页
|
||||
content: '', // 评论内容
|
||||
email: '', // 邮件
|
||||
postName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
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) 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;
|
||||
}
|
||||
}
|
||||
},
|
||||
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地址！');
|
||||
// }
|
||||
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();
|
||||
this.handleClose(true)
|
||||
this.handleResetForm()
|
||||
})
|
||||
.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();
|
||||
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 lang="scss" scoped>
|
||||
.title {
|
||||
margin: 24rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user