Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：template == 3的模板正常

Browse Source
This commit is contained in:
jinhhanhan
2026-07-17 14:54:44 +08:00
parent b2063418fb
commit 73b7b2a8df
1 changed files with 183 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
components-diy/diy-category-item.vue
View File

@@ -228,7 +228,35 @@
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }} <view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}
</view> </view>
</view> </view>
<view class="info-wrap"> <!-- 模板3: 卡片式布局 - 上方名称, 下方价格+按钮 -->
<view class="info-wrap" v-if="value.template == 3">
<view class="name-wrap" @tap.stop="toDetail(item)">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view>
<view class="info-bottom">
<view class="price-wrap">
<view class="discount-price">
<block v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</block>
</view>
<view class="delete-price font-size-activity-tag color-tip price-font"
v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="buy-now-btn color-base-bg" @tap.stop="toDetail(item)">
{{ $lang('components-diy.diy-category-item.buyNow') }}
</view>
</view>
</view>
<!-- 其他模板: 保留原结构 -->
<view class="info-wrap" v-else>
<view class="name-wrap" @tap.stop="toDetail(item)"> <view class="name-wrap" @tap.stop="toDetail(item)">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view> <view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view> </view>
@@ -264,37 +292,6 @@
{{ $lang('components-diy.diy-category-item.consultNow') }} {{ $lang('components-diy.diy-category-item.consultNow') }}
</view> </view>
</view> </view>
<!-- <view class="right-wrap" v-if="value.template == 2 || value.template == 4">
<block v-if="item.is_virtual">
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">立即购买</view>
</block>
<block v-else>
<view v-if="item.goods_spec_format" class="color-base-bg select-sku" @tap.stop="selectSku(item)">
<text>选规格</text>
<text class="num-tag" v-if="item.num">{{ item.num }}</text>
</view>
<block v-else>
<block v-if="cartList['goods_' + item.goods_id]&&cartList['goods_' + item.goods_id]['sku_' + item.sku_id]">
<view class="num-action reduce" @tap.stop="reduce(item)">
<text class="iconfont icon-jian"></text>
</view>
<view class="num">{{ cartList['goods_' + item.goods_id]['sku_' + item.sku_id].num }}</view>
<view class="num-action" :id="'cart-num-' + index" @tap.stop="increase($event, item)">
<text class="iconfont icon-jia"></text>
<view class="click-event"></view>
</view>
</block>
<view class="num-action" v-else :id="'cart-num-' + index" @tap.stop="increase($event, item, 0)">
<text class="iconfont icon-jia"></text>
<view class="click-event"></view>
</view>
</block>
</block>
</view> -->
<!-- <view class="right-wrap" v-if="value.template == 3">
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">立即购买</view>
</view> -->
</view> </view>
</view> </view>
</view> </view>
@@ -323,7 +320,35 @@
:lazy-load="true" show-menu-by-longpress /> :lazy-load="true" show-menu-by-longpress />
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view> <view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
</view> </view>
<view class="info-wrap"> <!-- 模板3: 卡片式布局 - 上方名称, 下方价格+按钮 -->
<view class="info-wrap" v-if="value.template == 3">
<view class="name-wrap" @tap.stop="toDetail(item)">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view>
<view class="info-bottom">
<view class="price-wrap">
<view class="discount-price">
<block v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</block>
</view>
<view class="delete-price font-size-activity-tag color-tip price-font"
v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="buy-now-btn color-base-bg" @tap.stop="toDetail(item)">
{{ $lang('components-diy.diy-category-item.buyNow') }}
</view>
</view>
</view>
<!-- 其他模板: 保留原结构 -->
<view class="info-wrap" v-else>
<view class="name-wrap" @tap.stop="toDetail(item)"> <view class="name-wrap" @tap.stop="toDetail(item)">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view> <view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view> </view>
@@ -358,7 +383,7 @@
{{ $lang('components-diy.diy-category-item.consultNow') }} {{ $lang('components-diy.diy-category-item.consultNow') }}
</view> </view>
</view> </view>
<view class="right-wrap" v-if="value.template == 2"> <view class="right-wrap" v-if="value.template == 2">
<block v-if="item.is_virtual"> <block v-if="item.is_virtual">
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view> <view class="color-base-bg select-sku" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view>
@@ -391,9 +416,6 @@
</block> </block>
</block> </block>
</view> </view>
<view class="right-wrap" v-if="value.template == 3">
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -1794,30 +1816,143 @@ export default {
} }
}*/ }*/
&[data-template='3'] .goods-item { // ===================== 模板3 商品分类样式 (卡片式布局: 图片顶部 + 名称上行 + 价格和按钮下行) =====================
flex-direction: column; &[data-template='3'] {
// 模板3 的商品列表容器: 灰色背景让卡片有层次
background: #f4f6fa;
.info-wrap { // 重置 double-column 的影响, 强制单列布局
width: 100%; .goods-item {
margin-top: var(--diy-category-item-info-wrap-margin-top, 12rpx); 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 { .goods-img {
width: 100%; width: 100%;
height: auto; height: 0;
padding-top: 50%;
position: relative;
margin-right: 0; margin-right: 0;
line-height: 1; line-height: 1;
border-radius: 0;
overflow: hidden;
image { 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; font-weight: bold;
width: 128rpx; color: #fff;
height: 52rpx !important; border-radius: 28rpx;
line-height: 52rpx !important;
} }
} }
} }