修改bug
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user