From 5619fa3411dc36f0e4b61ebb08ab20f09c09a9b1 Mon Sep 17 00:00:00 2001
From: wangzimeng <3297159934@qq.com>
Date: Wed, 19 Nov 2025 09:41:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=9B=A2=E5=B0=8F=E7=AE=A1=E5=AE=B6?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E8=AF=95=E5=AE=8C=E6=88=90=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E7=89=88=E5=B7=B2=E5=8F=91=E7=BB=99=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/cart.vue              |   2 +-
 pages/index/category.vue          | 571 ++++++++++++++---
 pages/index/categoryChange.vue    | 979 ++++++++++++++++++++++++++++++
 pages/index/categoryOriginal .vue | 903 +++++++++++++++++++++++++++
 pages/order/list.vue              |   1 +
 5 files changed, 2360 insertions(+), 96 deletions(-)
 create mode 100644 pages/index/categoryChange.vue
 create mode 100644 pages/index/categoryOriginal .vue

diff --git a/pages/index/cart.vue b/pages/index/cart.vue
index 530f60c..396d27b 100644
--- a/pages/index/cart.vue
+++ b/pages/index/cart.vue
@@ -62,7 +62,7 @@
         </view>
       </view>
       <!-- 底部 -->
-      <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
+      <su-fixed bottom :val="58" placeholder v-if="state.list.length > 0" :isInset="false">
         <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
           <view class="footer-left ss-flex ss-col-center">
             <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
diff --git a/pages/index/category.vue b/pages/index/category.vue
index 4c7ece6..60f5a04 100644
--- a/pages/index/category.vue
+++ b/pages/index/category.vue
@@ -1,19 +1,20 @@
 <template>
 	<!-- tabbar="/pages/index/category" :navbarStyle="template.style?.navbar"  navbar="custom"-->
-	<s-layout navbar="normal" title="中团小管家" tabbar="/pages/index/category" :bgStyle="{ color: '#f7f7f7' }">
+	<s-layout navbar="normal" title="中团小管家" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
 		<view class="container">
 			<view class="header">
-				<view class="search-box" :style="[{ top: Number(statusBarHeight + 75) + 'rpx' }]"
+				<view class="search-box" :style="[{ top: Number(statusBarHeight + 85) + 'rpx' }]"
 					@click="toPage('/packageA/search/index?tab=2')">
-					<uni-section style="border-radius: 192rpx;padding: 0;width: 100%;height: 70rpx;width: 690rpx;"
-						type="line">
+					<uni-section style="border-radius: 192rpx;height: 70rpx;width: 690rpx;margin: 0 auto;" type="line">
 						<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
 							bgColor="#f8f8f8" clearButton="none" cancelButton="none" :readonly="true" />
 					</uni-section>
+
 				</view>
+
 				<!-- 轮播图 -->
-				<view class="swiper-box">
-					<view class="swiper_s">
+				<view class="swiper-box" v-if="bannerShow">
+					<view class="swiper_SS">
 						<swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11"
 							indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent"
 							@animationfinish="swiperChange">
@@ -29,7 +30,7 @@
 							</swiper-item>
 							<!-- <swiper-item style="margin: 0 auto;">
 							<view style="position: relative;width: 100%;height: 100%">
-								<!--<view class="fnon_tit"></view>
+								<view class="fnon_tit"></view>
 								 <view class="text">{{ item.title ? item.title : '' }}</view> 
 								 @click="click(item.url)" 跳转活动链接 
 								<image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" />
@@ -38,15 +39,17 @@
 						</swiper>
 					</view>
 				</view>
+
 			</view>
 
-
 			<view class="schoolCategory">
-				<!-- 左侧分类 -->
-				<view class="left-scrop" :style="[{ top: Number(statusBarHeight + 542) + 'rpx' }]">
-					<scroll-view scroll-y :style="[{ height: (pageHeight-175) + 'px' }]" :show-scrollbar="false">
+				<!-- 左侧分类 :style="[{ top: Number(statusBarHeight + homeTopFirst) + 'rpx' }]"-->
+				<view class="left-scrop" :style="[{ top: Number(statusBarHeight + homeTopFirst) + 'rpx' }]">
+					<scroll-view scroll-y :style="[{ height: (pageHeight - homeHightFirst) + 'px' }]"
+						:show-scrollbar="false">
 						<view class="menu-item ss-flex" v-for="(item, index) in firstCateList" :key="item.id"
-							:class="[{ 'menu-item-active': index == firstIndex }]" @tap="onMenu(index)">
+							:class="[{ 'menu-item-active': index == firstIndex }]" @tap="onMenu(item, index)"
+							:id="'item_' + item.id">
 							<!-- ss-line-1 -->
 							<view class="menu-title">
 								{{ item.name }}
@@ -55,13 +58,14 @@
 					</scroll-view>
 				</view>
 				<!-- 右侧分类 -->
-				<view class="goods-list-box" v-if="secondCateList.length">
+				<view class="goods-list-box" v-if="secondCateList.length"
+					:style="[{ top: Number(statusBarHeight + rightBottom) + 'rpx' }]">
 					<!-- 二级分类筛选框 -->
 					<view class="right-scrop">
 						<view class="selectSecBox" @click="selectSecShow = true">
 							<view
 								style="font-size: 30rpx;line-height: 32rpx;font-weight: bold;color: #3D3D3D;margin-right: 20rpx;">
-								{{ selectedItem.name ? selectedItem.name:'全部分类'}}
+								{{ selectedItem.name ? selectedItem.name : '全部分类' }}
 							</view>
 							<image style="height: 32rpx;width: 32rpx;"
 								src="https://mall.jiangxiaoxian.hschool.com.cn/secondImage.png" mode="" />
@@ -69,26 +73,31 @@
 						</view>
 					</view>
 
+
 					<view class="right-bottom">
+						<!--  -->
 						<scroll-view scroll-y class="thirdScroll" :show-scrollbar="false" scroll-with-animation
-							:style="[{ height: (pageHeight - 200) + 'px' }]">
-							<view v-for="(e, w) in secondCateList" :key="e.id" class="thirdListBox">
-								<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
-									<view class="title-text">{{ e.name }}</view>
-									<button class="ss-reset-button more-btn" @click="toSecondCate(e, '0')">
-										查看更多
-										<text class="cicon-forward"></text>
-									</button>
-								</view>
-								<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
-									<view class="goods-item" v-if="secondCateList[w].children.length>0"
-										v-for="(f, q) in secondCateList[w].children" :key="f.id"
-										@click="toSecondCate(e, q)">
-										<view>
-											<image class="goods-img" :src="f.image" mode="aspectFill">
-											</image>
-											<view class="" style="padding: 10rpx 0rpx;">
-												<view class="goods-title">{{ f.name }}</view>
+							:style="[{ height: (pageHeight - homeHightTwo) + 'px' }, { 'padding-bottom': twoBottom + 'rpx' }]"
+							@scroll="handleRightScroll" @scrolltolower="handleScroll" @scrolltoupper="handleScrollTop()"
+							:scroll-top="rightScroll">
+							<view v-for="(e, w) in firstCateList" :key="e.id" class="thirdListBox" :id="'content_' + w">
+								<view v-for="(a, b) in e.children" :id="'second_' + a.id">
+									<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
+										<view class="title-text">{{ a.name }}</view>
+										<button class="ss-reset-button more-btn" @click="toSecondCate(c, '0')">
+											查看更多
+											<text class="cicon-forward"></text>
+										</button>
+									</view>
+									<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+										<view class="goods-item" v-for="(f, q) in a.children" :key="f.id"
+											@click="toSecondCate(e, q)" v-if="a.children.length > 0">
+											<view>
+												<image class="goods-img" :src="f.image" mode="aspectFill">
+												</image>
+												<view class="" style="padding: 10rpx 0rpx;">
+													<view class="goods-title">{{ f.name }}</view>
+												</view>
 											</view>
 										</view>
 									</view>
@@ -103,6 +112,15 @@
 
 			</view>
 
+
+
+
+
+
+
+
+
+
 			<!-- 固定显示 
 			<view class="car-show" v-show="!showLine" @click="getCarList">
 				<image @click="toPage('/pages/index/cart')" class="cart-image"
@@ -118,14 +136,14 @@
 				<view class="secPopBox">
 					<scroll-view scroll-y="true" class="scrollBoxSec" :show-scrollbar="true">
 						<view class="grid-container">
-							<view class="secListbox" v-for="(item,index) in secSelectCateList" :key="item.id"
-								@click="handleSecSelect(item,index)">
+							<view class="secListbox" v-for="(item, index) in secSelectCateList" :key="item.id"
+								@click="handleSecSelect(item, index)">
 								<view v-if="item.name == '全部分类'"
-									:class=" item.name == selectedItem.name ? 'SelectedSecItem':'secItemAll'">
-									{{item.name}}
+									:class="item.name == selectedItem.name ? 'SelectedSecItem' : 'secItemAll'">
+									{{ item.name }}
 								</view>
-								<view v-else :class=" item.id == selectedItem.id ? 'SelectedSecItem':'secItem'">
-									{{item.name}}
+								<view v-else :class="item.id == selectedItem.id ? 'SelectedSecItem' : 'secItem'">
+									{{ item.name }}
 								</view>
 							</view>
 						</view>
@@ -196,7 +214,7 @@
 		screenWidth,
 		safeArea
 	} = sheep.$platform.device;
-	const pageHeight = computed(() => safeArea.height - 44 - 124);
+	const pageHeight = computed(() => safeArea.height - 44 - 150);
 	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
 	const firstIndex = ref(0);
 	const secondIndex = ref(0);
@@ -216,7 +234,16 @@
 		getList();
 		getBanner();
 		selectSecShow.value = false;
-
+		// 初始化选中的分类为"全部分类"
+		selectedItem.value = {
+			name: '全部分类',
+			id: '',
+			children: []
+		};
+		// 延迟初始化位置信息，确保DOM渲染完成
+		setTimeout(() => {
+			initCategoryPosition();
+		}, 500);
 	})
 
 	//搜索
@@ -267,7 +294,7 @@
 	}
 
 	//选择一级分类
-	const onMenu = (val) => {
+	function onMenu(item, val) {
 		console.log('选择一级分类val：', val);
 		state.activeMenu = val;
 		firstIndex.value = val;
@@ -275,6 +302,53 @@
 		console.log('选择一级分类first：', firstCateList.value[firstIndex.value]);
 		secondCateList.value = firstCateList.value[firstIndex.value].children;
 		console.log('二级分类secondCateList:', secondCateList.value);
+
+		// 设置滚动标记，避免滚动事件触发切换
+		isScrolling.value = true;
+		rightBottom.value = 229;
+		homeHightTwo.value = 40
+		homeHightFirst.value = 5
+		homeTopFirst.value = 229
+		twoBottom.value = 0
+		bannerShow.value = false
+		layoutChanged.value = true;
+		nextTick(() => {
+			// 延迟执行滚动操作，确保DOM完全渲染
+			setTimeout(() => {
+				// 使用 uni.createSelectorQuery 同时获取目标元素、容器位置和滚动偏移量
+				const query = uni.createSelectorQuery();
+				// 获取目标一级分类内容区域的位置
+				query.select(`#content_${val}`).boundingClientRect();
+				// 获取滚动容器的位置
+				query.select('.thirdScroll').boundingClientRect();
+				// 获取滚动容器的当前滚动偏移量
+				query.select('.thirdScroll').scrollOffset();
+
+				query.exec((res) => {
+					if (res && res[0] && res[1] && res[2]) {
+						const targetRect = res[0]; // 目标元素位置
+						const containerRect = res[1]; // 容器位置
+						const scrollOffset = res[2]; // 当前滚动偏移
+						// 计算目标元素在整个内容中的绝对位置
+						// 当前视口中的相对位置 + 已滚动的距离 = 元素在内容中的绝对位置
+						const scrollDistance = targetRect.top - containerRect.top + scrollOffset
+							.scrollTop;
+
+						rightScroll.value = scrollDistance;
+						selectedItem.value = secondCateList.value[0];
+						console.log('滚动到一级分类:', val, '目标位置:', scrollDistance, '当前scrollTop:',
+							scrollOffset.scrollTop);
+					}
+				});
+
+				// 500ms后重置滚动标记
+				setTimeout(() => {
+					isScrolling.value = false;
+					initCategoryPosition();
+				}, 500);
+			}, 100);
+		});
+
 		getSecSelectData();
 		// getSecond(firstCateList.value[val].id);
 	};
@@ -282,6 +356,7 @@
 	const secSelectCateList = ref([]); //二级筛选框
 	const selectSecShow = ref(false); //下拉框的显示隐藏
 	const selectedItem = ref({}); //选中的分类数据
+	const selectSecName = ref(''); //选中的名字
 	function getSecSelectData() {
 		const items = [{
 			name: '全部分类',
@@ -294,36 +369,293 @@
 
 	function handleSecSelect(item, index) {
 		selectedItem.value = item;
+		selectSecName.value = item.name
 		console.log('item:', selectedItem.value);
 	}
-	//确定筛选的二级分类
-	function sureSelect() {
-		selectSecShow.value = false;
-		// firstIndex.value = 0;
-		secondCateList.value = [selectedItem.value];
-		console.log('定筛选的二级分类', secondCateList.value.children);
-		if (selectedItem.value.name != '全部分类') {
-			sheep.$api.goods.newList({
-				page: listQuery.value.page,
-				limit: listQuery.value.limit,
-				tree: '1',
-				parent_id: selectedItem.value.parent_id,
-				root: selectedItem.value.id,
-			}).then((res) => {
-				if (res.code == 1) {
-					console.log('res', res.data);
-					// secondCateList.value = res.data;
-					secondIndex.value = 0;
-					secondCateList.value[secondIndex.value].children = [...res.data];
-				} else {}
-			})
-			console.log('getList', );
-		} else {
-			getList();
+
+	/**
+	 * 右侧滚动事件监听 - 实现滚动自动切换左侧分类的核心方法
+	 * @param {Object} e - 滚动事件对象
+	 * 核心逻辑：
+	 * 1. 获取当前滚动距离scrollTop
+	 * 2. 根据scrollTop与各个内容区块位置(warpTop)的比较，自动切换激活的左侧分类
+	 * 3. 更新顶部显示的二级分类名称
+	 */
+	// 标记布局是否已经改变
+	const layoutChanged = ref(false);
+
+	function handleRightScroll(e) {
+		// 如果正在通过点击切换，不处理滚动事件
+		if (isScrolling.value) return;
+
+		if (e.detail.scrollTop > 150 && !layoutChanged.value) {
+			console.log('e', e);
+			rightBottom.value = 229;
+			homeHightTwo.value = 40
+			homeHightFirst.value = 5
+			homeTopFirst.value = 229
+			twoBottom.value = 0
+			bannerShow.value = false
+			layoutChanged.value = true;
+
+			// 布局改变后，延迟重新初始化位置信息
+			setTimeout(() => {
+				initCategoryPosition();
+			}, 300);
 		}
 
 
+		const scrollTop = e.detail.scrollTop;
+		// console.log('右侧滚动距离:', scrollTop);
 
+		if (warpTop.value.length === 0) return;
+
+		// 偏移量：根据实际情况调整
+		const offset = 300;
+
+		// 遍历判断当前滚动位置应该激活哪个分类
+		for (let i = firstCateList.value.length - 1; i >= 0; i--) {
+			// 从后往前判断，当滚动位置超过某个区块时，激活该区块
+			if (scrollTop >= warpTop.value[i] - offset) {
+				if (firstIndex.value !== i) {
+					firstIndex.value = i;
+					state.activeMenu = i;
+					secondCateList.value = firstCateList.value[i].children;
+					getSecSelectData();
+					console.log('自动切换到分类：', i, firstCateList.value[i].name);
+				}
+				break;
+			}
+		}
+
+		// 更新顶部显示的二级分类名称
+		if (secondCatePositions.value.length > 0) {
+			const secondOffset = 320; // 二级分类的偏移量
+			let found = false;
+
+			// 从后往前查找当前可见的二级分类
+			for (let i = secondCatePositions.value.length - 1; i >= 0; i--) {
+				if (scrollTop >= secondCatePositions.value[i].top - secondOffset) {
+					if (selectedItem.value.id !== secondCatePositions.value[i].id) {
+						selectedItem.value = {
+							id: secondCatePositions.value[i].id,
+							name: secondCatePositions.value[i].name,
+							parent_id: secondCatePositions.value[i].parent_id
+						};
+						console.log('当前可见二级分类:', selectedItem.value.name);
+					}
+					found = true;
+					break;
+				}
+			}
+
+			// 如果滚动到最顶部，没有找到任何二级分类，显示"全部分类"
+			if (!found && scrollTop < secondCatePositions.value[0].top - secondOffset) {
+				if (selectedItem.value.name !== '全部分类') {
+					selectedItem.value = {
+						name: '全部分类',
+						id: '',
+						children: []
+					};
+					console.log('滚动到顶部，显示全部分类');
+				}
+			}
+		}
+	}
+
+	const homeHightTwo = ref(185); //用来计算二级分类部分要减的高度
+	const homeHightFirst = ref(150); //用来计算计算一级要减的高度
+	const homeTopFirst = ref(539); //用来计算一级分类的top
+	const twoBottom = ref(0); //二级分类的底部内边距
+	const rightScroll = ref(0); //二级分类的滚动条的位置
+	const bannerShow = ref(true); //轮播图显示
+	const warpTop = ref([]); //存储每个内容区块距离顶部的距离
+	const secondCatePositions = ref([]); //存储所有二级分类的位置信息 [{id, name, top, parent_id}]
+	const isScrolling = ref(false); //标记是否正在滚动（避免点击切换时触发滚动事件）
+	const rightBottom = ref(539); //右侧的top值
+
+
+	// 滚动到底部处理函数
+	function handleScroll(e) {
+		// console.log('e', e);
+		// homeHightTwo.value = 5
+		// homeHightFirst.value = 40
+		// homeTopFirst.value = 225
+		// twoBottom.value = 100
+		// bannerShow.value = false
+		// setTimeout(() => {
+		// 	rightScroll.value = 9999
+		// }, 100)
+	}
+	// 滚动到顶部处理函数
+	function handleScrollTop(e) {
+		console.log('e', e);
+		homeHightFirst.value = 150
+		homeHightTwo.value = 185
+		homeTopFirst.value = 539
+		rightBottom.value = 539
+		bannerShow.value = true;
+		layoutChanged.value = false; // 重置布局状态
+		setTimeout(() => {
+			rightScroll.value = 0
+			// 重新初始化位置信息
+			setTimeout(() => {
+				initCategoryPosition();
+			}, 300);
+		}, 100)
+	}
+
+
+	/**
+	 * 初始化内容区块位置信息 - 为滚动自动切换分类提供位置数据
+	 * 作用：获取每个内容区块距离容器顶部的距离，存储到warpTop数组
+	 * 同时初始化所有二级分类的位置信息
+	 */
+	async function initCategoryPosition() {
+		if (firstCateList.value.length === 0) return;
+
+		const positions = [];
+		const secondPositions = [];
+
+		// 先获取滚动容器的位置和当前滚动偏移量
+		const containerInfo = await new Promise((resolve) => {
+			const query = uni.createSelectorQuery();
+			query.select('.thirdScroll').boundingClientRect();
+			query.select('.thirdScroll').scrollOffset();
+			query.exec((res) => {
+				if (res && res[0] && res[1]) {
+					resolve({
+						containerRect: res[0],
+						scrollOffset: res[1]
+					});
+				} else {
+					resolve(null);
+				}
+			});
+		});
+
+		if (!containerInfo) return;
+
+		// 使用 Promise.all 确保所有位置都获取完成
+		const promises = firstCateList.value.map((item, index) => {
+			return new Promise((resolve) => {
+				const query = uni.createSelectorQuery();
+				query.select(`#content_${index}`).boundingClientRect(rect => {
+					if (rect) {
+						// 计算元素在内容中的绝对位置
+						const absolutePosition = rect.top - containerInfo.containerRect.top +
+							containerInfo.scrollOffset.scrollTop;
+						positions[index] = absolutePosition;
+						console.log(`一级分类${index} (${item.name}) 绝对位置:`, absolutePosition);
+					}
+					resolve();
+				}).exec();
+			});
+		});
+
+		// 初始化二级分类位置
+		const secondPromises = [];
+		firstCateList.value.forEach((firstItem) => {
+			if (firstItem.children && firstItem.children.length > 0) {
+				firstItem.children.forEach((secondItem) => {
+					secondPromises.push(
+						new Promise((resolve) => {
+							const query = uni.createSelectorQuery();
+							query.select(`#second_${secondItem.id}`).boundingClientRect(
+								rect => {
+									if (rect) {
+										// 计算元素在内容中的绝对位置
+										const absolutePosition = rect.top - containerInfo
+											.containerRect.top + containerInfo.scrollOffset
+											.scrollTop;
+										secondPositions.push({
+											id: secondItem.id,
+											name: secondItem.name,
+											parent_id: secondItem.parent_id,
+											top: absolutePosition
+										});
+									}
+									resolve();
+								}).exec();
+						})
+					);
+				});
+			}
+		});
+
+		await Promise.all([...promises, ...secondPromises]);
+		// 按照top位置排序二级分类
+		secondPositions.sort((a, b) => a.top - b.top);
+		secondCatePositions.value = secondPositions;
+		warpTop.value = positions;
+		console.log('所有一级分类位置初始化完成:', warpTop.value);
+		console.log('所有二级分类位置初始化完成:', secondCatePositions.value);
+	}
+
+	//确定筛选的二级分类
+	function sureSelect() {
+		selectSecShow.value = false;
+
+		if (selectedItem.value.name != '全部分类') {
+			// 找到选中的二级分类所属的一级分类索引
+			const parentIndex = firstCateList.value.findIndex(item => item.id === selectedItem.value.parent_id);
+
+			if (parentIndex !== -1) {
+				// 更新一级分类索引
+				firstIndex.value = parentIndex;
+				state.activeMenu = parentIndex;
+				secondCateList.value = firstCateList.value[parentIndex].children;
+
+				// 设置滚动标记，避免触发滚动事件
+				isScrolling.value = true;
+
+				// 滚动到选中的具体二级分类位置
+				nextTick(() => {
+					setTimeout(() => {
+						// 使用 uni.createSelectorQuery 同时获取目标元素、容器位置和滚动偏移量
+						const query = uni.createSelectorQuery();
+						// 获取目标二级分类元素的位置
+						query.select(`#second_${selectedItem.value.id}`).boundingClientRect();
+						// 获取滚动容器的位置
+						query.select('.thirdScroll').boundingClientRect();
+						// 获取滚动容器的当前滚动偏移量
+						query.select('.thirdScroll').scrollOffset();
+
+						query.exec((res) => {
+							if (res && res[0] && res[1] && res[2]) {
+								const targetRect = res[0]; // 目标元素位置
+								const containerRect = res[1]; // 容器位置
+								const scrollOffset = res[2]; // 当前滚动偏移
+
+								// 计算目标元素在整个内容中的位置
+								// 当前视口中的相对位置 + 已滚动的距离 = 元素在内容中的绝对位置
+								const scrollDistance = targetRect.top - containerRect.top +
+									scrollOffset.scrollTop;
+
+								rightScroll.value = scrollDistance;
+								console.log('滚动到二级分类:', selectedItem.value.name,
+									'目标位置:', scrollDistance,
+									'当前scrollTop:', scrollOffset.scrollTop);
+							}
+						});
+
+						// 延迟重置滚动标记
+						setTimeout(() => {
+							isScrolling.value = false;
+						}, 500);
+					}, 100);
+				});
+			}
+		} else {
+			// 全部分类时重置
+			firstIndex.value = 0;
+			secondCateList.value = firstCateList.value[0].children;
+			getSecSelectData();
+			// 滚动到顶部
+			setTimeout(() => {
+				rightScroll.value = 0;
+			}, 100);
+		}
 	}
 	//重置筛选二级分类
 	function resetSelect() {
@@ -355,6 +687,30 @@
 
 	}
 
+	//轮播图跳转
+	function swiperJump(item) {
+		console.log('轮播图跳转事件：', item.url);
+		const tabBarPages = [
+			'/pages/index/index',
+			'/pages/index/category',
+			'/pages/index/user'
+		];
+		console.log('tabbarsList：', tabBarPages);
+		if (item.type == "in") {
+			console.log('跳进内页');
+			if (tabBarPages.includes(item.url)) {
+				console.log('导航页');
+				uni.switchTab({
+					url: item.url,
+				})
+			} else {
+				uni.navigateTo({
+					url: item.url,
+				})
+			}
+		}
+	}
+	// 下拉刷新
 	onPullDownRefresh(async () => {
 		firstCateList.value = [];
 		// firstIndex.value = 0;
@@ -419,22 +775,30 @@
 		background-color: #ffffff;
 		scroll-behavior: smooth;
 
+
+
 		.header {
-			background: linear-gradient(to bottom, #FCC74E, #D8D8D8, #ffffff);
+			position: fixed;
+			// top: 127rpx;
+			width: 100%;
+			padding-top: 10rpx;
+			// background-color: #D8D8D8;
+			background: linear-gradient(to bottom, #FCC74E, #fff);
+			background-size: 100% 400rpx;
+			background-repeat: no-repeat;
 
 			.search-box {
-				width: 690rpx;
-				// width: 100%;
-				height: 90rpx;
-				// background-color: #fff;
-				margin-left: 30rpx;
-				// position: fixed;
-				// z-index: 100;
+				// width: 690rpx;
+				width: 100%;
+				height: 70rpx;
+				z-index: 100;
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				padding-top: 30rpx;
-				padding-bottom: 30rpx;
+				// padding-top: 30rpx;
+				// padding-bottom: 30rpx;
+				padding: 30rpx 0rpx;
+				// background: linear-gradient(to bottom, #FCC74E, #D8D8D8);
 
 			}
 
@@ -450,36 +814,49 @@
 				color: #666;
 			}
 
+
 			.swiper-box {
-				width: 690rpx;
-				padding: 0 30rpx;
-				// display: grid;
-				// justify-content: center;
+				// background: linear-gradient(to bottom, #D8D8D8, #ffffff);
+				width: 100%;
+				// position: relative;
+				// top: 127rpx;
 				height: 280rpx;
-				position: relative;
 				padding-bottom: 30rpx;
 
-				.swiper_s {
-					width: 100%;
-					height: 100%;
-					// display: grid;
-					// justify-content: center;
+				.swiper_SS {
+					height: 280rpx;
+					width: 690rpx;
+					margin: 0 auto;
 
-					.swiper-image {
+					.swiper_s {
 						width: 100%;
 						height: 100%;
-						border-radius: 36rpx;
-						object-fit: contain;
+						// display: grid;
+						// justify-content: center;
+
+						.swiper-image {
+							width: 100%;
+							height: 100%;
+							border-radius: 36rpx;
+							object-fit: contain;
+						}
 					}
 				}
 
+
+
 			}
 
 
+
 		}
 
 
+
+
+
 		.schoolCategory {
+			// position: relative;
 			// display: flex;
 			justify-content: flex-start;
 			align-items: flex-start;
@@ -569,18 +946,19 @@
 
 			.goods-list-box {
 				background-color: #fff;
-				width: calc(100vw - 210rpx);
-				height: 110rpx;
+				width: calc(100vw - 200rpx);
+				// height: 110rpx;
 				// padding: 2rpx;
 				margin-left: 200rpx;
-				position: relative;
-				// top: 20rpx;
+				position: fixed;
+
 
 				.right-scrop {
 					width: 100%;
 					height: 90rpx;
 					overflow: hidden;
 					// position: fixed;
+					left: 0;
 					// top: 74px;
 					background-color: #ffffff;
 					z-index: 10;
@@ -589,18 +967,19 @@
 					display: flex;
 					align-items: center;
 					justify-content: center;
+					margin-bottom: 20rpx;
 
 
 					.selectSecBox {
 						display: flex;
 						align-items: center;
 						justify-content: center;
-						width: 498rpx;
+						width: 494rpx;
 						height: 80rpx;
 						background-color: #FFFBF1;
 						border: 2rpx solid #FCC74E;
 						border-radius: 12rpx;
-						margin-left: 20rpx;
+						margin-left: 4rpx;
 					}
 
 					.horizontal-scroll {
@@ -690,8 +1069,10 @@
 							margin-left: 30rpx;
 
 							.title-box {
+								width: 96%;
+
 								.title-text {
-									font-size: 28rpx;
+									font-size: 30rpx;
 									font-weight: bold;
 									color: #333333;
 								}
diff --git a/pages/index/categoryChange.vue b/pages/index/categoryChange.vue
new file mode 100644
index 0000000..852474a
--- /dev/null
+++ b/pages/index/categoryChange.vue
@@ -0,0 +1,979 @@
+<template>
+	<!-- tabbar="/pages/index/category" :navbarStyle="template.style?.navbar"  navbar="custom"-->
+	<s-layout navbar="normal" title="中团小管家" tabbar="/pages/index/category" :bgStyle="{ color: '#f7f7f7' }">
+		<view class="container">
+			<view class="search-box" :style="[{ top: Number(statusBarHeight + 85) + 'rpx' }]"
+				@click="toPage('/packageA/search/index?tab=2')">
+				<uni-section style="border-radius: 192rpx;height: 70rpx;width: 690rpx;margin: 0 auto;" type="line">
+					<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息" bgColor="#f8f8f8"
+						clearButton="none" cancelButton="none" :readonly="true" />
+				</uni-section>
+			</view>
+
+			<view class="header">
+
+				<!-- 轮播图 -->
+				<view class="swiper-box" v-if="bannerShow">
+					<view class="swiper_SS">
+						<swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11"
+							indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent"
+							@animationfinish="swiperChange">
+							<!-- v-for="(item, index) in swiperList" :key="index" @click="openSwiper(item)"-->
+							<swiper-item style="margin: 0 auto;" v-for="(item, index) in bannerList" :key="index"
+								@click="swiperJump(item)">
+								<view style="position: relative;width: 100%;height: 100%;">
+									<!--<view class="fnon_tit"></view>
+								 <view class="text">{{ item.title ? item.title : '' }}</view> 
+								 @click="click(item.url)" 跳转活动链接 -->
+									<image class="swiper-image" :src="item.image" mode="scaleToFill" />
+								</view>
+							</swiper-item>
+							<!-- <swiper-item style="margin: 0 auto;">
+							<view style="position: relative;width: 100%;height: 100%">
+								<!--<view class="fnon_tit"></view>
+								 <view class="text">{{ item.title ? item.title : '' }}</view> 
+								 @click="click(item.url)" 跳转活动链接 
+								<image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" />
+							</view>
+						</swiper-item> -->
+						</swiper>
+					</view>
+				</view>
+
+				<view class="schoolCategory">
+					<!-- 左侧分类 -->
+					<view class="left-scrop" :style="[{ top: Number(statusBarHeight + homeTopFirst) + 'rpx' }]">
+						<scroll-view scroll-y :style="[{ height: (pageHeight - homeHightFirst) + 'px' }]"
+							:show-scrollbar="false">
+							<view class="menu-item ss-flex" v-for="(item, index) in firstCateList" :key="item.id"
+								:class="[{ 'menu-item-active': index == firstIndex }]" @tap="onMenu(item,index)"
+								 :id="'item_' + item.id">
+								<!-- ss-line-1 -->
+								<view class="menu-title">
+									{{ item.name }}
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+					<!-- 右侧分类 -->
+					<view class="goods-list-box" v-if="secondCateList.length">
+						<!-- 二级分类筛选框 -->
+						<view class="right-scrop">
+							<view class="selectSecBox" @click="selectSecShow = true">
+								<view
+									style="font-size: 30rpx;line-height: 32rpx;font-weight: bold;color: #3D3D3D;margin-right: 20rpx;">
+									{{ selectedItem.name ? selectedItem.name:'全部分类'}}
+								</view>
+								<image style="height: 32rpx;width: 32rpx;"
+									src="https://mall.jiangxiaoxian.hschool.com.cn/secondImage.png" mode="" />
+				
+							</view>
+						</view>
+				
+				
+						<view class="right-bottom">
+							<!--  -->
+							<scroll-view scroll-y class="thirdScroll" :show-scrollbar="false" scroll-with-animation
+								:style="[{ height: (pageHeight - homeHightTwo) + 'px'}, {'padding-bottom': twoBottom + 'rpx' }]"
+								@scrolltolower="handleScroll" @scrolltoupper="handleScrollTop()" :scroll-top="rightScroll">
+								<view v-for="(e, w) in secondCateList" :key="e.id" class="thirdListBox" :id="'content_' + e.parent_id">
+									<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
+										<view class="title-text">{{ e.name }}</view>
+										<button class="ss-reset-button more-btn" @click="toSecondCate(e, '0')">
+											查看更多
+											<text class="cicon-forward"></text>
+										</button>
+									</view>
+									<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+										<view class="goods-item" v-if="secondCateList[w].children.length>0"
+											v-for="(f, q) in secondCateList[w].children" :key="f.id"
+											@click="toSecondCate(e, q)">
+											<view>
+												<image class="goods-img" :src="f.image" mode="aspectFill">
+												</image>
+												<view class="" style="padding: 10rpx 0rpx;">
+													<view class="goods-title">{{ f.name }}</view>
+												</view>
+											</view>
+										</view>
+									</view>
+								</view>
+				
+							</scroll-view>
+				
+						</view>
+					</view>
+				
+				
+				</view>
+				
+			</view>
+			
+			
+			
+			
+
+
+
+
+			<!-- 固定显示 
+			<view class="car-show" v-show="!showLine" @click="getCarList">
+				<image @click="toPage('/pages/index/cart')" class="cart-image"
+					src="https://mall.jiangxiaoxian.hschool.com.cn/car.png" mode=""></image>
+			</view>-->
+
+		</view>
+
+		<!-- 下拉筛选二级分类 -->
+		<su-popup :show="selectSecShow == true" type="top" round="10" @close="selectSecShow = false"
+			@open="selectSecShow = true">
+			<view class="popup" :style="[{ top: Number(statusBarHeight + 75) + 'rpx' }]" style="">
+				<view class="secPopBox">
+					<scroll-view scroll-y="true" class="scrollBoxSec" :show-scrollbar="true">
+						<view class="grid-container">
+							<view class="secListbox" v-for="(item,index) in secSelectCateList" :key="item.id"
+								@click="handleSecSelect(item,index)">
+								<view v-if="item.name == '全部分类'"
+									:class=" item.name == selectedItem.name ? 'SelectedSecItem':'secItemAll'">
+									{{item.name}}
+								</view>
+								<view v-else :class=" item.id == selectedItem.id ? 'SelectedSecItem':'secItem'">
+									{{item.name}}
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+
+					<view class="secBtns">
+						<view class="secReset" @click="resetSelect()">重置</view>
+						<view class="secSure" style="margin-left: 30rpx;" @click="sureSelect()">确认</view>
+					</view>
+				</view>
+
+
+			</view>
+		</su-popup>
+
+
+	</s-layout>
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref,
+		reactive,
+		nextTick
+	} from 'vue';
+	import {
+		onLoad,
+		onShow,
+		onPageScroll,
+		onPullDownRefresh,
+		onReachBottom,
+
+	} from '@dcloudio/uni-app';
+	import {
+		consignee,
+		mobile,
+		address,
+		region
+	} from '@/sheep/validate/form';
+	import rent from '../../sheep/api/rent';
+	import sheep from '@/sheep';
+	import _ from 'lodash';
+	import {
+		baseUrl
+	} from '@/sheep/config';
+
+	// const template = computed(() => sheep.$store('app').template?.home);
+
+	const state = reactive({
+		categoryList: [],
+		activeMenu: '0',
+
+		pagination: {
+			data: [],
+			current_page: 1,
+			total: 1,
+			last_page: 1,
+		},
+		loadStatus: '',
+	});
+
+	const homeHightTwo = ref(210); //用来计算二级分类部分要减的高度
+	const homeHightFirst = ref(175); //用来计算计算一级要减的高度
+	const homeTopFirst = ref(535); //用来计算一级分类的top
+	const twoBottom = ref(0); //二级分类的底部内边距
+	const rightScroll = ref(0);//二级分类的滚动条的位置
+	const bannerShow = ref(true);//轮播图显示
+	// const homeTopTwo = ref();//用来计算二级分类的top
+
+	// 滚动到底部处理函数
+	function handleScroll(e) {
+		console.log('e', e);
+		homeHightTwo.value = 5
+		homeHightFirst.value = 40
+		homeTopFirst.value = 225
+		twoBottom.value = 100
+		bannerShow.value = false
+		setTimeout(() => {
+			rightScroll.value = 9999
+		},100)
+	}
+	// 滚动到顶部处理函数
+	function handleScrollTop(e) {
+		console.log('e', e);
+		homeHightFirst.value = 175
+		homeHightTwo.value = 220
+		homeTopFirst.value = 535
+		bannerShow.value = true;
+		setTimeout(() => {
+			rightScroll.value = 0
+		},100)
+	}
+
+
+	const searchValue = ref(null);
+
+	const {
+		screenHeight,
+		safeAreaInsets,
+		screenWidth,
+		safeArea
+	} = sheep.$platform.device;
+	const pageHeight = computed(() => safeArea.height - 44 - 150);
+	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+	const firstIndex = ref(0);
+	const secondIndex = ref(0);
+
+	const listQuery = ref({
+		page: 1,
+		limit: 1000,
+		keywords: null,
+		root: '',
+		parent_id: '',
+	})
+	const goodsCateCount = ref(0);
+	const homrS = ref(false);
+	const loadStatus = ref('');
+
+	onShow(() => {
+		getList();
+		getBanner();
+		selectSecShow.value = false;
+
+	})
+
+	//搜索
+	function onSearch(e) {
+		state.keyword = e;
+		emptyList();
+		getList(state.currentSort, state.currentOrder, state.categoryId, e);
+	}
+
+	const bannerList = ref([])
+	async function getBanner() {
+		const res = await sheep.$api.home.homeBanner({});
+		console.log('banner', res);
+		if (res.code == 1) {
+			bannerList.value = res.data.list
+			console.log('bannerList', bannerList.value);
+		}
+
+	}
+
+	const firstCateList = ref([]);
+	const secondCateList = ref([]);
+	const thirdCateList = ref([]);
+	//一级分类
+	async function getList() {
+		console.log('分类列表', firstIndex.value);
+		const res = await sheep.$api.goods.newList({
+			keywords: listQuery.value.keywords,
+			page: listQuery.value.page,
+			limit: listQuery.value.limit,
+			tree: '1',
+			parent_id: listQuery.value.parent_id,
+			root: listQuery.value.root,
+		});
+		console.log('getList', res.data[0]);
+
+		if (res.data) {
+			// firstCateList.value = [...firstCateList.value, ...res.data];
+			firstCateList.value = res.data[0].children;
+			secondCateList.value = firstCateList.value[firstIndex.value].children;
+			goodsCateCount.value = res.data.count;
+			getSecSelectData();
+		} else {
+			firstCateList.value = [];
+		}
+
+		console.log('getList', firstCateList.value, goodsCateCount.value);
+	}
+
+	//选择一级分类
+	function onMenu(item, val) {
+		console.log('选择一级分类val：', val);
+		state.activeMenu = val;
+		firstIndex.value = val;
+		secondIndex.value = 0; // 重置二级索引
+		console.log('选择一级分类first：', firstCateList.value[firstIndex.value]);
+		secondCateList.value = firstCateList.value[firstIndex.value].children;
+		console.log('二级分类secondCateList:', secondCateList.value);
+		
+		nextTick(() => {
+			// 延迟执行滚动操作，确保DOM完全渲染
+			setTimeout(() => {
+				uni.pageScrollTo({
+					selector: `#content_${item.id}`,
+					duration: 300,
+					offsetTop: -150 // 可以根据需要调整偏移量
+				});
+			}, 200); // 增加延迟时间确保DOM渲染完成
+		});
+		
+		getSecSelectData();
+		// getSecond(firstCateList.value[val].id);
+	};
+
+	const secSelectCateList = ref([]); //二级筛选框
+	const selectSecShow = ref(false); //下拉框的显示隐藏
+	const selectedItem = ref({}); //选中的分类数据
+	const selectSecName = ref('');//选中的名字
+	function getSecSelectData() {
+		const items = [{
+			name: '全部分类',
+			id: '',
+			children: []
+		}]
+		secSelectCateList.value = [...items, ...secondCateList.value]
+		console.log('secSelectCateList', secSelectCateList.value);
+	}
+
+	function handleSecSelect(item, index) {
+		selectedItem.value = item;
+		selectSecName.value = item.name
+		console.log('item:', selectedItem.value);
+	}
+	//确定筛选的二级分类
+	function sureSelect() {
+		selectSecShow.value = false;
+		// firstIndex.value = 0;
+		secondCateList.value = [selectedItem.value];
+		console.log('定筛选的二级分类', secondCateList.value.children);
+		if (selectedItem.value.name != '全部分类') {
+			sheep.$api.goods.newList({
+				page: listQuery.value.page,
+				limit: listQuery.value.limit,
+				tree: '1',
+				parent_id: selectedItem.value.parent_id,
+				root: selectedItem.value.id,
+			}).then((res) => {
+				if (res.code == 1) {
+					console.log('res', res.data);
+					// secondCateList.value = res.data;
+					secondIndex.value = 0;
+					secondCateList.value[secondIndex.value].children = [...res.data];
+				} else {}
+			})
+			console.log('getList', );
+		} else {
+			getList();
+		}
+
+
+
+	}
+	//重置筛选二级分类
+	function resetSelect() {
+		selectedItem.value = {
+			name: '全部分类',
+			id: '',
+			children: []
+		};
+		console.log('重置', firstIndex.value);
+	}
+
+	//查看更多
+	function toSecondCate(e, index) {
+		console.log('列表数据');
+		console.log('查看更多e:', e.id, e.name, index);
+		// clog
+		if (e.children.length != 0) {
+			const thirdId = e.children[index].id;
+			console.log('查看更多-thirdId:', thirdId);
+			uni.navigateTo({
+				url: '/pages/goods/list?categoryId=' + thirdId + '&name=' + e.name
+			})
+		} else {
+			uni.navigateTo({
+				url: '/pages/goods/list?categoryId=' + e.id + '&name=' + e.name
+			})
+		}
+
+
+	}
+
+	onPullDownRefresh(async () => {
+		firstCateList.value = [];
+		// firstIndex.value = 0;
+		// secondIndex.value = 0;
+		uni.showLoading({
+			title: '加载中...'
+		});
+		console.log('下拉刷新触发');
+		await getList();
+
+		setTimeout(() => {
+			uni.hideLoading();
+			uni.stopPullDownRefresh();
+		}, 1500)
+	})
+
+	const toPage = (e) => {
+		uni.navigateTo({
+			url: e,
+		})
+	}
+
+	function searchGoods() {
+		console.log('搜索');
+	}
+
+	// 隐藏原生tabBar
+	uni.hideTabBar({
+		fail: () => {},
+	});
+</script>
+
+<style lang="scss" scoped>
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		padding: 0px;
+	}
+
+	.uni-mt-10 {
+		margin-top: 10px;
+	}
+
+	.title2 {
+		color: #3d3d3d;
+		font-size: 30rpx;
+		font-weight: 800;
+		line-height: 42rpx;
+	}
+
+	.title3 {
+		font-size: 20rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 22rpx;
+	}
+
+	.container {
+		width: 100%;
+		height: 100%;
+		background-color: #ffffff;
+		scroll-behavior: smooth;
+
+		.search-box {
+			// width: 690rpx;
+			width: 100%;
+			height: 70rpx;
+			// background-color: #fff;
+			// margin-left: 30rpx;
+			position: fixed;
+			// top: 0;
+			z-index: 100;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			// padding-top: 30rpx;
+			// padding-bottom: 30rpx;
+			padding: 30rpx 0rpx;
+			background: linear-gradient(to bottom, #FCC74E, #D8D8D8);
+
+		}
+
+		.search-result {
+			padding-top: 10px;
+			padding-bottom: 20px;
+			text-align: center;
+		}
+
+		.search-result-text {
+			text-align: center;
+			font-size: 14px;
+			color: #666;
+		}
+
+
+		.header {
+			position: relative;
+			top: 132rpx;
+			width: 100%;
+			
+
+			.swiper-box {
+				background: linear-gradient(to bottom, #D8D8D8, #ffffff);
+				width: 100%;
+				// padding: 0 30rpx;
+				// display: grid;
+				// justify-content: center;
+				height: 280rpx;
+				// position: relative;
+				padding-bottom: 30rpx;
+				
+				.swiper_SS {
+					height: 280rpx;
+					width: 690rpx;
+					margin: 0 auto;
+					
+					.swiper_s {
+						width: 100%;
+						height: 100%;
+						// display: grid;
+						// justify-content: center;
+					
+						.swiper-image {
+							width: 100%;
+							height: 100%;
+							border-radius: 36rpx;
+							object-fit: contain;
+						}
+					}
+				}
+
+				
+
+			}
+
+
+		}
+
+
+		.schoolCategory {
+			// display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			// background-color: #ffffff;
+
+			.left-scrop {
+				width: 200rpx;
+				height: 100%;
+				// padding-left: 12rpx;
+				background-color: #f6f6f6;
+				position: fixed;
+				left: 0;
+
+				.menu-item {
+					width: 100%;
+					height: 110rpx;
+					position: relative;
+					transition: all linear 0.2s;
+
+					.menu-title {
+						// width: 175rpx;
+						// height:70rpx;
+						line-height: 45rpx;
+						font-size: 30rpx;
+						font-weight: 400;
+						color: #333;
+						margin-left: 18rpx;
+						margin-right: 15rpx;
+						position: relative;
+						z-index: 10;
+						overflow: hidden;
+						// white-space: nowrap;
+						// text-overflow: ellipsis;
+						// padding: 10rpx 0;
+						padding: 10rpx;
+
+						&::before {
+							content: '';
+							width: 64rpx;
+							height: 12rpx;
+							background: linear-gradient(90deg,
+									var(--ui-BG-Main-gradient),
+									var(--ui-BG-Main-light)) !important;
+							position: absolute;
+							left: -64rpx;
+							bottom: 0;
+							z-index: -1;
+							transition: all linear 0.2s;
+						}
+					}
+
+					&.menu-item-active {
+						background-color: #fff;
+						border-radius: 20rpx 0 0 20rpx;
+
+						&::before {
+							content: '';
+							position: absolute;
+							right: 0;
+							bottom: -20rpx;
+							width: 20rpx;
+							height: 20rpx;
+							// background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
+						}
+
+						&::after {
+							content: '';
+							position: absolute;
+							top: -20rpx;
+							right: 0;
+							width: 20rpx;
+							height: 20rpx;
+							background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
+						}
+
+						.menu-title {
+							font-weight: 600;
+
+							&::before {
+								left: 0;
+							}
+						}
+					}
+				}
+
+			}
+
+			.goods-list-box {
+				background-color: #fff;
+				width: calc(100vw - 210rpx);
+				// height: 110rpx;
+				// padding: 2rpx;
+				margin-left: 200rpx;
+				position: relative;
+				// top: 20rpx;
+
+				.right-scrop {
+					width: 100%;
+					height: 90rpx;
+					overflow: hidden;
+					// position: fixed;
+					// top: 74px;
+					background-color: #ffffff;
+					z-index: 10;
+					padding: 5rpx 0;
+					border-radius: 20rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+
+					.selectSecBox {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						width: 498rpx;
+						height: 80rpx;
+						background-color: #FFFBF1;
+						border: 2rpx solid #FCC74E;
+						border-radius: 12rpx;
+						margin-left: 20rpx;
+					}
+
+					.horizontal-scroll {
+						width: 95%;
+						height: 100%;
+						white-space: nowrap;
+						padding-left: 22rpx;
+						overflow: hidden;
+						// z-index: 10;
+						// display: flex;
+						// align-items: flex-start;
+						// padding: 0 20rpx; // 容器内边距
+					}
+
+					.menu-item2 {
+						display: inline-block;
+						margin-top: 20rpx;
+						margin-right: 30rpx;
+						height: 70rpx;
+						width: 180rpx;
+						text-align: center;
+						flex-shrink: 0; //防止压缩
+						// display: flex;
+						// align-items: center;
+						// justify-content: center;
+						// vertical-align: center;
+
+
+						.menuR-title {
+							width: 175rpx;
+							height: 70rpx;
+							border: 1rpx solid #999999;
+							border-radius: 158rpx;
+							line-height: 70rpx;
+							font-size: 28rpx;
+							font-weight: bold;
+							color: #999999;
+							text-align: center;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							background-color: #fff;
+							padding: 0 10rpx;
+
+							// padding: 0 0 0 20rpx;
+						}
+
+						.menuRselect-title {
+							width: 175rpx;
+							height: 70rpx;
+							border: 1rpx solid #FCC74E;
+							border-radius: 158rpx;
+							line-height: 70rpx;
+							font-size: 28rpx;
+							font-weight: bold;
+							color: #3d3d3d;
+							text-align: center;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							background-color: #FCC74E;
+							padding: 0 10rpx;
+							// padding:  0 0 0 20rpx;
+						}
+
+					}
+
+
+				}
+
+				.right-bottom {
+					// padding-top: 120rpx;
+					width: 100%;
+					// height: 500rpx;
+					overflow: hidden;
+					background-color: #fff;
+					z-index: 10;
+
+					.thirdScroll {
+						width: 100%;
+						// height: 100%;
+						white-space: nowrap;
+						// padding-left: 30rpx;
+						overflow: hidden;
+
+						.thirdListBox {
+							margin-left: 30rpx;
+
+							.title-box {
+								.title-text {
+									font-size: 28rpx;
+									font-weight: bold;
+									color: #333333;
+								}
+
+								.more-btn {
+									font-size: 26rpx;
+									font-weight: 400;
+									color: #999999;
+								}
+							}
+
+							.goods-item {
+								width: calc((100% - 20px) / 2);
+								margin-right: 10px;
+								margin-bottom: 20px;
+
+								&:nth-of-type(2n) {
+									margin-right: 0;
+								}
+
+								.goods-img {
+									width: calc((100vw - 150px) / 2);
+									height: calc((100vw - 150px) / 2);
+									border-radius: 18rpx;
+								}
+
+								.goods-title {
+									width: calc((100vw - 150px) / 2);
+									font-size: 30rpx;
+									font-weight: 500;
+									color: #333333;
+									text-align: center;
+									white-space: nowrap;
+									overflow: hidden;
+									text-overflow: ellipsis;
+
+								}
+
+								.goods-price {
+									color: $red;
+									line-height: 40rpx;
+								}
+							}
+
+						}
+
+					}
+
+				}
+
+
+
+
+
+			}
+
+
+		}
+
+		.car-show {
+			height: 80rpx;
+			position: fixed;
+			bottom: 200rpx;
+			right: 0;
+
+			.car-image {
+				width: 165rpx;
+				height: 78rpx;
+			}
+
+			.logo-image {
+				width: 67rpx;
+				height: 67rpx;
+				position: absolute;
+				top: -50rpx;
+				left: 80rpx;
+			}
+
+			.gou-image {
+				width: 30rpx;
+				height: 30rpx;
+				position: absolute;
+				top: 49%;
+				left: 30rpx;
+				transform: translateY(-50%);
+			}
+
+			.cart-image {
+				width: 80rpx;
+				height: 80rpx;
+				position: absolute;
+				top: 45%;
+				right: 20rpx;
+				transform: translateY(-50%);
+			}
+		}
+
+	}
+
+	.popup {
+		width: 750rpx;
+		height: 420rpx;
+		background-color: #ffffff;
+		position: fixed;
+		border-radius: 0rpx 0rpx 18rpx 18rpx;
+
+		.secPopBox {
+			width: 690rpx;
+			height: 250rpx;
+			padding: 30rpx;
+
+			.scrollBoxSec {
+				width: 100%;
+				height: 100%;
+
+				.grid-container {
+					display: grid;
+					grid-template-columns: repeat(3, 220rpx);
+					grid-template-rows: auto;
+					gap: 10rpx;
+					padding: 20rpx;
+					justify-content: center;
+				}
+			}
+
+			.secListbox {
+				width: 100%;
+				height: 100%;
+
+				.secItem {
+					width: 220rpx;
+					border-radius: 12rpx;
+					height: 70rpx;
+					background-color: #f7f7f7;
+					color: #999999;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+				.secItemAll {
+					width: 220rpx;
+					border-radius: 12rpx;
+					height: 70rpx;
+					background-color: #f7f7f7;
+					color: #3d3d3d;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+				.SelectedSecItem {
+					width: 216rpx;
+					border-radius: 12rpx;
+					height: 66rpx;
+					background-color: #FFFBF1;
+					border: 2rpx solid #FCC74E;
+					color: #323232;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+			}
+
+			.secBtns {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+				padding-top: 30rpx;
+
+				.secReset {
+					width: 330rpx;
+					height: 80rpx;
+					background-color: #FFFBF1;
+					border-radius: 217rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.secSure {
+					width: 330rpx;
+					height: 80rpx;
+					background: linear-gradient(to right, #FCCA58 100%, #FFBD25 100%);
+					border-radius: 217rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+			}
+
+		}
+
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/categoryOriginal .vue b/pages/index/categoryOriginal .vue
new file mode 100644
index 0000000..4c7ece6
--- /dev/null
+++ b/pages/index/categoryOriginal .vue	
@@ -0,0 +1,903 @@
+<template>
+	<!-- tabbar="/pages/index/category" :navbarStyle="template.style?.navbar"  navbar="custom"-->
+	<s-layout navbar="normal" title="中团小管家" tabbar="/pages/index/category" :bgStyle="{ color: '#f7f7f7' }">
+		<view class="container">
+			<view class="header">
+				<view class="search-box" :style="[{ top: Number(statusBarHeight + 75) + 'rpx' }]"
+					@click="toPage('/packageA/search/index?tab=2')">
+					<uni-section style="border-radius: 192rpx;padding: 0;width: 100%;height: 70rpx;width: 690rpx;"
+						type="line">
+						<uni-search-bar style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息"
+							bgColor="#f8f8f8" clearButton="none" cancelButton="none" :readonly="true" />
+					</uni-section>
+				</view>
+				<!-- 轮播图 -->
+				<view class="swiper-box">
+					<view class="swiper_s">
+						<swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11"
+							indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent"
+							@animationfinish="swiperChange">
+							<!-- v-for="(item, index) in swiperList" :key="index" @click="openSwiper(item)"-->
+							<swiper-item style="margin: 0 auto;" v-for="(item, index) in bannerList" :key="index"
+								@click="swiperJump(item)">
+								<view style="position: relative;width: 100%;height: 100%;">
+									<!--<view class="fnon_tit"></view>
+								 <view class="text">{{ item.title ? item.title : '' }}</view> 
+								 @click="click(item.url)" 跳转活动链接 -->
+									<image class="swiper-image" :src="item.image" mode="scaleToFill" />
+								</view>
+							</swiper-item>
+							<!-- <swiper-item style="margin: 0 auto;">
+							<view style="position: relative;width: 100%;height: 100%">
+								<!--<view class="fnon_tit"></view>
+								 <view class="text">{{ item.title ? item.title : '' }}</view> 
+								 @click="click(item.url)" 跳转活动链接 
+								<image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" />
+							</view>
+						</swiper-item> -->
+						</swiper>
+					</view>
+				</view>
+			</view>
+
+
+			<view class="schoolCategory">
+				<!-- 左侧分类 -->
+				<view class="left-scrop" :style="[{ top: Number(statusBarHeight + 542) + 'rpx' }]">
+					<scroll-view scroll-y :style="[{ height: (pageHeight-175) + 'px' }]" :show-scrollbar="false">
+						<view class="menu-item ss-flex" v-for="(item, index) in firstCateList" :key="item.id"
+							:class="[{ 'menu-item-active': index == firstIndex }]" @tap="onMenu(index)">
+							<!-- ss-line-1 -->
+							<view class="menu-title">
+								{{ item.name }}
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!-- 右侧分类 -->
+				<view class="goods-list-box" v-if="secondCateList.length">
+					<!-- 二级分类筛选框 -->
+					<view class="right-scrop">
+						<view class="selectSecBox" @click="selectSecShow = true">
+							<view
+								style="font-size: 30rpx;line-height: 32rpx;font-weight: bold;color: #3D3D3D;margin-right: 20rpx;">
+								{{ selectedItem.name ? selectedItem.name:'全部分类'}}
+							</view>
+							<image style="height: 32rpx;width: 32rpx;"
+								src="https://mall.jiangxiaoxian.hschool.com.cn/secondImage.png" mode="" />
+
+						</view>
+					</view>
+
+					<view class="right-bottom">
+						<scroll-view scroll-y class="thirdScroll" :show-scrollbar="false" scroll-with-animation
+							:style="[{ height: (pageHeight - 200) + 'px' }]">
+							<view v-for="(e, w) in secondCateList" :key="e.id" class="thirdListBox">
+								<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
+									<view class="title-text">{{ e.name }}</view>
+									<button class="ss-reset-button more-btn" @click="toSecondCate(e, '0')">
+										查看更多
+										<text class="cicon-forward"></text>
+									</button>
+								</view>
+								<view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+									<view class="goods-item" v-if="secondCateList[w].children.length>0"
+										v-for="(f, q) in secondCateList[w].children" :key="f.id"
+										@click="toSecondCate(e, q)">
+										<view>
+											<image class="goods-img" :src="f.image" mode="aspectFill">
+											</image>
+											<view class="" style="padding: 10rpx 0rpx;">
+												<view class="goods-title">{{ f.name }}</view>
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+
+						</scroll-view>
+
+					</view>
+				</view>
+
+
+			</view>
+
+			<!-- 固定显示 
+			<view class="car-show" v-show="!showLine" @click="getCarList">
+				<image @click="toPage('/pages/index/cart')" class="cart-image"
+					src="https://mall.jiangxiaoxian.hschool.com.cn/car.png" mode=""></image>
+			</view>-->
+
+		</view>
+
+		<!-- 下拉筛选二级分类 -->
+		<su-popup :show="selectSecShow == true" type="top" round="10" @close="selectSecShow = false"
+			@open="selectSecShow = true">
+			<view class="popup" :style="[{ top: Number(statusBarHeight + 75) + 'rpx' }]" style="">
+				<view class="secPopBox">
+					<scroll-view scroll-y="true" class="scrollBoxSec" :show-scrollbar="true">
+						<view class="grid-container">
+							<view class="secListbox" v-for="(item,index) in secSelectCateList" :key="item.id"
+								@click="handleSecSelect(item,index)">
+								<view v-if="item.name == '全部分类'"
+									:class=" item.name == selectedItem.name ? 'SelectedSecItem':'secItemAll'">
+									{{item.name}}
+								</view>
+								<view v-else :class=" item.id == selectedItem.id ? 'SelectedSecItem':'secItem'">
+									{{item.name}}
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+
+					<view class="secBtns">
+						<view class="secReset" @click="resetSelect()">重置</view>
+						<view class="secSure" style="margin-left: 30rpx;" @click="sureSelect()">确认</view>
+					</view>
+				</view>
+
+
+			</view>
+		</su-popup>
+
+
+	</s-layout>
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref,
+		reactive,
+		nextTick
+	} from 'vue';
+	import {
+		onLoad,
+		onShow,
+		onPageScroll,
+		onPullDownRefresh,
+		onReachBottom,
+
+	} from '@dcloudio/uni-app';
+	import {
+		consignee,
+		mobile,
+		address,
+		region
+	} from '@/sheep/validate/form';
+	import rent from '../../sheep/api/rent';
+	import sheep from '@/sheep';
+	import _ from 'lodash';
+	import {
+		baseUrl
+	} from '@/sheep/config';
+
+	// const template = computed(() => sheep.$store('app').template?.home);
+
+	const state = reactive({
+		categoryList: [],
+		activeMenu: '0',
+
+		pagination: {
+			data: [],
+			current_page: 1,
+			total: 1,
+			last_page: 1,
+		},
+		loadStatus: '',
+	});
+
+	const searchValue = ref(null);
+
+	const {
+		screenHeight,
+		safeAreaInsets,
+		screenWidth,
+		safeArea
+	} = sheep.$platform.device;
+	const pageHeight = computed(() => safeArea.height - 44 - 124);
+	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+	const firstIndex = ref(0);
+	const secondIndex = ref(0);
+
+	const listQuery = ref({
+		page: 1,
+		limit: 1000,
+		keywords: null,
+		root: '',
+		parent_id: '',
+	})
+	const goodsCateCount = ref(0);
+	const homrS = ref(false);
+	const loadStatus = ref('');
+
+	onShow(() => {
+		getList();
+		getBanner();
+		selectSecShow.value = false;
+
+	})
+
+	//搜索
+	function onSearch(e) {
+		state.keyword = e;
+		emptyList();
+		getList(state.currentSort, state.currentOrder, state.categoryId, e);
+	}
+
+	const bannerList = ref([])
+	async function getBanner() {
+		const res = await sheep.$api.home.homeBanner({});
+		console.log('banner', res);
+		if (res.code == 1) {
+			bannerList.value = res.data.list
+			console.log('bannerList', bannerList.value);
+		}
+
+	}
+
+	const firstCateList = ref([]);
+	const secondCateList = ref([]);
+	const thirdCateList = ref([]);
+	//一级分类
+	async function getList() {
+		console.log('分类列表', firstIndex.value);
+		const res = await sheep.$api.goods.newList({
+			keywords: listQuery.value.keywords,
+			page: listQuery.value.page,
+			limit: listQuery.value.limit,
+			tree: '1',
+			parent_id: listQuery.value.parent_id,
+			root: listQuery.value.root,
+		});
+		console.log('getList', res.data[0]);
+
+		if (res.data) {
+			// firstCateList.value = [...firstCateList.value, ...res.data];
+			firstCateList.value = res.data[0].children;
+			secondCateList.value = firstCateList.value[firstIndex.value].children;
+			goodsCateCount.value = res.data.count;
+			getSecSelectData();
+		} else {
+			firstCateList.value = [];
+		}
+
+		console.log('getList', firstCateList.value, goodsCateCount.value);
+	}
+
+	//选择一级分类
+	const onMenu = (val) => {
+		console.log('选择一级分类val：', val);
+		state.activeMenu = val;
+		firstIndex.value = val;
+		secondIndex.value = 0; // 重置二级索引
+		console.log('选择一级分类first：', firstCateList.value[firstIndex.value]);
+		secondCateList.value = firstCateList.value[firstIndex.value].children;
+		console.log('二级分类secondCateList:', secondCateList.value);
+		getSecSelectData();
+		// getSecond(firstCateList.value[val].id);
+	};
+
+	const secSelectCateList = ref([]); //二级筛选框
+	const selectSecShow = ref(false); //下拉框的显示隐藏
+	const selectedItem = ref({}); //选中的分类数据
+	function getSecSelectData() {
+		const items = [{
+			name: '全部分类',
+			id: '',
+			children: []
+		}]
+		secSelectCateList.value = [...items, ...secondCateList.value]
+		console.log('secSelectCateList', secSelectCateList.value);
+	}
+
+	function handleSecSelect(item, index) {
+		selectedItem.value = item;
+		console.log('item:', selectedItem.value);
+	}
+	//确定筛选的二级分类
+	function sureSelect() {
+		selectSecShow.value = false;
+		// firstIndex.value = 0;
+		secondCateList.value = [selectedItem.value];
+		console.log('定筛选的二级分类', secondCateList.value.children);
+		if (selectedItem.value.name != '全部分类') {
+			sheep.$api.goods.newList({
+				page: listQuery.value.page,
+				limit: listQuery.value.limit,
+				tree: '1',
+				parent_id: selectedItem.value.parent_id,
+				root: selectedItem.value.id,
+			}).then((res) => {
+				if (res.code == 1) {
+					console.log('res', res.data);
+					// secondCateList.value = res.data;
+					secondIndex.value = 0;
+					secondCateList.value[secondIndex.value].children = [...res.data];
+				} else {}
+			})
+			console.log('getList', );
+		} else {
+			getList();
+		}
+
+
+
+	}
+	//重置筛选二级分类
+	function resetSelect() {
+		selectedItem.value = {
+			name: '全部分类',
+			id: '',
+			children: []
+		};
+		console.log('重置', firstIndex.value);
+	}
+
+	//查看更多
+	function toSecondCate(e, index) {
+		console.log('列表数据');
+		console.log('查看更多e:', e.id, e.name, index);
+		// clog
+		if (e.children.length != 0) {
+			const thirdId = e.children[index].id;
+			console.log('查看更多-thirdId:', thirdId);
+			uni.navigateTo({
+				url: '/pages/goods/list?categoryId=' + thirdId + '&name=' + e.name
+			})
+		} else {
+			uni.navigateTo({
+				url: '/pages/goods/list?categoryId=' + e.id + '&name=' + e.name
+			})
+		}
+
+
+	}
+
+	onPullDownRefresh(async () => {
+		firstCateList.value = [];
+		// firstIndex.value = 0;
+		// secondIndex.value = 0;
+		uni.showLoading({
+			title: '加载中...'
+		});
+		console.log('下拉刷新触发');
+		await getList();
+
+		setTimeout(() => {
+			uni.hideLoading();
+			uni.stopPullDownRefresh();
+		}, 1500)
+	})
+
+	const toPage = (e) => {
+		uni.navigateTo({
+			url: e,
+		})
+	}
+
+	function searchGoods() {
+		console.log('搜索');
+	}
+
+	// 隐藏原生tabBar
+	uni.hideTabBar({
+		fail: () => {},
+	});
+</script>
+
+<style lang="scss" scoped>
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		padding: 0px;
+	}
+
+	.uni-mt-10 {
+		margin-top: 10px;
+	}
+
+	.title2 {
+		color: #3d3d3d;
+		font-size: 30rpx;
+		font-weight: 800;
+		line-height: 42rpx;
+	}
+
+	.title3 {
+		font-size: 20rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 22rpx;
+	}
+
+	.container {
+		width: 100%;
+		height: 100%;
+		background-color: #ffffff;
+		scroll-behavior: smooth;
+
+		.header {
+			background: linear-gradient(to bottom, #FCC74E, #D8D8D8, #ffffff);
+
+			.search-box {
+				width: 690rpx;
+				// width: 100%;
+				height: 90rpx;
+				// background-color: #fff;
+				margin-left: 30rpx;
+				// position: fixed;
+				// z-index: 100;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding-top: 30rpx;
+				padding-bottom: 30rpx;
+
+			}
+
+			.search-result {
+				padding-top: 10px;
+				padding-bottom: 20px;
+				text-align: center;
+			}
+
+			.search-result-text {
+				text-align: center;
+				font-size: 14px;
+				color: #666;
+			}
+
+			.swiper-box {
+				width: 690rpx;
+				padding: 0 30rpx;
+				// display: grid;
+				// justify-content: center;
+				height: 280rpx;
+				position: relative;
+				padding-bottom: 30rpx;
+
+				.swiper_s {
+					width: 100%;
+					height: 100%;
+					// display: grid;
+					// justify-content: center;
+
+					.swiper-image {
+						width: 100%;
+						height: 100%;
+						border-radius: 36rpx;
+						object-fit: contain;
+					}
+				}
+
+			}
+
+
+		}
+
+
+		.schoolCategory {
+			// display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			// background-color: #ffffff;
+
+			.left-scrop {
+				width: 200rpx;
+				height: 100%;
+				// padding-left: 12rpx;
+				background-color: #f6f6f6;
+				position: fixed;
+				left: 0;
+
+				.menu-item {
+					width: 100%;
+					height: 110rpx;
+					position: relative;
+					transition: all linear 0.2s;
+
+					.menu-title {
+						// width: 175rpx;
+						// height:70rpx;
+						line-height: 45rpx;
+						font-size: 30rpx;
+						font-weight: 400;
+						color: #333;
+						margin-left: 18rpx;
+						margin-right: 15rpx;
+						position: relative;
+						z-index: 10;
+						overflow: hidden;
+						// white-space: nowrap;
+						// text-overflow: ellipsis;
+						// padding: 10rpx 0;
+						padding: 10rpx;
+
+						&::before {
+							content: '';
+							width: 64rpx;
+							height: 12rpx;
+							background: linear-gradient(90deg,
+									var(--ui-BG-Main-gradient),
+									var(--ui-BG-Main-light)) !important;
+							position: absolute;
+							left: -64rpx;
+							bottom: 0;
+							z-index: -1;
+							transition: all linear 0.2s;
+						}
+					}
+
+					&.menu-item-active {
+						background-color: #fff;
+						border-radius: 20rpx 0 0 20rpx;
+
+						&::before {
+							content: '';
+							position: absolute;
+							right: 0;
+							bottom: -20rpx;
+							width: 20rpx;
+							height: 20rpx;
+							// background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
+						}
+
+						&::after {
+							content: '';
+							position: absolute;
+							top: -20rpx;
+							right: 0;
+							width: 20rpx;
+							height: 20rpx;
+							background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
+						}
+
+						.menu-title {
+							font-weight: 600;
+
+							&::before {
+								left: 0;
+							}
+						}
+					}
+				}
+
+			}
+
+			.goods-list-box {
+				background-color: #fff;
+				width: calc(100vw - 210rpx);
+				height: 110rpx;
+				// padding: 2rpx;
+				margin-left: 200rpx;
+				position: relative;
+				// top: 20rpx;
+
+				.right-scrop {
+					width: 100%;
+					height: 90rpx;
+					overflow: hidden;
+					// position: fixed;
+					// top: 74px;
+					background-color: #ffffff;
+					z-index: 10;
+					padding: 5rpx 0;
+					border-radius: 20rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+
+					.selectSecBox {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						width: 498rpx;
+						height: 80rpx;
+						background-color: #FFFBF1;
+						border: 2rpx solid #FCC74E;
+						border-radius: 12rpx;
+						margin-left: 20rpx;
+					}
+
+					.horizontal-scroll {
+						width: 95%;
+						height: 100%;
+						white-space: nowrap;
+						padding-left: 22rpx;
+						overflow: hidden;
+						// z-index: 10;
+						// display: flex;
+						// align-items: flex-start;
+						// padding: 0 20rpx; // 容器内边距
+					}
+
+					.menu-item2 {
+						display: inline-block;
+						margin-top: 20rpx;
+						margin-right: 30rpx;
+						height: 70rpx;
+						width: 180rpx;
+						text-align: center;
+						flex-shrink: 0; //防止压缩
+						// display: flex;
+						// align-items: center;
+						// justify-content: center;
+						// vertical-align: center;
+
+
+						.menuR-title {
+							width: 175rpx;
+							height: 70rpx;
+							border: 1rpx solid #999999;
+							border-radius: 158rpx;
+							line-height: 70rpx;
+							font-size: 28rpx;
+							font-weight: bold;
+							color: #999999;
+							text-align: center;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							background-color: #fff;
+							padding: 0 10rpx;
+
+							// padding: 0 0 0 20rpx;
+						}
+
+						.menuRselect-title {
+							width: 175rpx;
+							height: 70rpx;
+							border: 1rpx solid #FCC74E;
+							border-radius: 158rpx;
+							line-height: 70rpx;
+							font-size: 28rpx;
+							font-weight: bold;
+							color: #3d3d3d;
+							text-align: center;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							background-color: #FCC74E;
+							padding: 0 10rpx;
+							// padding:  0 0 0 20rpx;
+						}
+
+					}
+
+
+				}
+
+				.right-bottom {
+					// padding-top: 120rpx;
+					width: 100%;
+					// height: 500rpx;
+					overflow: hidden;
+					background-color: #fff;
+					z-index: 10;
+
+					.thirdScroll {
+						width: 100%;
+						// height: 100%;
+						white-space: nowrap;
+						// padding-left: 30rpx;
+						overflow: hidden;
+
+						.thirdListBox {
+							margin-left: 30rpx;
+
+							.title-box {
+								.title-text {
+									font-size: 28rpx;
+									font-weight: bold;
+									color: #333333;
+								}
+
+								.more-btn {
+									font-size: 26rpx;
+									font-weight: 400;
+									color: #999999;
+								}
+							}
+
+							.goods-item {
+								width: calc((100% - 20px) / 2);
+								margin-right: 10px;
+								margin-bottom: 20px;
+
+								&:nth-of-type(2n) {
+									margin-right: 0;
+								}
+
+								.goods-img {
+									width: calc((100vw - 150px) / 2);
+									height: calc((100vw - 150px) / 2);
+									border-radius: 18rpx;
+								}
+
+								.goods-title {
+									width: calc((100vw - 150px) / 2);
+									font-size: 30rpx;
+									font-weight: 500;
+									color: #333333;
+									text-align: center;
+									white-space: nowrap;
+									overflow: hidden;
+									text-overflow: ellipsis;
+
+								}
+
+								.goods-price {
+									color: $red;
+									line-height: 40rpx;
+								}
+							}
+
+						}
+
+					}
+
+				}
+
+
+
+
+
+			}
+
+
+		}
+
+		.car-show {
+			height: 80rpx;
+			position: fixed;
+			bottom: 200rpx;
+			right: 0;
+
+			.car-image {
+				width: 165rpx;
+				height: 78rpx;
+			}
+
+			.logo-image {
+				width: 67rpx;
+				height: 67rpx;
+				position: absolute;
+				top: -50rpx;
+				left: 80rpx;
+			}
+
+			.gou-image {
+				width: 30rpx;
+				height: 30rpx;
+				position: absolute;
+				top: 49%;
+				left: 30rpx;
+				transform: translateY(-50%);
+			}
+
+			.cart-image {
+				width: 80rpx;
+				height: 80rpx;
+				position: absolute;
+				top: 45%;
+				right: 20rpx;
+				transform: translateY(-50%);
+			}
+		}
+
+	}
+
+	.popup {
+		width: 750rpx;
+		height: 420rpx;
+		background-color: #ffffff;
+		position: fixed;
+		border-radius: 0rpx 0rpx 18rpx 18rpx;
+
+		.secPopBox {
+			width: 690rpx;
+			height: 250rpx;
+			padding: 30rpx;
+
+			.scrollBoxSec {
+				width: 100%;
+				height: 100%;
+
+				.grid-container {
+					display: grid;
+					grid-template-columns: repeat(3, 220rpx);
+					grid-template-rows: auto;
+					gap: 10rpx;
+					padding: 20rpx;
+					justify-content: center;
+				}
+			}
+
+			.secListbox {
+				width: 100%;
+				height: 100%;
+
+				.secItem {
+					width: 220rpx;
+					border-radius: 12rpx;
+					height: 70rpx;
+					background-color: #f7f7f7;
+					color: #999999;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+				.secItemAll {
+					width: 220rpx;
+					border-radius: 12rpx;
+					height: 70rpx;
+					background-color: #f7f7f7;
+					color: #3d3d3d;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+				.SelectedSecItem {
+					width: 216rpx;
+					border-radius: 12rpx;
+					height: 66rpx;
+					background-color: #FFFBF1;
+					border: 2rpx solid #FCC74E;
+					color: #323232;
+					font-size: 32rpx;
+					line-height: 32rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+				}
+
+			}
+
+			.secBtns {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+				padding-top: 30rpx;
+
+				.secReset {
+					width: 330rpx;
+					height: 80rpx;
+					background-color: #FFFBF1;
+					border-radius: 217rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.secSure {
+					width: 330rpx;
+					height: 80rpx;
+					background: linear-gradient(to right, #FCCA58 100%, #FFBD25 100%);
+					border-radius: 217rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+			}
+
+		}
+
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/order/list.vue b/pages/order/list.vue
index 57f544e..d31d5e3 100644
--- a/pages/order/list.vue
+++ b/pages/order/list.vue
@@ -439,6 +439,7 @@
 	});
 	
 	onShow(() => {
+		state.pagination.data = [];
 		getOrderList();
 	})