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] =?UTF-8?q?chore=EF=BC=9Atemplate=20=3D=3D=204=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2=E5=90=8E=E5=8F=B0=E9=80=89=E6=8B=A9=E4=BA=8C=E7=BA=A7?=
=?UTF-8?q?=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) }}
+
@@ -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 @@
+
+
+
+
+
+
+
-
+
@@ -81,12 +90,25 @@
-
- {{ item.category_name }}
+
+
+
+ {{ item.category_name }}
+
+
+
+
+
+ {{ item.category_name }}
+
@@ -140,6 +162,7 @@
@@ -156,9 +179,12 @@
{{ $lang('components-diy.diy-category.noCategory') }}
-
+
-
+
{{ cartNumber < 99 ? cartNumber : '99+' }}
@@ -169,9 +195,10 @@
.{{ cartTotalMoney[1] ? cartTotalMoney[1] : '00' }}
-
+
- -->
+
@@ -228,6 +255,10 @@ export default {
created() {
this.getCategoryTree();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
+ // 模板4: 默认单列列表布局(图片样式)
+ if (this.value.template == 4) {
+ this.isList = true;
+ }
},
mounted() {
query = uni.createSelectorQuery().in(this);
@@ -921,6 +952,137 @@ export default {
// 风格四
.category-template-4 {
+ // 模板4 顶部搜索框(图片样式)
+ .search-box-template-4 {
+ padding: 20rpx 30rpx 16rpx;
+ background: #fff;
+
+ .search-content {
+ height: 64rpx;
+ background-color: #f5f5f5;
+ border-radius: 40rpx;
+
+ input {
+ height: 64rpx;
+ line-height: 64rpx;
+ padding: 0 30rpx 0 30rpx;
+ background: #f5f5f5;
+ border-radius: 40rpx;
+ font-size: 26rpx;
+ color: #333;
+ }
+
+ .iconfont {
+ font-size: 32rpx;
+ color: #89899a;
+ width: 70rpx;
+ text-align: center;
+ right: 10rpx;
+ }
+ }
+ }
+
+ // 模板4 底部购物车栏(图片样式)
+ .cart-box-template-4 {
+ height: 110rpx;
+ padding: 0 30rpx;
+ background: #fff;
+ border-top: 1rpx solid #f0f0f0;
+ position: relative;
+ z-index: 10;
+ box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
+
+ .left-wrap {
+ display: flex;
+ align-items: center;
+ }
+
+ .cart-icon {
+ width: 90rpx;
+ height: 90rpx;
+ position: relative;
+ margin-top: -10rpx;
+
+ .iconfont {
+ color: var(--btn-text-color, #fff);
+ width: 80rpx;
+ height: 80rpx;
+ background-color: $base-color;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 40rpx;
+ box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
+ }
+
+ .num {
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translate(20%, 0);
+ display: inline-block;
+ box-sizing: border-box;
+ color: #fff;
+ line-height: 1.2;
+ text-align: center;
+ font-size: 24rpx;
+ padding: 0 8rpx;
+ min-width: 32rpx;
+ border-radius: 18rpx;
+ background-color: var(--price-color, #FF6B35);
+ border: 2rpx solid #fff;
+ }
+ }
+
+ .price {
+ margin-left: 16rpx;
+ display: flex;
+ align-items: baseline;
+ line-height: 1;
+
+ .title {
+ color: #333;
+ font-size: 28rpx;
+ }
+
+ .unit,
+ .money {
+ color: var(--price-color, #FF6B35);
+ font-weight: bold;
+ }
+
+ .unit {
+ font-size: 24rpx;
+ }
+
+ .money {
+ font-size: 36rpx;
+ }
+ }
+
+ .right-wrap {
+ display: flex;
+ align-items: center;
+ }
+
+ .settlement-btn {
+ margin: 0;
+ width: 220rpx;
+ font-weight: bold;
+ border-radius: 50rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+ font-size: 30rpx;
+ background: $base-color;
+ color: var(--btn-text-color, #fff);
+
+ &::after {
+ border: none;
+ }
+ }
+ }
+
.search-box {
.search-content input {
background-color: #f1f1f1;