开发了很多页面
This commit is contained in:
田岩
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<scroll-view ref="scrollRef" scroll-y="true" class="scroll-Y" :refresher-enabled="false"
|
||||
@refresherrefresh="onRefresh" @refresherrestore="triggered = 'restore'" :refresher-triggered="triggered"
|
||||
refresher-default-style="none" @scrolltolower="scrolltolower">
|
||||
<!-- 主体 -->
|
||||
<view class="content">
|
||||
<view class="drop-down-div"> 下拉显示</view>
|
||||
<view class="item" v-for="(item,index) in data_list" :class="index % 2?'completed':'incomplete'"
|
||||
@click="gotoDetails(item)">
|
||||
<view class="subscript" v-if="item.examStatText==='N'">未完成</view>
|
||||
<view class="subscript" v-if="item.examStatText==='Y'">已完成</view>
|
||||
<view class="title ellipsis-text">
|
||||
{{item.papersName}}
|
||||
</view>
|
||||
<view class="time">
|
||||
<text class="color_3">起止时间：</text><text
|
||||
class="color_class">{{item.examStartTm}}至{{item.examEndTm}}</text>
|
||||
</view>
|
||||
<view class="num_div">
|
||||
<text class="color_3">完成人数：</text><text
|
||||
class="color_2">{{item.execPersionNumer}}/{{item.planPersionNumber}}</text>
|
||||
</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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
nextTick,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import {
|
||||
queryTraExamPapersPage
|
||||
} from '@/api/testingHall.js'
|
||||
import {
|
||||
queryTraCrsBbsInfoByCrsId
|
||||
} from '@/api/courseDetail.js';
|
||||
|
||||
const status = ref('loadmore') // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15
|
||||
const total = ref(-1)
|
||||
const page = ref(0)
|
||||
const data_list = reactive([])
|
||||
|
||||
const triggered = ref(false)
|
||||
const _freshing = ref(false)
|
||||
const offset = ref(0)
|
||||
const scrollRef = ref(null)
|
||||
|
||||
const props = defineProps({
|
||||
searchText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['gotoDetails'])
|
||||
// 刷新处理函数
|
||||
const gotoDetails = (item) => emit('gotoDetails', item)
|
||||
const onRefresh = () => {
|
||||
if (_freshing.value) return
|
||||
_freshing.value = true
|
||||
setTimeout(() => {
|
||||
triggered.value = false
|
||||
_freshing.value = false
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
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++
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
let params = {
|
||||
papersName: props.searchText,
|
||||
page: page.value,
|
||||
limit: limit,
|
||||
}
|
||||
if (props.index == 1) {
|
||||
params.examStat = 'Y'
|
||||
} else if (props.index == 2) {
|
||||
params.examStat = 'N'
|
||||
}
|
||||
queryTraExamPapersPage(params).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'
|
||||
}
|
||||
console.log(status.value);
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
const scrolltolower = () => {
|
||||
getData()
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.incomplete {
|
||||
|
||||
// 进行中
|
||||
.subscript {
|
||||
color: #FFFFFF;
|
||||
background-color: #EF5705;
|
||||
}
|
||||
|
||||
.color_class {
|
||||
color: #D70C18;
|
||||
}
|
||||
}
|
||||
|
||||
.completed {
|
||||
|
||||
// 已完成
|
||||
.subscript {
|
||||
color: #FFFFFF;
|
||||
background-color: #33C583;
|
||||
}
|
||||
|
||||
.color_class {
|
||||
color: #0066FF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subscript {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 0px 0px 0px 22rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 70rpx - 78rpx - 40rpx - 88rpx);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #F1F5FA;
|
||||
|
||||
.content {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
position: relative;
|
||||
padding-top: 22rpx;
|
||||
|
||||
.drop-down-div {
|
||||
position: absolute;
|
||||
top: -90rpx;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #e1eeff;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 44rpx 20rpx 38rpx;
|
||||
margin: 0rpx 22rpx 22rpx 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
line-height: 46rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-top: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.num_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.color_1 {
|
||||
color: #D70C18;
|
||||
}
|
||||
|
||||
.color_2 {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.color_3 {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user