fanghuayuexuan/pages/home/index.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-26
 * @Description: 首页
-->
<template>
	<view class="home-page">
		<image src="https://cdn.his.cdwjyyh.com/images/yuexuan_home_top_bg.png" class="home-bg"></image>
		<uni-nav-bar fixed :statusBar="true" left-icon="back" backgroundColor="" :border="false" rightWidth="0"
			leftWidth="0">
			<template v-slot:default>
				<view class="nav-header">
					<view class="nav-title">
						<view class="main-title">芳华悦选</view>
						<view class="sub-title">让家人放心吃健康安全的食品</view>
					</view>
					<view class="nav-cart">
						<image class="cart-icon" src="https://cdn.his.cdwjyyh.com/images/shopping_car_icon.png"></image>
						<view class="cart-badge">{{ cartCount }}</view>
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<!-- 搜索栏 -->
		<HomeSearch @onSearch="onSearch" @onSearchClick="onSearchClick" />
		<view class="home-content">
			<ScsScrollView ref="fresher" refresherBackground="transparent" :refresherEnabled="false"
				@onfresher="onfresher" @loadMore="loadMore" @handleScroll="(flag) => isShowToTop = flag">
				<template v-slot:list>
					<!-- tab栏 -->
					<view class="nav-bar">
						<view class="nav-container">
							<ScsScrollNavbar :tabsData="tabsData" :tabCurrentIndex="tabCurrentIndex" nameKey="name"
								key="tabCurrentIndex" @tabChange="tabChange" />
							<image class="gradient-bg" src="https://cdn.his.cdwjyyh.com/images/white_gradient_bg.png">
							</image>
							<view class="nav-actions">
								<image class="action-icon product-icon" @click="navTo('/pages/shopping/index')"
									src="https://cdn.his.cdwjyyh.com/images/product_section_icon.png"></image>
								<image class="action-icon filter-icon"
									src="https://cdn.his.cdwjyyh.com/images/home_filter_icon.png"
									@click="toggleChannel"></image>
							</view>
						</view>
						<HomeMenu :autoplay="false" :swiperList="menusData" />
					</view>
					<!-- 商品栏 -->
					<HomeProduct :recommendList="recommendList" />
					<!-- tab栏 -->
					<view class="product-tabs">
						<ScsScrollNavbar :tabsData="tabsProduct" activeColor="#02B176" textColor="#333333"
							:isUseActImg="true" :isScroll="false" :isUseLine="false" :calcLeft="28"
							:tabCurrentIndex="tabsProductIndex" nameKey="name" key="tabsProductIndex"
							@tabChange="tabProductChange" />
					</view>
					<!-- 商品列表 -->
					<HomeGoodsItem :productList="currentCategoryProducts" @addToCart="addToCart" @goToBuy="goToBuy" />

					<!-- 销量榜和瀑布流商品容器 -->
					<view class="sales-waterfall">
					</view>

					<view class="px-12 mt-14">
						<HomeGoodsItem :productList="currentCategoryProducts" @addToCart="addToCart"
							@goToBuy="goToBuy" />
					</view>
					<!-- 更多列表 -->
					<!-- 实时销量榜 -->


					<!-- 瀑布流商品 -->
					<view class="goods-list">
						<view class="sales-ranking">
							<image class="bg"
								src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/sales_ranking_bg.png"
								mode="aspectFill"></image>
							<view class="sales-ranking-content">
								<view class="sales-ranking-title">
									<text>实时销量榜</text>
									<image
										src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/sales_ranking_arrow_right_icon.png">
									</image>
								</view>
								<view class="sales-ranking-total">
									今日销量{{ formatSales(totalSales) }}件
								</view>
								<view class="sales-ranking-list" v-if="salesRankList">
									<!-- 显示实际数据 -->
									<view class="sales-ranking-item" v-for="(itm, index) in salesRankList"
										:key="index" @click="goToBuy(itm)">
										<view class="sales-ranking-item-img">
											<image
												:src="itm.image || 'https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/img.png'">
											</image>
											<view class="sales-ranking-item-rank" :class="'rank-' + (index + 1)">
												{{ index + 1 }}</view>
										</view>
										<view class="sales-ranking-item-info">
											<view class="sales-ranking-item-name">{{ itm.productName || '商品名称' }}
											</view>
											<view class="sales-ranking-item-price">
												<view>
													<text>¥</text>
													<text>{{ itm.price || 0 }}</text>
												</view>
												<image @click.stop="addToCart(itm)" class="sales-ranking-item-cart"
													src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/add_car_icon.png">
												</image>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="item" v-for="(item,index) in productList" :key="index" @click="goToBuy(item)">
							<view class="img-box">
								<image :src="item.firstImage" mode="aspectFit"></image>
							</view>
							<view class="info-box">
								<view class="title ellipsis2">{{item.title}}</view>
								<view class="intro ellipsis">{{item.intro}}</view>
								<view class="sale">已售 {{item.sales}} | 惊艳度{{item.amazingDegree}}%</view>
								<view class="lable-group">
									<view class="lable-item" v-if="item.otPrice > item.price">
										{{Math.round((1 - item.price / item.otPrice) * 10 * 10) / 10}}折</view>
								</view>
								<view class="prce-num">
									<view class="price">
										<text class="unit">¥</text><text
											class="bold">{{parseInt(item.price)}}</text>{{item.price.includes('.') ? '.' + item.price.split('.')[1] : '.00'}}
									</view>
									<view class="cart-img" @click.stop="addToCart(item)">
										<image class="w40 h40"
											src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/add_car.png">
										</image>
									</view>
								</view>
								<view class="card">
									<view class="card-item">
										<image class="img"
											src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/ranking_icon.png">
										</image>
										<text class="ranking">健康新品热销榜</text>
										<text class="bold">TOP.2</text>
									</view>
									<image class="go"
										src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/images/jb_arrow_right_icon.png">
									</image>
								</view>
							</view>
						</view>
					</view>

					<u-gap height="15"></u-gap>
					<!-- 频道 可拖拽 -->
					<channel ref="channelManager" :initial-my-channels="myChannels" :initial-all-channels="allChannels"
						:active-channel-id="activeChannelId" :show="showChannel" @channels-change="onChannelsChange"
						@order-change="onOrderChange" @channel-tap="onChannelTap" @close="showChannel = false" />



					<!-- 商品规格选择弹窗 -->
					<ProductSpecPopup :visible="specVisible" :product="product" :is-buy-mode="isBuyMode"
						@update:visible="specVisible = $event" @cart-updated="getCartCount" />
				</template>
			</ScsScrollView>
		</view>
	</view>


</template>
<script>
	import {
		getMyProductCate,
		channelAdd,
		channelDelete,
	} from "@/api/index.js"
	import HomeMenu from './components/home-menu.vue'
	import HomeProduct from './components/home-product.vue'
	import HomeSearch from './components/home-search.vue'
	import HomeGoodsItem from './components/home-goods-item.vue'
	import HomeGoodsItemTest from './components/home-goods-item-test.vue'
	import ScsHelangWaterfall from '@/components/public/scs-helang-waterfall.vue'
	import channel from '@/components/channel.vue'
	import PxPopupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
	import ProductSpecPopup from '@/components/product-spec-popup/product-spec-popup.vue'
	import {
		// getMenu,
		productWaterfall, // 商品搜索瀑布流
		recommendProduct, // 获取首页推荐商品
		addCart, // 添加购物车
		getCartCount, // 获取商品购物车数量
		getCarts, // 获取购物车列表
		getProductValues, //获取商品规格列表
	} from '@/api/index'
	import {

		productSalesRanking //获取实时销量榜
	} from '@/api/product.js'


	export default {
		components: {
			HomeMenu,
			HomeProduct,
			HomeSearch,
			HomeGoodsItem,
			HomeGoodsItemTest,
			channel,
			ScsHelangWaterfall,
			PxPopupBottom,
			ProductSpecPopup,
		},
		data() {
			return {
				// 频道相关数据
				showChannel: false, // 默认不显示
				channelManager: false,
				activeChannelId: 1,
				myChannels: [],
				allChannels: [],
				// UI状态数据
				statusBarHeight: 0,
				isShowToTop: false,

				// Tab数据
				tabsData: [],
				tabCurrentIndex: 0,

				tabsProduct: [{
						name: '今日主推'
					},
					{
						name: '健康新品'
					},
					{
						name: '营养保健'
					}
				],
				tabsProductIndex: 0,

				// 菜单数据
				menusData: [],

				// 商品列表数据
				goodList: [1, 2],
				// 购物车数据
				cartCount: 0,
				cartList: [],
				// 加载状态
				loading: false,
				refreshing: false,
				// 分页
				page: 1,
				pageSize: 10,
				// 是否有更多数据
				hasMore: true,
				// 商品数据
				recommendList: [], //推荐商品
				productList: [], //瀑布流商品
				salesRankList: [], //实时销量榜数据
				totalSales: 0, //今日总销量
				// 分类商品数据
				categoryProducts: {
					'今日主推': [],
					'健康新品': [],
					'营养保健': []
				},
				// 当前选中分类的商品列表
				currentCategoryProducts: [],

				// 瀑布流数据
				waterfallList: [],

				// 弹窗相关数据
				specVisible: false,
				productValueSelect: {
					image: '',
					price: 0
				},
				product: {
					image: ''
				},
				specNum: 1,
				isSubmitting: false,
				attrs: [],
				isBuyMode: false, // 标记是否为购买模式
				productSpecs: [], // 商品规格列表
				selectedSpec: null // 选中的规格
			}
		},
		onLoad() {
			this.getProductWaterfall(); // 商品搜索瀑布流
			this.getRecommendProduct(); // 获取首页推荐商品
			this.getCartCount(); // 获取商品购物车数量
			this.getCarts(); //获取购物车列表
			this.getMyProductCate(); // 获取我的频道
			this.getSalesRanking(); // 获取实时销量榜
			// 页面加载时初始化
		},


		onShow() {
			// this.getMenuData();
		},

		methods: {
			toDetail(product){
				console.log("商品详情", product);
			uni.navigateTo({
				url: '/pages_shopping/shopping/productDetails?productId=' + product.productId
			});
		},
			// 获取我的频道
			getMyProductCate() {
				getMyProductCate().then(
					res => {
						if (res.code == 200) {
							console.log("获取我的频道", res.data);
							if (res.data && res.data.length > 0) {
								const channels = res.data.map(item => ({
									id: item.cateId,
									name: item.cateName,
									pic: item.pic,
									isSelect: item.isSelect
								}));
								// 更新频道数据
								this.myChannels = channels.filter(item => item.isSelect === 1);
								this.allChannels = channels;
								// 更新菜单数据
								const menuItems = this.myChannels.map(channel => ({
									icon: channel.pic || '',
									menuName: channel.name || ''
								}));
								this.menusData = this.splitArrayIntoSubarrays(menuItems, 5);
								console.log('更新菜单数据:', this.menusData);
								// 更新 tabsData 数组，用于 scs-scroll-navbar 组件显示频道名称
								this.tabsData = this.myChannels;
							}
						}
					},
					rej => {
						console.error("获取我的频道失败", rej);
					}
				);
			},
			// 获取实时销量榜
			getSalesRanking() {
				productSalesRanking({
					cateId: 320
				}).then(
					res => {
						if (res.code == 200) {
							if (res.data && res.data.list) {
								this.salesRankList = res.data.list.slice(0, 3); // 只取前3个
								console.log("实时销量榜数据", this.salesRankList);

								this. totalSales =res.data.total;
							}
						}
					},
					rej => {
						console.error("获取实时销量榜失败", rej);
					}
				);
			},
			// 格式化销量数据
			formatSales(sales) {
				if (sales >= 10000) {
					return (sales / 10000).toFixed(1) + '万';
				}
				return sales;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			getProductValues() {
				getProductValues(data).then(
					res => {
						if (res.code == 200) {
							console.log("获取我的频道", res);
						} else {

						}

					},
					rej => {

					}
				);
			},
			// 分类tab切换
			tabChange(index) {
				this.tabCurrentIndex = index;
				// 这里可以添加分类切换后的数据加载逻辑
			},

			// 商品tab切换
			tabProductChange(index) {
				this.tabsProductIndex = index;
				// 更新当前分类商品
				const currentCategory = this.tabsProduct[index].name;
				this.currentCategoryProducts = this.categoryProducts[currentCategory] || [];
				console.log("切换到分类", currentCategory, "商品数量", this.currentCategoryProducts.length);
			},

			// 搜索
			onSearch(keyword) {
				console.log('搜索关键词:', keyword);
				// 跳转到商品搜索页面
				uni.navigateTo({
					url: `/pages/home/productSearch?keyword=${encodeURIComponent(keyword)}`
				});
			},

			// 点击搜索框
			onSearchClick() {
				console.log('点击搜索框');
				// 跳转到商品搜索页面
				uni.navigateTo({
					url: `/pages/home/productSearch`
				});
			},

			// 切换频道显示/隐藏
			toggleChannel() {
				this.showChannel = !this.showChannel;
			},

			// 商品搜索瀑布流
			getProductWaterfall(isLoadMore = false) {
				console.log("开始获取瀑布流商品数据");
				if (this.loading && !isLoadMore) return;

				this.loading = true;
				let data = {
					page: isLoadMore ? this.page + 1 : 1,
					pageSize: this.pageSize
				};

				console.log("调用productWaterfall API，参数：", data);
				productWaterfall(data).then(
					res => {
						console.log("productWaterfall API返回结果：", res);

						// 检查返回数据结构
						if (!res) {
							console.error("API返回结果为空");
							uni.showToast({
								title: '服务器返回数据异常',
								icon: 'none'
							});
							this.loading = false;
							this.refreshing = false;
							return;
						}

						if (res.code == 200) {
							// 确保 res.data 是数组
							const productData = Array.isArray(res.data) ? res.data : [];

							if (isLoadMore) {
								// 加载更多
								if (productData.length > 0) {
									this.productList = [...this.productList, ...productData];
									console.log("加载更多商品后，productList长度：", this.productList.length);
									this.page += 1;
									this.hasMore = productData.length === this.pageSize;
								} else {
									this.hasMore = false;
								}
							} else {
								// 首次加载或刷新
								this.productList = productData;
								console.log("加载瀑布流商品列表：", productData);

								this.page = 1;
								this.hasMore = productData.length === this.pageSize;
							}
						} else {
							console.log("获取商品列表失败：", res.msg);
							uni.showToast({
								title: res.msg || '获取商品列表失败',
								icon: 'none'
							});
						}
						this.loading = false;
						this.refreshing = false;
					},
					rej => {
						console.error("productWaterfall API调用失败：", rej);
						uni.showToast({
							title: '网络错误，请检查网络连接后重试',
							icon: 'none'
						});
						this.loading = false;
						this.refreshing = false;
					}
				);
			},

			// 获取首页推荐商品
			getRecommendProduct() {
				recommendProduct().then(
					res => {
						if (res.code == 200) {
							this.recommendList = res.data;
							console.log("获取首页推荐商品", res.data);

							// 提取recommendType为recommend的栏目作为tabsProduct数据
							const recommendTabs = res.data.filter(item => item.recommendType === 'recommend');
							this.tabsProduct = recommendTabs.map(item => ({
								name: item.recommendName
							}));
							console.log("更新后的tabsProduct", this.tabsProduct);

							// 确保tabsProductIndex不超出范围
							if (this.tabsProductIndex >= this.tabsProduct.length) {
								this.tabsProductIndex = 0;
							}

							// 解析分类商品数据
							this.categoryProducts = {};
							// 初始化分类商品对象
							this.tabsProduct.forEach(tab => {
								this.categoryProducts[tab.name] = [];
							});

							// 遍历推荐商品数据
							res.data.forEach(item => {
								if (this.categoryProducts.hasOwnProperty(item.recommendName) && item
									.productList) {
									this.categoryProducts[item.recommendName] = item.productList;
								}
							});

							// 初始化当前分类商品
							if (this.tabsProduct.length > 0) {
								const currentCategory = this.tabsProduct[this.tabsProductIndex].name;
								this.currentCategoryProducts = this.categoryProducts[currentCategory] || [];
							}
							console.log("分类商品数据", this.categoryProducts);
							console.log("当前分类商品", this.currentCategoryProducts);

							// 使用推荐商品数据作为销量榜数据（实际项目中应该使用专门的销量榜接口）
							// 按照销量排序
							const allProducts = [];
							Object.values(this.categoryProducts).forEach(products => {
								allProducts.push(...products);
							});
						} else {
							uni.showToast({
								title: res.msg || '获取推荐商品失败',
								icon: 'none'
							});
						}
					},
					rej => {
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
					}
				);
			},

			// 获取商品购物车数量
			getCartCount() {
				getCartCount().then(
					res => {
						if (res.code == 200) {
							console.log("获取商品购物车数量", res.data);
							// 保存购物车数量到全局或本地状态
							this.cartCount = res.data;
						}
					},
					rej => {
						console.error("获取商品购物车数量失败", rej);
					}
				);
			},

			// 获取购物车列表
			getCarts() {
				getCarts().then(
					res => {
						if (res.code == 200) {
							console.log("获取购物车列表", res.data);
							// 保存购物车列表到全局或本地状态
							this.cartList = res.data;
						}
					},
					rej => {
						console.error("获取购物车列表失败", rej);
					}
				);
			},

			// 获取商品规格列表
			getProductValues(productId) {
				// 防护检查：如果 productId 是 undefined 或 null，直接返回
				if (!productId) {
					console.error('获取商品规格列表失败：商品ID为空');
					return;
				}
				getProductValues(productId).then(
					res => {
						if (res.code == 200) {
							console.log("获取商品规格列表", res.data);
							// 保存商品规格列表
							this.productSpecs = res.data || [];
							// 默认选择第一个规格
							if (res.data && res.data.length > 0) {
								this.selectedSpec = res.data[0];
								this.productValueSelect = {
									image: res.data[0].image || this.product.image || this.product.firstImage ||
										'',
									price: res.data[0].price || 0
								};
							}
						}
					},
					rej => {
						console.error("获取商品规格列表失败", rej);
					}
				);
			},
			// // 获取分类数据
			// async getMenuData() {
			// 	try {
			// 		const {
			// 			code,
			// 			data,
			// 			msg
			// 		} = await getMenu();
			// 		if (code == 200) {
			// 			// 确保数据格式正确，适配HomeMenu组件需要的icon和menuName字段
			// 			const formattedData = data.map(item => ({
			// 				// 适配接口返回的字段名，如果接口返回的字段名不同，可以在这里进行映射
			// 				icon: item.icon || '',
			// 				menuName: item.name || item.menuName || ''
			// 			}));

			// 			// 将数据每5个一组分割
			// 			if (this.$scsUtils && this.$scsUtils.splitArrayIntoSubarrays) {
			// 				this.menusData = this.$scsUtils.splitArrayIntoSubarrays(formattedData, 5) || [];
			// 			} else {
			// 				// 如果$scsUtils不存在，使用自定义的分割方法
			// 				this.menusData = this.splitArrayIntoSubarrays(formattedData, 5);
			// 			}
			// 		} else {
			// 			uni.showToast({
			// 				title: msg,
			// 				icon: 'none'
			// 			});
			// 		}
			// 	} catch (error) {
			// 		console.error('获取菜单数据失败:', error);
			// 		uni.showToast({
			// 			title: '网络错误，请重试',
			// 			icon: 'none'
			// 		});
			// 	}
			// },

			// 自定义数组分割方法
			splitArrayIntoSubarrays(arr, size) {
				if (!Array.isArray(arr)) return [];
				const result = [];
				for (let i = 0; i < arr.length; i += size) {
					result.push(arr.slice(i, i + size));
				}
				return result;
			},

			// 下拉刷新
			onfresher() {
				if (this.refreshing || this.loading) return;

				this.refreshing = true;
				const self = this;
				self.$refs.fresher.isTrigger = true;

				// 刷新数据
				this.getProductWaterfall(false);
			},

			// 上拉加载更多
			loadMore() {
				if (this.loading || this.refreshing || !this.hasMore) return;

				// 加载更多数据
				this.getProductWaterfall(true);
				console.log("加载更多商品111", this.productList);
			},

			// 添加到购物车
			addToCart(product) {
				console.log('添加到购物车:', product);
				// 防护检查：如果 product 是 undefined 或 null，直接返回
				if (!product) {
					console.error('添加到购物车失败：商品信息为空');
					return;
				}
				// 弹出规格选择弹窗
				this.product = product;
				this.productValueSelect = {
					image: product.image || product.firstImage || '',
					price: product.price || 0
				};
				this.specVisible = true;
				this.isBuyMode = false; // 标记为添加购物车模式
				// 获取商品规格列表
				this.getProductValues(product.id || product.productId);
			},

			// 去购买
			goToBuy(product) {
				console.log('去购买:', product);
				// 防护检查：如果 product 是 undefined 或 null，直接返回
				if (!product) {
					console.error('去购买失败：商品信息为空');
					return;
				}
				// 弹出规格选择弹窗
				this.product = product;
				this.productValueSelect = {
					image: product.image || product.firstImage || '',
					price: product.price || 0
				};
				this.specVisible = true;
				this.isBuyMode = true; // 标记为购买模式
				// 获取商品规格列表
				this.getProductValues(product.id || product.productId);
			},

			// 频道相关方法
			onChannelsChange(channels) {
				console.log('频道变化:', channels);
				// 处理频道变化
				if (channels && channels.myChannels) {
					// 更新 myChannels 数据
					this.myChannels = channels.myChannels;
					// 更新 allChannels 数据
					if (channels.allChannels) {
						this.allChannels = channels.allChannels;
					}
					// 将选中的频道数据转换为 home-menu 组件需要的格式
					const menuItems = channels.myChannels.map(channel => ({
						icon: channel.pic || '',
						menuName: channel.name || ''
					}));
					// 将数据每5个一组分割，符合 home-menu 组件的要求
					this.menusData = this.splitArrayIntoSubarrays(menuItems, 5);
					console.log('更新菜单数据:', this.menusData);
					// 更新 tabsData 数组，用于 scs-scroll-navbar 组件显示频道名称
					this.tabsData = this.myChannels;
					console.log('更新 tabsData 数据:', this.tabsData);
				}
			},

			onOrderChange(orderInfo) {
				console.log('顺序变化:', orderInfo);
				// 处理顺序变化
			},

			onChannelTap(channel) {
				console.log('点击频道:', channel);
				this.activeChannelId = channel.id;
				// 根据频道切换内容
			},

			// 分割价格
			splitPrice(price) {
				const priceStr = parseFloat(price).toFixed(2).toString();
				return {
					integer: priceStr.split('.')[0],
					decimal: priceStr.split('.')[1]
				};
			},

			// 显示图片
			showImg(image) {
				console.log('显示图片:', image);
			},
			// 提交订单
			submit() {
				console.log('提交订单');
				this.isSubmitting = true;

				if (this.isBuyMode) {
					// 购买模式：跳转到订单确认页面
					console.log('立即购买:', this.product, this.specNum);
					this.isSubmitting = false;
					this.specVisible = false;
					// const carts
					// 跳转到订单确认页面，传递商品信息和数量
					console.log("要传的参数", this.product.productId, this.specNum, this.selectedSpec ? this.selectedSpec.id :
						'')
					uni.navigateTo({
						url: `/pages_shopping/shopping/confirmCreateOrder?productId=${this.product.productId}&buyNum=${this.specNum}&attrValueId=${this.selectedSpec ? this.selectedSpec.id : ''}&indexBuy=true`
					});
				} else {
					// 添加购物车模式：调用添加购物车接口
					addCart({
						productId: this.product.id || this.product.productId,
						cartNum: this.specNum,
						attrValueId: this.selectedSpec ? this.selectedSpec.id : '' // 使用选中的规格ID
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '添加购物车成功',
								icon: 'success'
							});
							// 重新获取购物车数量
							this.getCartCount();
							this.specVisible = false;
						} else {
							uni.showToast({
								title: res.msg || '添加购物车失败',
								icon: 'none'
							});
						}
						this.isSubmitting = false;
					}).catch(error => {
						console.error('添加购物车失败:', error);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
						this.isSubmitting = false;
					});
				}
			},

			// 减少数量
			lessNum() {
				if (this.specNum > 1) {
					this.specNum--;
				}
			},

			// 增加数量
			addNum() {
				this.specNum++;
			},

			// 选择规格
			choseSpec(index, subindex) {
				console.log('选择规格:', index, subindex);
			},

			// 选择商品规格
			selectSpec(spec) {
				console.log('选择商品规格:', spec);
				this.selectedSpec = spec;
				this.productValueSelect = {
					image: spec.image || this.product.image || this.product.firstImage || '',
					price: spec.price || 0,
					sales: spec.sales || 0
				};
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* 实时销量榜样式 */
	.sales-ranking {
		width: 342rpx;
		height: 500rpx;
		margin-bottom: 11rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 14rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.bg {
			position: absolute;
			width: 342rpx;
			height: 500rpx;
		}

		.sales-ranking-content {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 10;
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;

			.sales-ranking-title {
				display: flex;
				align-items: center;
				margin-top: 18rpx;

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-top: 4rpx;
					margin-left: 4rpx;
				}
			}

			.sales-ranking-total {
				margin-top: 6rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #D46C0D;
			}

			.sales-ranking-list {
				padding: 16rpx;
				border-radius: 16rpx;
				background-color: white;
				margin-top: 14rpx;
				display: flex;
				flex-direction: column;
				// gap: 8rpx;
				width: 100%;
				max-width: 334rpx;

				.sales-ranking-item {
					display: flex;
					gap: 12rpx;
					margin-bottom: 20rpx;
					align-items: center;

					&:last-child {
						margin-bottom: 0rpx;

					}

					.sales-ranking-item-img {
						width: 104rpx;
						height: 104rpx;
						border-radius: 8rpx;
						overflow: hidden;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.sales-ranking-item-rank {
							width: 24rpx;
							height: 24rpx;
							border-radius: 8rpx;
							position: absolute;
							top: 0;
							left: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 20rpx;
						}
					}

					.sales-ranking-item-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.sales-ranking-item-name {
							font-size: 20rpx;
							color: #333333;
							font-weight: 400;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.sales-ranking-item-price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 8rpx;

							view {
								color: #FA341E;

								text:first-child {
									font-size: 20rpx;
									font-weight: 600;
								}

								text:last-child {
									font-size: 36rpx;
									font-weight: 600;
								}
							}

							.sales-ranking-item-cart {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}

	/* 瀑布流商品样式 */
	.goods-list {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 18rpx;

		.item {
			width: calc(50% - 9rpx);
			margin-bottom: 18rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.img-box {
				width: 100%;
				height: 342rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.info-box {
				box-sizing: border-box;
				padding: 20rpx 20rpx 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					margin-bottom: 4rpx;
				}

				.intro {
					font-weight: 400;
					font-size: 22rpx;
					color: #D46C0D;
					margin-bottom: 8rpx;
				}

				.sale {
					font-size: 21rpx;
					color: #999999;
				}

				.lable-group {
					display: flex;
					margin-top: 8rpx;

					.lable-item {
						margin-right: 8rpx;
						height: 30rpx;
						padding: 0 8rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 1rpx solid #FFA599;
						font-size: 21rpx;
						color: #FF4B33;
					}
				}

				.prce-num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 8upx;

					.price {
						font-weight: 600;
						font-size: 26rpx;
						color: #FA341E;
						font-size: 26rpx;

						.unit {
							font-size: 20upx;
						}

						.bold {
							font-size: 36upx;
						}
					}
				}

				.card {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #FFF4E8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					width: 100%;
					height: 40rpx;
					padding: 8rpx 10rpx;
					box-sizing: border-box;

					.card-item {
						display: flex;
						align-items: center;

						.img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}

						.ranking {
							font-size: 20rpx;
							color: #4D4D4D;
						}

						.bold {
							font-family: Roboto Flex, Roboto Flex;
							font-weight: 600;
							font-size: 24rpx;
							color: #F4A007;
							margin-right: 6rpx;
							transform: skewX(-8deg);
							/* 负值向左倾斜，正值向右倾斜 */
							display: inline-block;
							margin-left: 4rpx;
							/* transform需要inline-block或block */
						}
					}

					.go {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}
		}
	}

	/* 排名标记颜色 */
	.rank-1 {
		background: linear-gradient(45deg, #FB7E4C 0%, #ED4B17 100%);
	}

	.rank-2 {
		background: linear-gradient(45deg, #FBCF3F 0%, #F9B71B 100%);
	}

	.rank-3 {
		background: linear-gradient(45deg, #D5AB78 0%, #C39760 100%);
	}

	.home-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #F5F7FA;
	}

	.home-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 266rpx;
	}

	.nav-header {
		display: flex;
		align-items: center;
		height: 88rpx;

		.nav-title {
			flex: 1;

			.main-title {
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
			}

			.sub-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.nav-cart {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			height: 64rpx;
			background-color: #FFFFFF;
			border-radius: 50%;

			.cart-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.cart-badge {
				position: absolute;
				left: -8rpx;
				top: -8rpx;
				min-width: 32rpx;
				min-height: 32rpx;
				flex-shrink: 0;
				text-align: center;
				padding: 6rpx;
				font-size: 16rpx;
				box-sizing: border-box;
				color: #fff;
				background-color: #F56C6C;
				border-radius: 50%;
			}
		}
	}

	.home-content {
		z-index: 10;
		flex: 1;
		overflow: auto;
	}

	.nav-bar {
		padding: 0 12rpx;
		margin-top: 11rpx;
		border-radius: 8rpx;

		.nav-container {
			display: flex;
			align-items: center;
			position: relative;

			.gradient-bg {
				position: absolute;
				bottom: 2.5rpx;
				right: 42rpx;
				z-index: 10;
				width: 32rpx;
				height: 32rpx;
			}

			.nav-actions {
				display: flex;
				align-items: center;
				justify-content: center;

				.action-icon {
					width: 32rpx;
					height: 32rpx;

					&.product-icon {
						margin-left: 5rpx;
						margin-right: 12rpx;
					}

					&.filter-icon {
						margin-right: 7rpx;
					}
				}
			}
		}
	}

	.product-tabs {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 8rpx 8rpx 0 0;
		padding: 0 28rpx;
	}

	.sales-waterfall {
		width: 100%;
		margin-top: 20rpx;
		padding: 0 12rpx;
	}

	.product-spec {
		padding: 40rpx 30rpx;

		.pro-info {
			display: flex;
			align-items: center;

			.img-box {
				width: 200rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-name {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}

			.info-text {
				height: 200rpx;
				display: flex;
				flex-direction: column;

				.price {
					margin-top: 16rpx;
					font-weight: 600;
					font-size: 26rpx;
					color: #FA341E;

					.title {
						font-weight: 500;
						font-size: 24rpx;
						color: #FF5030;
						margin-right: 8rpx;
					}

					.bold {
						font-size: 48upx;
					}
				}

				.desc-box {
					margin-top: 16rpx;
					display: flex;
					flex-direction: column;
					padding-bottom: 9rpx;

					.text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 27rpx;
						line-height: 1;

						&:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}

		.spec-box {
			padding-top: 50rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 1;
			}

			.spec-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.item {
					box-sizing: border-box;
					padding: 12rpx 24rpx;
					font-size: 28rpx;
					color: #333333;
					background: #F5F7FA;
					border-radius: 28rpx;
					margin-right: 24rpx;
					margin-bottom: 30rpx;

					&.active {
						font-size: 24rpx;
						color: #02B176;
						background: #EBFAF6;
						border: 2rpx solid #02B176;
					}
				}
			}
		}

		.price-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 14rpx;

			.label {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.num-box {
				display: flex;
				align-items: center;

				.img-box {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}

				input {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					background: #F5F7FA;
					text-align: center;
				}
			}
		}

		.sub-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			border-radius: 44rpx;
			margin-top: 30rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
		}
	}

	::v-deep .nav-bar {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);

		.scs-scroll-navbar {
			width: calc(100vw - 140rpx) !important;
			display: flex;
			justify-content: space-between;

			.nav-underline {
				background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
				bottom: 28rpx;
			}
		}
	}

	::v-deep .product-tabs {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);

		.scs-scroll-navbar {
			.nav-item {
				margin-right: 78rpx;
			}
		}
	}
</style>