hookehuyr

🐞 fix(个人首页): 屏蔽keepAlive,留言版完善read-only判断,返回个人首页时返回原来位置

......@@ -122,7 +122,8 @@ const setComment = () => {
path: '/client/videoDetail/comment',
query: {
prod_id: props.item.id,
book_id: props.item.book_id
book_id: props.item.book_id,
type: props.item.type, // 特殊标识,判断入口 为keepAlive使用
}
});
}
......
......@@ -130,25 +130,25 @@ const followUser = async () => {
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
addPages()
// addPages()
onActivated(() => { // keepAlive 重置后执行回调
// TAG: pinia应用,动态刷新数据
// 处理数据未刷新数据显示问题
const { video_detail } = storeToRefs(store);
// 如果作品信息有变化及时修正
const arr = ref([]);
_.each(userInfo.value.prod, (item) => {
if (item.id === video_detail.value.id) {
item = video_detail.value
}
arr.value.push(item);
})
// 触发更新
userInfo.value.prod = arr.value;
// 滚动恢复
resetScrollTop('scrollTopPerson');
});
// onActivated(() => { // keepAlive 重置后执行回调
// // TAG: pinia应用,动态刷新数据
// // 处理数据未刷新数据显示问题
// const { video_detail } = storeToRefs(store);
// // 如果作品信息有变化及时修正
// const arr = ref([]);
// _.each(userInfo.value.prod, (item) => {
// if (item.id === video_detail.value.id) {
// item = video_detail.value
// }
// arr.value.push(item);
// })
// // 触发更新
// userInfo.value.prod = arr.value;
// // 滚动恢复
// resetScrollTop('scrollTopPerson');
// });
onBeforeRouteLeave(() => {
store.changeScrollTopPerson(window.scrollY)
......
......@@ -20,13 +20,18 @@
<div class="video-main">
<van-row>
<van-col span="24" style="padding-top: 0.2rem;">
<van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
<van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7"
title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
<van-tab title="简介" :title-style="tabClass">
<div class="intro">{{ videoInfo.note }}</div>
<div style="height: 5rem;" />
<donate-bar donate-type="C">为TA助力</donate-bar>
</van-tab>
<van-tab :title="'留言 ' + comment_num" :title-style="tabClass" :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id">
<!-- <van-tab :title="'留言 ' + comment_num" :title-style="tabClass"
:to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id + '&type=' + $route.query.type">
<router-view />
</van-tab> -->
<van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
<router-view />
</van-tab>
</van-tabs>
......@@ -39,11 +44,11 @@
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { axios, storeToRefs, mainStore, Toast } from '@/utils/generatePackage'
import { VideoDetail, DonateBar } from '@/utils/generateModules'
import { icon_avatar } from '@/utils/generateIcons'
import { styleColor } from '@/constant.js';
import { prodInfoAPI } from '@/api/C/prod.js'
const $route = useRoute();
const $router = useRouter();
......@@ -61,8 +66,19 @@ const getUserInfo = () => {
}
const active = ref(0); // index 0 为简介,1 为留言
const onClickTab = ({ title }) => {
// console.warn(title);
const onClickTab = ({ name }) => {
// 适配read-only情况
if (name) {
$router.push({
path: '/client/videoDetail/comment',
query: {
prod_id: $route.query.prod_id,
book_id: $route.query.book_id,
type: $route.query.type,
}
})
}
};
// 监听路由变化
watch(() => $route.path, (v) => {
......@@ -76,43 +92,20 @@ const tabClass = {
}
// 处理主路由的留言数量问题
const store = mainStore()
const store = mainStore();
const { comment_num } = storeToRefs(store);
const videoInfo = ref('');
onMounted(() => {
onMounted(async () => {
// 检查$route.path判断tab默认值
if ($route.path === '/client/videoDetail') {
active.value = 0;
} else {
active.value = 1;
}
$route.path === '/client/videoDetail' ? active.value = 0 : active.value = 1;
/**
* 获取视频详情
*/
axios.get('/srv/?a=prod_info', {
params: {
prod_id: $route.query.prod_id
}
})
.then(res => {
if (res.data.code === 1) {
videoInfo.value = res.data.data;
// 动态调整留言数量
store.changeCommentNum(res.data.data.comment_num);
} else {
console.warn(res);
if (!res.data.show) return false;
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
});
const { data } = await prodInfoAPI({ prod_id: $route.query.prod_id });
videoInfo.value = data;
// 动态调整留言数量
store.changeCommentNum(data.comment_num);
})
const onVideoDetail = (v) => {
......