168 lines
3.4 KiB
Vue
168 lines
3.4 KiB
Vue
<template>
|
||
<view class="scroll_div content">
|
||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
|
||
<view class="item" :class="getStatusClass(index)" v-for="(item,index) in data_list">
|
||
<view class="top">
|
||
<view class="type">
|
||
单选题
|
||
</view>
|
||
<view class="score">
|
||
5分
|
||
</view>
|
||
<view class="fl1">
|
||
|
||
</view>
|
||
<view class="right">
|
||
<view class="right_text">
|
||
展开
|
||
</view>
|
||
<uv-icon class="arrow-icon" name="arrow-right"></uv-icon>
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
属于商业银行风险管理“三道防线”的哪些风险管理部门，为什么？
|
||
</view>
|
||
</view>
|
||
<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 = 15
|
||
const total = ref(-1)
|
||
const page = ref(0)
|
||
const data_list = reactive([])
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
nextTick
|
||
} from 'vue'
|
||
import {
|
||
queryTraCrsBbsInfoByCrsId
|
||
} from '@/api/courseDetail.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++
|
||
}
|
||
console.log(status.value, '阿斯顿撒');
|
||
|
||
setTimeout(() => {
|
||
queryTraCrsBbsInfoByCrsId({
|
||
crsId: 'CRS0250181220722025070408313900000018729',
|
||
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'
|
||
}
|
||
})
|
||
}, 200)
|
||
}
|
||
const getStatusClass = (index) => {
|
||
const remainder = index % 3;
|
||
if (remainder === 0) return 'in_progress';
|
||
if (remainder === 1) return 'completed';
|
||
return 'expired';
|
||
};
|
||
const scrolltolower = (item) => {
|
||
getData()
|
||
};
|
||
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;
|
||
|
||
}
|
||
|
||
.scroll-Y .item {
|
||
// height: 170rpx;
|
||
border-radius: 16rpx;
|
||
margin: 32rpx 0;
|
||
padding: 34rpx 30rpx 34rpx 36rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.type {
|
||
width: 108rpx;
|
||
height: 46rpx;
|
||
background: #267EFF;
|
||
border-radius: 8rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 500;
|
||
font-size: 25rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 46rpx;
|
||
}
|
||
|
||
.score {
|
||
margin-left: 24rpx;
|
||
font-family: ArialMT;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
text-align: left;
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.right_text {
|
||
font-family: PingFangSC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.text {
|
||
font-family: PingFangSC;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
}
|
||
</style> |