297 lines
6.3 KiB
Vue
297 lines
6.3 KiB
Vue
<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" @click="goToSearch">
|
||
<text class="search-icon">🔍</text>
|
||
<text class="search-placeholder">输入关键词或粘贴商品标题</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="main-body" :style="{ paddingTop: '44px' }">
|
||
<!-- 左侧一级菜单 -->
|
||
<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';
|
||
import http from '@/request/request.js';
|
||
|
||
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() {
|
||
http.get('https://api.cmspro.haodanku.com/index/superCategory?cid=YsWZ21tx', undefined, {
|
||
header: {
|
||
'accept': 'application/json, text/plain, */*',
|
||
'accept-language': 'zh-CN,zh;q=0.9'
|
||
}
|
||
}).then(res => {
|
||
this.categoryData = res.data;
|
||
// 获取数据后尝试匹配底部导航高亮状态
|
||
this.matchNavActive();
|
||
});
|
||
},
|
||
matchNavActive() {
|
||
// 获取底部导航数据，查找“分类”对应的索引
|
||
http.get('https://api.cmspro.haodanku.com/bottomBar/lists?cid=YsWZ21tx').then(res => {
|
||
if (res.data && res.data.bottom_bar) {
|
||
const allowedTitles = ['首页', '榜单', '分类'];
|
||
const list = res.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;
|
||
},
|
||
goToSearch() {
|
||
uni.navigateTo({
|
||
url: '/pages/search/search'
|
||
});
|
||
},
|
||
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>
|