pan-mini/pages/home/home.nvue

<template>
  <smart-tabs
        :tabs="tabs" 
        :initial-index="current"
        :activeColor="'#19c324'"
        @change="handleTabChange"
      />
  <image-grid-simple 
      :imageList="list"
      :columns="2"
      :height="'80vh'"
      @image-click="handlerClick"
      @load-more-action = "queryList"
    >
      
    <!-- <template #empty>
      <view class="custom-empty">
        <image src="/static/images/no-videos.png" />
        <text>没有找到视频内容</text>
      </view>
    </template> -->
  </image-grid-simple>
</template>

<script>
  import {checkLoginStatus} from '@/utils/login.js'
  export default {
    data() {
      return {
        current: 0,
        tabs: [
          { label: '热门', name: 'hot', badge: 0 },
          { label: '最新', name: 'new', badge: 0 },
        ],
        page:1,
        size:6,
        tag:'hot',
        isEnd:false,
        videoConfig:{
          "columns":2
        },
        list:[],
      }
    },
    onLoad() {
       uni.$on('LOGIN_SUCCESS', this.handleLoginSuccess);
       if (checkLoginStatus()){
         this.queryList()
       } 
    },
      onUnload() {
        // 🔥 移除监听避免内存泄漏
        uni.$off('LOGIN_SUCCESS', this.handleLoginSuccess);
      },
    methods: {
      handleTabChange(idx) {
        this.current = idx;
        this.tag = this.tabs[idx]?.name
        this.isEnd = false
        this.list = []
        this.page = 1
        this.queryList()
      },
      handlerClick(item) {
        console.log("video click",item)
        // 请求详情
        uni.navigateTo({
          url: '/pages/detail/detail?id='+item.id, // 支持路径传参
          success: () => console.log('跳转成功'),
          fail: err => console.error('跳转失败', err)
        });
      },
      handleLoginSuccess(event) {
        console.log('检测到登录成功，刷新首页数据');
        this.queryList()
      },
      queryList() {
        if (this.isEnd) {
          uni.showToast({
            title: '没有更多数据了哦!^v^',
            icon: 'none',
            complete: () => {
              console.log("no more data")
            }
          });
          return
        }
        let param = {
          index:this.page,
          size:this.size,
          tag:this.tag,
        }
        try {
          uni.$http.get('/resource/list',param).then((resp) => {
            console.log("resp data",resp.data);
            resp.data?.list.forEach((item,idx)=>{
              this.list.push({
                id:item?.id,
                name:item?.name,
                src:item?.thumb_src,
                android_src:item?.android_src,
              });
            });
            console.log("length:",this.list.length,resp.data.page.rows,resp.data.page)
            if (this.list.length >= resp.data.page.rows) {
              this.isEnd = true
            } else {
              this.isEnd = false
            }
            this.page++
          })
        }catch(err) {
          console.log("catch query list err:",err)
        }
        
        
      }
    }
  }
</script>

<style lang="scss">
  
.sview{
  width: 100%;
  height: 800rpx;
  background-color: #19c324;
}
.tab-row {
  width: 100%;
}

.tab-item {
  height: 70rpx;
  width: 80rpx;
  font-size: 30rpx;
  place-items: center;
  align-self: center;
  justify-content: center;
  color: #000;;
  border-bottom: 0px solid #19c324;
  &.active {
    color: #19c324;
    font-weight: bold;
    // border-bottom: 2px solid #19c324;
  }
}

.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
}

// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

.hot-section {
  height: 500rpx;
}

.video-container {
  padding: 20rpx;
  height:100dvh;
  background-color: #f5f5f5;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 20rpx; /* 间距 */
}

.video-item {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-player {
  width: 100%;
  /* 16:9 宽高比 */
  aspect-ratio: 16/9;
  background-color: #000;
  border-radius: 16rpx 16rpx 0 0;
}

.video-info {
  padding: 20rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-meta {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.video-author {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-views {
  flex-shrink: 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .video-grid {
    gap: 10rpx;
  }
  
  .video-info {
    padding: 10rpx;
  }
  
  .video-title {
    font-size: 26rpx;
  }
  
  .video-meta {
    font-size: 22rpx;
  }
}

/* 平板和桌面布局 */
@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr); /* 四列布局 */
  }
}

</style>