dz-app/pages/video-center/play/play.vue

<template>
    <view class="page-content">
        <mx-nav-bar :title="prevData.title||'视频播放'"/>
        <mx-video :src="prevData.aliId" :ali-id-type="prevData.aliIdType"/>
        <uv-cell-group :title="prevData.node?.label">
            <template #title>
                <text class="font-bold text-sm">{{ prevData.node.label }}</text>
            </template>
            <uv-cell v-for="n in prevData.node?.children" :title="n.name" :icon="n.img"
                     icon-style="width:28px;height:28px;border-radius:14px;" is-link
                     class="bg-white" v-bind="getActiveBinding(n)" @click="handleClick(n)"/>
        </uv-cell-group>
        <uv-gap height="20"/>
    </view>
</template>

<script setup>
import {useTransfer} from "@/hooks/useTransfer";

const {prevData} = useTransfer()

const getActiveBinding = function (node) {
    const binding = node.aliId == prevData.value.aliId
        ? {
            titleStyle: {color: 'var(--primary-color)'},
            rightIconStyle: {color: 'var(--primary-color)'},
            rightIcon: 'play-circle-fill'
        }
        : {
            rightIcon: 'play-circle'
        }
    return binding
}

const handleClick = function (node) {
    if (node.aliId == prevData.value.alidId) return
    // 切换视频播放源
    const {aliId, aliIdType, name: title} = node
    prevData.value = {aliId, aliIdType, title, node: prevData.value.node}
}
</script>

<style scoped lang="scss">
::v-deep .uv-icon__img > div {
    background-size: cover !important;
}
</style>