wxapp_shuibei/pages/index/index.vue

<template>
	<view class="page-container">
		<up-navbar class="inde-nav-bar" :bgColor="navBgColor">
			<template #left>
				<view class="nav-slot" v-if="!merchantNameShow()" @click="toBrowsingHistory()">
					<image class="dianpu" src="@/static/images/dianpu.png" mode="widthFix"></image>
					<view class="storeName line1">{{ merchantInfo.merchantName }}</view>
					<image class="zhankai" src="@/static/images/zhankai.png" mode="widthFix"></image>
				</view>
			</template>
			<template #center>
				<view class="page-title">首页</view>
			</template>
			<template #right></template>
		</up-navbar>

		<!-- 自定义 tabBar -->
		<customTabBar :current="0" :showBackTop="showBackTop" @backTop="scrollToTop" />

		<!-- <view class="page-index" :class="{ bgf: navIndex > 0 }"> -->
		<view class="page-index">
			<view class="top-box jianbianBG">
				<view class="header">
					<view class="serch-wrapper">
						<!--            <view class="logo" @click="goBack">-->
						<!--              <image src="@/static/logo1.png" mode=""></image>-->
						<!--            </view>-->
						<navigator url="/pages/goods/goods_search/index" class="input" hover-class="none">
							<image class="searchImg" src="@/static/images/search.png"></image> 搜索商品
						</navigator>
					</view>
					<!-- 轮播图 -->

					<up-swiper class="swiper-box" :list="list1" :height="160" imgMode="scaleFill" indicator :radius="10"
						indicatorMode="line" :circular="true" keyName="url" @click="clickSwiper">
						<!-- <template v-slot:default="{item}">
		          <image class="swiper-banner" :src="item.url" mode="heightFix"></image>
		        </template> -->
					</up-swiper>
				</view>

			</view>
			<!-- 实时金价 -->
			<view class="top-bg-box">
				<view class="card">
					<view class="cardbgLinear">
						<view class="title" @click="btnClick">
							<view class="title-left">
								<image class="ssjj" :src="HTTP_REQUEST_URL_IMG+'shishijinjia.png'" mode="widthFix">
								</image>
								<text class="updateTime">{{ timeFormat(timestamp, "yyyy-mm-dd hh:MM:ss") }}更新</text>
							</view>
							<view class="more">
								<text class="txt">更多金价</text>
								<image class="right" src="@/static/images/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="nav-list">
							<view class="item">
								<view class="price">{{ viprealGoldprice }}<text class="unit">/克</text></view>
								<view class="txt">黄金</view>
							</view>
							<view class="item">
								<view class="price">{{ viprealPtprice }}<text class="unit">/克</text></view>
								<view class="txt">铂金</view>
							</view>
							<view class="item">
								<view class="price">{{ viprealAgprice }}<text class="unit">/克</text></view>
								<view class="txt">白银</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--      分类卡片  -->
			<view class="classify-section">
				<up-scroll-list class="classify-scroll" :indicator="classifyList.length > 4" :scrollX="true"
					indicatorActiveColor="#F8C008">
					<view class="classify-container">
						<view class="classify-item" v-for="(item, index) in classifyList" :key="'item-' + index"
							@click="toGoodsCate(item)">
							<image class="classify-img" :src="item.extra" mode="widthFix"></image>
							<view class="classify-txt">{{ item.name }}</view>
						</view>
					</view>
				</up-scroll-list>
			</view>
			<view class="top-bg-box2">
				<view class="title">
					精选商品
				</view>
			</view>
			<!-- 首发新品 -->
			<view class="index-product-wrapper">
				<view class="list-box animated" :class="goodsList.length > 0 ? '' : ''">
					<view class="item" v-for="(item, index) in calculatedProducts" :key="index" @click="goDetail(item)">
						<view class="pictrue">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="text-info">
							<view class="title">
								<view class="text line1">{{ item.storeName }}</view>
								<view class="weight">{{ item.weight }}g</view>
							</view>
							<view class="bottom-row">
								<!-- <text class="price">工费: {{ item.price }}/克</text> -->
								<text class="price">¥ {{ item.totalPrice }}</text>
								<text class="sales" style="color:#666;">
									销量：{{ Number(item.sales || 0) + Number(item.ficti || 0) }}件
								</text>
								<!-- <view class="txt">券</view> -->
							</view>
							<view class="bottom-row">
								<!-- <text class="price">工费: {{ item.price }}/克</text> -->
								<text class="sales">工费:￥{{ item.totalLaborCost }}</text>
								<text class="sales">
									附加费:￥{{ item.additionalAmount }}
								</text>
								<!-- <view class="txt">券</view> -->
							</view>
							<template v-if="item?.merchant?.id && merchantNameShow()">
								<view class="merchantInfo" @click.stop="toMerchant(item.merchant.id)">
									<image class="merchantLogo" :src="item.merchant.merchantLogo" mode="scaleToFill">
									</image>
									<text class="merchantName">{{item.merchant.merchantName}}</text>
									<uni-icons style="margin-left: 10rpx;" type="right" size="16"
										color="#999999"></uni-icons>
								</view>
							</template>
						</view>
					</view>
				</view>
				<view class="loadingicon acea-row row-center-wrapper" v-if="goodScroll">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
				<view class="no-data" v-if="isNoDataState">
					<image
						src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/zhanwu_20250827104005_1720_6.png" />
				</view>
				<view class="mores-txt flex" v-if="!goodScroll && !isNoDataState">
					<text>我是有底线的</text>
				</view>
			</view>

		</view>
		<!-- 上半部分 -->

	</view>
</template>

<script setup>
	// 获取实时金价
	import useRealGoldPrice from "@/hooks/useRealGoldPrice";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPageScroll,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		nextTick
	} from "vue";
	import {
		getIndexData,
		getCoupons,
		setCouponReceive,
		getMerchantBannerList
	} from "@/api/api.js";
	import {
		getSbmerchantInfo
	} from "@/api/merchant.js";
	import {
		getProductListAPI
	} from "@/api/factory.js";
	import {
		useStoreRights
	} from "@/stores/rights";
	import {
		useRealtimeTimestamp
	} from "@/utils/useRealtimeTimestamp.js";
	import {
		getUserLevelInfo
	} from "@/api/user";
	import {
		useAppStore
	} from "@/stores/app";
	import {
		useTabbarStore
	} from "@/stores/tabbar";
	import {
		goShopDetail
	} from "@/libs/order.js";
	import {
		HTTP_REQUEST_URL_IMG
	} from "@/config/app";
	import customTabBar from "@/components/customTabBar/index.vue";

	// 全局状态和时间
	const appStore = useAppStore();
	const tabbarStore = useTabbarStore();
	const rightsStore = useStoreRights();
	import {
		getGroomList as getGroomListApi,
		getProductByCategoryId,
		getCategoryList
	} from "@/api/store.js";
	import {
		timeFormat
	} from "@/uni_modules/uview-plus";
	import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		getSceneInfo
	} from '@/utils/util.js';
	import {
		toLogin
	} from "@/libs/login.js";
	// 获取实时金价
	// 实时价格处理
	const {
		realGoldprice, // 黄金实时销售价（基础）
		realPtprice, // 铂金实时销售价（基础）
		realAgprice, // 白银实时销售价（基础）
	} = useRealGoldPrice({});
	const {
		timestamp
	} = useRealtimeTimestamp();
	const uid = appStore.uidComputed;
	console.log(uid)

	// 轮播图数据
	const list1 = ref([]);
	const site_name = ref("");
	const loading = ref(false);
	const goodScroll = ref(true);

	const classifyList = ref([])
	// 用户权益数据
	const userBenefits = ref({});
	const adjustPtPrice = ref({});
	const adjustAgPrice = ref({});
	const adjustGoldpriceNew = ref({});
	const adjustKgoldPrice = ref({});
	const merchantInfo = ref({});
	const merchantId = ref('');

	const goodsList = ref([]);
	const goodType = ref(1);
	// Pagination
	const params = ref({
		page: 1,
		limit: 10,
	});
	const isFirstLoad = ref(true);

	const navBgColor = ref('rgba(255,255,255,0)');

	// 是否显示回到顶部
	const showBackTop = ref(false);
	// 滚动阈值
	const SCROLL_THRESHOLD = 300;

	const calculatedProducts = computed(() => {
		// 计算逻辑与原代码一致，但基于响应式数据 products
		return goodsList.value.map((product) => {
			// 1. 将price字符串转为数字
			const price = Number(product.price);
			// 2. 计算乘积
			const total = (price + product.sales) * realGoldprice.value;
			// 3. 向上取整到两位小数（先放大100倍取整，再缩小100倍）
			const roundedTotal = Math.ceil(total * 100) / 100;
			// 4. 格式化保留两位小数
			const formattedTotal = roundedTotal.toFixed(2);

			const totalLaborCost = Number(product.totalLaborCost);
			const additionalAmount = Number(product.additionalAmount);
			const totalPrice = (totalLaborCost + additionalAmount).toFixed(2);
			return {
				...product,
				calculatedTotal: formattedTotal, // 新增计算结果字段
				totalPrice
			};
		});
	});
	onLoad(async (options) => {
		const params = await getSceneInfo(options, 'index');
		// 2. 设置商户ID
		const isLogin = appStore.isLogin;
		if (appStore.merchantId && appStore.merchantId !== '') {
			merchantId.value = appStore.merchantId;
			if (!isLogin) {
				toLogin();
				return; // 登录后页面会刷新，避免继续执行
			}
		} else if (appStore?.userInfo?.lastVisitedMerchantId) {
			merchantId.value = appStore?.userInfo?.lastVisitedMerchantId;
		} else if (appStore?.userInfo?.merchant?.id) {
			merchantId.value = appStore.userInfo.merchant.id;
		} else {
			merchantId.value = '';
		}

		// if(isFirstLoad.value){
		await initPageData();
		// isFirstLoad.value = false;
		// }

	});
	onShow(async () => {
		// 隐藏原生 tabBar，使用自定义 tabBar
		uni.hideTabBar();
		const isLogin = appStore.isLogin;
		if (isLogin) {
			rightsStore.getUserBenefits(appStore.userInfo?.userId);
			getUserBenefits();
		}
		console.log("appStore.merchantId=>>", appStore.merchantId, "appStore.lastVisitedMerchantId=>>",
			appStore?.userInfo?.lastVisitedMerchantId,appStore.indexRefreshFlag)

		if (appStore.merchantId && appStore.merchantId !== '') {
			merchantId.value = appStore.merchantId;
			if (!isLogin) {
				toLogin();
				return; // 登录后页面会刷新，避免继续执行
			}
		} else if (appStore?.userInfo?.lastVisitedMerchantId) {
			console.log(merchantId.value,appStore?.userInfo?.lastVisitedMerchantId)
			if(appStore.indexRefreshFlag || merchantId.value != appStore?.userInfo?.lastVisitedMerchantId){
				merchantId.value = appStore?.userInfo?.lastVisitedMerchantId;
				appStore.setIndexRefersh(false)
				initPageData();
			}
			// if (!merchantInfo.value.merchantName) {
			// 	initPageData();
			// }
		} else if (appStore?.userInfo?.merchant?.id) {
			merchantId.value = appStore.userInfo.merchant.id;
			if(appStore.indexRefreshFlag){
				appStore.setIndexRefersh(false)
				initPageData();
			}
			// if (!merchantInfo.value.merchantName) {
			// 	initPageData();
			// }
		} else {
			merchantId.value = '';
		}
		// if(!isFirstLoad.value){
		//   await initPageData();
		// }

		uni.setNavigationBarTitle({
			title: site_name.value
		});


	});
	const onRefresh = () => {
		refreshing.value = true;

		Promise.allSettled([
			initPageData()
		]).finally(() => {
			// 添加一个短暂延迟，确保 DOM 更新完成
			setTimeout(() => {
				refreshing.value = false;
				uni.hideLoading();
			}, 50);
		});
	};
	const initPageData = async () => {
		console.log("initPageData!!!!!!!!11")
		try {
			loading.value = true;
			goodScroll.value = true;
			goodsList.value = [];
			goodType.value = 1;
			params.value = {
				page: 1,
				limit: 10,
			};
			// 并行执行不依赖的数据获取
			const promises = [];
			if (merchantId.value && merchantId.value !== '') {
				promises.push(getSbmerchantInfoFn());
				promises.push(getMerchantBannerListFn());
			} else {
				promises.push(getIndexConfig());
			}
			promises.push(getGroomList());
			promises.push(getAllCategory());

			// 等待所有数据获取完成
			await Promise.all(promises);

		} catch (error) {
			console.error('初始化页面数据失败:', error);
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	const getMerchantBannerListFn = async () => {
		try {
			let obj = {
				merchantId: merchantId.value
			}
			const res = await getMerchantBannerList(obj);
			uni.setNavigationBarTitle({
				title: "首页"
			});
			site_name.value = "首页";
			list1.value = res.data.map((v) => {
				return {
					url: v.bannerUrl,
					title: "",
					type: "image",
					navUrl: v.bannerValue,
				};
			});
		} catch (err) {
			console.error(err);
		}
	}
	const getSbmerchantInfoFn = async () => {
		try {
			let obj = {
				merchantId: merchantId.value
			}
			const res = await getSbmerchantInfo(obj);
			merchantInfo.value = res.data;
		} catch (err) {
			console.error(err);
		}
	}
	const goBack = () => {
		uni.switchTab({
			url: "/pages/index/index"
		});
	};
	async function clickSwiper(index) {
		const imgItem = list1.value[index];
		try {
			if (imgItem.navUrl !== "#") {
				await uni.navigateTo({
					url: imgItem.navUrl
				});
			} else {
				uni.previewImage({
					current: index,
					urls: list1.value.map((item) => item.url) || [],
				});
			}
		} catch (err) {
			uni.previewImage({
				current: index,
				urls: list1.value.map((item) => item.url) || [],
			});
			return;
		}
	}
	const getIndexConfig = async () => {
		try {
			loading.value = true;
			const res = await getIndexData();
			uni.setNavigationBarTitle({
				title: "首页"
			});

			site_name.value = "首页";
			list1.value = res.data.banner.map((v) => {
				return {
					url: v.pic,
					title: "",
					type: "image",
					navUrl: v.url,
				};
			});


		} catch (err) {
			console.error(err);
		} finally {
			loading.value = false;
		}
	};
	const getUserBenefits = async () => {
		try {
			const res = await getUserLevelInfo(appStore?.userInfo?.userId || 0);

			userBenefits.value = res.data || {
				sold: 0,
				buy: 0
			}; // 默认权益为0，避免NaN

			if (
				userBenefits?.value?.nobleMeta &&
				userBenefits.value.nobleMeta.length > 0
			) {
				const nobleMeta = userBenefits.value.nobleMeta;
				nobleMeta.forEach((item) => {
					switch (item.name) {
						case "黄金":
							adjustGoldpriceNew.value = item;
							break;
						case "K金":
							adjustKgoldPrice.value = item;
							break;
						case "铂金":
							adjustPtPrice.value = item;
							break;
						case "白银":
							adjustAgPrice.value = item;
							break;

						default:
							break;
					}
				});
			}
		} catch (error) {
			console.error("获取用户权益失败:", error);
			userBenefits.value = {
				sold: 0,
				buy: 0
			}; // 出错时默认权益为0
		}
	};
	// 黄金调整价
	const viprealGoldprice = computed(() => {
		const res =
			Number(realGoldprice.value) -
			Number(userBenefits.value.buy) +
			Number(adjustGoldpriceNew.value.sellPriceAdjust) || 0;
		if (appStore.uid) {
			return Number(res).toFixed(2);
		} else {
			return Number(realGoldprice.value).toFixed(2);
		}

	});

	const viprealPtprice = computed(() => {
		const res =
			Number(realPtprice.value) -
			Number(userBenefits.value.buy) +
			Number(adjustPtPrice.value.sellPriceAdjust) || 0;
		if (appStore.uid) {
			return Number(res).toFixed(2);
		} else {
			return Number(realPtprice.value).toFixed(2);
		}
	});
	const viprealAgprice = computed(() => {
		const res =
			Number(realAgprice.value) -
			Number(userBenefits.value.buy) +
			Number(adjustAgPrice.value.sellPriceAdjust) || 0;
		if (appStore.uid) {
			return Number(res).toFixed(2);
		} else {
			return Number(realAgprice.value).toFixed(2);
		}
	});
	const btnClick = () => {
		uni.navigateTo({
			url: "/pages/mall/dapan",
		});
	};

	const isNoDataState = computed(() => {
		return goodsList.value.length === 0 && !loading.value;
	});

	// Product Lists
	const getGroomList = async () => {
		if (!goodScroll.value) return;
		try {
			loading.value = true;
			merchantId.value != '' ? params.value.merchantId = merchantId.value : '';
			console.log(goodType.value, params.value)
			const param = {
				...params.value
			}
			const {
				data
			} = await getGroomListApi(goodType.value, param);
			if (param.page == 1) {
				goodsList.value = [...data.productList.list] || [];
			} else {
				goodsList.value = [...goodsList.value, ...data.productList.list] || [];
			}

			goodScroll.value = data.productList.list.length >= params.value.limit;
			params.value.page++;
		} catch (err) {
			console.error(err);
		} finally {
			loading.value = false;
		}
	};
	onPageScroll((e) => {
		if (e.scrollTop > 0) {
			navBgColor.value = '#ffe079';
		} else {
			navBgColor.value = 'rgba(252,255,255,0)';
		}

		// 判断是否显示回到顶部
		if (e.scrollTop > SCROLL_THRESHOLD) {
			showBackTop.value = true;
		} else {
			showBackTop.value = false;
		}
	})
	onPullDownRefresh(async () => {
		await initPageData();
		uni.stopPullDownRefresh();
	})

	// 回到顶部
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 350
		});
		showBackTop.value = false;
	};
	onReachBottom(() => {
		getGroomList();
	});
	// Product Details
	const goDetail = async (item) => {
		// await goShopDetail(item, uid);
		uni.navigateTo({
			url: `/pages/goods/goods_details/index?id=${item.id}`
		});
	};

	function getAllCategory() {
		getCategoryList().then((res) => {
			const list = [];
			res.data.forEach((item) => {
				if (item.name !== "贝币商城") return list.push(item);
			});
			classifyList.value = list.sort((a, b) => a.sort - b.sort);
		});
	}
	const toBrowsingHistory = () => {
		uni.navigateTo({
			url: `/pages/users/browsing_history/index?merchantId=${merchantId.value}`
		});
	}
	const toMerchant = (merchantId) => {
		uni.navigateTo({
			url: "/pages/merchantCenters/merchant?merchantId=" + merchantId
		});
	}
	const toGoodsCate = (item) => {
		uni.setStorageSync('goods_cate', {
			id: item.id
		}); // 存储参数
		uni.switchTab({
			url: `/pages/goods_cate/goods_cate`
		})
	}
	const merchantNameShow = () => {
		if (!appStore.userInfo || (appStore.userInfo && !appStore.userInfo.merchant && !appStore.merchantId && !
				appStore.userInfo.lastVisitedMerchantId)) {
			return true;
		} else {
			return false;
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.Hoverball {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(180deg, #fefcf9 0%, #fff2df 100%);
		// box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		width: 105upx;
		height: 105upx;
		border-radius: 50%; // 圆形按钮
		position: fixed; // 固定定位（不随页面滚动）
		z-index: 999999; // 最高层级，避免被其他元素遮挡
		top: 0%;
		right: 0%;

		.title {
			font-size: 19rpx;
			color: #000000;
			margin-bottom: 4rpx; // 文本与价格间距
		}

		.price {
			font-size: 26rpx;
			color: #cc0000;
			font-weight: bold;
		}

		// 贴边/停止拖拽时的过渡动画
		&.transition {
			transition: left 0.3s ease, top 0.3s ease;
		}
	}

	.couponIndex {
		width: auto;
		height: 238rpx;
		//background-image: url("~@/static/images/yhjsy.png");
		background-size: 100% 100%;
		padding-left: 42rpx;
		margin-bottom: 30rpx;

		.titBox {
			padding: 47rpx 0;
			text-align: center;
			height: 100%;

			.tit1 {
				color: #ffebd2;
				font-size: 34rpx;
				font-weight: 600;
			}

			.tit2 {
				color: #ffebd2;
				font-size: 22rpx;
				margin: 10rpx 0 26rpx 0;
			}

			.tit3 {
				color: #ffdaaf;
				font-size: 24rpx;

				.iconfont {
					font-size: 20rpx;
				}
			}
		}
	}

	.sticky-box {
		// display: flex;
		// position: -webkit-sticky;
		// position: sticky;
		z-index: 99;
		flex-direction: row;
		// margin: 0px;
		// background: #fff;
		padding-bottom: 30rpx;
		background: #fff;
		margin-top: 30rpx;

		.active {
			color: #000;
		}

		.nav-bd {
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 0 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-bottom: 3rpx solid #e6e6e6;
				box-sizing: border-box;

				.txt {
					font-size: 28rpx;
					color: #282828;
				}

				.label {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 124rpx;
					height: 32rpx;
					margin-top: 5rpx;
					font-size: 24rpx;
					color: #999;
				}

				&.active {
					color: $theme-color;
					border-bottom: 2rpx solid #000;

					.txt {
						color: $theme-color;
					}

					.label {
						background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
						border-radius: 16rpx;
						color: #fff;
					}
				}
			}
		}

		.second-nav {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;

			&::-webkit-scrollbar {
				display: none;
			}

			-webkit-overflow-scrolling: touch;
			padding: 0 50rpx;
			box-sizing: border-box;

			.second-nav-item {
				font-size: 26rpx;
				padding: 15rpx 0;
				margin: 0 10rpx 0 0;
				color: #000;
				white-space: nowrap;
				// flex: 1;
				width: 33%;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #ef4800;
				}
			}
		}
	}

	.swiper-box {
		&::v-deep uni-image {
			width: 100%;
		}

		.swiper-banner {
			width: 100%;
			height: 160px;
		}
	}

	// 活动专区
	.active-contanier {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;

		.active-scroll {
			width: 100%;
			white-space: nowrap;

			.active-scroll-content {
				margin: 30rpx 0;
				display: flex;
				flex-direction: row;
				white-space: nowrap;
			}
		}

		.active-item {
			// width: 335rpx;
			width: 48.99%;
			background: #ffffff;
			height: 180rpx;
			// box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
			border-radius: 20rpx;
			padding: 13rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			margin-right: 20rpx;
			flex-shrink: 0;

			.title-box {
				height: 33rpx;
				display: flex;
				font-size: 22rpx;
				align-items: center;

				.title {
					// width: 50%;
					font-weight: bold;
					text-align: center;
				}
			}

			.active-box {
				flex: 1;
				display: flex;

				.active-item-left {
					flex: 1;
					display: flex;
					flex-direction: column;

					.image-box {
						flex: 1;
						// width: 115rpx;
						display: flex;
						align-items: center;

						image {
							border-radius: 5rpx;
							width: 115rpx;
							height: 110rpx;
						}

						.da-jin-tiao {
							width: 51rpx;
						}
					}
				}

				.active-item-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					min-width: 0;
					width: 0;

					.ms {
						font-size: 16rpx;
						color: #000000;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						max-width: 100%;
						box-sizing: border-box;
					}

					.tag {
						display: flex;

						.tag-text {
							color: #acacac;
							background-color: #ebebeb;
							border-radius: 5rpx;
							font-size: 16rpx;
							text-align: center;
							padding: 0rpx 5rpx;
						}
					}

					.price-box {
						display: flex;
						justify-content: space-between;

						.price {
							font-size: 18rpx;
							font-weight: bold;
							color: #000000;
							margin-right: 10rpx;
						}

						.btn {
							width: 77rpx;
							height: 26rpx;
							background-image: linear-gradient(270deg, #fc962c 0%, #f0470d 100%);
							border-radius: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 14rpx;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.listAll {
		width: 20%;
		text-indent: 62rpx;
		font-size: 30rpx;
		border-left: 1px #eee solid;
		margin: 1% 0;
		padding: 5rpx;
		position: relative;

		image {
			position: absolute;
			left: 20rpx;
			top: 8rpx;
		}
	}

	.tab {
		position: relative;
		display: flex;
		font-size: 28rpx;
		white-space: nowrap;

		&__item {
			flex: 1;
			padding: 0 20rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;

			&.active {
				color: #09c2c9;
			}
		}
	}

	.tab__line {
		display: block;
		height: 6rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 3rpx;
		position: relative;
		background: #2fc6cd;
	}

	.scroll-view_H {
		width: 100%;
		display: flex;
		overflow-x: auto;
		padding: 12rpx 0;
		background-color: #fff;

		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none;
		}

		-webkit-overflow-scrolling: touch;

		.tab.nav-bd {
			display: flex;
			align-items: center;
			width: 100%;
		}

		#tab_item.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin: 0 24rpx;
			padding: 8rpx 0;
			cursor: pointer;
			flex: 1;
			transition: all 0.3s ease;

			.uni-icons {
				font-size: 44rpx;
				margin-bottom: 6rpx;
			}

			.txt {
				font-size: 26rpx;
				color: #333;
			}
		}

		#tab_list:first-of-type .item.active {
			.uni-icons {
				color: #000;
			}

			.txt {
				color: #000;
				font-weight: bold;
			}
		}

		.privacy-wrapper {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #7f7f7f;

			.privacy-box {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 560rpx;
				padding: 50rpx 45rpx 0;
				background: #fff;
				border-radius: 20rpx;

				.title {
					text-align: center;
					font-size: 32rpx;
					text-align: center;
					color: #333;
					font-weight: 700;
				}

				.content {
					margin-top: 20rpx;
					line-height: 1.5;
					font-size: 26rpx;
					color: #666;
					text-indent: 54rpx;

					i {
						font-style: normal;
						color: $theme-color;
					}
				}

				.btn-box {
					margin-top: 40rpx;
					text-align: center;
					font-size: 30rpx;

					.btn-item {
						height: 82rpx;
						line-height: 82rpx;
						background: linear-gradient(90deg, #f67a38 0%, #f11b09 100%);
						color: #fff;
						border-radius: 41rpx;
					}

					.btn {
						padding: 30rpx 0;
					}
				}
			}
		}
	}

	.page-index {
		position: relative;
		z-index: 1;
		height: 100%;
		padding-bottom: 200rpx;
		box-sizing: border-box;

		.top-box {
			padding-top: 168rpx;
			//background: linear-gradient(180deg, #ffe079 0%, #ffffff 100%);
			//background-image: url("https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/new-mini/jianbianBG.png");
			background-size: 100% 100%;
		}
	}

	.header {
		//position: sticky;
		//top: 0;
		//z-index: 200000;
		width: 100%;

		padding: 28rpx 20rpx 0;

		.serch-wrapper {
			//margin-top: var(--status-bar-height);
			margin-bottom: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			/* #ifdef MP-WEIXIN */
			width: 100%;
			/* #endif */

			.logo {
				width: 154rpx;
				height: 47rpx;
				margin-right: 24rpx;
			}

			image {
				width: 118rpx;
				height: 42rpx;
			}

			.input {
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #868686;

				.iconfont {
					margin: 0 10rpx;
					font-size: 26rpx;
					color: #666666;
				}

				.searchImg {
					width: 32rpx;
					height: 32rpx;
					margin: 0 20rpx;
				}
			}
		}

		.tabNav {
			padding-top: 24rpx;
		}
	}

	.page_content {
		padding: 0 30rpx;
	}

	.index-product-wrapper {
		padding: 0 16rpx;
		margin-bottom: 200rpx;
		/* 为自定义 tabBar 留出空间 */
		min-height: 700rpx;
		//background: #fff;

		&.on {
			min-height: 1500rpx;
		}

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 48.99%;
				//height: 490rpx;
				background-color: #ffffff;
				// box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
				border-radius: 16rpx;
				margin-bottom: 16rpx;

				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.pictrue {
					position: relative;

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

				.text-info {
					padding: 16rpx 8rpx;

					.title {
						color: #333;
						display: flex;
						align-items: center;
						justify-items: space-between;

						.tip {
							width: 61rpx;
							height: auto;
							font-size: 22rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #ffffff;
							position: relative;
							margin-right: 5rpx;
							background-color: #ef4800;
							border-radius: 5rpx;
						}

						.text {
							width: 80%;
							font-weight: bold;
						}

						.weight {
							background-color: rgba(197, 128, 3, 0.10);
							color: #C58003;
							font-size: 24rpx;
							padding: 8rpx 16rpx;
							border-radius: 8rpx;
							float: right;
						}
					}

					.bottom-row {
						color: $theme-color;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						margin: 10rpx 0 0;

						.price {
							padding-bottom: 4rpx;
							font-weight: 800;
							white-space: nowrap;
							font-size: 28rpx;
							color: #f16327;
						}

						.sales {
							font-size: 22rpx;
							white-space: nowrap;
							flex-shrink: 0;
							color: #999999;
						}

					}

					.merchantInfo {
						display: flex;
						align-items: center;
						height: 40rpx;
						margin-top: 16rpx;
					}

					.merchantLogo {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.merchantName {
						font-size: 24rpx;
						color: #333;
					}
				}
			}

			&.on {
				display: flex;
			}
		}
	}

	.top-bg-box2 {
		overflow: hidden;
		padding: 16rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			line-height: 48rpx;
		}
	}

	.top-bg-box {
		overflow: hidden;
		padding: 16rpx;
		box-sizing: border-box;

		// background-image: linear-gradient(
		//   to bottom,
		//   $header-color 0%,
		//   $header-color 10%,
		//   #ffe9a1 50%,
		//   transparent 100%
		// );
		.card {
			background-color: #fff;
			padding: 4rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.cardbgLinear {
				padding: 20rpx 16rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: linear-gradient(to bottom,
						rgba(255, 240, 200, 0.7) 0%,
						rgba(255, 240, 200, 0.4) 8%,
						rgba(255, 255, 255, 1) 20%,
						rgba(255, 255, 255, 1) 100%);
			}
		}
	}

	.top-bg-box {
		.title {
			display: flex;
			justify-content: space-between; // 左右两端对齐
			align-items: center; // 垂直居中

			.title-left {
				display: flex;
				align-items: center;

				.ssjj {
					width: 150rpx;
					height: 36rpx;
					vertical-align: middle;
				}

				.updateTime {
					font-size: 20rpx;
					color: #666666;
					padding: 0 20rpx 0 8rpx;
					box-sizing: border-box;
				}
			}

			.more {
				display: flex;
				align-items: center;

				.txt {
					font-size: 24rpx;
					color: #666666;
				}

				.right {
					width: 24rpx;
					height: 24rpx;
					vertical-align: middle;
					// margin-left: 10rpx; // 添加一些间距
				}
			}
		}
	}

	.nav-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx 0;
		margin-top: 30rpx;

		.item {
			text-align: center;

			.price {
				font-size: 40rpx;
				color: #FD5F3C;
				font-weight: bold;

				.unit {
					font-size: 24rpx;
				}
			}

			.txt {
				font-size: 28rpx;
				color: #666666;
				line-height: 60rpx;
			}
		}
	}

	.no-data {
		margin: 150rpx auto 0;
		text-align: center;

		img {
			width: 65%;
			height: auto;
		}
	}

	.inde-nav-bar {
		.page-title {
			color: #fff;
		}
	}

	// 分类卡片区域样式
	.classify-section {
		background: #fff;
		margin: 0 16rpx;
		border-radius: 16rpx;
		padding: 30rpx 0 10rpx;
		// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.classify-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.classify-container {
		width: 100%;
		display: inline-flex;
		flex-wrap: nowrap;
		min-width: 100%;
	}

	.classify-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 175rpx;
		flex-shrink: 0;
		box-sizing: border-box;

		.classify-img {
			width: 100rpx;
			height: 100rpx;
		}

		.classify-txt {
			font-size: 24rpx;
			color: #333;
			margin-top: 10rpx;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 120rpx;
		}
	}

	.nav-slot {
		//width: 60%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dianpu {
			width: 32rpx;
		}

		.zhankai {
			width: 20rpx;
		}

		.storeName {
			width: 60%;
			font-size: 28rpx;
			color: #333;
		}
	}

	.no-data {
		margin: 150rpx auto 0;
		text-align: center;

		img {
			width: 65%;
			height: auto;
		}
	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	:deep(.page-title) {
		font-size: 36rpx;
	}
</style>