From 7f2e5d3934e25e578b7c41ea807f8e5f50f5e4f4 Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Wed, 15 Jul 2026 16:50:26 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=20template=2099=E6=AD=A3?= =?UTF-8?q?=E5=B8=B8=E8=BF=90=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-category-item.vue | 175 ++++++++++++++++++++++++--- components-diy/diy-category.vue | 95 +++++++++++++++ pages.json | 24 +++- 3 files changed, 274 insertions(+), 20 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 7754063..c0734c1 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -45,7 +45,7 @@ - + {{ category.category_name }} - + {{ one.category_name }} @@ -848,19 +848,23 @@ export default { sort = this.value.sortType == 'desc' ? 'desc' : 'asc'; } } - this.$api.goods.getGoodsList({ - category_id: categoryId, - page: this.pageIndex, - page_size: this.pageSize, - order: order, - sort: sort - }).then(res => { - this.loading = false; - if (res.data.data.list) { - this.secondCategoryGoodsList = res.data.data.list; + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: this.pageSize, + order: order, + sort: sort + }, + success: res => { + this.loading = false; + if (res.code == 0 && res.data && res.data.list) { + this.secondCategoryGoodsList = res.data.list; + } else { + this.secondCategoryGoodsList = []; + } } - }).catch(err => { - this.loading = false; }); }, //加载商品在购物车的总数量 @@ -1589,4 +1593,147 @@ export default { .price-font { font-weight: var(--diy-category-item-price-font-weight, 500) !important; } + +// ===================== 模板99 商品分类样式 ===================== +.second-category-btns { + display: flex; + flex-wrap: wrap; + padding: 20rpx 20rpx 10rpx; + background: #fff; + border-bottom: 1rpx solid #f0f0f0; + + .second-category-btn { + padding: 14rpx 32rpx; + background: #f5f5f5; + color: #666; + border-radius: 40rpx; + font-size: 26rpx; + margin: 0 16rpx 16rpx 0; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.selected { + background: #FF6B35; + color: #fff; + } + } +} + +.category-goods-list { + padding: 20rpx; + background: #f5f5f5; + width: 100%; + box-sizing: border-box; + + .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; + display: flex; + flex-direction: column; + box-sizing: border-box; + + .goods-img { + width: 100%; + height: 0; + padding-top: 100%; + position: relative; + overflow: hidden; + background: #fff; + border-top-left-radius: 12rpx; + border-top-right-radius: 12rpx; + + image { + width: 100%; + height: 100%; + position: absolute !important; + top: 0; + left: 0; + transform: none; + } + + .goods-tag { + position: absolute; + top: 10rpx; + left: 10rpx; + padding: 4rpx 12rpx; + color: #fff; + font-size: 22rpx; + border-radius: 6rpx; + background: #FF6B35; + z-index: 2; + } + } + + .info-wrap { + flex: 1; + padding: 16rpx; + display: flex; + flex-direction: column; + } + + .name-wrap { + .goods-name { + font-size: 26rpx; + color: #333; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + line-height: 1.4; + margin-top: 0; + white-space: normal; + text-overflow: clip; + } + } + + .price-wrap { + margin-top: 10rpx; + display: flex; + align-items: baseline; + justify-content: space-between; + + .discount-price { + color: #FF6B35; + font-size: 30rpx; + font-weight: bold; + + .unit { + font-size: 22rpx; + } + } + } + } + } +} + +.category-goods-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 80rpx 0; + background: #f5f5f5; + width: 100%; + + image { + width: 280rpx; + height: 252rpx; + } + + .tips { + font-size: 26rpx; + color: #999; + margin-top: 20rpx; + } +} \ No newline at end of file diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue index bc17e54..cb4727d 100644 --- a/components-diy/diy-category.vue +++ b/components-diy/diy-category.vue @@ -1054,4 +1054,99 @@ export default { border-bottom-right-radius: 8rpx; } } + +// ===================== 模板99 商品分类样式 ===================== +.category-template-99 { + .search-box { + padding: 20rpx 24rpx; + background: #fff; + border-bottom: 1rpx solid #f0f0f0; + + .search-content { + height: 64rpx; + background-color: #f5f5f5; + border-radius: 40rpx; + + input { + height: 64rpx; + line-height: 64rpx; + padding: 0 80rpx 0 30rpx; + background: #f5f5f5; + border-radius: 40rpx; + font-size: 26rpx; + color: #333; + } + + .iconfont { + font-size: 32rpx; + color: #89899a; + width: 70rpx; + text-align: center; + } + } + + > .iconfont { + font-size: 40rpx; + color: #666; + margin-left: 20rpx; + } + } + + .content-box { + .tree-wrap { + width: 200rpx; + background-color: #f5f5f5; + } + + .right-flex-wrap { + flex: 1; + width: 0; + background: #f5f5f5; + } + } + + .tree-wrap .category-item { + padding: 30rpx 16rpx; + background-color: #f5f5f5; + + view { + color: #333; + font-size: 26rpx; + line-height: 1.3; + } + + &.select { + background: #fff; + + view { + color: #FF6B35; + font-weight: bold; + font-size: 28rpx; + } + + &::before { + content: ' '; + width: 6rpx; + height: 36rpx; + background: #FF6B35; + display: block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + border-radius: 0 6rpx 6rpx 0; + } + } + } + + .content-wrap { + background: #f5f5f5; + padding: 0; + } + + .child-category { + width: 100%; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/pages.json b/pages.json index 1a6d0a3..6276820 100644 --- a/pages.json +++ b/pages.json @@ -145,13 +145,25 @@ "diy-store-label": "view", "diy-tab": "view", "diy-text": "view", - "diy-video": "view", - "diy-video-list": "view" - } + "diy-video": "view", + "diy-video-list": "view" } - }, - { - "path": "cart", + } + }, + { + // 分类模板99测试页面 + "path": "category-test99", + "style": { + "disableScroll": true, + "navigationBarTitleText": "分类模板99", + "componentPlaceholder": { + "diy-category": "view", + "diy-category-item": "view" + } + } + }, + { + "path": "cart", "style": { // #ifdef APP-PLUS "navigationStyle": "custom",