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

chore：template == 4页面后台选择二级分类正常

Browse Source
This commit is contained in:
jinhhanhan
2026-07-17 15:53:09 +08:00
parent 6d1bdb5d8b
commit 0d820b04f7
2 changed files with 453 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -214,8 +214,9 @@
@scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
<!--一级分类展示商品显示-->
<view class="category-title" v-if="value.template != 3" :style="{ fontSize: (themeStyle && themeStyle.diy_category_item_goods_title_size) || '28rpx', paddingBottom: 0 }">{{ category.category_name
}}</view>
<view class="category-title" v-if="value.template != 3 && value.template != 4" :style="{ fontSize: (themeStyle && themeStyle.diy_category_item_goods_title_size) || '28rpx', paddingBottom: 0 }">
{{ category.category_name }}
</view>
<!--一级-->
<view class="goods-list"
@@ -271,27 +272,67 @@
</block>
</view>
<view class="member-price-tag"
v-if="item.member_price && item.member_price == showPrice(item)">
v-if="item.member_price && item.member_price == showPrice(item) && value.template != 4">
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix" show-menu-by-longpress />
</view>
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
<view class="member-price-tag" v-else-if="item.promotion_type == 1 && value.template != 4">
<image :src="$util.img('public/uniapp/index/discount.png')"
mode="widthFix" show-menu-by-longpress />
</view>
<!-- 模板4: 删除线价格(图片样式) -->
<view class="delete-price font-size-activity-tag color-tip price-font"
v-if="showMarketPrice(item) && value.template == 4">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="footer-wrap">
<view class="pro-info">
<view class="delete-price font-size-activity-tag color-tip price-font"
v-if="showMarketPrice(item)">
v-if="showMarketPrice(item) && value.template != 4">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1">
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1 && value.template != 4">
<view class="consult-now-btn" @tap.stop="sendToAIChat(item)">
{{ $lang('components-diy.diy-category-item.consultNow') }}
</view>
</view>
<!-- 模板4: 右侧+按钮/择规格按钮(图片样式) -->
<view class="right-wrap" v-if="value.template == 4">
<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>
</block>
<block v-else>
<view v-if="item.goods_spec_format" class="color-base-bg select-sku"
@tap.stop="selectSku(item)">
<text>{{ $lang('components-diy.diy-category-item.selectSpecs') }}</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>
</view>
</view>
@@ -378,13 +419,13 @@
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1">
<view class="consult-now-btn-wrap" v-if="item.isinformation == 1 && value.template != 4">
<view class="consult-now-btn" @tap.stop="sendToAIChat(item)">
{{ $lang('components-diy.diy-category-item.consultNow') }}
</view>
</view>
<view class="right-wrap" v-if="value.template == 2">
<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)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view>
</block>
@@ -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 {

184
components-diy/diy-category.vue
View File

@@ -1,6 +1,15 @@
<template>
<view data-component-name="diy-category" :class="['category-page-wrap', 'category-template-' + value.template]"
:style="{ height: 'calc(100vh - ' + tabBarHeight + ')' }">
<!-- 模板4: 顶部搜索框(图片样式) -->
<view class="search-box search-box-template-4" v-if="value.template == 4 && value.search"
@tap.stop="onClickSearch()">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('components-diy.diy-search.searchBtn')"
confirm-type="search" @tap.stop="onClickSearch()" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- <block v-if="value.template == 4">
<view class="search-box" v-if="value.search" @tap.stop="$util.redirectTo('/pages_tool/goods/search')" :style="navbarInnerStyle">
@@ -28,7 +37,7 @@
<!-- #endif -->
<!-- #ifdef H5 || MP-HARMONY -->
<view class="search-box" v-if="value.search" @tap.stop="onClickSearch()">
<view class="search-box" v-if="value.search && value.template != 4" @tap.stop="onClickSearch()">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('components-diy.diy-search.searchBtn')" confirm-type="search"
@tap.stop="onClickSearch()" disabled="true" />
@@ -81,12 +90,25 @@
<block v-if="categoryTree.length">
<scroll-view scroll-y="true" class="tree-wrap">
<view class="category-item-wrap">
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
{ select: select == index },
{ 'border-bottom': value.template == 4 && select + 1 === index },
{ 'border-top': value.template == 4 && select - 1 === index }
]" @tap.stop="switchOneCategory(index)">
<view class="">{{ item.category_name }}</view>
<!-- 模板4: 左侧显示一级分类(顶部轮播中的分类) -->
<view v-if="value.template == 4">
<view class="category-item" v-for="(item, index) in templateFourData" :key="'one-' + index" :class="[
{ select: oneCategorySelect == index },
{ 'border-bottom': oneCategorySelect + 1 === index },
{ 'border-top': oneCategorySelect - 1 === index }
]" @tap.stop="templateFourOneFn(index)">
<view class="">{{ item.category_name }}</view>
</view>
</view>
<!-- 其他模板: 左侧显示二级分类 -->
<view v-else>
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
{ select: select == index },
{ 'border-bottom': value.template == 4 && select + 1 === index },
{ 'border-top': value.template == 4 && select - 1 === index }
]" @tap.stop="switchOneCategory(index)">
<view class="">{{ item.category_name }}</view>
</view>
</view>
</view>
</scroll-view>
@@ -140,6 +162,7 @@
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
:last="index == categoryTree.length - 1 ? true : false" :select="select"
:oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
:currentOneCategory="value.template == 4 && templateFourData[oneCategorySelect] ? templateFourData[oneCategorySelect] : null"
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
@switch="switchOneCategory"></diy-category-item>
</view>
@@ -156,9 +179,12 @@
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
</view>
<!-- <view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
<!-- 模板4: 底部购物车栏 -->
<view class="cart-box cart-box-template-4"
v-if="value.template == 4 && value.quickBuy && storeToken && categoryTree && categoryTree.length">
<view class="left-wrap">
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation" @tap.stop="$util.redirectTo('/pages_goods/cart')">
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation"
@tap.stop="$util.redirectTo('/pages_goods/cart')">
<text class="iconfont icon-ziyuan1"></text>
<view class="num" v-if="cartNumber">{{ cartNumber < 99 ? cartNumber : '99+' }}</view>
</view>
@@ -169,9 +195,10 @@
<text class="unit font-size-tag price-font">.{{ cartTotalMoney[1] ? cartTotalMoney[1] : '00' }}</text>
</view>
</view>
<view class="right-wrap"><button type="primary" class="settlement-btn" @tap.stop="settlement">去结算</button>
<view class="right-wrap"><button type="primary" class="settlement-btn"
@tap.stop="settlement">去结算</button>
</view>
</view> -->
</view>
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index"
v-for="(item, index) in carIconList"></view>
@@ -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;