130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="header">
|
||
|
|
<view class="title">{{ pageTitle }}</view>
|
||
|
|
</view>
|
||
|
|
<scroll-view class="list" scroll-y="true">
|
||
|
|
<view v-if="historyList.length === 0" class="empty">
|
||
|
|
<text>暂无历史视频</text>
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<view class="item" v-for="(item, index) in historyList" :key="index">
|
||
|
|
<view class="item-info">
|
||
|
|
<text class="item-title">{{ itemTitle(item) }}</text>
|
||
|
|
<text class="item-date">{{ formatDate(item.created_at) }}</text>
|
||
|
|
</view>
|
||
|
|
<video v-if="item.video_url" class="video" :src="item.video_url" controls></video>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { baseURLPy } from '@/utils/request.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
type: 'sing',
|
||
|
|
historyList: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
pageTitle() {
|
||
|
|
return this.type === 'dance' ? '跳舞历史视频' : '唱歌历史视频';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
if (options && options.type) {
|
||
|
|
this.type = options.type;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.fetchHistory();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchHistory() {
|
||
|
|
const endpoint = this.type === 'dance' ? 'dance/history' : 'sing/history';
|
||
|
|
uni.request({
|
||
|
|
url: baseURLPy + '/' + endpoint,
|
||
|
|
method: 'GET',
|
||
|
|
header: {
|
||
|
|
'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if (res.data && res.data.code === 1 && res.data.data) {
|
||
|
|
this.historyList = res.data.data;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail: () => {}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
itemTitle(item) {
|
||
|
|
if (this.type === 'dance') {
|
||
|
|
return item.prompt || '跳舞视频';
|
||
|
|
}
|
||
|
|
return item.song_title || '唱歌视频';
|
||
|
|
},
|
||
|
|
formatDate(dateStr) {
|
||
|
|
if (!dateStr) return '';
|
||
|
|
const date = new Date(dateStr);
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
||
|
|
const hour = String(date.getHours()).padStart(2, '0');
|
||
|
|
const minute = String(date.getMinutes()).padStart(2, '0');
|
||
|
|
return `${month}-${day} ${hour}:${minute}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
flex: 1;
|
||
|
|
background: #0b0f1a;
|
||
|
|
padding: 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
padding: 12rpx 0 24rpx;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
height: calc(100vh - 120rpx);
|
||
|
|
}
|
||
|
|
.empty {
|
||
|
|
padding: 40rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
color: rgba(255,255,255,0.7);
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
margin-bottom: 24rpx;
|
||
|
|
padding: 18rpx;
|
||
|
|
background: rgba(255,255,255,0.06);
|
||
|
|
border-radius: 16rpx;
|
||
|
|
}
|
||
|
|
.item-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
.item-title {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-bottom: 6rpx;
|
||
|
|
}
|
||
|
|
.item-date {
|
||
|
|
color: rgba(255,255,255,0.6);
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
.video {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
}
|
||
|
|
</style>
|