feat(shopGoods): 优化商品列表加载及封面图性能

- image.ts 中 getCompressedImageUrl 增加缓存,避免列表重渲染时重复计算压缩 URL
- shopGoods 页面用原生 img 标签替换 antdv a-image,支持浏览器懒加载减少首屏网络压力
- shopGoods 页面数据加载流程优化,取消表格自动首屏加载,改为手动触发,合并请求避免重复调用
- 首屏分类数据延迟加载,不阻塞首屏渲染,提升页面响应速度
- search.vue 中用 onMounted 替代 watch immediate,防止首次入场重复触发请求
- 新增商品封面图样式,保证图片大小固定且样式统一
This commit is contained in:
2026-08-06 18:18:05 +08:00
parent 3bc856fc95
commit aae0c03dd8
2 changed files with 21 additions and 2 deletions
+10 -1
View File
@@ -7,4 +7,13 @@
- 后端在 mp-java 的 shop 模块(前端走 MODULES_API_URL)。用户下一步:先与后端对齐接口方案,再做前端改造。
- 地区 ID 为行政区划编码字符串(省110000/市110100/区110101),下单时可前缀匹配。
- 存储方案确认:region_ids 采用**逗号分隔单字段**VARCHAR(2000)),不新建关联表。理由:查询方向固定为"模板→明细"、排除地区少、改动最小可快速上线。已写入方案文档。
- 用户确认"分两步"策略:第1步接口方案已产出(docs/运费模板-不发货地区-接口方案.md),待后端回复 6 个确认问题后做第2步前端改造。
- 用户确认"分两步"策略:第1步接口方案已产出(docs/运费模板-不发货地区-接口方案.md),待后端回复 6 个确认问题后做第2步前端改造。
## 后端实现检查(用户要求检查 guilixu-java 是否实现完)
- **guilixu-java 已实现完整**entity 加 regionMode/regionIds、param 加查询字段、迁移 SQL(ALTER+历史数据迁移+索引+回滚)、DeliveryRegionChecker(黑名单命中抛"暂不配送")、RegionCodeResolver(名称→编码)、OrderBusinessService 第 662/668 行已接入校验。
- **用户纠正(18:09):** guilixu-admin 的**商城接口实际调 `https://shop-api.websoft.top`= guilixu-java**,不是 mp-java。前端 shopExpressTemplateDetail API 用默认 `@/utils/request`baseURL = `MODULES_API_URL` = `localStorage ApiUrl || VITE_API_URL`;该部署的 ApiUrl 配的就是 shop-api.websoft.top/api,即 **guilixu-java 才是生效后端**
- **结论反转:guilixu-java 这套实现正确且生效,不是死代码,后端已完整,无需改 mp-java。** mp-java 与此功能无关(本部署 商城不走 mp-java)。
- 后端 `region/regions-data.json` 用 v/l/c 精简格式(与 RegionCodeResolver 读取一致),无字段名 bug。
- 后端完成度:entity/param/SQL/DeliveryRegionChecker/RegionCodeResolver/下单接入(OrderBusinessService 第 87 行调用 validateDeliveryRegionIfNeeded)全齐。
- **剩余工作 = 纯前端(guilixu-admin**:① model 加 regionMode/regionIds;② 新建双栏多选地区组件(替换单路径级联 `RegionsSelect`,支持"全国/指定配送/指定不发货"模式切换+多选多省);③ 编辑表单加模式切换+多选;④ 列表回显模式与地区汇总。截图里的 Transfer Modal 前端尚不存在。
- 教训:判断"改了哪个后端才生效"要以**运行时的 ApiUrllocalStorage/localStorage 配置的 ApiUrl,本部署=guilixu-java**为准,不能默认 `MODULES_API_URL`=mp-java。guilixu-admin 的 商城走 guilixu-java。
+11 -1
View File
@@ -27,7 +27,8 @@
### 双后端 / MODULES_API_URL 模式(2026-07-25 分析结论)
- **mp-java**`/Users/gxwebsoft/JAVA/mp-java`)= 独立的「modules 服务」,用 `modules` 库;cms(235类)、shop 等业务模块都在它这里,持续高频开发。
- **guilixu-java**`/Users/gxwebsoft/JAVA/guilixu-java`= 桂礼序主后端,用 `db_guilixu` 库;是 mp-java 的「子集分叉」。
- **guilixu-admin 前端已预设双基地址**:`SERVER_API_URL`(主后端) + `MODULES_API_URL`(localStorage ApiUrl / VITE_API_URL)。shop 商户/优惠券、cms 全部接口**都已走 MODULES_API_URL**,即前端本就假定 cms/shop 由 mp-java(modules 服务)提供。
- **guilixu-admin 前端已预设双基地址**:`SERVER_API_URL`(主后端) + `MODULES_API_URL`(localStorage ApiUrl / VITE_API_URL)。
- ⚠️ **运行时实际指向以 `localStorage ApiUrl` 为准**2026-08-06 用户纠正):**guilixu-admin 的「商城」接口实际调 `https://shop-api.websoft.top`= guilixu-java**,并非 mp-java。**判断"改哪个后端才生效"不能默认 MODULES_API_URL=mp-java,必须查 ApiUrl 运行时配置。** cms 接口另走 `VITE_CMS_API_URL`=cms-api.websoft.topmp-java)。
- **结论(仅限 cms 模块):guilixu-java 里的 cms 包(152类)是 mp-java cms 的旧分叉子集、且前端并不调它(前端调 modules 服务),属重复/死代码,应删除而非复制或扩展。**
- 复制「整个 cms 到 guilixu-java」不可行:mp-java 完整 cms 的 CmsApp/CmsWebsiteService 依赖 `project` 模块(guilixu-java 没有),会编译失败。
- 注意:mp-java 与 guilixu-java 是独立 git 仓库(`git.websoft.top/gxwebsoft/mp-java.git``guilixu-java.git`),各自独立部署、独立库。
@@ -37,6 +38,15 @@
- **shop 等共享业务模块**(如 `ShopGoodsController` / Service / Mapper / task):**mp-java 与 guilixu-java 都有活代码且结构一致(同 `com.gxwebsoft.shop` 包)**,用户确认改动要**两端同步**(例:2026-08-05 shopGoods `/data` 统计优化,两端各改 6 处)。
- 改动前先 grep 两端确认文件是否存在,避免只改一处导致另一端行为不一致。
### ⚠️ 运费模板不发货地区需求(2026-08-06 结论,已按用户纠正修正)
- 需求:运费模板支持「不发货地区(黑名单)」,ShopExpressTemplateDetail 加 regionMode/regionIds 字段 + DeliveryRegionChecker 下单校验。
- **后端(guilixu-java)已完整实现**entity/param/迁移SQL/DeliveryRegionChecker/RegionCodeResolver/OrderBusinessService 接入(第 87 行调用 validateDeliveryRegionIfNeeded)均就位。
- **关键事实(用户 2026-08-06 18:09 纠正):guilixu-admin 的「商城」接口实际调 `https://shop-api.websoft.top`= guilixu-java**。前端 shopExpressTemplateDetail 用默认 `@/utils/request`baseURL = MODULES_API_URL = localStorage ApiUrl || VITE_API_URL;本部署的 ApiUrl 即 shop-api.websoft.top/api。故 guilixu-java 是生效后端,其实现正确生效,不是死代码。
- **结论:本功能(admin 配置)无需改 mp-java**(本部署 商城不走 mp-java)。
- **端到端风险(待确认)**:下单校验读 guilixu-java 的 db_guilixu。若「用户端小程序 guilixu-taro 的 下单」走 mp-java(不同库 modules),黑名单配置不被 下单看到、不发货地区不拦截,需确认 下单后端;若 下单也走 guilixu-java 则功能完整闭环。
- **剩余工作 = 纯前端(guilixu-admin**model 加 regionMode/regionIds + 新建双栏多选地区组件(替换单路径级联 RegionsSelect,支持"全国/指定配送/指定不发货"模式切换+多选多省)+ 编辑表单模式切换 + 列表回显模式与地区汇总。
- 接口方案文档:`docs/运费模板-不发货地区-接口方案.md`
### shopGoods status 字段(上架/下架)
- `0` = 已上架 / 上架
- `1` = 待上架 / 下架