114 lines
2.9 KiB
JavaScript
114 lines
2.9 KiB
JavaScript
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(() => {
|
|
console.log('小仙仙', status.value, data_list.length);
|
|
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 = (num = -1) => {
|
|
if (num === 0) return;
|
|
show_list_state.value = !show_list_state.value;
|
|
if (show_list_state.value) {
|
|
nextTick(() => {
|
|
getData('first');
|
|
});
|
|
}
|
|
};
|
|
|
|
const getData = (from = '') => {
|
|
console.log('getData');
|
|
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';
|
|
}
|
|
});
|
|
};
|
|
const clear = () => {
|
|
total.value = -1
|
|
data_list.length = 0
|
|
show_list_state.value = false
|
|
}
|
|
return {
|
|
status,
|
|
data_list,
|
|
show_list_state,
|
|
list_div_height,
|
|
show_list_click,
|
|
getData,
|
|
clear
|
|
};
|
|
} |