From e3bbb7c77a47ace876ea3241b6113951a897d06e Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 09:58:25 +0800 Subject: [PATCH 01/18] =?UTF-8?q?chore=EF=BC=9A=E5=95=86=E5=93=81=E5=88=86?= =?UTF-8?q?=E7=B1=BB=E9=A1=B5=E9=9D=A2=E7=AC=A6=E5=90=88template=3D=3D1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .local.config.js | 6 +- components-diy/diy-category-item.vue | 111 ++++++++++++++---- components-diy/diy-category.vue | 164 ++++++++++++++++++++++++--- 3 files changed, 244 insertions(+), 37 deletions(-) diff --git a/.local.config.js b/.local.config.js index b2c63e3..1de49b9 100644 --- a/.local.config.js +++ b/.local.config.js @@ -139,11 +139,15 @@ const localDevConfig = ({ uniacid: 48, domain: 'https://test.aigc-quickapp.com', }, + '72': { // 测试平台 + uniacid: 72, + domain: 'https://test.aigc-quickapp.com', + }, // })['5g-237']; // 商品分类，没有立即咨询文字 // })['5g-97']; // 大宗商品贸易，支持自定义字体大小、颜色 // })['5g-50']; // 燃气安全产品机器人，购物车无反应 // })['2821']; // 离型纸硅油纸 -})['48']; // 离型纸硅油纸 +})['72']; // 离型纸硅油纸 // })['2485']; // 验证电子表单前后端数据一致性 // })['5g-11']; // 数码 // })['5g-213']; // 选择要使用的环境配置 diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 9c6e419..491a505 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -45,27 +45,27 @@ - - {{ category.category_name }} + + {{ category.category_name }} - + {{ one.category_name }} - + - {{ one.category_name }} + {{ one.category_name }} - + {{ two.category_name }} @@ -369,6 +369,32 @@ export default { secondCategoryGoodsList: [] }; }, + computed: { + /** + * 当前分类层级 (参考 template 2 的 goodsLevel 模式) + * 优先级: 数据层级 > 后台配置 > 兜底 + * 1. 先检测数据实际支持几级 (二级分类下是否还有 child_list) + * 2. 后台配置的 level 不能超过数据支持的层级 + * (数据只有 2 级时,就算后台配 3 也强制用 2,避免出现空标题列表) + * 3. 都没配置就按数据层级来 + */ + categoryLevel() { + // 先检测数据层级 + let dataLevel = 2; // 兜底 + if (this.category && this.category.child_list && this.category.child_list.length > 0) { + const hasThirdLevel = this.category.child_list.some(item => + item.child_list && item.child_list.length > 0 + ); + dataLevel = hasThirdLevel ? 3 : 2; + } + // 后台配置: 不能超过数据支持的层级 + if (this.value.level && this.value.level <= dataLevel) { + return this.value.level; + } + // 否则按数据层级 + return dataLevel; + } + }, created() { this.type = this.value.template == 1 || this.value.template == 99 ? 'category' : 'goods'; if (this.index == this.select && this.pageIndex == 0) this.getGoodsList(); @@ -559,6 +585,23 @@ export default { }) : this.$util.getDefaultImage().goods; }, + /** + * 分类图片处理 + * @param {Object} imgStr + */ + categoryImg(imgStr) { + if (!imgStr) return this.$util.getDefaultImage().goods; + return this.$util.img(imgStr); + }, + categoryImgError(level, oneIndex, twoIndex) { + // 分类图片加载失败处理 + if (level == 2 && this.category.child_list && this.category.child_list[oneIndex]) { + this.category.child_list[oneIndex].image = ''; + } else if (level == 3 && this.category.child_list && this.category.child_list[oneIndex] + && this.category.child_list[oneIndex].child_list && this.category.child_list[oneIndex].child_list[twoIndex]) { + this.category.child_list[oneIndex].child_list[twoIndex].image = ''; + } + }, imgError(index) { this.goodsList[index].goods_image = this.$util.getDefaultImage().goods; }, @@ -963,6 +1006,29 @@ export default { } } +// 模板1 专用: 标题居中 + 两侧横线 +.category-title-with-lines { + display: flex !important; + align-items: center; + justify-content: center; + text-align: center; + padding: 30rpx 0 20rpx !important; + padding-left: 0 !important; + color: #333; + font-size: 30rpx; + font-weight: 500; + letter-spacing: 2rpx; + + &::before, + &::after { + content: ''; + flex: 0 0 60rpx; + height: 0; + border-top: 1rpx solid #d9d9d9; + margin: 0 24rpx; + } +} + .category-adv { width: 100%; overflow: hidden; @@ -976,36 +1042,41 @@ export default { } .category-list { - display: flex; - flex-wrap: wrap; - background: #fff; + display: grid !important; + grid-template-columns: repeat(3, 1fr) !important; + background: transparent; margin: 0 20rpx; - border-radius: 10rpx; - padding: 10rpx 0; + border-radius: 0; + padding: 0; + gap: 20rpx 0; .category-item { - width: 33.33%; + width: 100% !important; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 16rpx; + padding: 0; box-sizing: border-box; .img-box { - width: 80%; - padding-top: 80%; + width: 70% !important; + height: 0; + padding-bottom: 70%; margin: 0 auto; overflow: hidden; - margin-bottom: 20rpx; + margin-bottom: 16rpx; position: relative; + background: transparent !important; + border-radius: 0 !important; image { position: absolute; - width: 100%; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + width: 100% !important; + height: 100% !important; + left: 0 !important; + top: 0 !important; + transform: none !important; } } diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue index a7186e6..7f72668 100644 --- a/components-diy/diy-category.vue +++ b/components-diy/diy-category.vue @@ -102,23 +102,36 @@ :lastSecondCategoryName="lastSecondCategoryName" @tologin="toLogin" @selectsku="selectSku($event, 0)" @addCart="addCartPoint" @saveSecondCategory="saveSecondCategoryName"> - + - - - - - {{ $lang('components-diy.diy-category.reachedBottom') }} - + + + + + + + + + + + + {{ $lang('components-diy.diy-category.reachedBottom') }} + @@ -1135,6 +1148,125 @@ export default { } } +// ===================== 模板1 仿京东/淘宝商品分类样式 ===================== +.category-template-1 { + .search-box { + padding: 20rpx 24rpx; + background: #fff; + + .search-content { + background-color: #f5f5f5; + border-radius: 40rpx; + + input { + background: #f5f5f5; + border-radius: 40rpx; + padding: 0 30rpx; + font-size: 26rpx; + color: #333; + } + + .iconfont { + right: 16rpx; + color: #89899a; + font-size: 32rpx; + } + } + } + + .content-box { + background: #fff; + + .tree-wrap { + width: 170rpx; + background-color: #fff; + } + + .right-flex-wrap { + background: #fff; + + .content-wrap { + background: #fff; + } + } + } + + // 穿透到子组件 diy-category-item: 调整 banner 横向内边距 + 分类网格容器为透明 + ::v-deep .category-adv { + padding: 0 20rpx; + margin-top: 0; + } + + ::v-deep .category-list { + margin: 0 20rpx; + border-radius: 0; + background: transparent; + padding: 0; + } + + ::v-deep .category-title-with-lines { + padding: 30rpx 0 20rpx; + } + + // 穿透修复: 图片不需要灰色背景框,与目标图保持一致 + ::v-deep .img-box { + background: transparent !important; + border-radius: 0 !important; + width: 70% !important; + padding-bottom: 70% !important; + margin-bottom: 16rpx !important; + } + + ::v-deep .img-box image { + width: 100% !important; + height: 100% !important; + left: 0 !important; + top: 0 !important; + transform: none !important; + } + + // 左侧分类栏样式 + .tree-wrap .category-item { + padding: 28rpx 16rpx; + background-color: #fff; + border-radius: 0; + + view { + color: #666; + font-size: 26rpx; + line-height: 1.3; + } + + &.border-top, + &.border-bottom { + border-radius: 0; + } + + &.select { + background: #fff; + + view { + color: var(--base-color, #FF6B35); + font-weight: bold; + font-size: 28rpx; + } + + &::before { + content: ' '; + width: 6rpx; + height: 32rpx; + background: var(--base-color, #FF6B35); + display: block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + border-radius: 0 6rpx 6rpx 0; + } + } + } +} + // ===================== 模板99 商品分类样式 ===================== .category-template-99 { .search-box { From 185d4914a6990213f078095248018e0a724e13e8 Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 10:21:40 +0800 Subject: [PATCH 02/18] =?UTF-8?q?chore:=E9=A1=B5=E9=9D=A2=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=AD=A3=E5=B8=B81=E6=A8=A1=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 157 ++++++++++++++++++++++++++- 1 file changed, 154 insertions(+), 3 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 491a505..d96f719 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -47,7 +47,37 @@ {{ category.category_name }} - + + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + @@ -61,7 +91,37 @@ {{ one.category_name }} - + + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + @@ -366,7 +426,11 @@ export default { timeout: {}, cartEditRepeat: false, selectedSecondCategory: null, - secondCategoryGoodsList: [] + secondCategoryGoodsList: [], + // 模板1专用：选中的分类ID和商品列表 + selectedCategoryId: null, + template1GoodsList: [], + template1Loading: false }; }, computed: { @@ -412,6 +476,10 @@ export default { // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id) this.refreshGoodsByCurrentCategory(); } + // 模板1：直接加载当前一级分类下的所有商品 + if (this.value.template == 1 && this.category && this.category.category_id) { + this.getTemplate1Goods(this.category.category_id); + } }, mounted() { setTimeout(() => { @@ -473,6 +541,11 @@ export default { this.secondCategoryGoodsList = []; this.refreshGoodsByCurrentCategory(); } + // 模板1：切换一级分类时重新加载该分类下的商品 + if (this.value.template == 1 && this.index == this.select && this.category && this.category.category_id) { + this.template1GoodsList = []; + this.getTemplate1Goods(this.category.category_id); + } }, // 切换一级分类时, 根据当前一级分类下同名二级分类重新加载商品 currentOneCategory: { @@ -954,6 +1027,52 @@ export default { } }); }, + /** + * 模板1: 选择分类后加载该分类下的商品 + * @param {Object} category 选中的分类对象 + */ + selectCategoryForGoods(category) { + if (this.selectedCategoryId === category.category_id) { + return; // 已选中，不重复加载 + } + this.selectedCategoryId = category.category_id; + this.template1GoodsList = []; + this.getTemplate1Goods(category.category_id); + }, + /** + * 模板1: 根据分类ID获取商品列表 + */ + getTemplate1Goods(categoryId) { + this.template1Loading = true; + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: 10 + }, + success: res => { + this.template1Loading = false; + if (res.code == 0 && res.data && res.data.list) { + this.template1GoodsList = res.data.list; + } else { + this.template1GoodsList = []; + } + }, + fail: () => { + this.template1Loading = false; + this.template1GoodsList = []; + } + }); + }, + /** + * 模板1: 商品图片加载失败处理 + */ + template1ImgError(index) { + if (this.template1GoodsList[index]) { + this.template1GoodsList[index].goods_image = this.$util.getDefaultImage().goods; + } + }, //加载商品在购物车的总数量 loadGoodsCartNum(isRefresh = false) { this.goodsList.forEach((item) => { @@ -1090,6 +1209,38 @@ export default { font-size: var(--diy-category-item-name-size, 24rpx); } + + // 模板1选中状态 + &.selected { + .img-box { + border: 2rpx solid var(--base-color, #FF6B35); + border-radius: 8rpx; + } + .name { + color: var(--base-color, #FF6B35); + font-weight: bold; + } + } + } +} + +// 模板1商品列表容器 +.template1-goods-wrap { + padding: 20rpx; + background: #f5f5f5; + + .goods-list { + margin: 0; + padding-top: 0; + display: flex; + + .goods-item { + width: calc(50% - 10rpx); + background: #fff; + border-radius: 12rpx; + overflow: hidden; + margin-bottom: 20rpx; + } } } From 21c342e3894e1c416aa82626476f66444999eff0 Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 11:56:44 +0800 Subject: [PATCH 03/18] =?UTF-8?q?chore=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 168 +++++++++++++++++++-------- 1 file changed, 118 insertions(+), 50 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index d96f719..dd6f725 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -45,14 +45,15 @@ - - {{ category.category_name }} - - - - + + + + {{ one.category_name }} + + + - + {{ item.label_name }} @@ -71,13 +72,18 @@ - + 暂无商品 - - + + + + + + {{ category.category_name }} + @@ -90,38 +96,8 @@ - {{ one.category_name }} - - - - - - - {{ item.label_name }} - - - - {{ isEnEnv ? item.en_goods_name : item.goods_name }} - - - - - {{ $lang('common.currencySymbol') }} - {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} - .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} - - - - - - - - - 暂无商品 - - - - + {{ one.category_name }} + @@ -134,6 +110,39 @@ + + + {{ category.category_name }} + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + @@ -430,7 +439,11 @@ export default { // 模板1专用：选中的分类ID和商品列表 selectedCategoryId: null, template1GoodsList: [], - template1Loading: false + template1Loading: false, + // 模板1专用(categoryLevel == 3): 按二级分类ID分别存储各自商品列表 + // key: child.category_id, value: 商品数组 + template1ChildGoodsList: {}, + template1ChildLoading: {} }; }, computed: { @@ -476,9 +489,17 @@ export default { // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id) this.refreshGoodsByCurrentCategory(); } - // 模板1：直接加载当前一级分类下的所有商品 + // 模板1：按是否有二级分类分别处理 + // 有二级分类(child_list.length > 0)时,为每个二级分类分别加载各自的商品(图1按分类分组显示) + // 无二级分类时,直接加载当前一级分类下的所有商品(图2统一网格显示) if (this.value.template == 1 && this.category && this.category.category_id) { - this.getTemplate1Goods(this.category.category_id); + if (this.category.child_list && this.category.child_list.length) { + this.category.child_list.forEach(child => { + this.getTemplate1ChildGoods(child.category_id); + }); + } else { + this.getTemplate1Goods(this.category.category_id); + } } }, mounted() { @@ -542,9 +563,18 @@ export default { this.refreshGoodsByCurrentCategory(); } // 模板1：切换一级分类时重新加载该分类下的商品 + // 有二级分类时为每个二级分类重新加载,否则直接加载当前分类 if (this.value.template == 1 && this.index == this.select && this.category && this.category.category_id) { this.template1GoodsList = []; - this.getTemplate1Goods(this.category.category_id); + this.template1ChildGoodsList = {}; + this.template1ChildLoading = {}; + if (this.category.child_list && this.category.child_list.length) { + this.category.child_list.forEach(child => { + this.getTemplate1ChildGoods(child.category_id); + }); + } else { + this.getTemplate1Goods(this.category.category_id); + } } }, // 切换一级分类时, 根据当前一级分类下同名二级分类重新加载商品 @@ -1066,11 +1096,49 @@ export default { }); }, /** - * 模板1: 商品图片加载失败处理 + * 模板1: 根据二级分类ID分别加载各自的商品列表 + * 用于 categoryLevel == 3 场景, 每个二级分类展示自己的商品 + * @param {Number} categoryId 二级分类ID */ - template1ImgError(index) { - if (this.template1GoodsList[index]) { - this.template1GoodsList[index].goods_image = this.$util.getDefaultImage().goods; + getTemplate1ChildGoods(categoryId) { + this.$set(this.template1ChildLoading, categoryId, true); + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: 10 + }, + success: res => { + this.$set(this.template1ChildLoading, categoryId, false); + if (res.code == 0 && res.data && res.data.list) { + this.$set(this.template1ChildGoodsList, categoryId, res.data.list); + } else { + this.$set(this.template1ChildGoodsList, categoryId, []); + } + }, + fail: () => { + this.$set(this.template1ChildLoading, categoryId, false); + this.$set(this.template1ChildGoodsList, categoryId, []); + } + }); + }, + /** + * 模板1: 商品图片加载失败处理 + * @param {Number} categoryId 二级分类ID(可选,用于按子分类定位) + * @param {Number} index 商品在列表中的索引 + */ + template1ImgError(categoryId, index) { + // 兼容旧调用: 仅传 index 的情况(categoryLevel == 2) + if (categoryId === undefined || categoryId === null) { + if (this.template1GoodsList[index]) { + this.template1GoodsList[index].goods_image = this.$util.getDefaultImage().goods; + } + return; + } + const list = this.template1ChildGoodsList[categoryId]; + if (list && list[index]) { + list[index].goods_image = this.$util.getDefaultImage().goods; } }, //加载商品在购物车的总数量 From b2063418fb21919cc19b2a9bb183ffe3a742ac9a Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 14:01:40 +0800 Subject: [PATCH 04/18] =?UTF-8?q?chore=EF=BC=9Atemplate=20=3D=3D=201?= =?UTF-8?q?=E7=9A=84=E6=A8=A1=E6=9D=BF=E6=AD=A3=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 60 +++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 9 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index dd6f725..52352ca 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -45,8 +45,8 @@ - - + + {{ one.category_name }} @@ -80,6 +80,39 @@ + + + {{ category.category_name }} + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + {{ category.category_name }} @@ -110,7 +143,7 @@ - + {{ category.category_name }} @@ -470,6 +503,15 @@ export default { } // 否则按数据层级 return dataLevel; + }, + /** + * 模板1: 是否按子分类分组显示 + * 后台"展示分类"配置: + * 二级分类 (value.level == 2) → false → 单网格显示所有商品 + * 三级分类 (value.level == 3) → true → 按二级分类分别显示各自商品 + */ + isGroupedDisplay() { + return this.value.template == 1 && this.value.level == 3; } }, created() { @@ -489,11 +531,11 @@ export default { // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id) this.refreshGoodsByCurrentCategory(); } - // 模板1：按是否有二级分类分别处理 - // 有二级分类(child_list.length > 0)时,为每个二级分类分别加载各自的商品(图1按分类分组显示) - // 无二级分类时,直接加载当前一级分类下的所有商品(图2统一网格显示) + // 模板1：根据后台"展示分类"配置 + 数据层级决定加载方式 + // 三级分类模式 (isGroupedDisplay) + 有二级分类时,按二级分类分别加载各自商品 + // 其他情况(二级分类模式 / 无二级分类),直接加载当前一级分类下的所有商品 if (this.value.template == 1 && this.category && this.category.category_id) { - if (this.category.child_list && this.category.child_list.length) { + if (this.isGroupedDisplay && this.category.child_list && this.category.child_list.length) { this.category.child_list.forEach(child => { this.getTemplate1ChildGoods(child.category_id); }); @@ -563,12 +605,12 @@ export default { this.refreshGoodsByCurrentCategory(); } // 模板1：切换一级分类时重新加载该分类下的商品 - // 有二级分类时为每个二级分类重新加载,否则直接加载当前分类 + // 三级分类模式 + 有二级分类时,按二级分类分别重新加载,否则直接加载当前分类 if (this.value.template == 1 && this.index == this.select && this.category && this.category.category_id) { this.template1GoodsList = []; this.template1ChildGoodsList = {}; this.template1ChildLoading = {}; - if (this.category.child_list && this.category.child_list.length) { + if (this.isGroupedDisplay && this.category.child_list && this.category.child_list.length) { this.category.child_list.forEach(child => { this.getTemplate1ChildGoods(child.category_id); }); From 73b7b2a8dfe28ef8b9c197be7837354bac479183 Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 14:54:44 +0800 Subject: [PATCH 05/18] =?UTF-8?q?chore=EF=BC=9Atemplate=20=3D=3D=203?= =?UTF-8?q?=E7=9A=84=E6=A8=A1=E6=9D=BF=E6=AD=A3=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 231 +++++++++++++++++++++------ 1 file changed, 183 insertions(+), 48 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 52352ca..44a003c 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -228,7 +228,35 @@ {{ item.label_name }} - + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + + {{ $lang('common.currencySymbol') }} + {{ + parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ + parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + + + {{ $lang('components-diy.diy-category-item.buyNow') }} + + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} @@ -264,37 +292,6 @@ {{ $lang('components-diy.diy-category-item.consultNow') }} - - - @@ -323,7 +320,35 @@ :lazy-load="true" show-menu-by-longpress /> {{ item.label_name }} - + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + + {{ $lang('common.currencySymbol') }} + {{ + parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ + parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + + + {{ $lang('components-diy.diy-category-item.buyNow') }} + + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} @@ -358,7 +383,7 @@ {{ $lang('components-diy.diy-category-item.consultNow') }} - + {{ $lang('components-diy.diy-category-item.buyNow') }} @@ -391,9 +416,6 @@ - - {{ $lang('components-diy.diy-category-item.buyNow') }} - @@ -1794,30 +1816,143 @@ export default { } }*/ - &[data-template='3'] .goods-item { - flex-direction: column; + // ===================== 模板3 商品分类样式 (卡片式布局: 图片顶部 + 名称上行 + 价格和按钮下行) ===================== + &[data-template='3'] { + // 模板3 的商品列表容器: 灰色背景让卡片有层次 + background: #f4f6fa; - .info-wrap { - width: 100%; - margin-top: var(--diy-category-item-info-wrap-margin-top, 12rpx); + // 重置 double-column 的影响, 强制单列布局 + .goods-item { + display: block; + flex-direction: column; + align-items: stretch; + width: 100% !important; + max-width: 100%; + background: #fff; + border-radius: 12rpx; + overflow: hidden; + margin: 0 0 20rpx; + padding: 0; + box-sizing: border-box; } + // 强制取消 single-column 的 row 布局(防止同时应用) + &.single-column .goods-item, + &.double-column .goods-item { + flex-direction: column; + align-items: stretch; + } + + // 图片: 占满卡片宽度, 自适应高度(类似 banner) .goods-img { width: 100%; - height: auto; + height: 0; + padding-top: 50%; + position: relative; margin-right: 0; line-height: 1; + border-radius: 0; + overflow: hidden; image { - border-radius: 8rpx; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + transform: none; + border-radius: 0; } } - .select-sku { + // 信息区域: 上下结构 (名称一行 + 价格+按钮一行) + .info-wrap { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 0; + padding: 24rpx; + box-sizing: border-box; + } + + // 商品名称: 单行省略 + .name-wrap { + width: 100%; + + .goods-name { + font-size: 28rpx; + line-height: 1.4; + margin-top: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #333; + } + } + + // 底部行: 价格在左, 按钮在右 + .info-bottom { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 12rpx; + } + + // 价格区域: 包含当前价格 + 删除线价格(同行) + .price-wrap { + display: flex; + align-items: baseline; + flex: 1; + min-width: 0; + flex-wrap: wrap; + + .discount-price { + display: inline-flex; + align-items: baseline; + font-weight: bold; + line-height: 1; + font-size: 30rpx; + color: var(--price-color, #FF6B35); + + .unit { + font-size: 22rpx; + margin-right: 2rpx; + color: var(--price-color, #FF6B35); + } + + .price { + font-size: 30rpx; + color: var(--price-color, #FF6B35); + } + } + + // 删除线价格: 在当前价格右边 + .delete-price { + margin-left: 16rpx; + display: inline-flex; + align-items: baseline; + text-decoration: line-through; + font-size: 24rpx; + color: #999; + + .unit { + margin-right: 2rpx; + } + } + } + + // 立即购买按钮: 在底部行右侧 + .buy-now-btn { + flex-shrink: 0; + margin-left: 20rpx; + width: 160rpx; + height: 56rpx; + line-height: 56rpx; + text-align: center; + font-size: 26rpx; font-weight: bold; - width: 128rpx; - height: 52rpx !important; - line-height: 52rpx !important; + color: #fff; + border-radius: 28rpx; } } } From 6d1bdb5d8bc3bde911c48f370a82baf277e1a462 Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 15:07:19 +0800 Subject: [PATCH 06/18] =?UTF-8?q?chore=EF=BC=9A=E5=88=A0=E9=99=A4=E5=8F=B3?= =?UTF-8?q?=E4=BE=A7=E4=B8=8A=E9=9D=A2=E7=9A=84=E5=92=8C=E4=B8=80=E7=BA=A7?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=B8=80=E6=A0=B7=E7=9A=84=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 44a003c..10fee03 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -214,7 +214,7 @@ @scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll"> - {{ category.category_name + {{ category.category_name }} From 0d820b04f7ee580a625b38c200779d81bb8b908e Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Fri, 17 Jul 2026 15:53:09 +0800 Subject: [PATCH 07/18] =?UTF-8?q?chore=EF=BC=9Atemplate=20=3D=3D=204?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=90=8E=E5=8F=B0=E9=80=89=E6=8B=A9=E4=BA=8C?= =?UTF-8?q?=E7=BA=A7=E5=88=86=E7=B1=BB=E6=AD=A3=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 288 ++++++++++++++++++++++++++- components-diy/diy-category.vue | 184 ++++++++++++++++- 2 files changed, 453 insertions(+), 19 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 10fee03..0e45101 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -214,8 +214,9 @@ @scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll"> - {{ category.category_name - }} + + {{ category.category_name }} + + v-if="item.member_price && item.member_price == showPrice(item) && value.template != 4"> - + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + v-if="showMarketPrice(item) && value.template != 4"> {{ $lang('common.currencySymbol') }} {{ showMarketPrice(item) }} - + {{ $lang('components-diy.diy-category-item.consultNow') }} + + + + + {{ $lang('components-diy.diy-category-item.buyNow') }} + + + + {{ $lang('components-diy.diy-category-item.selectSpecs') }} + {{ item.num }} + + + + + + + {{ cartList['goods_' + item.goods_id]['sku_' + + item.sku_id].num }} + + + + + + + + + + + + @@ -378,13 +419,13 @@ {{ showMarketPrice(item) }} - + {{ $lang('components-diy.diy-category-item.consultNow') }} - + {{ $lang('components-diy.diy-category-item.buyNow') }} @@ -1955,6 +1996,237 @@ export default { border-radius: 28rpx; } } + + // ===================== 模板4 商品分类样式(单列卡片式: 左图右文 + 右侧+按钮) ===================== + &[data-template='4'] { + // 整体灰色背景让卡片有层次 + background: #f4f6fa; + padding: 20rpx; + margin: 0; + + .goods-item { + display: flex; + flex-direction: row; + align-items: stretch; + width: 100% !important; + max-width: 100%; + background: #fff; + border-radius: 16rpx; + overflow: hidden; + margin: 0 0 20rpx; + padding: 20rpx; + box-sizing: border-box; + position: relative; + } + + // 商品图片: 左侧正方形 + .goods-img { + width: 200rpx; + height: 200rpx; + padding-top: 0; + margin-right: 20rpx; + border-radius: 12rpx; + flex-shrink: 0; + position: relative; + overflow: hidden; + background: #fff; + + image { + width: 100%; + height: 100%; + position: absolute !important; + top: 0; + left: 0; + transform: none; + border-radius: 12rpx; + } + + // 标签(秒杀/爆款): 位于图片左上角 + .goods-tag { + position: absolute; + top: 0; + left: 0; + padding: 6rpx 16rpx; + font-size: 22rpx; + color: #fff; + background: $base-color; + border-bottom-right-radius: 12rpx; + border-top-left-radius: 12rpx; + z-index: 2; + line-height: 1; + } + } + + // 信息区域: 右侧占满 + .info-wrap { + flex: 1; + display: flex; + flex-direction: column; + padding: 0; + min-width: 0; + position: relative; + } + + // 商品名称: 2行省略 + .name-wrap { + width: 100%; + + .goods-name { + font-size: 26rpx; + line-height: 1.4; + margin-top: 0; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + color: #333; + } + } + + // 价格区域: 当前价(红) + 删除价(灰色删除线) + .price-wrap { + margin-top: auto; + display: flex; + align-items: baseline; + flex-wrap: wrap; + padding-right: 90rpx; // 留出右侧+按钮的位置 + + .discount-price { + display: inline-flex; + align-items: baseline; + color: var(--price-color, #FF6B35); + font-weight: bold; + line-height: 1; + + .unit { + font-size: 24rpx; + margin-right: 2rpx; + color: var(--price-color, #FF6B35); + } + + .price { + font-size: 36rpx; + color: var(--price-color, #FF6B35); + } + } + + // 删除线价格: 紧跟当前价,灰色 + .delete-price { + margin-left: 16rpx; + display: inline-flex; + align-items: baseline; + text-decoration: line-through; + font-size: 24rpx; + color: #999; + line-height: 1; + + .unit { + margin-right: 2rpx; + } + } + } + + // 底部行: 仅在模板4下保留用于挂载 right-wrap + .footer-wrap { + position: absolute; + right: 20rpx; + bottom: 20rpx; + margin-top: 0; + padding: 0; + } + + // 右侧+按钮 / 择规格按钮 + .right-wrap { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 0; + padding: 0; + + .num { + width: auto; + padding: 0 16rpx; + line-height: 1; + color: #333; + font-size: 28rpx; + } + + .num-action { + display: flex; + align-items: center; + justify-content: center; + width: 50rpx; + height: 50rpx; + background: $base-color; + border-radius: 8rpx; + position: relative; + box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.3); + + .click-event { + position: absolute; + width: 2rpx; + height: 2rpx; + left: 0; + top: 0; + transform: translate(-50%, -50%); + z-index: 5; + } + + &.reduce { + width: 48rpx; + height: 48rpx; + background-color: #fff; + border: 2rpx solid $base-color; + box-sizing: border-box; + + .icon-jian { + color: $base-color; + } + } + } + + .icon-jian, + .icon-jia { + color: var(--btn-text-color, #fff); + font-weight: bold; + font-size: 30rpx; + line-height: 1; + } + + // 择规格按钮 + .select-sku { + font-weight: bold; + color: var(--btn-text-color, #fff); + font-size: 24rpx; + padding: 12rpx 24rpx; + position: relative; + line-height: 1; + text-align: center; + border-radius: 30rpx; + background: $base-color; + box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.3); + + .num-tag { + position: absolute; + top: -8rpx; + right: -8rpx; + display: inline-block; + box-sizing: border-box; + color: #fff; + line-height: 1.2; + text-align: center; + font-size: 22rpx; + padding: 0 6rpx; + min-width: 28rpx; + border-radius: 16rpx; + background-color: var(--price-color, #FF6B35); + border: 2rpx solid #fff; + } + } + } + } } .categoty-goods-wrap { diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue index 7f72668..24cf190 100644 --- a/components-diy/diy-category.vue +++ b/components-diy/diy-category.vue @@ -1,6 +1,15 @@