修改bug

This commit is contained in:
田岩
2025-09-05 15:59:18 +08:00
parent f5da8fbff4
commit 25f01d49bb
14 changed files with 231 additions and 207 deletions
@@ -19,7 +19,7 @@
{{ item.examCnt || 0 }}
<uv-icon
class="click_text_icon"
:class="{click_text_icon_action:show_list_state}"
:class="{ click_text_icon_action: show_list_state }"
name="arrow-right"
color="#0066FF"
size="12"
@@ -47,9 +47,10 @@
<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
</view>
<uv-load-more
v-if="status === 'loading'"
v-if="status !== 'nomore'"
@click="getData()"
:status="status"
loadmore-text="轻轻上拉加载"
loadmore-text="点击加载更多"
:height="30"
></uv-load-more>
</view>
@@ -60,7 +61,7 @@
import { computed, ref, reactive } from 'vue';
import common from '@/common/common';
import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
const status = ref('loadmore'); // loadmore - 加载前,loading - 加载中,nomore - 没有数据
import { useItemList } from '../useItemList.js';
const props = defineProps({
item: {
type: Object,
@@ -68,33 +69,9 @@
}
});
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 fetchFunction = (params) => queryCrsExamHisByExamId({ examId: item.value.examId, ...params });
const { status, data_list, show_list_state, list_div_height, show_list_click, getData } = useItemList(fetchFunction);
// 跳转到详情
const click_list_item = (list_item) => {
const papersName = item.value.examName;
@@ -247,7 +224,7 @@
/* 添加过渡动画,包含延迟效果 */
transition: transform 0.2s ease;
}
.click_text_icon_action{
.click_text_icon_action {
transform: rotate(90deg);
}
}
@@ -47,9 +47,10 @@
<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
</view>
<uv-load-more
v-if="status === 'loading'"
v-if="status !== 'nomore'"
@click="getData()"
:status="status"
loadmore-text="轻轻上拉加载"
loadmore-text="点击加载更多"
:height="30"
></uv-load-more>
</view>
@@ -60,7 +61,8 @@
import { computed, ref, reactive } from 'vue';
import common from '@/common/common';
import { queryPracticeHis } from '@/api/courseRecord.js';
const status = ref('loadmore'); // loadmore - 加载前,loading - 加载中,nomore - 没有数据
import { useItemList, formatDuration } from '../useItemList.js';
const props = defineProps({
item: {
type: Object,
@@ -68,60 +70,15 @@
}
});
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;
queryPracticeHis({ crsId: item.value.crsId }).then((res) => {
data_list.push(...res.body);
total.value = data_list.length;
status.value = 'loadmore';
});
}
};
const fetchFunction = (params) => queryPracticeHis({ crsId: item.value.crsId, ...params });
const { status, data_list, show_list_state, list_div_height, show_list_click, getData } = useItemList(fetchFunction);
// 跳转到详情
const click_list_item = (list_item) => {
common.navigateTo(`/pages/courseRecord/coursePracticeRecordDetail?exrId=${list_item.exrId}`);
};
// 计算两个标准时间的时间差值
const formatDuration = (startTm, endTm) => {
if(endTm === null || startTm === null) return "00:00:00";
// 解析时间字符串为时间戳(毫秒)
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 scoped lang="scss">
@@ -47,9 +47,10 @@
<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
</view>
<uv-load-more
v-if="status === 'loading'"
v-if="status !== 'nomore'"
@click="getData()"
:status="status"
loadmore-text="轻轻上拉加载"
loadmore-text="点击加载更多"
:height="30"
></uv-load-more>
</view>
@@ -57,10 +58,10 @@
</template>
<script setup>
import { computed, ref, reactive } from 'vue';
import { computed } from 'vue';
import common from '@/common/common';
import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
const status = ref('loadmore'); // loadmore - 加载前,loading - 加载中,nomore - 没有数据
import { useItemList, formatDuration, secondsToHours } from '../useItemList.js';
const props = defineProps({
item: {
type: Object,
@@ -68,67 +69,16 @@
}
});
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 secondsToHours = (seconds) => {
if (typeof seconds === 'number') {
// 转换为小时并保留一位小数
return (seconds / 3600).toFixed(1);
}
return '0.0';
};
// 点击获取详情
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 fetchFunction = (params) => queryStdyBatchByCrsId({ crsId: item.value.crsId, ...params });
const { status, data_list, show_list_state, list_div_height, show_list_click, getData } = useItemList(fetchFunction);
// 跳转到详情
const click_list_item = (list_item) => {
common.navigateTo(
`/pages/courseRecord/courseStudyRecordDetail?stdyId=${list_item.stdyBatch}&crsName=${item.value.crsName || ''}`
);
};
// 计算两个标准时间的时间差值
const formatDuration = (startTm, endTm) => {
if(endTm === null || startTm === null) return "00:00:00";
// 解析时间字符串为时间戳(毫秒)
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 scoped lang="scss">
+106
View File
@@ -0,0 +1,106 @@
import {
computed,
reactive,
nextTick,
ref
} from 'vue';
// 计算两个标准时间的时间差值
export const formatDuration = (startTm, endTm) => {
if (endTm === null || startTm === null) return "00:00:00";
// 解析时间字符串为时间戳(毫秒)
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)}`;
};
// 秒数转换成小时,带小数点的小时
export const secondsToHours = (seconds) => {
if (typeof seconds === 'number') {
// 转换为小时并保留一位小数
return (seconds / 3600).toFixed(1);
}
return '0.0';
};
export function useItemList(fetchFunction, item) {
const status = ref('loadmore'); // loadmore - 加载前,loading - 加载中,nomore - 没有数据
const limit = 5;
const page = ref(0);
const total = ref(-1);
const data_list = reactive([]);
const show_list_state = ref(false);
const list_div_height = computed(() => {
const statusHeight = status.value === 'nomore' ? 0 : 100;
if (!show_list_state.value) {
return '0';
} else if (status.value === 'loading') {
return data_list.length * 136 + statusHeight + 'rpx';
} else {
return data_list.length * 136 + statusHeight + 'rpx';
}
});
// 点击获取详情
const show_list_click = () => {
show_list_state.value = !show_list_state.value;
if (show_list_state.value) {
nextTick(() => {
getData('first');
});
}
};
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++;
}
fetchFunction({
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';
}
});
};
return {
status,
data_list,
show_list_state,
list_div_height,
show_list_click,
getData
};
}