diff --git a/pages/specialArea/list.vue b/pages/specialArea/list.vue
index 73f0fc2..5d6e61f 100644
--- a/pages/specialArea/list.vue
+++ b/pages/specialArea/list.vue
@@ -4,77 +4,14 @@
-
-
+
+
+
+ 分类
-
-
-
-
-
+
+
+
+
+
+
+ {{ getEmptyTitle() }}
+ {{ getEmptyDesc() }}
+
+
+ • {{ tip }}
+
+
+
+
+
+ 浏览分类
+
+
+
+ 清除搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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);
+ }
+}