tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复练习答题，开发课程记录页，创建学习记录页

Browse Source
This commit is contained in:
田岩
2025-08-26 15:20:39 +08:00
parent 346f318515
commit 0d3c87d0eb
16 changed files with 721 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/courseRecord/components/examRecordItem.vue
+80 -3
View File
@@ -1,8 +1,85 @@
<template>
<view class="scroll_div">
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
<itemVue :item="item" v-for="(item, index) in data_list" ></itemVue>
<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>
import itemVue from './item.vue';
<script>
import { setPageCache } from '@/common/common';
import common from '@/common/common';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
const limit = 15;
const total = ref(-1);
const page = ref(0);
const data_list = reactive([]);
const props = defineProps({});
const getData = (from = '', searchText = '') => {
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(() => {
queryCrsExamRecordPaging({
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 = (isFinish) => {
// 00进行中、01已完成、02已超时
if (isFinish === '00') return 'in_progress';
if (isFinish === '01') return 'completed';
return 'expired';
};
const scrolltolower = (item) => {
getData();
};
const search = (value) => {
total.value = -1;
getData('first', value);
};
defineExpose({
getData,
search
});
</script>
<style>
</style>
<style scoped lang="scss">
.scroll_div {
background-color: #f1f5fa;
}
.scroll-Y {
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
}
</style>
src/pages/courseRecord/components/item.vue
+290
View File
@@ -0,0 +1,290 @@
<template>
<view class="item" @click="click_item(item)">
<view class="details_div">
<view class="img_div" v-if="props.mode === 'testingHall'">
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
</view>
<view class="right_div">
<view class="title ellipsis-text">
{{ item.examName }}
</view>
<view class="prompt_div">
<view class="prompt_div_left">
<view class="top">{{ item.highestGrade || 0 }}</view>
<view class="bottom">历史最高分</view>
</view>
<view class="prompt_div_line"></view>
<view class="prompt_div_right" @click="show_list_click">
<view class="click_text">
{{ item.examCnt || 0 }}
<uv-icon
class="click_text_icon"
:name="show_list_state ? 'arrow-down' : 'arrow-right'"
color="#0066FF"
size="12"
:bold="true"
></uv-icon>
</view>
<view class="bottom">考试次数</view>
</view>
</view>
</view>
</view>
<view class="list_div" :class="{ loaded: isLoaded }" :style="{ height: list_div_height }">
<view class="list_item" v-for="item_list in data_list">
<view class="list_content">
<view class="list_small_item">
<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
<view class="prompt">考试时间：{{ item_list.examStartTm }}</view>
</view>
<view class="list_small_item">
<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
<view class="prompt">考试得分：{{ item_list.examGrade }}</view>
</view>
</view>
<view class="fl1"></view>
<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
</view>
<uv-load-more
v-if="status === 'loading'"
:status="status"
loadmore-text="轻轻上拉加载"
:height="30"
></uv-load-more>
</view>
</view>
</template>
<script setup>
import { computed, ref, reactive, nextTick } from 'vue';
import { setPageCache } from '@/common/common';
import common from '@/common/common';
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
const props = defineProps({
item: {
type: Object,
default: () => {}
},
mode: {
type: String,
default: 'testingHall',
validator: (value) => {
// 考试: examination
// 练习: practice
// 错题本: mistake
// 学习: study
// 考试结算页 settlement
// 考试中心 testingHall
return ['examination', 'practice', 'mistake', 'study', 'settlement', 'testingHall'].includes(value);
}
}
});
import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
const item = computed(() => props.item);
const data_list = reactive([]);
const isLoaded = ref(false);
const total = ref(-1);
const show_list_state = ref(false);
const list_div_height = computed(() => {
if (!show_list_state.value) {
return '0';
} else if (status.value === 'loading') {
return '100rpx';
} else {
return data_list.length * 136 + 'rpx';
}
});
// 点击获取考试详情
const show_list_click = () => {
show_list_state.value = !show_list_state.value;
if (total.value === -1) {
//加载数据
status.value = 'loading';
data_list.length = 0;
queryCrsExamHisByExamId({ examId: item.value.examId }).then((res) => {
console.log('queryCrsExamHisByExamId', res);
data_list.push(...res.body);
total.value = data_list.length;
status.value = 'loadmore';
// // 数据更新后触发动画
// // 使用$nextTick确保DOM已更新
nextTick(() => {
// isLoaded.value = true;
});
});
}
};
// 跳转到详情
const click_item = () => {};
</script>
<style scoped lang="scss">
.icon_img {
width: 24rpx;
height: 24rpx;
}
.list_div {
overflow: hidden; /* 确保内容不会溢出容器 */
transition: height 0.2s ease-out; /* 高度动画 */
.list_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18rpx 32rpx 18rpx 28rpx;
background-color: #f9fbff;
border-radius: 8rpx;
margin: 20rpx 0 0 0;
.list_content {
.list_small_item {
display: flex;
align-items: center;
font-weight: 400;
font-size: 24rpx;
color: #666666;
line-height: 40rpx;
text-align: left;
font-style: normal;
.prompt {
margin-left: 16rpx;
}
}
}
}
}
.item {
margin: 17rpx 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 32rpx 22rpx;
.details_div {
display: flex;
.img_div {
position: relative;
width: 226rpx;
height: 168rpx;
overflow: hidden;
border-radius: 22rpx;
.img {
width: 226rpx;
height: 168rpx;
}
.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;
}
}
.right_div {
flex: 1;
overflow: hidden;
margin-left: 24rpx;
display: flex;
flex-direction: column;
.title {
font-family: PingFangSC;
color: #333333;
text-align: left;
font-style: normal;
font-weight: 600;
font-size: 28rpx; /* 字体大小30rpx */
overflow: hidden; /* 超出部分隐藏 */
margin-bottom: 8rpx;
min-height: 40rpx;
}
.prompt_div {
font-family: PingFangSC;
font-weight: 400;
font-size: 22rpx;
color: #666;
line-height: 34rpx;
display: flex;
align-items: center;
overflow: hidden;
height: 116rpx;
background-color: #f9fbff;
border-radius: 8rpx;
justify-content: space-around;
.prompt_div_line {
width: 4rpx;
height: 30rpx;
background: linear-gradient(
to bottom,
RGBA(242, 244, 248, 1) 0%,
RGBA(230, 232, 238, 1) 30%,
/* 中间开始 */ RGBA(230, 232, 238, 1) 70%,
/* 中间结束 */ RGBA(242, 244, 248, 1) 100%
);
}
.prompt_div_left,
.prompt_div_right {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
.top,
.click_text {
font-family: Arial;
font-weight: 700;
font-size: 30rpx;
color: #333333;
line-height: 34rpx;
text-align: center;
font-style: normal;
}
.bottom {
}
.click_text {
position: relative;
.click_text_icon {
position: absolute;
margin-left: 18rpx;
top: calc(50% - 12rpx);
right: -220%;
}
}
}
}
.people_progress_div {
display: flex;
font-family: PingFangSC;
font-weight: 400;
font-size: 23rpx;
color: #666;
margin-bottom: 23rpx;
line-height: 23rpx;
flex-wrap: nowrap;
height: 23rpx;
overflow: hidden;
}
}
}
}
</style>
src/pages/courseRecord/components/practiceRecordItem.vue
+4 -4
View File
@@ -17,7 +17,7 @@
}}阿斯顿萨达萨达阿斯顿萨达萨达萨达萨达萨达萨达
</view>
<view class="prompt_div">
<image :src="studyDurationIcon()" class="img"></image>
<image src="@/static/images/courseRecord/time.png" class="img"></image>
<view class="prompt">答题正确率：30</view>
</view>
<view class="prompt_div">
@@ -40,11 +40,11 @@
import { setPageCache } from '@/common/common';
import common from '@/common/common';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { queryPracticeRecordPaging, queryPracticeHis } from '@/api/courseRecord.js';
import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
const props = defineProps({});
const getData = (from = '', searchText = '') => {
if (from == 'first') {
if (total.value !== -1) {