dz-app/pages/video-center/index/components/video-page-layout.vue

<template>
    <z-paging ref="paging" v-model="list" @query="handleQuery" @on-refresh="handleRefresh">
        <view v-if="list.length" class="p-30">
            <tree-view :tree-data="list" @leaf-click="handleLeafClick">
                <template #icon="{deep}">
                    <uv-icon v-if="deep==0" name="arrow-right"/>
                </template>
                <template #node="{node, deep}">
                    <view v-if="deep==0" class="flex-1 fx-col gap-5">
                        <text class="text-main font-[PingFang]">{{ node.label }}</text>
                    </view>
                    <view v-else class="flex-1 fx-row items-center gap-10">
                        <uv-icon :name="node.img" width="40" height="40" img-mode="cover"
                                 class="rounded-[20px] overflow-hidden"/>
                        <text class="text-main text-sm font-[PingFang]">{{ node.name }}</text>
                    </view>
                </template>
                <template #command="{node, deep}">
                    <uv-button v-if="deep > 0" type="primary" shape="circle" text="播放" icon="play-circle"
                               icon-color="(--primary-color)" plain :custom-style="{height: '32px'}"
                               @click="handleVideoPlay(node)"/>
                </template>
            </tree-view>
        </view>
    </z-paging>
</template>

<script setup>
import {ref} from 'vue'
import TreeView from "@/pages/topic-center/index/components/tree-view.vue";
import {useCacheStore} from "@/hooks/useCacheStore";
import {cacheActions} from "@/hooks/defineCacheActions";
import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {useTransfer} from "@/hooks/useTransfer";
import mxConst from "@/common/mxConst";

const props = defineProps({
    subject: {
        type: Object,
        default: () => ({})
    }
})
const list = ref([])
const {dispatchCache, removeCache} = useCacheStore()
const {transferTo} = useTransfer()
const paging = ref(null)

const handleQuery = async () => {
    try {
        const {code: subject} = props.subject
        const res = await dispatchCache(cacheActions.getVideoKnowledge, {subject})
        // 默认收起，因为有缓存，防止用户之前打开过多引起渲染缓慢
        res.rows.forEach(k => k.expanded = false)
        // completeByNoMore 非标准返回，后台未分页
        paging.value.completeByNoMore(res.rows, true)
    } catch {
        paging.value.complete(false)
    }
}

const handleRefresh = async () => {
    // 知识点树可以精准清除
    const {code: subject} = props.subject
    removeCache(cacheActions.getVideoKnowledge, {subject})
    // 视频只能全清，但因为缓存结果有挂在知识点上所以，旁边的tab见效没有那么快
    removeCache(cacheActions.getVideoOfKnowledge)
}

const handleLeafClick = async ({node, deep}) => {
    if (deep === 0) {
        node.expanded = !!!node.expanded // 强制展开
        if (empty(node.children)) {
            if (!node.loading) {
                node.loading = true
                try {
                    const payload = {subject: props.subject.code, knowledge: node.code, pageNum: 1, pageSize: 100}
                    const res = await dispatchCache(cacheActions.getVideoOfKnowledge, payload)
                    node.children = res.rows
                } catch (e) {
                    node.expanded = false // 异常强制关闭
                } finally {
                    node.loading = false
                }
            }
        }
    }
}

const handleVideoPlay = (node) => {
    // 尝试传递更多数据，不使用playVideo，启用usingCache
    // playVideo(node.aliId, node.aliIdType, node.name)
    const nodeWithKnowledge = list.value.find(n => n.children?.includes(node))
    transferTo(mxConst.routes.videoPlay, {
        aliId: node.aliId,
        aliIdType: node.aliIdType,
        title: node.name,
        node: nodeWithKnowledge
    }, null, true)
}
</script>

<style scoped>

</style>