This commit is contained in:
1173117610@qq.com
parent
1e7893eedc
commit
b87ab6c7b8
|
|
@ -29,8 +29,11 @@
|
|||
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
||||
// 根据 sort 降序排序
|
||||
this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
|
||||
// 过滤并排序：剔除“发现”，仅保留首页、榜单、分类
|
||||
const allowedTitles = ['首页', '榜单', '分类'];
|
||||
this.bottomBarList = res.data.data.bottom_bar
|
||||
.filter(item => allowedTitles.includes(item.title))
|
||||
.sort((a, b) => b.sort - a.sort);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -41,6 +44,7 @@
|
|||
let url = '';
|
||||
if (tab.title === '首页') url = '/pages/index/index';
|
||||
else if (tab.title === '榜单') url = '/pages/rank/rank';
|
||||
else if (tab.title === '分类') url = '/pages/classify/classify';
|
||||
|
||||
if (url) {
|
||||
uni.redirectTo({
|
||||
|
|
|
|||
|
|
@ -29,6 +29,12 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/classify/classify",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<view class="classify-container">
|
||||
<view class="classify-header">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="header-content">
|
||||
<view class="search-bar">
|
||||
<text class="search-icon">🔍</text>
|
||||
<text class="search-placeholder">输入关键词或粘贴商品标题</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main-body" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
|
||||
<!-- 左侧一级菜单 -->
|
||||
<scroll-view scroll-y class="side-bar" :show-scrollbar="false">
|
||||
<view class="side-item" :class="{ 'active': activeIndex === index }"
|
||||
v-for="(item, index) in categoryData" :key="index" @click="switchMainCategory(index)">
|
||||
<text class="side-txt">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<scroll-view scroll-y class="content-panel" :show-scrollbar="false">
|
||||
<view class="category-group" v-for="(second, sIdx) in currentSubCategories" :key="sIdx">
|
||||
<view class="group-title">
|
||||
<text class="title-line"></text>
|
||||
<text class="title-txt">{{ second.cate_name }}</text>
|
||||
<text class="title-line"></text>
|
||||
</view>
|
||||
<view class="sub-grid">
|
||||
<view class="sub-item" v-for="(three, tIdx) in second.three" :key="tIdx" @click="goToDetail(three)">
|
||||
<view class="sub-img-wrap">
|
||||
<image class="sub-img" :src="three.img_url" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="sub-name">{{ three.cate_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-placeholder"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<bottom-nav :activeTab="navActiveIndex"></bottom-nav>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BottomNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 44,
|
||||
activeIndex: 0,
|
||||
categoryData: [],
|
||||
navActiveIndex: -1 // 初始为-1，直到匹配到分类Tab
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentSubCategories() {
|
||||
if (this.categoryData.length > 0 && this.categoryData[this.activeIndex]) {
|
||||
return this.categoryData[this.activeIndex].second || [];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
||||
this.getSuperCategory();
|
||||
},
|
||||
methods: {
|
||||
getSuperCategory() {
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/index/superCategory?cid=qOstW90',
|
||||
header: {
|
||||
'accept': 'application/json, text/plain, */*',
|
||||
'accept-language': 'zh-CN,zh;q=0.9'
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200) {
|
||||
this.categoryData = res.data.data;
|
||||
// 获取数据后尝试匹配底部导航高亮状态
|
||||
this.matchNavActive();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
matchNavActive() {
|
||||
// 获取底部导航数据，查找“分类”对应的索引
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
||||
const allowedTitles = ['首页', '榜单', '分类'];
|
||||
const list = res.data.data.bottom_bar
|
||||
.filter(item => allowedTitles.includes(item.title))
|
||||
.sort((a, b) => b.sort - a.sort);
|
||||
const idx = list.findIndex(item => item.title === '分类');
|
||||
if (idx !== -1) {
|
||||
this.navActiveIndex = idx;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
switchMainCategory(index) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
goToDetail(three) {
|
||||
const name = encodeURIComponent(three.cate_name.trim());
|
||||
const catId = this.categoryData[this.activeIndex].cat_id;
|
||||
const secondCat = three.second_category;
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/category/category_detail?cate_name=${name}&id=${catId}&second_category=${secondCat}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.classify-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.classify-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
z-index: 100;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 主体布局 */
|
||||
.main-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧菜单 */
|
||||
.side-bar {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.side-item {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.side-txt {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.side-item.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.side-item.active .side-txt {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.side-item.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background: linear-gradient(180deg, #ff715a, #ff416c);
|
||||
border-radius: 0 4rpx 4rpx 0;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.content-panel {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.category-group {
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 30rpx;
|
||||
height: 2rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.title-txt {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.sub-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sub-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.sub-img-wrap {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.sub-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sub-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-placeholder {
|
||||
height: 120rpx; /* 为底部导航预留空间 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue