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',
|
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
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 = '';
|
let url = '';
|
||||||
if (tab.title === '首页') url = '/pages/index/index';
|
if (tab.title === '首页') url = '/pages/index/index';
|
||||||
else if (tab.title === '榜单') url = '/pages/rank/rank';
|
else if (tab.title === '榜单') url = '/pages/rank/rank';
|
||||||
|
else if (tab.title === '分类') url = '/pages/classify/classify';
|
||||||
|
|
||||||
if (url) {
|
if (url) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,12 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/classify/classify",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"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