赵忠林
8918daa6a1
- 新增utils/image.ts，提供图片URL补全及OSS压缩参数拼接功能 - 订单列表商品图片列改为使用压缩后图片URL，提高加载性能 - shopOrder相关支付类型注释更新，新增银联支付、POS机支付等多种方式 - 更新支付组件及订单信息界面，新增并显示银联支付、POS机支付、免费、积分支付、货到付款等支付标签 - 订单支付状态标签支持区分“已付款”和“待收货付款”状态 - shopOrder数据model中支付类型及代付类型描述同步更新 - 修复shop utils中payType标签获取的边界条件错误 - 注释掉dashboard待办事项中优惠券使用项，暂停显示该统计数据
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
/**
|
||
* 图片压缩参数配置
|
||
*/
|
||
export interface ImageCompressOptions {
|
||
/** 图片宽度（px），默认 300 */
|
||
width?: number;
|
||
/** 图片质量 0-100，默认 90 */
|
||
quality?: number;
|
||
/** 是否启用压缩，默认 true */
|
||
enabled?: boolean;
|
||
}
|
||
|
||
/**
|
||
* 默认压缩参数
|
||
*/
|
||
const DEFAULT_OPTIONS: Required<ImageCompressOptions> = {
|
||
width: 240,
|
||
quality: 90,
|
||
enabled: true
|
||
};
|
||
|
||
/**
|
||
* OSS 域名（文件上传接口同域）
|
||
*/
|
||
const OSS_BASE_URL = 'https://oss.wsdns.cn';
|
||
|
||
/**
|
||
* 确保图片 URL 为完整路径
|
||
*
|
||
* 后端可能返回相对路径（如 /uploads/xxx.jpg），需要补全 OSS 域名。
|
||
*
|
||
* @param url 原始图片 URL
|
||
* @returns 完整图片 URL
|
||
*/
|
||
export function ensureFullUrl(url: string): string {
|
||
if (!url) return '';
|
||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||
return url;
|
||
}
|
||
// 相对路径：补全 OSS 域名
|
||
return `${OSS_BASE_URL}${url.startsWith('/') ? '' : '/'}${url}`;
|
||
}
|
||
|
||
/**
|
||
* 获取 OSS 压缩后的图片 URL
|
||
*
|
||
* 默认给图片 URL 拼接阿里云 OSS 图片处理参数，实现等比缩放 + 质量压缩。
|
||
* 使用场景：商品列表、商品卡片等缩略图展示。
|
||
*
|
||
* 注意：预览原图时不需要调用此函数，直接用原始 URL 即可。
|
||
*
|
||
* @param url 原始图片 URL
|
||
* @param options 压缩选项
|
||
* @returns 处理后的图片 URL
|
||
*/
|
||
export function getCompressedImageUrl(
|
||
url: string,
|
||
options?: ImageCompressOptions
|
||
): string {
|
||
// 先补全为完整 URL
|
||
const fullUrl = ensureFullUrl(url);
|
||
if (!fullUrl) return '';
|
||
|
||
const { width, quality, enabled } = { ...DEFAULT_OPTIONS, ...options };
|
||
|
||
// 未启用压缩，原样返回
|
||
if (!enabled) return fullUrl;
|
||
|
||
// 已包含 OSS 处理参数，避免重复拼接
|
||
if (fullUrl.includes('x-oss-process')) return fullUrl;
|
||
|
||
// 已有其他 query 参数用 & 拼接，否则用 ?
|
||
const separator = fullUrl.includes('?') ? '&' : '?';
|
||
|
||
return `${fullUrl}${separator}x-oss-process=image/resize,w_${width}/quality,Q_${quality}`;
|
||
}
|