开发课程记录相关页
This commit is contained in:
田岩
@@ -50,6 +50,15 @@ export const queryPracticeHis = (data) => {
|
||||
data
|
||||
});
|
||||
};
|
||||
// 练习详情 通过 exrId 查询
|
||||
export const queryPracticeRecordByExrId = (data) => {
|
||||
return request({
|
||||
url: base_url + '/traCrsPractice/queryPracticeRecordByExrId',
|
||||
method: 'post',
|
||||
toastErrors: true,
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/**考试*/
|
||||
export const queryCrsExamRecordPaging = (data) => {
|
||||
|
||||
@@ -162,6 +162,8 @@ const formatDate2 = (timestamp, format = 'yyyy-MM-dd HH:mm:ss') => {
|
||||
.replace('ss', seconds.toString().padStart(2, '0'))
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取token
|
||||
export const getToken = () => uni.getStorageSync('token')
|
||||
export const setToken = data => uni.setStorageSync('token', data)
|
||||
|
||||
@@ -271,6 +271,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/courseRecord/coursePracticeRecordDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程记录练习记录详情",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/course/index",
|
||||
"style": {
|
||||
|
||||
@@ -1,85 +1,285 @@
|
||||
<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 class="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"
|
||||
:class="{click_text_icon_action:show_list_state}"
|
||||
name="arrow-right"
|
||||
color="#0066FF"
|
||||
size="12"
|
||||
:bold="true"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view class="bottom">考试次数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_div" :style="{ height: list_div_height }">
|
||||
<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_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 itemVue from './item.vue';
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
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;
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'testingHall',
|
||||
validator: (value) => {
|
||||
// 考试: examination
|
||||
// 考试中心 testingHall
|
||||
return ['examination', 'testingHall'].includes(value);
|
||||
}
|
||||
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
|
||||
});
|
||||
|
||||
import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
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) => {
|
||||
data_list.push(...res.body);
|
||||
total.value = data_list.length;
|
||||
status.value = 'loadmore';
|
||||
});
|
||||
}
|
||||
};
|
||||
// 跳转到详情
|
||||
const click_list_item = (list_item) => {
|
||||
const examLenTm = 666;
|
||||
const papersName = item.value.examName;
|
||||
common.navigateTo(
|
||||
`/pages/examination/result?execId=${list_item.execId}&examLenTm=${examLenTm}&papersName=${papersName}`
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
.icon_img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
|
||||
.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);
|
||||
left: calc(100% - 14rpx);
|
||||
/* 添加过渡动画，包含延迟效果 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.click_text_icon_action{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<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 './examRecordItem.vue';
|
||||
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { 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 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++;
|
||||
}
|
||||
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';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusClass = (isFinish) => {
|
||||
// 00进行中、01已完成、02已超时
|
||||
if (isFinish === '00') return 'in_progress';
|
||||
if (isFinish === '01') return 'completed';
|
||||
return 'expired';
|
||||
};
|
||||
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
}
|
||||
</style>
|
||||
@@ -1,290 +0,0 @@
|
||||
<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>
|
||||
@@ -1,256 +1,293 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<view
|
||||
class="item"
|
||||
:class="getStatusClass(item.isFinish)"
|
||||
v-for="(item, index) in data_list"
|
||||
@click="click_item(item)"
|
||||
>
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||||
<view class="item">
|
||||
<view class="details_div">
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{ item.crsName }}
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title">
|
||||
{{
|
||||
item.crsName
|
||||
}}阿斯顿萨达萨达阿斯顿萨达萨达萨达萨达萨达萨达
|
||||
<view class="prompt_div">
|
||||
<view class="prompt_div_left">
|
||||
<view class="top">{{ item.correctRate || '' }}</view>
|
||||
<view class="bottom">答题正确率</view>
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<image src="@/static/images/courseRecord/time.png" class="img"></image>
|
||||
<view class="prompt">答题正确率：30</view>
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<image :src="studyTimeIcon()" class="img"></image>
|
||||
<view class="prompt">练习记录：2条</view>
|
||||
<view class="prompt_div_line"></view>
|
||||
<view class="prompt_div_right" @click="show_list_click">
|
||||
<view class="click_text">
|
||||
{{ item.exrCnt || 0 }}
|
||||
<uv-icon
|
||||
class="click_text_icon"
|
||||
:class="{click_text_icon_action:show_list_state}"
|
||||
name="arrow-right"
|
||||
color="#0066FF"
|
||||
size="12"
|
||||
:bold="true"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view class="bottom">练习次数</view>
|
||||
</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>
|
||||
<view class="list_div" :style="{ height: list_div_height }">
|
||||
<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_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.exrStartTm }}</view>
|
||||
</view>
|
||||
<view class="list_small_item">
|
||||
<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
|
||||
<view class="prompt">练习时长：{{ formatDuration(item_list.exrStartTm, item_list.exrEndTm) }}</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>
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
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 props = defineProps({});
|
||||
|
||||
const getData = (from = '', searchText = '') => {
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return;
|
||||
}
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryPracticeHis } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
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';
|
||||
total.value = -1;
|
||||
page.value = 1;
|
||||
data_list.length = 0;
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return;
|
||||
status.value = 'loading';
|
||||
page.value++;
|
||||
queryPracticeHis({ crsId: item.value.crsId }).then((res) => {
|
||||
data_list.push(...res.body);
|
||||
total.value = data_list.length;
|
||||
status.value = 'loadmore';
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
queryPracticeRecordPaging({
|
||||
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 click_list_item = (list_item) => {
|
||||
common.navigateTo(`/pages/courseRecord/coursePracticeRecordDetail?exrId=${list_item.exrId}`);
|
||||
};
|
||||
|
||||
// 跳转到详情
|
||||
const click_item = (item) => {
|
||||
if (item.isTimeOut === '00') {
|
||||
common.msg('任务已结束');
|
||||
return;
|
||||
}
|
||||
setPageCache('learning_tasks_details', item);
|
||||
common.navigateTo('/pages/learningTasks/details');
|
||||
// 计算两个标准时间的时间差值
|
||||
const formatDuration = (startTm, endTm) => {
|
||||
// 解析时间字符串为时间戳（毫秒）
|
||||
const startTime = new Date(startTm).getTime();
|
||||
const endTime = new Date(endTm).getTime();
|
||||
|
||||
// 计算时间差（秒），确保为正数
|
||||
const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
|
||||
|
||||
// 计算时、分、秒
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
|
||||
// 补零格式化函数（统一处理所有单位）
|
||||
const formatNumber = (num) => num.toString().padStart(2, '0');
|
||||
|
||||
// 小时、分钟、秒均保持两位数格式
|
||||
return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
|
||||
};
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
const search = (value) => {
|
||||
total.value = -1;
|
||||
console.log('value', value);
|
||||
getData('first', value);
|
||||
};
|
||||
defineExpose({
|
||||
getData,
|
||||
search
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
.icon_img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx);
|
||||
}
|
||||
.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;
|
||||
|
||||
.scroll-Y {
|
||||
.item.in_progress {
|
||||
// 进行中
|
||||
.subscript {
|
||||
color: #0066ff;
|
||||
background-color: #daf0ff;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #0066ff;
|
||||
}
|
||||
}
|
||||
|
||||
.item.completed {
|
||||
// 已完成
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #33c583 !important;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.item.expired {
|
||||
// 已超时
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #ef5705;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #d70c18;
|
||||
.prompt {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item {
|
||||
.item {
|
||||
margin: 17rpx 20rpx;
|
||||
display: flex;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 22rpx;
|
||||
.img_div {
|
||||
position: relative;
|
||||
width: 224rpx;
|
||||
height: 168rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 22rpx;
|
||||
.details_div {
|
||||
display: flex;
|
||||
|
||||
.img {
|
||||
.img_div {
|
||||
position: relative;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx; /* 字体大小30rpx */
|
||||
display: -webkit-box; /* 启用弹性盒模型 */
|
||||
-webkit-box-orient: vertical; /* 设置盒子内子元素的排列方向为垂直 */
|
||||
-webkit-line-clamp: 2; /* 限制最多显示2行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号（多行时可能不显示，但建议保留） */
|
||||
line-height: 1.5; /* 可选：设置行高，优化多行显示效果 */
|
||||
}
|
||||
|
||||
.prompt_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
line-height: 23rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.img{
|
||||
width: 33rpx;
|
||||
height: 33rpx;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.img {
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
.prompt{
|
||||
margin-left: 14rpx;
|
||||
|
||||
.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;
|
||||
color: #666666;
|
||||
line-height: 32rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
.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);
|
||||
left: calc(100% - 14rpx);
|
||||
/* 添加过渡动画，包含延迟效果 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.click_text_icon_action{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<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 './practiceRecordItem.vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryPracticeRecordPaging } from '@/api/courseRecord.js';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
|
||||
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++;
|
||||
}
|
||||
queryPracticeRecordPaging({
|
||||
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();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,294 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="details_div">
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{ item.crsName }}
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<view class="prompt_div_left">
|
||||
<view class="top">{{ item.stdyTm || '' }}</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.stdyCnt || 0 }}
|
||||
<uv-icon
|
||||
class="click_text_icon"
|
||||
:class="{ click_text_icon_action: show_list_state }"
|
||||
name="arrow-right"
|
||||
color="#0066FF"
|
||||
size="12"
|
||||
:bold="true"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view class="bottom">学习次数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_div" :style="{ height: list_div_height}">
|
||||
<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_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.startTm }}</view>
|
||||
</view>
|
||||
<view class="list_small_item">
|
||||
<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
|
||||
<view class="prompt">学习时长：{{ formatDuration(item_list.startTm, item_list.endTm) }}</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>
|
||||
<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: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
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;
|
||||
queryStdyBatchByCrsId({ crsId: item.value.crsId }).then((res) => {
|
||||
data_list.push(...res.body);
|
||||
total.value = data_list.length;
|
||||
status.value = 'loadmore';
|
||||
});
|
||||
}
|
||||
};
|
||||
// 跳转到详情
|
||||
const click_list_item = (list_item) => {
|
||||
common.navigateTo(`/pages/courseRecord/courseStudyRecordDetail?stdyId=${list_item.stdyBatch}`);
|
||||
};
|
||||
|
||||
// 计算两个标准时间的时间差值
|
||||
const formatDuration = (startTm, endTm) => {
|
||||
// 解析时间字符串为时间戳（毫秒）
|
||||
const startTime = new Date(startTm).getTime();
|
||||
const endTime = new Date(endTm).getTime();
|
||||
|
||||
// 计算时间差（秒），确保为正数
|
||||
const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
|
||||
|
||||
// 计算时、分、秒
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
|
||||
// 补零格式化函数（统一处理所有单位）
|
||||
const formatNumber = (num) => num.toString().padStart(2, '0');
|
||||
|
||||
// 小时、分钟、秒均保持两位数格式
|
||||
return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.icon_img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.list_div {
|
||||
|
||||
overflow: hidden; /* 确保内容不会溢出容器 */
|
||||
transition: height 0.3s 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);
|
||||
left: calc(100% - 14rpx);
|
||||
/* 添加过渡动画，包含延迟效果 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.click_text_icon_action {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<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 './studyRecordItem.vue';
|
||||
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryStdyRecordPaging } 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 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++;
|
||||
}
|
||||
|
||||
queryStdyRecordPaging({
|
||||
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 getStatusClass = (isFinish) => {
|
||||
// 00进行中、01已完成、02已超时
|
||||
if (isFinish === '00') return 'in_progress';
|
||||
if (isFinish === '01') return 'completed';
|
||||
return 'expired';
|
||||
};
|
||||
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
|
||||
// 计算两个时间的时间差
|
||||
const formatDuration = (startTm, endTm) => {
|
||||
// 解析时间字符串为时间戳（毫秒）
|
||||
const startTime = new Date(startTm).getTime();
|
||||
const endTime = new Date(endTm).getTime();
|
||||
|
||||
// 计算时间差（秒），确保为正数
|
||||
const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));
|
||||
|
||||
// 计算时、分、秒
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
|
||||
// 补零格式化函数（统一处理所有单位）
|
||||
const formatNumber = (num) => num.toString().padStart(2, '0');
|
||||
|
||||
// 小时、分钟、秒均保持两位数格式
|
||||
return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
|
||||
}
|
||||
defineExpose({
|
||||
getData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view class="main_div max_page">
|
||||
<view class="nav-div">
|
||||
<view class="title ellipsis-text">练习记录</view>
|
||||
<view class="back_div" @click="common.navigateBack()">
|
||||
<view class="back-icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="scroll scroll-Y" :scroll-with-animation="true" :show-scrollbar="false">
|
||||
<view class="main-div">
|
||||
<view class="content" :id="'id_' + index" v-for="(item, index) in topicList">
|
||||
<Subject :item="item" mode="settlement" :clearResult="false" :isPreview="true"></Subject>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||||
|
||||
import Subject from '@/components/examination/subject.vue';
|
||||
import common from '@/common/common';
|
||||
import { queryPracticeRecordByExrId } from '@/api/courseRecord.js';
|
||||
|
||||
const exrId = ref('');
|
||||
const pass_status = ref(0);
|
||||
|
||||
const topicList = reactive([]);
|
||||
|
||||
const get_result = () => {
|
||||
queryPracticeRecordByExrId({
|
||||
exrId: exrId.value || 'EXR02501812206820250825133656000071377'
|
||||
}).then(({ body }) => {
|
||||
console.log('分数返回', body);
|
||||
topicList.push(...body);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化时检查
|
||||
onLoad((e) => {
|
||||
exrId.value = e.exrId;
|
||||
get_result();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg-margin-left: 30rpx;
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 70rpx - 10rpx);
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 32rpx $bg-margin-left;
|
||||
border-radius: 16rpx;
|
||||
padding: 34rpx 30rpx 34rpx 36rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
// 主内容框
|
||||
.main-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 30rpx 28rpx 20rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.nav-div {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
height: 70rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.back_div {
|
||||
margin-right: 10rpx;
|
||||
position: absolute;
|
||||
left: 25rpx;
|
||||
top: 0;
|
||||
padding: 15rpx;
|
||||
|
||||
.back-icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #000;
|
||||
border-left: 4rpx solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f0f5f9;
|
||||
/* 添加30度角的斜向上渐变，高度限制为400px */
|
||||
background-image: linear-gradient(30deg, #f0f5f9, #ebf1ff);
|
||||
/* 渐变背景高度400px，宽度充满容器 */
|
||||
background-size: 100% 600rpx;
|
||||
/* 防止渐变背景重复 */
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -25,13 +25,13 @@
|
||||
<view class="uni-margin-wrap no-overflow">
|
||||
<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
|
||||
<swiper-item>
|
||||
<studyRecordItem :ref="(el) => (listItemRefs[0] = el)"></studyRecordItem>
|
||||
<studyRecordList :ref="(el) => (listItemRefs[0] = el)"></studyRecordList>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<practiceRecordItem :ref="(el) => (listItemRefs[1] = el)"></practiceRecordItem>
|
||||
<practiceRecordList :ref="(el) => (listItemRefs[1] = el)"></practiceRecordList>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<examRecordItem :ref="(el) => (listItemRefs[2] = el)"></examRecordItem>
|
||||
<examRecordList :ref="(el) => (listItemRefs[2] = el)"></examRecordList>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
@@ -42,14 +42,14 @@
|
||||
<script setup>
|
||||
import { LineBg } from '@/enum.js';
|
||||
|
||||
import studyRecordItem from './components/studyRecordItem.vue';
|
||||
import practiceRecordItem from './components/practiceRecordItem.vue';
|
||||
import examRecordItem from './components/examRecordItem.vue';
|
||||
import studyRecordList from './components/studyRecordList.vue';
|
||||
import practiceRecordList from './components/practiceRecordList.vue';
|
||||
import examRecordList from './components/examRecordList.vue';
|
||||
import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
|
||||
import common from '@/common/common.js';
|
||||
const listItemRefs = ref([]);
|
||||
const taskRef = ref(null);
|
||||
const tabAct = ref(2);
|
||||
const tabAct = ref(1);
|
||||
const tabList = ref([
|
||||
{
|
||||
name: '学习记录'
|
||||
|
||||
@@ -685,7 +685,6 @@
|
||||
.scroll-Y {
|
||||
max-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx);
|
||||
min-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx - 380rpx);
|
||||
// background-color: yellow;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
|
||||
@@ -206,6 +206,15 @@
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/courseRecord/coursePracticeRecordDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程记录练习记录详情",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user