feat(shopOrder): 支持订单商品图片OSS压缩及新增支付方式

- 新增utils/image.ts,提供图片URL补全及OSS压缩参数拼接功能
- 订单列表商品图片列改为使用压缩后图片URL,提高加载性能
- shopOrder相关支付类型注释更新,新增银联支付、POS机支付等多种方式
- 更新支付组件及订单信息界面,新增并显示银联支付、POS机支付、免费、积分支付、货到付款等支付标签
- 订单支付状态标签支持区分“已付款”和“待收货付款”状态
- shopOrder数据model中支付类型及代付类型描述同步更新
- 修复shop utils中payType标签获取的边界条件错误
- 注释掉dashboard待办事项中优惠券使用项,暂停显示该统计数据
This commit is contained in:
2026-07-14 19:47:17 +08:00
parent ad1a9f9839
commit 8918daa6a1
8 changed files with 140 additions and 22 deletions

76
src/utils/image.ts Normal file
View File

@@ -0,0 +1,76 @@
/**
* 图片压缩参数配置
*/
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}`;
}