Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
tswj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2022-05-28 17:30:02 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
21e1783c5db58bf4ad9c5bee389c64c708300dd1
21e1783c
1 parent
02e44344
✨ feat: 用户反馈操作新增防抖
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
18 additions
and
15 deletions
src/components/VideoCard/index.vue
src/components/VideoCard/index.vue
View file @
21e1783
<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
, useRoute
r } 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)
});
});
...
...
Please
register
or
login
to post a comment