hookehuyr

🦄 refactor: 写法优化

......@@ -12,7 +12,7 @@
<p>{{ item.kg_name }}</p>
</van-col>
<van-col span="4" style="text-align: center;">
<p style="color: #333333; position: relative; text-align: right;" @click="setComment(item, 'reply')">
<p style="color: #333333; position: relative; text-align: right;" @click="openCommentBox(item, 'reply')">
回复
<span v-if="item.is_new" class="spot">·</span>
</p>
......@@ -21,13 +21,17 @@
</van-row>
<van-row>
<van-col>
<span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>:{{
item.note }}</span>
<span style="color: #222222;">
{{ item.c_action }}
<span style="color: #0B3A72;">@{{ item.c_name }}</span>
:{{ item.note }}
</span>
</van-col>
</van-row>
</div>
<div style="padding: 1rem; background-color: #F7F7F7;" @click="openComment(item)">
<div style="padding: 1rem; background-color: #F7F7F7;"
@click="go('/client/videoDetail/comment', { prod_id: item.prod_id, perf_id: item.perf_id, book_id: item.book_id })">
<van-row>
<van-col span="8" style="position: relative;">
<van-image width="8rem" height="5rem" fit="cover" :src="item.cover" style="vertical-align: text-bottom;">
......@@ -57,17 +61,16 @@
import { no_image, icon_avatar } from '@/utils/generateIcons.js'
import CommentBox from '@/components/CommentBox/index.vue'
import { ref, onActivated } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
// import axios from '@/utils/axios';
import _ from 'lodash'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { Toast } from 'vant';
// import { addPages, store } from '@/hooks/useKeepAlive'
import { myAtmeAPI } from '@/api/C/me'
import { addCommentAPI, addReplyAPI } from '@/api/C/perf'
import { myCommentTimeAPI } from '@/api/C/perf'
import { useGo } from '@/hooks/useGo'
const go = useGo()
const $route = useRoute();
const $router = useRouter();
onBeforeRouteLeave(async () => {
// 更新留言阅读情况
......@@ -85,11 +88,11 @@ const emptyStatus = ref(false);
//
const onLoad = async () => {
const { data } = await myAtmeAPI({ limit: limit.value, offset: offset.value });
_.each(data, item => {
let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
data.forEach(item => {
const arr = item.target_name.split('@'); // 分割评论的动作和姓名
item.c_action = arr[0]; // 评论动作
item.c_name = arr[1]; // 评论姓名
})
});
commentList.value = [...commentList.value, ...data];
offset.value = commentList.value.length;
loading.value = false;
......@@ -109,35 +112,34 @@ const onLoad = async () => {
/******** 留言框相关操作 START *******/
// 回复评论控件
const showCommentBoxPopup = ref(false);
const commentType = ref(''); // 类型 comment 为评论 / 类型 reply 为回复
const commentType = ref(''); // 类型 comment 为评论 | 类型 reply 为回复
const commentId = ref('')
const replayUser = ref('')
/**
* 回复/评论 功能
* @param {*} v 单行评论数据
* @param {*} name 评论姓名
* @param {*} id 评论ID
* @param {*} type 类型 comment 为评论/类型 reply 为回复
* @description 打开 回复/评论 控件
*/
const commentId = ref('')
const replayUser = ref('')
// 打开评论弹框组件
const setComment = (v, type) => {
const openCommentBox = ({ name, id }, type) => {
showCommentBoxPopup.value = true;
commentType.value = type;
replayUser.value = v.name;
commentId.value = v.id;
replayUser.value = name;
commentId.value = id;
}
/**
* 留言/回复 回调
* @param {*} note 留言内容
* @param {*} prod_id 作品ID
* @param {*} comment_id 评论ID
* @description 留言/回复 提交回调
*/
const submitCommentBox = async (note) => {
let params = { note };
let params = { note }; // 基础传值结构,包含留言内容
if (commentType.value === 'comment') {
params.prod_id = $route.query.prod_id;
const { msg } = await addCommentAPI(params);
if (msg === 'OK') {
const { code } = await addCommentAPI(params);
if (code) {
Toast.success('发布成功')
// 刷新列表
location.reload()
......@@ -145,8 +147,8 @@ const submitCommentBox = async (note) => {
}
if (commentType.value === 'reply') {
params.comment_id = commentId.value;
const { msg } = await addReplyAPI(params);
if (msg === 'OK') {
const { code } = await addReplyAPI(params);
if (code) {
Toast.success('发布成功')
// 刷新列表
location.reload()
......@@ -154,62 +156,38 @@ const submitCommentBox = async (note) => {
}
}
const closeCommentBox = (v) => { // 关闭留言框
/**
* @param {*} v
* @description 关闭留言框回调
*/
const closeCommentBox = (v) => {
showCommentBoxPopup.value = v;
}
/******** 留言框相关操作 START *******/
const onClick = (item) => {
// 调整书籍详情页
$router.push({
path: '/client/videoDetail',
query: {
prod_id: item.prod_id,
perf_id: item.perf_id,
book_id: item.book_id
}
});
}
const openComment = (item) => {
$router.push({
path: '/client/videoDetail/comment',
query: {
prod_id: item.prod_id,
perf_id: item.perf_id,
book_id: item.book_id
}
});
}
// const onClick = (item) => {
// // 调整书籍详情页
// $router.push({
// path: '/client/videoDetail',
// query: {
// prod_id: item.prod_id,
// perf_id: item.perf_id,
// book_id: item.book_id
// }
// });
// }
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
// addPages();
onActivated(() => { // keepAlive 重置后执行回调
});
// onActivated(() => { // keepAlive 重置后执行回调
// });
/*********************************************************/
</script>
<script>
export default {
name: 'callMe',
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.comment-wrapper {
color: #999999;
......