From ff8c0fca2dde5c2bf1e8b1645deee1c1415c5f30 Mon Sep 17 00:00:00 2001 From: woody Date: Tue, 28 Oct 2025 18:00:46 +0800 Subject: [PATCH] =?UTF-8?q?feat(specaialAreaList):=20=E5=95=86=E5=93=81?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/specialArea/list.vue | 701 ++++++++++++++++++++++++++----------- 1 file changed, 493 insertions(+), 208 deletions(-) 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 @@ {{ titLabel }} - - + + + + 分类 - - - - - - - - {{ - truncateText(item.classifyName, 10) - }} - - - - - - - {{ - truncateText(subItem.classifyName, 10) - }} - - - - - - - + + + + + + + {{ getEmptyTitle() }} + {{ getEmptyDesc() }} + + + • {{ tip }} + + + + + + 浏览分类 + + + + 清除搜索 + + + + + + + + + + + + + 商品分类 + + + + + + + + {{ + truncateText(item.classifyName, 12) + }} + + + + + + {{ + truncateText(subItem.classifyName, 12) + }} + + + + + @@ -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); + } +}