170 lines
3.8 KiB
Vue
170 lines
3.8 KiB
Vue
<template>
|
|
<view class="scroll_div">
|
|
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
|
<view class="item" v-for="item in data_list" @click="goto_course_detail(item)">
|
|
<view class="img_div">
|
|
<image-preview class="img" :imgId="item.imgId" mode="scaleToFill"></image-preview>
|
|
</view>
|
|
<view class="right_div">
|
|
<view class="title ellipsis-text">{{ item.crsName }}</view>
|
|
<view class="tag_div">
|
|
<view class="tag" v-for="tag in item.tagCataList">{{ tag.tagName }}</view>
|
|
</view>
|
|
<view class="time_and_num"></view>
|
|
</view>
|
|
</view>
|
|
<list-no-data v-if="total == 0 && status == 'nomore'">暂无数据</list-no-data>
|
|
<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
|
const limit = 20;
|
|
const total = ref(-1);
|
|
const page = ref(0);
|
|
import common from '@/common/common';
|
|
const data_list = reactive([]);
|
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
import { queryTraStdyInfoPreviewPaging } from '@/api/preview.js';
|
|
const getData = (from = '') => {
|
|
if (from == 'first') {
|
|
if (total.value !== -1) {
|
|
return;
|
|
}
|
|
status.value = 'loading';
|
|
total.value = -1;
|
|
page.value = 1;
|
|
data_list.length = 0;
|
|
} else {
|
|
if (status.value !== 'loadmore' && status.value !== '') return;
|
|
status.value = 'loading';
|
|
page.value++;
|
|
}
|
|
queryTraStdyInfoPreviewPaging({
|
|
page: page.value,
|
|
limit: limit
|
|
})
|
|
.then((res) => {
|
|
total.value = res.total;
|
|
data_list.push(...res.body);
|
|
})
|
|
.finally(() => {
|
|
if (data_list.length >= total.value) {
|
|
status.value = 'nomore';
|
|
} else {
|
|
status.value = 'loadmore';
|
|
}
|
|
});
|
|
};
|
|
const scrolltolower = (item) => {
|
|
getData();
|
|
};
|
|
const goto_course_detail = (item) => {
|
|
common.navigateTo('/pages/courseDetail/index?isPreview=preview&crsId=' + item.crsId);
|
|
};
|
|
|
|
defineExpose({
|
|
getData
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll_div {
|
|
background-color: #f1f5fa;
|
|
padding: 22rpx;
|
|
}
|
|
|
|
.scroll-Y {
|
|
height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.scroll-Y .item {
|
|
height: 170rpx;
|
|
margin: 32rpx 22rpx;
|
|
display: flex;
|
|
.img_div {
|
|
position: relative;
|
|
width: 224rpx;
|
|
height: 168rpx;
|
|
overflow: hidden;
|
|
border-radius: 22rpx;
|
|
|
|
.img {
|
|
width: 224rpx;
|
|
height: 168rpx;
|
|
}
|
|
|
|
.subscript {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 78rpx;
|
|
height: 46rpx;
|
|
border-radius: 0px 0px 0px 22rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #ef5705;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.right_div {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-family: PingFangSC;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.tag_div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 38rpx;
|
|
overflow: hidden;
|
|
|
|
.tag {
|
|
height: 38rpx;
|
|
padding: 0 10rpx;
|
|
margin-right: 14rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #ffa150;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #ffa150;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.time_and_num {
|
|
display: flex;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 23rpx;
|
|
color: #999999;
|
|
margin-bottom: 16rpx;
|
|
line-height: 23rpx;
|
|
flex-wrap: nowrap;
|
|
height: 23rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|