GithubProxy/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2025-05-19 01:50:15 +09:00
Code Issues Actions Packages Projects Releases Wiki 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
common/mixins/wxshare.mixin.js
View File

@ -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);
}
}
}

501
components/comment-list/comment-list.vue
View File

@ -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>

192
pagesA/comment/comment.vue → components/comment-modal/comment-modal.vue
View File

@ -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);
}
try {
let visitor = uni.getStorageSync('Visitor')
if (visitor) {
},
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;
}
} 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>

10
pages.json
View File

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

86
pagesA/article-detail/article-detail.vue
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 => {