9.5上午更新
This commit is contained in:
zoujiandong
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<view class="video-search-page">
|
||||
<!-- 头部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
:title="title"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
/>
|
||||
|
||||
<!-- 顶部排序标签 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab"
|
||||
:class="{ active: activeTab === 0 }"
|
||||
@click="switchTab(0)"
|
||||
>
|
||||
<text class="tab-text">上传时间</text>
|
||||
</view>
|
||||
<view
|
||||
class="tab"
|
||||
:class="{ active: activeTab === 1 }"
|
||||
@click="switchTab(1)"
|
||||
>
|
||||
<text class="tab-text">点播量</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<scroll-view
|
||||
class="list-scroll"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
@scrolltolower="onReachBottom"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="isRefreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view class="video-list">
|
||||
<view class="video-item" v-for="(item, idx) in videoList" :key="idx" @click="openDetail(item)">
|
||||
<view class="item-title">{{ item.name }}</view>
|
||||
<view class="item-meta">
|
||||
<text class="item-tag">{{ item.public_name }}</text>
|
||||
</view>
|
||||
<view class="item-date-views">
|
||||
<text class="item-date">{{ formatDate(item.create_date) }}</text>
|
||||
<view class="item-views">
|
||||
<uni-icons type="eye" size="20" color="#999"></uni-icons>
|
||||
<text class="views-text">{{ item.readnum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-footer">
|
||||
<text class="item-source">{{ item.video_type_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import api from '@/api/api.js'
|
||||
const keywords=ref('')
|
||||
const title = ref('肝胆视频')
|
||||
const activeTab = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const hasMore = ref(true)
|
||||
const isRefreshing = ref(false)
|
||||
const videoList = ref([])
|
||||
const sort = ref('2')
|
||||
const from=ref('');
|
||||
const loadListHuanJiao=async (reset = false) => {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
hasMore.value = true
|
||||
videoList.value = []
|
||||
}
|
||||
if (!hasMore.value) return
|
||||
const res = await api.videoBySearchNew({
|
||||
name: keywords.value,
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
sort: sort.value,
|
||||
|
||||
})
|
||||
if (res.code === 200 && res.data) {
|
||||
const list = res.data.list || []
|
||||
videoList.value = [...videoList.value, ...list]
|
||||
if (list.length < pageSize.value) {
|
||||
hasMore.value = false
|
||||
} else {
|
||||
page.value += 1
|
||||
}
|
||||
} else {
|
||||
hasMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadList = async (reset = false) => {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
hasMore.value = true
|
||||
videoList.value = []
|
||||
}
|
||||
if (!hasMore.value) return
|
||||
const res = await api.videoBySearchNew({
|
||||
name: keywords.value,
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
sort: sort.value,
|
||||
|
||||
})
|
||||
if (res.code === 200 && res.data) {
|
||||
const list = res.data.list || []
|
||||
videoList.value = [...videoList.value, ...list]
|
||||
if (list.length < pageSize.value) {
|
||||
hasMore.value = false
|
||||
} else {
|
||||
page.value += 1
|
||||
}
|
||||
} else {
|
||||
hasMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
if(from.value){
|
||||
loadListHuanJiao(true)
|
||||
}else{
|
||||
loadList(true)
|
||||
}
|
||||
})
|
||||
|
||||
const onReachBottom = () => {
|
||||
if(from.value){
|
||||
loadListHuanJiao(false)
|
||||
}else{
|
||||
loadList(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onRefresh = async () => {
|
||||
isRefreshing.value = true
|
||||
if(from.value){
|
||||
await loadListHuanJiao(true)
|
||||
}else{
|
||||
await loadList(true)
|
||||
}
|
||||
isRefreshing.value = false
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.keywords) {
|
||||
keywords.value = options.keywords
|
||||
}
|
||||
if(options.from){
|
||||
from.value = options.from
|
||||
title.value = '患教视频'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const switchTab = (index) => {
|
||||
activeTab.value = index;
|
||||
if(index==0){
|
||||
sort.value='2'
|
||||
}else{
|
||||
sort.value='1'
|
||||
}
|
||||
loadList(true)
|
||||
// 在此触发排序加载逻辑
|
||||
}
|
||||
|
||||
|
||||
|
||||
const openDetail = (item) => {
|
||||
// 打开视频详情/播放页
|
||||
navTo({
|
||||
url: `/pages_app/videoDetail/videoDetail?uuid=${item.uuid}`
|
||||
})
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const formatDate = (val) => {
|
||||
if (!val) return ''
|
||||
try {
|
||||
const d = new Date(val)
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
} catch (e) {
|
||||
return val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$primary: #8B2316;
|
||||
$text-primary: #333;
|
||||
$text-secondary: #666;
|
||||
$text-light: #999;
|
||||
$bg: #f6f6f6;
|
||||
$white: #ffffff;
|
||||
|
||||
.video-search-page {
|
||||
background: $bg;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: fixed;
|
||||
top: 140rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
background: $white;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
.tab {
|
||||
padding: 28rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.tab-text { color: $text-secondary; font-size: 30rpx; }
|
||||
&.active {
|
||||
.tab-text { color: $primary; font-weight: 600; }
|
||||
position: relative;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-scroll {
|
||||
position: fixed;
|
||||
top: 215rpx; // 140rpx 导航 + 100rpx tabs
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
.video-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.video-item {
|
||||
background: $white;
|
||||
padding: 28rpx 32rpx;
|
||||
margin: 20rpx 30rpx 0; // 上 20rpx，左右 30rpx
|
||||
// 去底部分隔线
|
||||
|
||||
.item-title {
|
||||
font-size: 34rpx;
|
||||
color: $primary;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
margin-bottom: 12rpx;
|
||||
.item-tag { color: $text-secondary; font-size: 28rpx; }
|
||||
}
|
||||
|
||||
.item-date-views {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; // 两端分布
|
||||
width: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 2rpx solid #efefef;
|
||||
.item-date { color: $text-secondary; font-size: 28rpx; }
|
||||
.item-views { display: flex; align-items: center; gap: 10rpx; white-space: nowrap; }
|
||||
.views-text { color: $text-secondary; font-size: 28rpx; }
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-source {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user