refactor(app): 优化图片加载和格式化
- 在 ItemList 组件中,使用 OSS 图片处理功能调整图片尺寸和格式,提高加载速度 - 在 tangPopup 组件中,应用相同的图片优化处理 - 移除了未使用的 formatNumber 函数,简化了代码
This commit is contained in:
parent
4caa3fb0da
commit
d18dcfd8f9
@ -41,27 +41,6 @@ const openShow = async (item) => {
|
||||
localState.value.showDetail = true
|
||||
currentItem.value = item
|
||||
}
|
||||
|
||||
/**
|
||||
* 将数字格式化为"250XX"格式,其中XX是两位数
|
||||
* @param {number} num - 要格式化的数字
|
||||
* @return {string} - 格式化后的字符串
|
||||
*/
|
||||
function formatNumber(num) {
|
||||
// 确保输入是有效数字
|
||||
if (typeof num !== 'number' && isNaN(Number(num))) {
|
||||
throw new Error('输入必须是有效数字');
|
||||
}
|
||||
|
||||
// 转换为数字类型(以防输入是字符串数字)
|
||||
const number = Number(num);
|
||||
|
||||
// 数字部分格式化为两位数,不足补0
|
||||
const formattedNum = number.toString().padStart(2, '0');
|
||||
|
||||
// 添加前缀"250"并返回结果
|
||||
return `250${formattedNum}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -90,13 +69,15 @@ function formatNumber(num) {
|
||||
>
|
||||
<div class="relative w-full">
|
||||
<img
|
||||
:src="item.artwork?.hdPic"
|
||||
:src="item.artwork?.hdPic + '?x-oss-process=image/resize,w_500,h_500/format,webp/quality,q_80'"
|
||||
class="w-full object-cover rounded-4px"
|
||||
loading="lazy"
|
||||
|
||||
/>
|
||||
<div
|
||||
class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
|
||||
>
|
||||
Lot{{ formatNumber(item.index) }}
|
||||
Lot{{ item.index+25000 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-[8px]">
|
||||
|
@ -124,7 +124,7 @@ watch(()=>props.show,async (newValue)=>{
|
||||
<xImage
|
||||
:preview="false"
|
||||
class="w-80px h-80px"
|
||||
:src="item.artwork?.hdPic"
|
||||
:src="item.artwork?.hdPic+'?x-oss-process=image/resize,w_280,h_280/format,webp/quality,q_80'"
|
||||
:alt="item?.artworkTitle"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user