816 lines
20 KiB
Vue
816 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view class="history-container" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<view class="nav-bar">
|
|||
|
|
<view class="nav-left" @click="goBack">
|
|||
|
|
<text class="iconfont icon-fanhui"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="nav-title">饮食记录</view>
|
|||
|
|
<view class="nav-right"> </view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- Tab切换 -->
|
|||
|
|
<view class="tab-bar">
|
|||
|
|
<view
|
|||
|
|
v-for="(tab, index) in tabs"
|
|||
|
|
:key="index"
|
|||
|
|
:class="['tab-item', selectedTab === tab.value ? 'active' : '']"
|
|||
|
|
@click="switchTab(tab.value)"
|
|||
|
|
>
|
|||
|
|
<text class="tab-text">{{ tab.label }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容区 -->
|
|||
|
|
<scroll-view scroll-y class="content-scroll" :style="{ height: scrollViewHeight }" @scrolltolower="loadMore">
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" v-if="historyList.length === 0 && !isLoading">
|
|||
|
|
<text class="empty-icon">🍽️</text>
|
|||
|
|
<text class="empty-text">暂无饮食记录</text>
|
|||
|
|
<button class="empty-btn" @click="goToCheckin">去打卡</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 历史列表 -->
|
|||
|
|
<view class="history-list" v-else>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in historyList"
|
|||
|
|
:key="index"
|
|||
|
|
class="history-item"
|
|||
|
|
@click="viewDetail(item)"
|
|||
|
|
>
|
|||
|
|
<!-- 左侧图片预览 -->
|
|||
|
|
<view class="item-images">
|
|||
|
|
<image
|
|||
|
|
v-if="item.photos && item.photos.length > 0"
|
|||
|
|
:src="item.photos[0]"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
class="preview-image"
|
|||
|
|
></image>
|
|||
|
|
<view class="no-image" v-else>
|
|||
|
|
<text>无图</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="image-count" v-if="item.photos && item.photos.length > 1">
|
|||
|
|
<text class="count-text">+{{ item.photos.length - 1 }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 餐次标识 -->
|
|||
|
|
<view class="status-badge status-completed">
|
|||
|
|
<text class="status-text">{{ getMealTypeText(item.mealType) }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 视频状态标记 -->
|
|||
|
|
<view class="video-status-badge" v-if="item.enableAIVideo">
|
|||
|
|
<text v-if="item.videoUrl || item.videoStatus === 1" class="status-success">📹</text>
|
|||
|
|
<text v-else-if="item.videoStatus === 2" class="status-failed">❌</text>
|
|||
|
|
<text v-else class="status-pending">⏳</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧信息 -->
|
|||
|
|
<view class="item-info">
|
|||
|
|
<view class="info-header">
|
|||
|
|
<text class="item-prompt">{{ item.notes || '健康饮食打卡' }}</text>
|
|||
|
|
<!-- <view class="item-actions" @click.stop="showItemMenu(item)">
|
|||
|
|
<text class="iconfont icon-gengduo">⋮</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="info-meta">
|
|||
|
|
<view class="meta-tags">
|
|||
|
|
<text class="meta-tag">{{ item.date }}</text>
|
|||
|
|
<text class="meta-tag" v-if="item.points > 0">+{{ item.points }}积分</text>
|
|||
|
|
<!-- 视频状态文字提示 -->
|
|||
|
|
<text class="meta-tag video-tag" v-if="item.videoUrl || item.videoStatus === 1">有视频</text>
|
|||
|
|
<text class="meta-tag video-tag generating" v-else-if="item.enableAIVideo && item.taskId && item.videoStatus === 0">生成中</text>
|
|||
|
|
<text class="meta-tag video-tag failed" v-else-if="item.videoStatus === 2">视频失败</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- AI分析状态 -->
|
|||
|
|
<view class="item-remark" v-if="item.aiAnalysis">
|
|||
|
|
<text class="remark-text">{{ item.aiAnalysis }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<view class="load-more" v-if="hasMore && historyList.length > 0">
|
|||
|
|
<text class="load-text">{{ isLoading ? '加载中...' : '加载更多' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 操作菜单 -->
|
|||
|
|
<view class="action-sheet" v-if="showActionSheet" @click="showActionSheet = false">
|
|||
|
|
<view class="action-content" @click.stop>
|
|||
|
|
<view class="action-title">操作</view>
|
|||
|
|
<view
|
|||
|
|
v-for="(action, index) in currentActions"
|
|||
|
|
:key="index"
|
|||
|
|
class="action-item"
|
|||
|
|
@click="handleAction(action.value)"
|
|||
|
|
>
|
|||
|
|
<text class="action-text">{{ action.label }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-cancel" @click="showActionSheet = false">
|
|||
|
|
<text>取消</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getCheckinList, getVideoTaskStatus } from '@/api/tool.js';
|
|||
|
|
import { mapGetters } from 'vuex';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['userInfo', 'uid'])
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
scrollViewHeight: '100vh',
|
|||
|
|
|
|||
|
|
// Tab
|
|||
|
|
selectedTab: '',
|
|||
|
|
tabs: [
|
|||
|
|
{ label: '全部', value: '' },
|
|||
|
|
{ label: '早餐', value: 'breakfast' },
|
|||
|
|
{ label: '午餐', value: 'lunch' },
|
|||
|
|
{ label: '晚餐', value: 'dinner' },
|
|||
|
|
{ label: '加餐', value: 'snack' },
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 历史记录
|
|||
|
|
historyList: [],
|
|||
|
|
|
|||
|
|
// 分页
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
hasMore: true,
|
|||
|
|
isLoading: false,
|
|||
|
|
|
|||
|
|
// 视频轮询
|
|||
|
|
pollingTimer: null,
|
|||
|
|
pollingCount: 0,
|
|||
|
|
maxPollingCount: 60, // 最多轮询60次(5分钟)
|
|||
|
|
|
|||
|
|
// 操作菜单
|
|||
|
|
showActionSheet: false,
|
|||
|
|
currentItem: null,
|
|||
|
|
currentActions: []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad() {
|
|||
|
|
this.initPage();
|
|||
|
|
this.loadHistoryList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onShow() {
|
|||
|
|
// 从其他页面返回时重新检查
|
|||
|
|
if (this.historyList.length > 0) {
|
|||
|
|
this.loadHistoryList(true);
|
|||
|
|
}
|
|||
|
|
this.startPolling();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUnload() {
|
|||
|
|
this.stopPolling();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
initPage() {
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|||
|
|
|
|||
|
|
// 计算滚动区域高度
|
|||
|
|
const navHeight = 44 + 44; // 导航+Tab
|
|||
|
|
this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight}px)`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换Tab
|
|||
|
|
switchTab(tabValue) {
|
|||
|
|
if (this.selectedTab === tabValue) return;
|
|||
|
|
this.selectedTab = tabValue;
|
|||
|
|
this.loadHistoryList(true);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载历史记录列表
|
|||
|
|
async loadHistoryList(refresh = false) {
|
|||
|
|
if (this.isLoading) return;
|
|||
|
|
|
|||
|
|
if (refresh) {
|
|||
|
|
this.currentPage = 1;
|
|||
|
|
this.hasMore = true;
|
|||
|
|
this.historyList = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.hasMore) return;
|
|||
|
|
|
|||
|
|
this.isLoading = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await getCheckinList({
|
|||
|
|
mealType: this.selectedTab,
|
|||
|
|
page: this.currentPage,
|
|||
|
|
limit: this.pageSize
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
const list = (res.data.list || res.data || []).map(item => {
|
|||
|
|
// 解析photos
|
|||
|
|
let photos = [];
|
|||
|
|
if (item.photos) {
|
|||
|
|
try {
|
|||
|
|
// 如果是字符串，尝试解析JSON
|
|||
|
|
if (typeof item.photos === 'string') {
|
|||
|
|
photos = JSON.parse(item.photos);
|
|||
|
|
} else if (Array.isArray(item.photos)) {
|
|||
|
|
photos = item.photos;
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('解析图片数据失败:', e);
|
|||
|
|
// 如果解析失败，可能是单个URL字符串，或者是无法解析的字符串
|
|||
|
|
if (typeof item.photos === 'string' && item.photos.startsWith('http')) {
|
|||
|
|
photos = [item.photos];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
photos: photos,
|
|||
|
|
date: item.createTime, // 使用 createTime 作为显示日期
|
|||
|
|
points: item.points || 0, // 接口可能没有返回积分，默认0
|
|||
|
|
aiAnalysis: item.aiAnalysis || item.nutritionScore, // AI分析结果
|
|||
|
|
taskId: item.taskId || null, // 视频任务ID
|
|||
|
|
videoUrl: item.videoUrl || null, // 视频URL
|
|||
|
|
videoStatus: item.videoStatus !== undefined ? item.videoStatus : null, // 视频状态
|
|||
|
|
enableAIVideo: item.enableAIVideo || false // 是否启用AI视频
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (refresh) {
|
|||
|
|
this.historyList = list;
|
|||
|
|
} else {
|
|||
|
|
this.historyList = [...this.historyList, ...list];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否还有更多
|
|||
|
|
if (list.length < this.pageSize) {
|
|||
|
|
this.hasMore = false;
|
|||
|
|
} else {
|
|||
|
|
this.currentPage++;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 启动轮询检查视频任务
|
|||
|
|
this.startPolling();
|
|||
|
|
} else {
|
|||
|
|
throw new Error(res?.message || '获取记录失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载历史记录失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '加载失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
this.isLoading = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
loadMore() {
|
|||
|
|
if (this.hasMore && !this.isLoading) {
|
|||
|
|
this.loadHistoryList(false);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 去打卡
|
|||
|
|
goToCheckin() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/tool/checkin-publish'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 查看详情
|
|||
|
|
viewDetail(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/tool/checkin-detail?id=${item.id}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 显示管理菜单
|
|||
|
|
showManageMenu() {
|
|||
|
|
this.currentActions = [
|
|||
|
|
{ label: '刷新列表', value: 'refresh' }
|
|||
|
|
];
|
|||
|
|
this.showActionSheet = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 显示单项菜单
|
|||
|
|
showItemMenu(item) {
|
|||
|
|
this.currentItem = item;
|
|||
|
|
this.currentActions = [
|
|||
|
|
{ label: '查看详情', value: 'view' },
|
|||
|
|
// { label: '删除', value: 'delete' } // 暂未实现删除接口
|
|||
|
|
];
|
|||
|
|
this.showActionSheet = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理操作
|
|||
|
|
handleAction(action) {
|
|||
|
|
this.showActionSheet = false;
|
|||
|
|
|
|||
|
|
switch (action) {
|
|||
|
|
case 'view':
|
|||
|
|
this.viewDetail(this.currentItem);
|
|||
|
|
break;
|
|||
|
|
case 'refresh':
|
|||
|
|
this.loadHistoryList(true);
|
|||
|
|
break;
|
|||
|
|
case 'delete':
|
|||
|
|
uni.showToast({ title: '删除功能开发中', icon: 'none' });
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getMealTypeText(type) {
|
|||
|
|
const map = {
|
|||
|
|
breakfast: '早餐',
|
|||
|
|
lunch: '午餐',
|
|||
|
|
dinner: '晚餐',
|
|||
|
|
snack: '加餐'
|
|||
|
|
};
|
|||
|
|
return map[type] || type;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 启动视频任务轮询
|
|||
|
|
startPolling() {
|
|||
|
|
if (this.pollingTimer) return;
|
|||
|
|
|
|||
|
|
const tasksToCheck = this.historyList.filter(item =>
|
|||
|
|
item.enableAIVideo && item.taskId && !item.videoUrl && item.videoStatus !== 2
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (tasksToCheck.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.pollingTimer = setInterval(() => {
|
|||
|
|
this.pollVideoTasks();
|
|||
|
|
}, 5000); // 每5秒查询一次
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 轮询视频任务状态
|
|||
|
|
async pollVideoTasks() {
|
|||
|
|
const tasksToCheck = this.historyList.filter(item =>
|
|||
|
|
item.enableAIVideo && item.taskId && !item.videoUrl && item.videoStatus !== 2
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (tasksToCheck.length === 0 || this.pollingCount >= this.maxPollingCount) {
|
|||
|
|
this.stopPolling();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.pollingCount++;
|
|||
|
|
|
|||
|
|
for (const task of tasksToCheck) {
|
|||
|
|
try {
|
|||
|
|
const res = await getVideoTaskStatus(task.taskId);
|
|||
|
|
if (res.code === 200 && res.data) {
|
|||
|
|
const status = res.data.state;
|
|||
|
|
if (status === 'success') {
|
|||
|
|
// 任务成功，刷新列表获取最新视频URL
|
|||
|
|
this.loadHistoryList(true);
|
|||
|
|
this.pollingCount = 0; // 重置计数
|
|||
|
|
break;
|
|||
|
|
} else if (status === 'fail') {
|
|||
|
|
// 任务失败，刷新列表以更新失败状态，停止对该任务的轮询
|
|||
|
|
this.loadHistoryList(true);
|
|||
|
|
this.pollingCount = 0; // 重置计数
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('查询视频任务失败:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 停止轮询
|
|||
|
|
stopPolling() {
|
|||
|
|
if (this.pollingTimer) {
|
|||
|
|
clearInterval(this.pollingTimer);
|
|||
|
|
this.pollingTimer = null;
|
|||
|
|
}
|
|||
|
|
this.pollingCount = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.history-container {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f4f5f7;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 顶部导航
|
|||
|
|
.nav-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 44px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
|
|||
|
|
.nav-left,
|
|||
|
|
.nav-right {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Tab栏
|
|||
|
|
.tab-bar {
|
|||
|
|
display: flex;
|
|||
|
|
height: 44px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
z-index: 99;
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #999999;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
.tab-text {
|
|||
|
|
color: #ff6b35;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 24px;
|
|||
|
|
height: 3px;
|
|||
|
|
background: #ff6b35;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 内容滚动区
|
|||
|
|
.content-scroll {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 空状态
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding-top: 100px;
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 60px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-btn {
|
|||
|
|
width: 160px;
|
|||
|
|
height: 44px;
|
|||
|
|
background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
|
|||
|
|
border-radius: 22px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border: none;
|
|||
|
|
line-height: 44px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 历史列表
|
|||
|
|
.history-list {
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
|
|||
|
|
.history-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 16px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
min-height: 100px;
|
|||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.99);
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-images {
|
|||
|
|
width: 96px;
|
|||
|
|
height: 96px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
|
|||
|
|
.preview-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #cccccc;
|
|||
|
|
font-size: 12px;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-count {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 4px;
|
|||
|
|
right: 4px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
.count-text {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 4px;
|
|||
|
|
left: 4px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ff6b35;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-status-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 4px;
|
|||
|
|
right: 4px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
min-width: 0;
|
|||
|
|
padding: 2px 0;
|
|||
|
|
|
|||
|
|
.info-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.item-prompt {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-actions {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: -2px;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-meta {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
|
|||
|
|
.meta-tags {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.meta-tag {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999999;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
color: #ff6b35;
|
|||
|
|
background: rgba(255, 107, 53, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.video-tag {
|
|||
|
|
color: #52c41a;
|
|||
|
|
background: rgba(82, 196, 26, 0.1);
|
|||
|
|
|
|||
|
|
&.generating {
|
|||
|
|
color: #1890ff;
|
|||
|
|
background: rgba(24, 144, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.failed {
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
background: rgba(255, 77, 79, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-remark {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
padding: 8px;
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
.remark-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
.load-more {
|
|||
|
|
padding: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.load-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 操作菜单
|
|||
|
|
.action-sheet {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
z-index: 9999;
|
|||
|
|
|
|||
|
|
.action-content {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 16px 16px 0 0;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.action-title {
|
|||
|
|
padding: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #999999;
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
background: #ffffff;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-cancel {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
padding: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-top: 1px solid #eeeeee;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|