tnbapp/src/views/home/Region.vue

<template>
  <div class="video-page-container">
    <el-row :gutter="20" class="main-layout">
      <el-col :md="5" :lg="4" class="sidebar-col">
        <el-card class="category-card shadow-sm" :body-style="{ padding: '10px 0' }">
          <div slot="header" class="category-header">
            <i class="el-icon-menu" />
            <span>视频分区</span>
          </div>
          <div class="category-menu-wrapper">
            <el-tree
              ref="categoryTree"
              :accordion="true"
              :data="treeNode"
              :props="defaultProps"
              highlight-current
              node-key="value"
              class="custom-tree"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" class="tree-node-item">
                <i :class="data.icon || 'el-icon-folder'" />
                <span class="node-label">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>

      <el-col :md="19" :lg="20" class="content-col">
        <div v-loading="loading" class="video-grid-wrapper">
          <el-row v-if="dataList && dataList.length > 0" :gutter="16">
            <el-col
              v-for="(video, index) in dataList"
              :key="index"
              :xs="12"
              :sm="8"
              :md="8"
              :lg="6"
              class="video-item"
            >
              <video-card :video="video" class="hover-up" />
            </el-col>
          </el-row>

          <el-empty
            v-else-if="!loading"
            description="该分区下暂无视频内容"
            :image-size="200"
          />

          <div v-if="totalSize > pageSize" class="pagination-container">
            <el-pagination
              background
              :small="screenWidth <= 768"
              layout="prev, pager, next, total"
              :page-size="pageSize"
              :current-page="currentPage"
              :total="totalSize"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VideoCard from 'components/card/VideoCard'
import { categoryVideos, videoCategories } from '@/api/vod'

export default {
  name: 'Region',
  components: { VideoCard },
  data() {
    return {
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      categoryId: 1, // 默认分区 ID
      treeNode: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      loading: false
    }
  },
  watch: {
    // 核心：监听路由变化，当 URL 参数改变时重新加载数据
    '$route': {
      handler: 'loadDataFromRoute',
      immediate: false
    }
  },
  created() {
    document.title = '视频分区 - 探索精彩'
    this.fetchCategories()
    // 初始化：从 URL 中解析参数并加载数据
    this.loadDataFromRoute()
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.screenWidth = document.body.clientWidth
    },
    // 1. 从路由 Query 参数中提取状态
    loadDataFromRoute() {
      const query = this.$route.query
      // 如果 url 有参数则取参数，否则用 data 里的默认值
      this.categoryId = query.category ? parseInt(query.category) : 1
      this.currentPage = query.page ? parseInt(query.page) : 1

      // 同步 Tree 组件的高亮状态
      this.$nextTick(() => {
        if (this.$refs.categoryTree) {
          this.$refs.categoryTree.setCurrentKey(this.categoryId)
        }
      })

      this.videoPageWrapper(this.categoryId, this.currentPage)
    },
    // 2. 更新 URL 的方法（不直接请求接口，交由 watch $route 处理）
    updateRoute() {
      this.$router.push({
        path: this.$route.path,
        query: {
          category: this.categoryId,
          page: this.currentPage
        }
      }).catch(err => {
        // 规避掉重复点击同一路由产生的 NavigationDuplicated 报错
        if (err.name !== 'NavigationDuplicated') throw err
      })
    },
    fetchCategories() {
      videoCategories().then(resp => {
        if (resp.code === 0) {
          this.treeNode = resp.data
          // 获取分类后再次确认 Tree 的选中状态
          this.$nextTick(() => {
            this.$refs.categoryTree.setCurrentKey(this.categoryId)
          })
        }
      })
    },
    handleNodeClick(data) {
      if (this.categoryId === data.value) return
      this.categoryId = data.value
      this.currentPage = 1 // 切换分类时重置为第一页
      this.updateRoute()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.updateRoute()
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    videoPageWrapper(categoryId, currentPage) {
      this.loading = true
      categoryVideos(categoryId, currentPage).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
/* 样式部分保持之前的优化版本不变 */
.video-page-container {
  padding: 25px 5%;
  background-color: #f9fafb;
  min-height: calc(100vh - 60px);
}
.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  border: none !important;
  border-radius: 12px;
}
.category-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
}
.category-header i { margin-right: 8px; color: #409EFF; }
.tree-node-item { display: flex; align-items: center; font-size: 14px; }
.tree-node-item i { margin-right: 10px; font-size: 16px; color: #909399; }
::v-deep .el-tree-node__content { height: 40px !important; margin: 4px 12px; border-radius: 8px; }
::v-deep .el-tree-node.is-current > .el-tree-node__content { background-color: #ecf5ff !important; color: #409EFF; font-weight: 600; }
.video-item { margin-bottom: 20px; }
.hover-up { transition: transform 0.3s; }
.hover-up:hover { transform: translateY(-5px); }
.pagination-container { margin-top: 40px; display: flex; justify-content: center; }
</style>