From dc7c7cc47538d03ecd4194b1d2dd91c34d7655ad Mon Sep 17 00:00:00 2001
From: 18631081161 <2088094923@qq.com>
Date: Fri, 25 Jul 2025 14:13:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/guyu/home/goods-item.vue | 198 +++++++++++-----------
 pages/home/home-page.vue            | 244 ++++++++++++++--------------
 2 files changed, 227 insertions(+), 215 deletions(-)

diff --git a/components/guyu/home/goods-item.vue b/components/guyu/home/goods-item.vue
index 342c33a..1013c49 100644
--- a/components/guyu/home/goods-item.vue
+++ b/components/guyu/home/goods-item.vue
@@ -1,110 +1,116 @@
 <template>
-    <view class="goods-item" @click="onItemClick">
-        <view class="goods-image">
-            <image v-if="goodsItem.imgUrl" :src="goodsItem.imgUrl" class="image" mode="aspectFill" />
-        </view>
+	<view class="goods-item" @click="onItemClick">
+		<view class="goods-image">
+			<image v-if="goodsItem.imgUrl" :src="goodsItem.imgUrl" class="image" mode="aspectFill" />
+		</view>
 
-        <text class="goods-title myZt-500w">{{ goodsItem.title }}</text>
+		<text class="goods-title myZt-500w">{{ goodsItem.title }}</text>
 
-        <text class="goods-status myZt-300w">现货发售中</text>
+		<text class="goods-status myZt-300w">现货发售中</text>
 
-        <view class="goods-price">
-            <text class="price-value myZt-500w">￥{{ goodsItem.price }}</text>
-            <text class="price-unit myZt-500w">/ 包</text>
-        </view>
-    </view>
+		<view class="goods-price">
+			<text class="price-value myZt-500w">￥{{ goodsItem.price }}</text>
+			<text class="price-unit myZt-500w">/ 包</text>
+		</view>
+	</view>
 </template>
 
 <script setup>
-/**
- * 商品项组件
- */
-import { defineProps, defineEmits } from 'vue';
+	/**
+	 * 商品项组件
+	 */
+	import {
+		defineProps,
+		defineEmits
+	} from 'vue';
 
-// 组件属性
-const props = defineProps({
-    /**
-     * 商品信息
-     */
-    goodsItem: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: '',
-            title: '',
-            imgUrl: '',
-            price: '0',
-            type: ''
-        })
-    }
-});
+	// 组件属性
+	const props = defineProps({
+		/**
+		 * 商品信息
+		 */
+		goodsItem: {
+			type: Object,
+			required: true,
+			default: () => ({
+				id: '',
+				title: '',
+				imgUrl: '',
+				price: '0',
+				type: ''
+			})
+		}
+	});
 
-// 事件
-const emit = defineEmits(['click']);
+	// 事件
+	const emit = defineEmits(['click']);
 
-/**
- * 点击商品项
- */
-const onItemClick = () => {
-    emit('click', props.goodsItem.id);
-};
+	/**
+	 * 点击商品项
+	 */
+	const onItemClick = () => {
+		emit('click', props.goodsItem.id);
+	};
 </script>
 
 <style lang="scss" scoped>
-.goods-item {
-    height: 490.28rpx;
-    background-color: #FEF6D6;
-    border: 3rpx solid #F9D051;
-    border-radius: 40rpx;
-    display: flex;
-    flex-direction: column;
-    
-    .goods-image {
-        width: 100%;
-        height: 320.83rpx;
-        background-color: #FFFFFF;
-        border-radius: 40rpx 40rpx 0 0;
-        overflow: hidden;
-        
-        .image {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    
-    .goods-title {
-        width: 280.56rpx;
-        margin: 15.28rpx auto;
-        font-size: 25rpx;
-        color: #685952;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    
-    .goods-status {
-        font-size: 19.44rpx;
-        color: #FF6A6A;
-        margin-left: 24.31rpx;
-    }
-    
-    .goods-price {
-        display: flex;
-        flex-direction: row;
-        margin-left: 20.31rpx;
-        
-        .price-value {
-            font-size: 29.17rpx;
-            color: #87644E;
-        }
-        
-        .price-unit {
-            font-size: 19.44rpx;
-            color: #87644E;
-            margin-top: 10rpx;
-        }
-    }
-}
+	.goods-item {
+		height: 490.28rpx;
+		background-color: #FEF6D6;
+		border: 3rpx solid #F9D051;
+		border-radius: 40rpx;
+		display: flex;
+		flex-direction: column;
+
+		.goods-image {
+			width: 100%;
+			height: 320.83rpx;
+			background-color: #FFFFFF;
+			border-radius: 40rpx 40rpx 0 0;
+			overflow: hidden;
+
+			.image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.goods-title {
+			width: 280.56rpx;
+			margin-top: 15.28rpx;
+			margin-left: 23.61rpx;
+			font-size: 25rpx;
+			color: #685952;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.goods-status {
+			font-size: 19.44rpx;
+			color: #FF6A6A;
+			margin-left: 24.31rpx;
+			margin-top: 15.97rpx;
+		}
+
+		.goods-price {
+			display: flex;
+			flex-direction: row;
+			margin-left: 20.31rpx;
+			margin-top: 18.75rpx;
+
+			.price-value {
+				font-size: 29.17rpx;
+				color: #87644E;
+			}
+
+			.price-unit {
+				font-size: 19.44rpx;
+				color: #87644E;
+				margin-top: 10rpx;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/home/home-page.vue b/pages/home/home-page.vue
index a1771fe..8d27a1f 100644
--- a/pages/home/home-page.vue
+++ b/pages/home/home-page.vue
@@ -3,144 +3,150 @@
 	<view>
 		<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
 			@scroll="scroll">
-			<view class="content">
-				<guyu-home-search style="width: 100%;"></guyu-home-search>
-				<!-- 公告 -->
-				<guyu-home-notice :notice-info="homeData?.noticeInfo" />
-				<!-- 轮播图 -->
-				<guyu-home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
-				<!-- 推荐位 -->
-				<guyu-home-recommend :rec-list="homeData?.recList" style="width: 100%;" />
 
-				<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
-				<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
-					<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar"> </view>
-					<guyu-home-tabs ref="tabs" :list="homeData?.categories" @change="tabsChange" :current="current" />
+			<view class="bg"
+				style="display: flex; justify-content: center; width: 100%; background-image: url('@@:static/bg.png');">
+				<view class="content">
+					<guyu-home-search style="width: 100%;"></guyu-home-search>
+					<!-- 公告 -->
+					<guyu-home-notice :notice-info="homeData?.noticeInfo" />
+					<!-- 轮播图 -->
+					<guyu-home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
+					<!-- 推荐位 -->
+					<guyu-home-recommend :rec-list="homeData?.recList" style="width: 100%;" />
+
+					<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
+					<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
+						<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar"> </view>
+						<guyu-home-tabs ref="tabs" :list="homeData?.categories" @change="tabsChange"
+							:current="current" />
+					</view>
+					<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
+						@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
+						<swiper-item class="swiper-item" v-for="(item, index) in homeData?.categories" :key="index">
+							<guyu-home-goods-list ref="swiperList" :tabIndex="index" :currentIndex="current"
+								@heightChanged="heightChanged">
+							</guyu-home-goods-list>
+						</swiper-item>
+					</swiper>
 				</view>
-				<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
-					@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
-					<swiper-item class="swiper-item" v-for="(item, index) in homeData?.categories" :key="index">
-						<guyu-home-goods-list ref="swiperList" :tabIndex="index" :currentIndex="current"
-							@heightChanged="heightChanged">
-						</guyu-home-goods-list>
-					</swiper-item>
-				</swiper>
 			</view>
+
 		</z-paging>
+
 	</view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import {
-	homeData,
-	isLoading,
-	error,
-	preloadHomeData,
-	refreshHomeData
-} from '@/common/server/home';
-// 状态变量
-const swiperHeight = ref(0);
-const tabList = ref(['测试1', '测试2', '测试3', '测试4']);
-const current = ref(0); // tabs组件的current值，表示当前活动的tab选项
-const tabsBarHeight = ref(0);
-const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
-const isQuerying = ref(false);
+	import {
+		ref,
+		onMounted
+	} from 'vue';
+	import {
+		homeData,
+		isLoading,
+		error,
+		preloadHomeData,
+		refreshHomeData
+	} from '@/common/server/home';
+	// 状态变量
+	const swiperHeight = ref(0);
+	const tabList = ref(['测试1', '测试2', '测试3', '测试4']);
+	const current = ref(0); // tabs组件的current值，表示当前活动的tab选项
+	const tabsBarHeight = ref(0);
+	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
+	const isQuerying = ref(false);
 
-// 组件引用
-const pagePaging = ref(null);
-const tabs = ref(null);
-const swiperList = ref(null);
+	// 组件引用
+	const pagePaging = ref(null);
+	const tabs = ref(null);
+	const swiperList = ref(null);
 
-onLoad(() => {
+	onLoad(() => {
 
-});
-// 初始化加载
-onMounted(() => {
-	if (!homeData.value) preloadHomeData();
-});
-// 方法
-const scroll = (e) => {
-	// #ifdef MP
-	if (e.detail.scrollTop < 700 && statusBarHeight.value > 0) {
-		if (isQuerying.value) {
-			return;
-		}
-		isQuerying.value = true;
-		const query = uni.createSelectorQuery();
-		query.select('.bar-view').boundingClientRect(rect => {
-			if (rect) {
-				// 判断元素是否粘滞
-				if (rect.top <= 0 && tabsBarHeight.value == 0) {
-					tabsBarHeight.value = statusBarHeight.value;
-				} else if (rect.top > 30 && statusBarHeight.value > 0) {
-					tabsBarHeight.value = 0;
-				}
-			}
-			isQuerying.value = false;
-		}).exec();
-	}
-	// #endif
-};
-
-// tabs通知swiper切换
-const tabsChange = (index) => {
-	_setCurrent(index);
-};
-
-// 下拉刷新时，通知当前显示的列表进行reload操作
-const onRefresh = () => {
-	swiperList.value[current.value].reload(() => {
-		//当当前显示的列表刷新结束，结束当前页面的刷新状态
-		pagePaging.value.endRefresh();
 	});
-};
+	// 初始化加载
+	onMounted(() => {
+		if (!homeData.value) preloadHomeData();
+	});
+	// 方法
+	const scroll = (e) => {
+		// #ifdef MP
+		if (e.detail.scrollTop < 700 && statusBarHeight.value > 0) {
+			if (isQuerying.value) {
+				return;
+			}
+			isQuerying.value = true;
+			const query = uni.createSelectorQuery();
+			query.select('.bar-view').boundingClientRect(rect => {
+				if (rect) {
+					// 判断元素是否粘滞
+					if (rect.top <= 0 && tabsBarHeight.value == 0) {
+						tabsBarHeight.value = statusBarHeight.value;
+					} else if (rect.top > 30 && statusBarHeight.value > 0) {
+						tabsBarHeight.value = 0;
+					}
+				}
+				isQuerying.value = false;
+			}).exec();
+		}
+		// #endif
+	};
 
-// 当滚动到底部时，通知当前显示的列表加载更多
-const scrolltolower = () => {
-	swiperList.value[current.value].doLoadMore();
-};
+	// tabs通知swiper切换
+	const tabsChange = (index) => {
+		_setCurrent(index);
+	};
 
-// swiper滑动中
-const swiperTransition = (e) => {
-	tabs.value.setDx(e.detail.dx);
-};
+	// 下拉刷新时，通知当前显示的列表进行reload操作
+	const onRefresh = () => {
+		swiperList.value[current.value].reload(() => {
+			//当当前显示的列表刷新结束，结束当前页面的刷新状态
+			pagePaging.value.endRefresh();
+		});
+	};
 
-// swiper滑动结束
-const swiperAnimationfinish = (e) => {
-	_setCurrent(e.detail.current);
-	tabs.value.unlockDx();
-};
+	// 当滚动到底部时，通知当前显示的列表加载更多
+	const scrolltolower = () => {
+		swiperList.value[current.value].doLoadMore();
+	};
 
-// 设置swiper的高度
-const heightChanged = (height) => {
-	if (height === 0) {
-		// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
-		// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
-		height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
-	}
-	swiperHeight.value = height;
-};
+	// swiper滑动中
+	const swiperTransition = (e) => {
+		tabs.value.setDx(e.detail.dx);
+	};
 
-const _setCurrent = (currentVal) => {
-	if (currentVal !== current.value) {
-		//切换tab时，将上一个tab的数据清空
-		swiperList.value[current.value].clear();
-	}
-	current.value = currentVal;
-};
+	// swiper滑动结束
+	const swiperAnimationfinish = (e) => {
+		_setCurrent(e.detail.current);
+		tabs.value.unlockDx();
+	};
+
+	// 设置swiper的高度
+	const heightChanged = (height) => {
+		if (height === 0) {
+			// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
+			// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
+			height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
+		}
+		swiperHeight.value = height;
+	};
+
+	const _setCurrent = (currentVal) => {
+		if (currentVal !== current.value) {
+			//切换tab时，将上一个tab的数据清空
+			swiperList.value[current.value].clear();
+		}
+		current.value = currentVal;
+	};
 </script>
 
 <style lang="scss" scoped>
-.content {
-	width: 96%;
-	margin-left: 2%;
-	background-color: url('@@:static/bg.png');
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-}
+	.content {
+		width: 94%;
+	}
 
-.swiper {
-	height: 1000px;
-}
+	.swiper {
+		height: 1000px;
+	}
 </style>
\ No newline at end of file