angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(specaialAreaList): 商品列表样式调整

This commit is contained in:
woody 2025-10-28 18:00:46 +08:00
parent 2e0eb8058c
commit ff8c0fca2d
1 changed files with 493 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

701
pages/specialArea/list.vue
View File

@ -4,77 +4,14 @@
<view class="index_header">
<view>{{ titLabel }}</view>
</view>
<view class="shareImg" v-if="specialArea == 7" @click="goShare">
<u-icon name="share-square" size="24" color="#005BAC"> </u-icon>
<!-- 分类抽屉按钮 -->
<view class="category-drawer-btn" @click="openCategoryDrawer">
<u-icon name="list" size="20" color="#005BAC"></u-icon>
<text>分类</text>
</view>
<!-- <u-scroll-list
:indicator="false"
v-if="itemChildren.length > 1"
class="tabList_a"
>
<view class="tab">
<view
v-for="(item, index) in itemChildren"
:key="index"
@click="setSpecial(item)"
v-show="item.isShow"
:class="[specialArea == item.value ? 'actTab' : 'tab_i']"
>
<view>{{ item.label }}</view>
</view>
</view>
</u-scroll-list> -->
<view class="index_btm">
<!-- 新的可收起展开的一二级菜单 -->
<view class="menu_container">
<view class="collapsible_menu">
<view v-for="item in oneList" :key="item.pkId" class="menu_group">
<!-- 一级分类 -->
<view
class="first_level_item"
:class="{ active: oneId == item.pkId }"
@click="toggleFirstLevel(item)"
>
<view class="menu_text">{{
truncateText(item.classifyName, 10)
}}</view>
<view
v-if="item.children && item.children.length > 0"
class="expand_icon"
:class="{ expanded: expandedMenus.includes(item.pkId) }"
>
<u-icon
name="arrow-right"
size="14"
:color="oneId == item.pkId ? '#fff' : '#666'"
></u-icon>
</view>
</view>
<view
class="second_level_container"
:class="{ expanded: expandedMenus.includes(item.pkId) }"
v-if="
item.pkId === oneId && item.children && item.children.length > 0
"
>
<view
v-for="subItem in item.children"
:key="subItem.pkId"
class="second_level_item"
:class="{ active: twoId == subItem.pkId }"
@click="selectSecondLevel(subItem)"
>
<view class="sub_menu_text">{{
truncateText(subItem.classifyName, 10)
}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="index_r">
<view class="index_r full-width">
<view class="search">
<u--input
placeholder="请输入商品名称"
@ -88,11 +25,41 @@
></u--input>
</view>
<view class="goodList">
<!-- 空状态提示 -->
<view v-if="goodList.length === 0" class="empty-state">
<view class="empty-icon">
<u-icon :name="getEmptyIcon()" size="80" color="#d0d0d0"></u-icon>
</view>
<view class="empty-title">{{ getEmptyTitle() }}</view>
<view class="empty-desc">{{ getEmptyDesc() }}</view>
<view class="empty-tips">
<text v-for="(tip, index) in getEmptyTips()" :key="index">
• {{ tip }}
</text>
</view>
<view class="empty-actions">
<view class="empty-action primary" @click="openCategoryDrawer">
<u-icon name="list" size="16" color="#ffffff"></u-icon>
<text>浏览分类</text>
</view>
<view
class="empty-action secondary"
@click="clearSearch"
v-if="waresName"
>
<u-icon name="close-circle" size="16" color="#005bac"></u-icon>
<text>清除搜索</text>
</view>
</view>
</view>
<!-- 商品列表 -->
<view
v-for="item in goodList"
:key="item.waresCode"
class="goodList_i"
@tap="goDetails(item)"
v-else
>
<view style="display: flex; flex: 1">
<view
@ -247,6 +214,75 @@
:carLength="shopCarLength"
:specialArea="specialArea"
></cartBall>
<!-- 分类抽屉遮罩 -->
<view
class="drawer-mask"
:class="{ show: showCategoryDrawer }"
@click="closeCategoryDrawer"
v-if="showCategoryDrawer"
></view>
<!-- 分类抽屉 -->
<view class="category-drawer" :class="{ show: showCategoryDrawer }">
<view class="drawer-header">
<text class="drawer-title">商品分类</text>
<u-icon
name="close"
size="20"
color="#666"
@click="closeCategoryDrawer"
></u-icon>
</view>
<view class="drawer-content">
<view
v-for="item in oneList"
:key="item.pkId"
class="drawer-menu-group"
>
<!-- 一级分类 -->
<view
class="drawer-first-level"
:class="{ active: oneId == item.pkId }"
>
<view class="drawer-menu-text" @click="selectFirstLevel(item)">{{
truncateText(item.classifyName, 12)
}}</view>
<!-- <view
v-if="item.children && item.children.length > 0"
class="drawer-expand-icon"
:class="{ expanded: expandedMenus.includes(item.pkId) }"
@click="toggleExpand(item.pkId)"
>
<u-icon
name="arrow-right"
size="16"
:color="oneId == item.pkId ? '#fff' : '#666'"
></u-icon>
</view> -->
</view>
<view
class="drawer-second-level-container"
:class="{ expanded: expandedMenus.includes(item.pkId) }"
v-if="item.children && item.children.length > 0"
>
<view
v-for="subItem in item.children"
:key="subItem.pkId"
class="drawer-second-level"
:class="{ active: twoId == subItem.pkId }"
@click="selectSecondLevel(subItem)"
>
<view class="drawer-sub-menu-text">{{
truncateText(subItem.classifyName, 12)
}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
@ -301,6 +337,7 @@ export default {
isCountry: false,
waresName: '',
expandedMenus: [], // 存储展开的一级菜单ID
showCategoryDrawer: false, // 控制分类抽屉显示
}
},
onLoad(options) {
@ -370,6 +407,8 @@ export default {
},
onShow() {
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
// 确保抽屉是关闭的
this.showCategoryDrawer = false
let that = this
uni.$on('returnData', function (data) {
that.specialArea = data.value
@ -413,7 +452,16 @@ export default {
...item,
}
})
this.toggleFirstLevel(this.oneList[0])
// 默认全部展开
this.expandedMenus = this.oneList.map(item => item.pkId)
// 选择第一个分类
if (this.oneList[0]) {
this.oneId = this.oneList[0].pkId
this.twoId = this.oneList[0].pkId
this.getAllGoods(this.oneList[0].pkId)
}
}
})
},
@ -422,26 +470,94 @@ export default {
if (text.length <= maxLength) return text
return text.substring(0, maxLength) + '...'
},
toggleFirstLevel(item) {
const index = this.expandedMenus.indexOf(item.pkId)
this.expandedMenus = []
if (index === -1) {
this.expandedMenus.push(item.pkId)
}
if (item.pkId === this.oneId) {
return
}
// 选择一级分类（不影响展开状态）
selectFirstLevel(item) {
this.oneId = item.pkId
this.twoId = item.pkId
this.getAllGoods(item.pkId)
// this.getClassIfyTwo(item.pkId)
},
// 切换展开状态（不影响选择状态）
toggleExpand(pkId) {
const index = this.expandedMenus.indexOf(pkId)
if (index === -1) {
this.expandedMenus.push(pkId)
} else {
this.expandedMenus.splice(index, 1)
}
},
// 保留原方法以兼容其他地方的调用
toggleFirstLevel(item) {
this.selectFirstLevel(item)
},
// 选择二级分类
selectSecondLevel(item) {
this.twoId = item.pkId
this.getAllGoods1(item.pkId)
// 不自动关闭抽屉，让用户手动关闭
},
// 打开分类抽屉
openCategoryDrawer() {
this.showCategoryDrawer = true
},
// 关闭分类抽屉
closeCategoryDrawer() {
this.showCategoryDrawer = false
},
// 获取空状态图标
getEmptyIcon() {
if (this.waresName) {
return 'search'
}
return 'shopping-cart'
},
// 获取空状态标题
getEmptyTitle() {
if (this.waresName) {
return '未找到相关商品'
}
return '暂无商品'
},
// 获取空状态描述
getEmptyDesc() {
if (this.waresName) {
return `没有找到包含"${this.waresName}"的商品`
}
// 如果二级分类ID不等于一级分类ID，说明选择了具体的二级分类
if (this.twoId !== this.oneId) {
const currentCategory = this.oneList.find(
item => item.pkId === this.oneId
)
if (currentCategory && currentCategory.children) {
const subCategory = currentCategory.children.find(
sub => sub.pkId === this.twoId
)
if (subCategory) {
return `"${subCategory.classifyName}"分类下还没有商品哦`
}
}
}
// 显示一级分类名称
const currentCategory = this.oneList.find(
item => item.pkId === this.oneId
)
if (currentCategory) {
return `"${currentCategory.classifyName}"分类下还没有商品哦`
}
return '当前分类下还没有商品哦'
},
// 获取空状态提示
getEmptyTips() {
if (this.waresName) {
return ['检查搜索词是否正确', '浏览其他分类商品']
}
return ['试试其他分类', '商品正在陆续上架中']
},
// 清除搜索
clearSearch() {
this.waresName = ''
this.getAllGoods1()
},
changeCountry() {
this.isCountry = true
@ -537,10 +653,8 @@ export default {
this.oneList = res.data
this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
// 默认展开第一个菜单
if (this.oneList[0]) {
this.expandedMenus = [this.oneList[0].pkId]
}
// 默认全部展开
this.expandedMenus = this.oneList.map(item => item.pkId)
this.getClassIfyTwo(this.oneList[0].pkId)
this.getAllGoods(this.oneList[0].pkId)
@ -681,152 +795,223 @@ export default {
margin-bottom: 10rpx;
}
/* 分类抽屉按钮 */
.category-drawer-btn {
position: fixed;
top: 10rpx;
right: 20rpx;
z-index: 999;
display: flex;
align-items: center;
padding: 16rpx 20rpx;
font-size: 24rpx;
color: #005bac;
font-weight: 500;
text {
margin-left: 8rpx;
}
&:active {
transform: scale(0.95);
background: rgba(240, 247, 255, 0.95);
}
}
.index_btm {
flex: 1;
display: flex;
.menu_container {
width: 200rpx;
background: #f8f9fa;
border-right: 1px solid #e9ecef;
.index_r {
flex: 1;
background: #fff;
display: flex;
flex-direction: column;
.collapsible_menu {
height: 86vh;
overflow-y: auto;
padding: 10rpx 0;
&.full-width {
margin-left: 0;
}
}
}
.menu_group {
margin-bottom: 4rpx;
/* 分类抽屉遮罩 */
.drawer-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
.first_level_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16rpx 12rpx;
margin: 0 8rpx;
background: #ffffff;
border-radius: 8rpx;
font-size: 20rpx;
font-weight: 500;
color: #333333;
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1rpx solid transparent;
&.show {
opacity: 1;
}
}
/* 分类抽屉样式 */
.category-drawer {
position: fixed;
top: 0;
left: 0;
width: 600rpx;
height: 100vh;
background: #f8f9fa;
display: flex;
flex-direction: column;
z-index: 1001;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
&.show {
transform: translateX(0);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 30rpx 30rpx;
background: #ffffff;
border-bottom: 1px solid #e9ecef;
.drawer-title {
font-size: 32rpx;
font-weight: 600;
color: #333333;
}
}
.drawer-content {
flex: 1;
overflow-y: auto;
padding: 20rpx 0;
/* 抽屉滚动条 */
&::-webkit-scrollbar {
width: 4rpx;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 2rpx;
}
.drawer-menu-group {
margin-bottom: 8rpx;
background: #ffffff;
border-radius: 12rpx;
margin: 0 20rpx 12rpx;
overflow: hidden;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
.drawer-first-level {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
font-weight: 600;
color: #333333;
transition: all 0.3s ease;
position: relative;
&.active {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
color: #ffffff;
.drawer-expand-icon {
.u-icon {
color: #ffffff !important;
}
}
}
.drawer-menu-text {
flex: 1;
font-size: 30rpx;
line-height: 1.3;
padding: 32rpx 24rpx;
cursor: pointer;
&:active {
transform: scale(0.98);
background: #f0f7ff;
background: rgba(0, 0, 0, 0.05);
}
}
.drawer-expand-icon {
transition: transform 0.3s ease;
padding: 32rpx 24rpx 32rpx 8rpx;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&:active {
background: rgba(0, 0, 0, 0.05);
}
&.expanded {
transform: rotate(90deg);
}
}
}
.drawer-second-level-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: #f8f9fa;
&.expanded {
max-height: 1000rpx;
}
.drawer-second-level {
padding: 24rpx 48rpx;
font-size: 28rpx;
color: #666666;
border-top: 1px solid #e9ecef;
transition: all 0.2s ease;
position: relative;
&:active {
background: #e9ecef;
}
&.active {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
color: #ffffff;
border-color: #005bac;
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3);
color: #fff;
font-weight: 500;
.expand_icon {
.u-icon {
color: #ffffff !important;
}
&::before {
content: '';
position: absolute;
left: 24rpx;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 8rpx;
background: #005bac;
border-radius: 50%;
}
}
.menu_text {
flex: 1;
font-size: 24rpx;
.drawer-sub-menu-text {
font-size: 28rpx;
line-height: 1.3;
}
.expand_icon {
margin-left: 8rpx;
transition: transform 0.3s ease;
&.expanded {
transform: rotate(90deg);
}
}
}
.second_level_container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin: 0 8rpx;
&.expanded {
max-height: 1000rpx;
}
.second_level_item {
padding: 18rpx 10rpx;
margin: 4rpx 0;
margin-left: 8rpx;
background: #ffffff;
border-radius: 6rpx;
font-size: 20rpx;
color: #666666;
border-left: 3rpx solid #e9ecef;
transition: all 0.2s ease;
position: relative;
&:active {
transform: translateX(4rpx);
background: #f8f9fa;
}
&.active {
background: #e8f4fd;
color: #005bac;
border-left-color: #005bac;
font-weight: 500;
&::before {
content: '';
position: absolute;
right: 8rpx;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 8rpx;
background: #005bac;
border-radius: 50%;
}
}
.sub_menu_text {
font-size: 22rpx;
line-height: 1.3;
}
margin-left: 20rpx;
}
}
}
}
}
.index_l {
width: 198rpx;
padding: 10rpx 0;
font-size: 11px;
font-family:
PingFang SC-Regular,
PingFang SC;
font-weight: 400;
color: #000000;
overflow-y: auto;
display: flex;
flex-direction: column;
position: absolute;
height: 86vh;
background: #f2f2f2;
}
.index_r {
flex: 1;
background: #fff;
margin-left: 10rpx;
display: flex;
flex-direction: column;
}
}
.classIfy {
@ -937,6 +1122,95 @@ export default {
height: calc(100vh - 320rpx);
overflow-y: auto;
/* 空状态样式 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 500rpx;
padding: 80rpx 40rpx;
.empty-icon {
margin-bottom: 40rpx;
opacity: 0.6;
animation: float 3s ease-in-out infinite;
}
.empty-title {
font-size: 36rpx;
font-weight: 600;
color: #333333;
margin-bottom: 16rpx;
}
.empty-desc {
font-size: 28rpx;
color: #666666;
margin-bottom: 40rpx;
text-align: center;
line-height: 1.5;
}
.empty-tips {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50rpx;
text {
font-size: 24rpx;
color: #999999;
margin-bottom: 8rpx;
line-height: 1.4;
}
}
.empty-actions {
display: flex;
gap: 20rpx;
flex-wrap: wrap;
justify-content: center;
}
.empty-action {
display: flex;
align-items: center;
padding: 20rpx 32rpx;
border-radius: 50rpx;
font-size: 26rpx;
font-weight: 500;
transition: all 0.3s ease;
text {
margin-left: 8rpx;
}
&.primary {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.4);
}
}
&.secondary {
background: rgba(0, 91, 172, 0.1);
color: #005bac;
border: 2rpx solid rgba(0, 91, 172, 0.2);
&:active {
transform: scale(0.95);
background: rgba(0, 91, 172, 0.15);
}
}
}
}
.goodList_i {
// display: flex;
border-bottom: 1px solid #eee;
@ -1295,4 +1569,15 @@ export default {
left: 100%;
}
}
/* 空状态浮动动画 */
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
}
</style>