|
|
|
|
@ -15,28 +15,34 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="calendar-box"> |
|
|
|
|
<calendar /> |
|
|
|
|
<calendar ref="calendar" @change="changeRecord"/> |
|
|
|
|
</view> |
|
|
|
|
<view class="record-list"> |
|
|
|
|
<view class="list-title"> |
|
|
|
|
—— 打卡记录 —— |
|
|
|
|
</view> |
|
|
|
|
<view v-for="(item, index) in recordList" :key="index" class="list-item"> |
|
|
|
|
<view class="item-top flex flex-center-x"> |
|
|
|
|
<view v-for="(item, index) in recordList" :key="index" class="list-item flex"> |
|
|
|
|
<view class="item-left"> |
|
|
|
|
<view>{{ item.name }}</view> |
|
|
|
|
<view>{{ item.score }}分</view> |
|
|
|
|
<view v-if="item.type === 2" class="time">用时：{{ item.use_time }}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item-bottom flex flex-center-x"> |
|
|
|
|
<view>用时：{{ item.time }}</view> |
|
|
|
|
<view class="item-right"> |
|
|
|
|
<view v-if="item.type === 2" class="score">{{ item.score }}分</view> |
|
|
|
|
<view>{{ item.date }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view v-if="recordList.length && !loading" class="finished">{{ loadTitle }}</view> |
|
|
|
|
<view v-if="finished && !recordList.length" class="empty"> |
|
|
|
|
<image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无记录" /> |
|
|
|
|
<view>暂无消息</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</BaseContainer> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { getDateRecordList } from '@/api/learning'; |
|
|
|
|
import Calendar from './components/calendar.vue'; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
@ -46,17 +52,51 @@ |
|
|
|
|
return { |
|
|
|
|
totalClock: 50, |
|
|
|
|
todayClock: false, |
|
|
|
|
recordList: [ |
|
|
|
|
{ name: '英语四级考试专项训练', time: '01:23:52', score: '98', date: '2023-10-20' }, |
|
|
|
|
{ name: '英语四级考试专项训练', time: '01:23:52', score: '98', date: '2023-10-20' }, |
|
|
|
|
{ name: '英语四级考试专项训练', time: '01:23:52', score: '98', date: '2023-10-20' }, |
|
|
|
|
{ name: '英语四级考试专项训练', time: '01:23:52', score: '98', date: '2023-10-20' }, |
|
|
|
|
{ name: '英语四级考试专项训练', time: '01:23:52', score: '98', date: '2023-10-20' }, |
|
|
|
|
] |
|
|
|
|
recordList: [], |
|
|
|
|
page: 1, |
|
|
|
|
limit: 10, |
|
|
|
|
loading: false, |
|
|
|
|
finished: false, |
|
|
|
|
loadTitle: '', |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.getRecordList(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
onReachBottom() { |
|
|
|
|
this.getRecordList(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
changeRecord() { |
|
|
|
|
this.page = 1; |
|
|
|
|
this.limit = 10; |
|
|
|
|
this.finished = false; |
|
|
|
|
this.recordList = []; |
|
|
|
|
this.getRecordList(); |
|
|
|
|
}, |
|
|
|
|
async getRecordList() { |
|
|
|
|
if (this.loading || this.finished) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
uni.showLoading(); |
|
|
|
|
console.log(this); |
|
|
|
|
const { nowYear, nowMonth, nowDate } = this.$refs.calendar; |
|
|
|
|
const { data } = await getDateRecordList( |
|
|
|
|
{ |
|
|
|
|
page: this.page++, |
|
|
|
|
limit: this.limit, |
|
|
|
|
date: `${nowYear}-${nowMonth < 10 ? '0' + nowMonth : nowMonth}-${nowDate}` |
|
|
|
|
// date: '', |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
uni.hideLoading(); |
|
|
|
|
this.recordList = this.recordList.concat(data); |
|
|
|
|
console.log(this.recordList); |
|
|
|
|
this.finished = data.length < this.limit; |
|
|
|
|
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多"; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -64,6 +104,8 @@ |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.record { |
|
|
|
|
flex-direction: column; |
|
|
|
|
min-height: 100vh; |
|
|
|
|
height: fit-content!important; |
|
|
|
|
.bg { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
@ -150,31 +192,57 @@ |
|
|
|
|
padding: 30rpx 0; |
|
|
|
|
>view { |
|
|
|
|
justify-content: space-between; |
|
|
|
|
&.item-top { |
|
|
|
|
&.item-left { |
|
|
|
|
color: #333333; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
line-height: 30rpx; |
|
|
|
|
margin-bottom: 15rpx; |
|
|
|
|
>view:last-child { |
|
|
|
|
color: #3293FF; |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
width: 400rpx; |
|
|
|
|
>view { |
|
|
|
|
height: 30rpx; |
|
|
|
|
} |
|
|
|
|
>.time { |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
color: #999797; |
|
|
|
|
margin-top: 15rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.item-bottom { |
|
|
|
|
&.item-right { |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
color: #999797; |
|
|
|
|
line-height: 22rpx; |
|
|
|
|
} |
|
|
|
|
>view { |
|
|
|
|
&:first-child { |
|
|
|
|
width: 400rpx; |
|
|
|
|
line-height: 30rpx; |
|
|
|
|
margin-left: auto; |
|
|
|
|
>.score { |
|
|
|
|
color: #3293FF; |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
margin-bottom: 15rpx; |
|
|
|
|
} |
|
|
|
|
&:last-child { |
|
|
|
|
margin-left: auto; |
|
|
|
|
>view { |
|
|
|
|
height: 30rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.finished, |
|
|
|
|
.loading { |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
line-height: 100rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #bbb; |
|
|
|
|
} |
|
|
|
|
.empty { |
|
|
|
|
margin-top: 100rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #bbb; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.empty image { |
|
|
|
|
display: block; |
|
|
|
|
width: 414rpx; |
|
|
|
|
height: 305rpx; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
pointer-events: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
wangdong
10 months ago