feat(shopOrder): 支持订单商品图片OSS压缩及新增支付方式
- 新增utils/image.ts,提供图片URL补全及OSS压缩参数拼接功能 - 订单列表商品图片列改为使用压缩后图片URL,提高加载性能 - shopOrder相关支付类型注释更新,新增银联支付、POS机支付等多种方式 - 更新支付组件及订单信息界面,新增并显示银联支付、POS机支付、免费、积分支付、货到付款等支付标签 - 订单支付状态标签支持区分“已付款”和“待收货付款”状态 - shopOrder数据model中支付类型及代付类型描述同步更新 - 修复shop utils中payType标签获取的边界条件错误 - 注释掉dashboard待办事项中优惠券使用项,暂停显示该统计数据
This commit is contained in:
76
src/utils/image.ts
Normal file
76
src/utils/image.ts
Normal 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}`;
|
||||
}
|
||||
@@ -23,7 +23,7 @@ export function getPayType(index?: number): any {
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: 'POS机'
|
||||
label: 'POS机支付'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
@@ -38,7 +38,7 @@ export function getPayType(index?: number): any {
|
||||
label: '货到付款'
|
||||
}
|
||||
];
|
||||
if (index) {
|
||||
if (index != null) {
|
||||
return payType[index]?.label || '';
|
||||
}
|
||||
return payType;
|
||||
|
||||
Reference in New Issue
Block a user