358 lines
8.5 KiB
Vue
358 lines
8.5 KiB
Vue
<template>
|
||
<view class="video-page">
|
||
<!-- 日期选择栏 -->
|
||
<view class="date-tabs">
|
||
<view
|
||
v-for="(item, index) in dateList"
|
||
:key="index"
|
||
class="date-tab"
|
||
:class="{ active: item.active }"
|
||
@click="handleDateClick(item)"
|
||
>
|
||
<text class="week">{{ item.week }}</text>
|
||
<text class="day">{{ item.day }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期标题 + 分类筛选（靠右） -->
|
||
<view class="filter-bar">
|
||
<text class="date-title">
|
||
<uni-dateformat :date="Date.now()" format="MM-dd" />
|
||
</text>
|
||
<view class="category-tabs">
|
||
<view
|
||
v-for="(item, index) in categoryList"
|
||
:key="index"
|
||
class="category-item"
|
||
:class="{ active: activeCategory === item.type,
|
||
'filter-btn': item.type === 'filter' }"
|
||
@click="handleCategoryClick(item.type)"
|
||
>
|
||
<image class="icon" :src="item.imgUrl" mode="aspectFill"/>
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 视频列表（带时间轴） -->
|
||
<scroll-view scroll-y class="video-list" v-if="videoList.length>0">
|
||
<view
|
||
v-for="(item, index) in videoList"
|
||
:key="index"
|
||
class="video-item"
|
||
>
|
||
<!-- 时间轴（uni-icons实现） -->
|
||
<view class="time-axis">
|
||
<uni-icons type="circle" size="14" color="#1677ff"></uni-icons>
|
||
<view class="axis-line" v-if="index !== videoList.length"></view>
|
||
</view>
|
||
|
||
<!-- 时间 + 卡片 垂直排列 -->
|
||
<view class="time-card-wrap">
|
||
<!-- 时间 + 未读红点（在卡片正上方） -->
|
||
<view class="time-info">
|
||
<text class="time-text">{{ item.time }}</text>
|
||
<view class="unread-dot" v-if="item.unread"></view>
|
||
</view>
|
||
|
||
<!-- 视频卡片 -->
|
||
<view class="video-card" @click="gotoDetail(item)">
|
||
<view class="video-info">
|
||
<text class="device-name">{{ item.device }}</text>
|
||
<text class="event-type">{{ item.event }}</text>
|
||
</view>
|
||
<image class="video-cover" :src="item.cover" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty__item tn-margin-top" v-else>
|
||
<tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
|
||
text="暂无视频" :imgWidth="200"
|
||
:imgHeight="200"></tn-empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {parseTime} from "@/utils/agri";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
dateList: this.getDateList(),
|
||
activeCategory: 'person',
|
||
categoryList: [
|
||
{type: 'person', name: '人', imgUrl: "https://picsum.photos/id/1015/400/200"},
|
||
{type: 'car', name: '车', imgUrl: "https://picsum.photos/id/1015/400/200"},
|
||
{type: 'animal', name: '动物', imgUrl: "https://picsum.photos/id/1015/400/200"},
|
||
{type: 'filter', name: '筛选', imgUrl: "https://picsum.photos/id/1015/400/200"}
|
||
],
|
||
videoList: [
|
||
{
|
||
time: '13:22:04',
|
||
device: 'DS-2DE4423DW-D/GLT/...',
|
||
event: '画面变化',
|
||
cover: 'https://picsum.photos/id/1015/400/200',
|
||
unread: true
|
||
},
|
||
{
|
||
time: '13:20:20',
|
||
device: 'DS-2DE4423DW-D/G我饿全额钱31313122LT/...',
|
||
event: '画面变化',
|
||
cover: 'https://picsum.photos/id/1015/400/200',
|
||
unread: true
|
||
},
|
||
{
|
||
time: '13:19:12',
|
||
device: 'DS-2DE4423DW-D/GLT/...',
|
||
event: '画面变化',
|
||
cover: 'https://picsum.photos/id/1015/400/200',
|
||
unread: true
|
||
},
|
||
{
|
||
time: '13:18:11',
|
||
device: 'DS-2DE4423DW-D/GLT/...',
|
||
event: '画面变化',
|
||
cover: 'https://picsum.photos/id/1015/400/200',
|
||
unread: true
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
parseTime,
|
||
handleDateClick(item) {
|
||
this.dateList = this.dateList.map(d => ({...d, active: d === item}))
|
||
uni.showToast({title: `切换到${item.day} ${item.week}`})
|
||
// todo 切换日期后，更新视频列表
|
||
// this.videoList = this.getDateList1();
|
||
},
|
||
handleCategoryClick(type) {
|
||
if (type === 'filter') {
|
||
this.handleFilterClick();
|
||
return;
|
||
}
|
||
// todo 切换分类后，更新视频列表
|
||
this.activeCategory = type;
|
||
uni.showToast({title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类`})
|
||
},
|
||
handleFilterClick() {
|
||
// todo 打开筛选面板
|
||
uni.showToast({title: '打开筛选面板'})
|
||
},
|
||
getDateList() {
|
||
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
||
const today = new Date();
|
||
const list = [];
|
||
for (let i = 6; i >= 0; i--) {
|
||
const date = new Date(today);
|
||
date.setDate(today.getDate() - i);
|
||
|
||
list.push({
|
||
week: weekMap[date.getDay()],
|
||
day: i === 0 ? '今' : date.getDate() + '',
|
||
active: i === 0
|
||
});
|
||
}
|
||
return list;
|
||
},
|
||
|
||
getDateList1() {
|
||
const w = ['日', '一', '二', '三', '四', '五', '六'];
|
||
const t = new Date();
|
||
return Array.from({length: 7}, (_, i) => {
|
||
const d = new Date(t);
|
||
d.setDate(t.getDate() - 6 + i);
|
||
return {week: w[d.getDay()], day: i === 6 ? '今' : d.getDate() + '', active: i === 6}
|
||
})
|
||
},
|
||
gotoDetail(item) {
|
||
// 更新已读
|
||
this.$modal.msg("暂未开放！");
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.video-page {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 日期选择栏 */
|
||
.date-tabs {
|
||
display: flex;
|
||
padding: 30rpx 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.date-tab {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #666;
|
||
background: #f7f8fd;
|
||
margin: 0 10rpx;
|
||
//border: 1rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
.date-tab.active {
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
border-color: #1677ff;
|
||
}
|
||
.week {
|
||
font-size: 25rpx;
|
||
margin-bottom: 8rpx;
|
||
color: #bdbdbd;
|
||
}
|
||
.day {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 筛选栏 */
|
||
.filter-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
.date-title {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
.category-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.category-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 20rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 20rpx;
|
||
margin-left: 15rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
.category-item.active {
|
||
background-color: #fff7f0;
|
||
border-color: #ff7d00;
|
||
color: #ff7d00;
|
||
}
|
||
.category-item:nth-child(2).active {
|
||
background-color: #f0f8ff;
|
||
border-color: #00a8ff;
|
||
color: #00a8ff;
|
||
}
|
||
.category-item:nth-child(3).active {
|
||
background-color: #f0f5ff;
|
||
border-color: #4080ff;
|
||
color: #4080ff;
|
||
}
|
||
.filter-btn {
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
.icon {
|
||
margin-right: 6rpx;
|
||
width: 16rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
/* 视频列表 */
|
||
.video-list {
|
||
flex: 1;
|
||
padding: 0 30rpx;
|
||
}
|
||
.video-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 时间轴 */
|
||
.time-axis {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 14rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
.axis-line {
|
||
width: 1rpx;
|
||
height: 170rpx; /* 适配时间+卡片高度 */
|
||
background-color: #e0e0e0;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
/* 时间+卡片 垂直包裹 */
|
||
.time-card-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 时间信息（在卡片正上方） */
|
||
.time-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.time-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
margin-top: 20rpx;
|
||
}
|
||
.unread-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #ff3b30;
|
||
border-radius: 50%;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
/* 视频卡片 */
|
||
.video-card {
|
||
display: flex;
|
||
background-color: #f7f8fd;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
}
|
||
.video-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 0;
|
||
}
|
||
.device-name {
|
||
font-size: 28rpx;
|
||
color: #8f8f8f;
|
||
margin-bottom: 10rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-right: 10rpx;
|
||
}
|
||
.event-type {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.video-cover {
|
||
width: 320rpx;
|
||
height: 180rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
</style> |