138 lines
2.5 KiB
Vue
138 lines
2.5 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="list">
|
|
<view class="item" v-for="item in listData.list" :key="item.id">
|
|
<view class="cover">
|
|
<image class="img" :src="item.titleImg" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="top">
|
|
<view class="title">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="record">看到{{ item.courseDetailsName }}</view>
|
|
</view>
|
|
<view class="btm">
|
|
<view class="num">更新{{ item.courseDetailsCount }}集</view>
|
|
<view class="btn">继续观看</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<emprty-card v-if="!listData.list.length && listData.status == 'nomore'" />
|
|
<up-loadmore :status="listData.status" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
|
|
|
import { selectByUserId } from '@/api/me/me.js';
|
|
|
|
const type = ref(1);
|
|
const typeList = ref([
|
|
{
|
|
type: 1,
|
|
label: '我的追剧'
|
|
},
|
|
{
|
|
type: 3,
|
|
label: '最近观看'
|
|
}
|
|
]);
|
|
|
|
const listData = reactive({
|
|
list: [],
|
|
page: 1,
|
|
size: 10,
|
|
status: 'loading'
|
|
});
|
|
|
|
// 获取数据
|
|
async function selectByUserIdAjax() {
|
|
try {
|
|
const res = await selectByUserId({
|
|
page: listData.page,
|
|
limit: listData.size,
|
|
classify: type.value
|
|
});
|
|
listData.list = res.records;
|
|
if (res.currPage >= res.totalPage) {
|
|
listData.status = 'nomore';
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
onReachBottom(() => {
|
|
listData.page++;
|
|
selectByUserIdAjax();
|
|
});
|
|
|
|
onLoad((e) => {
|
|
if (e.type) {
|
|
type.value = e.type;
|
|
uni.setNavigationBarTitle({
|
|
title: typeList.value.find((item) => item.type == type.value).label
|
|
});
|
|
}
|
|
selectByUserIdAjax();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
padding: 28upx;
|
|
color: #333;
|
|
font-size: 29upx;
|
|
}
|
|
.list {
|
|
.item {
|
|
padding-bottom: 28upx;
|
|
display: flex;
|
|
.cover {
|
|
width: 150upx;
|
|
height: 200upx;
|
|
margin-right: 28upx;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.top {
|
|
.title {
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
}
|
|
.record {
|
|
color: $uni-zj-color-primary;
|
|
}
|
|
}
|
|
.btm {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 28upx;
|
|
.num {
|
|
color: #999;
|
|
}
|
|
.btn {
|
|
padding: 8upx 12upx;
|
|
color: #fff;
|
|
background: $uni-zj-color-primary;
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|