hookehuyr

✨ feat: 用户反馈操作新增防抖

<template>
<div class="video-wrapper">
<div class="video-div" :id="'mui-player-' + item.id"></div>
<div :id="'mui-player-' + item.id" class="video-div" />
<div class="normal-module">
<div class="video-bar">
<van-row>
......@@ -25,11 +25,9 @@
</van-col>
</van-row>
</div>
<slot name="bookDetailSub"></slot>
</div>
<div class="audit-module">
<slot name="bookDetailSub" />
</div>
<div class="audit-module" />
</div>
</template>
......@@ -38,22 +36,26 @@
* 视频组件通用模块
*/
import { icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
import { ref, reactive, onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import { _, Toast } from '@/utils/generatePackage.js'
import { useRoute, useRouter } from 'vue-router'
import { useRouter } from 'vue-router'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
const $route = useRoute();
const $router = useRouter();
const props = defineProps({
item: Object
item: {
type: Object,
}
})
// 作品用户操作
async function handleAction(action_type, prod_id) {
/**
* 两个请求顺序执行,处理直接写在请求函数里面似乎有点问题,get请求数据似乎无法顺利渲染显示
*/
// FIXME:防抖处理
const handleAction = _.debounce(async (action_type, prod_id) => {
const { msg } = await prodActionAPI({ action_type, prod_id });
if (msg === `${action_type}-add-OK`) { // 动作操作成功
if (action_type === 'favor') {
......@@ -62,15 +64,16 @@ async function handleAction(action_type, prod_id) {
if (action_type === 'like') {
Toast('点赞成功');
}
} else { // 取消操作
} else { // 取消操作,播放动作不提示
if (action_type !== 'play') {
Toast('取消成功');
}
}
getProductDetail(action_type, prod_id); // 更新信息
}
}, 500, { leading: true, trailing: false });
// 查询作品详情
async function getProductDetail(action_type, prod_id) {
const getProductDetail = async (action_type, prod_id) => {
const { data } = await prodInfoAPI({ prod_id });
// 更新详情显示
detail.value[`is_${action_type}`] = data[`is_${action_type}`];
......@@ -95,7 +98,7 @@ onMounted(() => {
detail.value = _.cloneDeep(props.item);
const video = mp.video();
// 监听原生video事件
video && video.addEventListener('play', function (event) {
video && video.addEventListener('play', function () {
handleAction('play', props.item.id)
});
});
......