diff --git a/components/goods-list.vue b/components/goods-list.vue index 921f6d1..26d4339 100644 --- a/components/goods-list.vue +++ b/components/goods-list.vue @@ -232,7 +232,6 @@ export default { }, mounted() { this.newShareMember = uni.getStorageSync('User')?.loginType !== 0 - console.log(this.newShareMember, '...this.newShareMember') this.setSpecial({ value: this.specialArea, }) @@ -245,7 +244,6 @@ export default { this.setSmallCarLength(0) }, beforeDestroy() { - console.log('beforeDestroy........?') this.setSmallCarLength(0) }, methods: { @@ -326,7 +324,7 @@ export default { // }) this.oneList = res.data this.oneId = this.oneList[0] ? this.oneList[0].pkId : '' - this.getClassIfyTwo(this.oneList[0].pkId) + // this.getClassIfyTwo(this.oneList[0].pkId) this.getAllGoods(this.oneList[0].pkId) }) }, diff --git a/config/request.js b/config/request.js index 1c3341b..5dbc5f0 100644 --- a/config/request.js +++ b/config/request.js @@ -13,7 +13,7 @@ module.exports = vm => { //#ifdef DEV_SERVER console.log('DEV_SERVER') - config.baseURL = 'http://192.168.2.102:8080' + config.baseURL = 'https://t-app.beida666.com/prod-api' //#endif //#ifdef QA_SERVER diff --git a/pages.json b/pages.json index 9879e48..87ccd51 100644 --- a/pages.json +++ b/pages.json @@ -232,6 +232,14 @@ } } }, + { + "path": "pages/specialArea/drawer-list", + "style": { + "app-plus": { + "titleNView": false + } + } + }, { "path": "pages/specialArea/haIndex", "style": { diff --git a/pages/specialArea/drawer-list.vue b/pages/specialArea/drawer-list.vue new file mode 100644 index 0000000..5d6e61f --- /dev/null +++ b/pages/specialArea/drawer-list.vue @@ -0,0 +1,1583 @@ + + + + + diff --git a/pages/specialArea/list.vue b/pages/specialArea/list.vue index 5d6e61f..cfae014 100644 --- a/pages/specialArea/list.vue +++ b/pages/specialArea/list.vue @@ -4,14 +4,56 @@ {{ titLabel }} - - - - 分类 + + + + + + {{ item.label }} + + + - + + + {{ item.classifyName }} + + + + + + {{ item.classifyName }} + + + + - - - - - - {{ getEmptyTitle() }} - {{ getEmptyDesc() }} - - - • {{ tip }} - - - - - - 浏览分类 - - - - 清除搜索 - - - - - - - - - - - - - 商品分类 - - - - - - - - {{ - truncateText(item.classifyName, 12) - }} - - - - - - {{ - truncateText(subItem.classifyName, 12) - }} - - - - - @@ -336,8 +279,6 @@ export default { countryList: [], isCountry: false, waresName: '', - expandedMenus: [], // 存储展开的一级菜单ID - showCategoryDrawer: false, // 控制分类抽屉显示 } }, onLoad(options) { @@ -407,8 +348,6 @@ 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 @@ -417,7 +356,7 @@ export default { }) }) // 获取国家 - // this.getJScountry() + this.getJScountry() this.$nextTick(() => { this.$refs.cart.getCar() }) @@ -427,138 +366,11 @@ export default { this.setSmallCarLength(0) }, beforeDestroy() { + console.log('beforeDestroy........?') this.setSmallCarLength(0) }, methods: { ...mapActions(['setSmallCarLength', 'setShopCarLength']), - getAllCategory() { - api - .getAllCategory({ - specialArea: this.specialArea, - pkCountry: this.pkCountry, - }) - .then(res => { - if (res.code === 200) { - const tempList = res.data || [] - this.oneList = tempList.map(item => { - const children = item.children - if (children && children.length > 0) { - item.children = [ - { classifyName: '全部', pkId: item.pkId }, - ...children, - ] - } - return { - ...item, - } - }) - - // 默认全部展开 - 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) - } - } - }) - }, - truncateText(text, maxLength) { - if (!text) return '' - if (text.length <= maxLength) return text - return text.substring(0, maxLength) + '...' - }, - // 选择一级分类(不影响展开状态) - selectFirstLevel(item) { - this.oneId = item.pkId - this.twoId = item.pkId - this.getAllGoods(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 }, @@ -597,8 +409,18 @@ export default { }) }, setSpecial(item) { - this.specialArea = item.value - this.getAllCategory() + if (item.value == 21) { + // uni.navigateTo({ + // url: + // '/pages/specialArea/haIndex?label=' + + // this.titLabel + + // '&specialArea=21&children=' + + // JSON.stringify(this.itemChildren), + // }) + } else { + this.specialArea = item.value + this.getClassIfy() + } }, addCar(item) { let carList = { @@ -652,10 +474,6 @@ export default { // }) this.oneList = res.data this.oneId = this.oneList[0] ? this.oneList[0].pkId : '' - - // 默认全部展开 - this.expandedMenus = this.oneList.map(item => item.pkId) - this.getClassIfyTwo(this.oneList[0].pkId) this.getAllGoods(this.oneList[0].pkId) }) @@ -795,222 +613,38 @@ 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; + flex: 1; // display: flex; - .index_r { - flex: 1; - background: #fff; + .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; - - &.full-width { - margin-left: 0; - } - } -} - -/* 分类抽屉遮罩 */ -.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; - - &.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); + position: absolute; + height: 86vh; + background: #f2f2f2; } - .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; - } + .index_r { + // flex: 1; + background: #fff; + margin-left: 198rpx; // padding: 20rpx; + // display: flex; } - .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 { - 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: #fff; - font-weight: 500; - - &::before { - content: ''; - position: absolute; - left: 24rpx; - top: 50%; - transform: translateY(-50%); - width: 8rpx; - height: 8rpx; - background: #005bac; - border-radius: 50%; - } - } - - .drawer-sub-menu-text { - font-size: 28rpx; - line-height: 1.3; - margin-left: 20rpx; - } - } - } - } + .index_r_2 { + // flex: 1; + background: #fff; + margin-left: 20rpx; // padding: 20rpx; + // display: flex; } } @@ -1122,95 +756,6 @@ 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; @@ -1569,15 +1114,4 @@ export default { left: 100%; } } - -/* 空状态浮动动画 */ -@keyframes float { - 0%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-10rpx); - } -}