zhgdyunapp/pages/videoManage/videoGroup.vue

<template>
	<view class="main-content">
		<headers style="position: fixed; top: 0; left: 0; width: 100%; z-index: 10;" :showBack="true">
			<view class="headerName">
				视频播放列表
			</view>
		</headers>
		<view class="content-part" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }">
			<tree-menu v-for="(item,index) in treeData" :key="item.id" :item="item" :treeIndex="treeIndex" @clickItem="clickTreeItem"></tree-menu>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import TreeMenu from '../../components/tree-node/index.vue'
	export default {
		name: 'Study',
		components: {
			TreeMenu
		},
		data() {
			return {
				treeIndex: 1, // 树形层级index
				treeData: [],
				projectSn: "",
				statusBarHeight: 0,
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getVideoGroup();
		},
		methods: {
			clickTreeItem(item){
				console.log(item,777888)
				uni.navigateTo({
					url: './videoList?obj=' + JSON.stringify(item)
				})
			},
			getVideoGroup(){
					var that = this
					let requestData = {
						projectSn: this.projectSn
					}
					this.sendRequest({
						url: "xmgl/videoGroup/tree/list",
						data: requestData,
						success(res){
							console.log('视频分组列表',res)
							that.treeData = res.result;
						}
					})
			}
		}
	}
</script>
<style scoped lang="scss">
	.main-content {
		background: #F4F5FD;
		height: 100vh;
		.content-part{
			.tree-content-compontent:nth-child(2n -1){
				background: #F5F5F5;
			}
			.tree-content-compontent:nth-child(2n){
				background: #FFFFFF;
			}
		}
	}
</style>