
<template>
	<view class="integral-container">
		<!-- 轮播区域 -->
		<swiper 
			class="banner-swiper" 
			:indicator-dots="swiperData.length > 1" 
			:autoplay="swiperData.length > 1" 
			:circular="swiperData.length > 1"
			indicator-color="#dfddd9"
			indicator-active-color="#b27c1e"
			:indicator-top="596"
		>
			<swiper-item v-for="(item, index) in swiperData" :key="index">
				<image 
					class="banner-img"
					:src="$baseUrl + `integral/${tupianBanben}/${item?.bannerImg}`"
					mode="aspectFill"
					@click="bannerHandler(item, index)"
				/>
			</swiper-item>
		</swiper>

		<!-- 会员等级区域 -->
		<swiper 
			class="vip-swiper"
			:circular="false"
			:indicator-dots="false"
			@change="handleScroll"
			:current="vipLevel"

		>
			<swiper-item 
				class="vip-area"
				v-for="(item, index) in vipLvDatas" 
				:key="index"
				@click="handleVipClick"
				:style="{
					background: `url(${$baseUrl}integral/${tupianBanben}/${item?.vipIconBg}) no-repeat center/contain`
				}"
			>
					<image 
						class="vip-icon" 
					:src="$baseUrl + `integral/${tupianBanben}/${item?.vipIcon}`"
							mode="aspectFit"
						/>
						<view class="vip-info">
					<text class="vip-name"
						:style="{
							color: islogin ? `${item?.nickNameColor}` : '#6f6d67',
						}"
					>{{`${nickName}`}}</text>
					<view class="title-container">
						<text v-if="!islogin" class="vip-title1">{{`${item?.vipName}`}}</text>
						<image
							v-if="islogin"
							class="vip-title"
							:src="$baseUrl + `integral/${tupianBanben}/${item?.vipNameImg}`"
							mode="aspectFit"
						/>
						<button
							v-if="!islogin"
							type="primary"   
							class="phone-button"
							open-type="getPhoneNumber"
							@getphonenumber="getRealtimePhoneNumber"
						/>
						<image 
							v-if="!islogin"
							class="rule-icon"
							:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
							mode="aspectFit"
						/>
						<view 
							class="current-tag" 
							v-if="islogin && index == vipLevel"
							:style="{
								background: `url(${$baseUrl}integral/${tupianBanben}/tabNowBg.png) no-repeat center/contain`
							}"
						>
									<text class="tag-text"
									:style="{
										color: `${item?.dangqianColor}`,
									}">当前</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 新增积分详情容器 -->
		<view  
		class="integral-detail"
		v-if="islogin"
		>
			<image 
				class="excharge-btn"
				:src="$baseUrl + `integral/${tupianBanben}/${vipIntegral?.excharge?.img}`"
				mode="aspectFit"
				@click="handleExchargeClick"

			/>
			<view 
				class="inte-bar-area"

				:style="{
					background: `url(${$baseUrl}integral/${tupianBanben}/inteBarAreaBg.png) no-repeat center/contain`
				}"
			>
				<view class="integralClick" 
					@click="integralHandler"
				>
				<!-- 第一行 -->
				<view class="header-row">
					<view class="integral-value">
						<text class="integral-text">积分</text>
						<!-- <text class="integral-total">{{ memberInfo.maxGrade ? `(累计${recentAnnualPointsTotal})` : `(累计${recentAnnualPointsTotal}/${nextGradeScoreRuleMin})` }}</text>
						<image
							class="next-icon"
							v-if="!memberInfo.maxGrade"
							:src="$baseUrl + `integral/${tupianBanben}/nextLvTips.png`"
							mode="aspectFit"
						/> -->
					</view>
				</view>
				<!-- 第二行 -->
				<view class="progress-bar1">
					<text class="upLvTxt1">{{ upLvTxts[vipLevel]?.split('/')[0] }}<text class="upLvTxt2">{{ upLvTxts[vipLevel]?.split('/')[1] }}</text></text>

					<!-- <image 预留进度条代码
							:src="$baseUrl + `integral/${tupianBanben}/${vipIntegral?.progressBar?.barBgImg}`" 
						class="progress-bg1"
					/>
					<view class="progress-mask">
						<image
								:src="$baseUrl + `integral/${tupianBanben}/${vipIntegral?.progressBar?.barImg}`"
							class="progress-img1"
								:style="{ transform: `translateX(${(recentAnnualPointsTotal/nextGradeScoreRuleMin)*100 -100}%)` }"
						/>
					</view> -->
				</view>
				
					
				</view>

				<image
							class="strategy-icon"
							:src="$baseUrl + `integral/${tupianBanben}/${vipIntegral?.gonglue?.img}`"
							mode="aspectFit"
							@click="gonglueHandler"
						/>
				<!-- 第三行 -->
				<view class="info-row-container">
					<view 
						class="info-row"
						@click="integralDetailHandler"
					>
						<text class="count-text">{{ `当前：${points} 积分` }}</text>
						<text class="expire-text"
							v-if="willExpiredPoints > 0"
						>{{`(${willExpiredPoints ? willExpiredPoints : 0}积分将到期)`}}</text>
						<image
							class="integral-detail-arrow"
							:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
							mode="aspectFit"
						/>
					</view>
				
				</view>
			</view>
		</view>
		
		<!-- 积分权益 -->
		<view class="privilege-container">
			<!-- 第一行 -->
			<view class="privilege-header">
				<text class="title-text" v-if="islogin">可享 <text class="highlight">{{vipQuanyiData[Math.abs(itemIndex)].qunyiList.length}}</text> 项权益会员</text>
				<text class="title-text"  v-if="!islogin">最高可享 <text class="highlight">10</text> 项权益会员</text>
				<view class="rule-container">
					<text 
						class="rule-text"
						@click="vipRuleHandler"
					>
						会员规则
					</text>
					<image 
						class="rule-icon"
						:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
						mode="aspectFit"
					/>
				</view>
			</view>
			
			<!-- 第二行 -->
			<view class="privilege-grid">
				<view 
					class="privilege-item" 
					v-for="(item, index) in vipQuanyiData[Math.abs(itemIndex)].qunyiList" 
					:key="index"
					:style="{ width: privilegeSizes[item].width, height: privilegeSizes[item].height }"
				>
					<image 
						class="privilege-icon"
						:src="$baseUrl + `integral/${tupianBanben}/${quanyiListIcon[item]}`"
						mode="aspectFit"
						@click="handlePrivilegeClick(privilegeSizes[item])"
					/>
					<image 
						v-if="vipQuanyiData[Math.abs(itemIndex)].isNewArr.includes(item) && itemIndex >= vipLevel"
						class="new-tip"
						:src="$baseUrl + `integral/${tupianBanben}/newTip.png`"
						mode="aspectFit"
					/>

					<button
							v-if="!islogin"
							type="primary"   
							class="phone-button-qyIcon"
							open-type="getPhoneNumber"
							:style="{
								width: privilegeSizes[item].width,
								height: privilegeSizes[item].height,
							}"
							@getphonenumber="getRealtimePhoneNumber"
						/>

				</view>
			</view>
		</view>

		<!-- 会员活动 -->
		<view class="vip-active-area">
			<text class="vip-title">会员活动</text>
			<swiper
				class="vip-active-swiper"
				:indicator-dots="true"
				:autoplay="true"
				:circular="true"
				indicator-color="#dfddd9"
				indicator-active-color="#b27c1e"
				:indicator-top="32"
			>
				<swiper-item v-for="(item, index) in vipActive" :key="index">
					<image
						class="vip-active-img"
						:src="$baseUrl + `integral/${tupianBanben}/${item?.img}`"
						mode="aspectFit"
						@click="handleVipActiveClick(index, item)"
					/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品展示容器 -->
		<view class="goods-container">
			<!-- 页签栏 -->
			<view class="custom-tabs">
				<view 
					v-for="(tab, index) in tabInfo?.tabTexts" 
					:key="index"
					class="tab-item"
					:class="{ active: activeIndex === index }"
					@click="tabItemClick(index)"
					:style="{
						background: activeIndex === index && `url(${$baseUrl}integral/${tupianBanben}/${tabInfo?.tabBg}) no-repeat center/contain`
					}"
				>
					<text class="tab-line1">{{ tab?.line1 }}</text>
					<text class="tab-line2">{{ tab?.line2 }}</text>
				</view>
			</view>
			
			<!-- 商品内容 -->
			<view class="goods-content">
				<!-- 精选榜单 -->
				<view 
					class="goods-list" 
					v-if="activeIndex === 0"
				>
					<view 
						class="goods-item" 
						v-for="i in goodsData[0]?.titles?.length" 
						:key="i"

						:style="{
							background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
						}"
					>
						<!-- <image
							class="goods-img-bg"productIdUrl
							:src="$baseUrl + `integral/1008/listItemImgBg.png`"
							mode="aspectFit"
						/> -->
						<view class="goods-item-container" @click="handleGoodsItemClick('xingpin',i)">
							<image 
								class="goods-img"
								:src="$baseUrl + `integral/${tupianBanben}/${goodsData[0]?.goodsImgs[i-1]}`"
								mode="aspectFit"
							/>
							<view class="title-container1">
								<text class="title-text1">{{ goodsData[0]?.titles[i-1] }}</text>
							</view>
							<text class="num0">{{ goodsData[0]?.prices[i-1].split("积分+￥")[0]}}<text class="price-text0">积分</text><text class="price-text1">+</text><text class="price-text0">￥</text>{{ goodsData[0]?.prices[i-1].split("积分+￥")[1] }}</text>
						</view>
						
					</view>
				</view>

				<!-- 品质专区 -->
				<view 
					class="goods-list" 
					v-if="activeIndex === 1"
				>
					<view 
						class="goods-item" 
						v-for="i in goodsData[1]?.titles?.length" 
						:key="i"
						:style="{
							background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
						}"
					>
						<view class="goods-item-container" @click="handleGoodsItemClick('lingyuan',i)">

							<image 
								class="goods-img"
								:src="$baseUrl + `integral/${tupianBanben}/${goodsData[1]?.goodsImgs[i-1]}`"
								mode="aspectFit"
							/>
							<view class="title-container1">
								<text class="title-text1">{{ goodsData[1]?.titles[i-1] }}</text>
							</view>
							<text class="price-text"><text class="num">{{ goodsData[1]?.prices[i-1] }}</text>积分</text>
						</view>
					</view>
				</view>

				<!-- 限量推荐 -->
				<view 
					class="goods-list" 
					v-if="activeIndex === 2"
				>
					<view 
						class="goods-item" 
						v-for="i in goodsData[2]?.titles?.length" 
						:key="i"
						:style="{
							background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
						}"
					>
						<view class="goods-item-container" @click="handleGoodsItemClick('beiwei',i)">
							<image 
								class="goods-img"
								:src="$baseUrl + `integral/${tupianBanben}/${goodsData[2]?.goodsImgs[i-1]}`"
								mode="aspectFit"
							/>
							<view class="title-container1">
								<text class="title-text1">{{ goodsData[2]?.titles[i-1] }}</text>
							</view>
							<text class="price-text"><text class="num">{{ goodsData[2]?.prices[i-1] }}</text>积分</text>
							
						</view>
						
					</view>
				</view>
			</view>
		</view>

		<!-- 查看更多容器 -->
		<view class="more-container" @click="handleMoreClick">
			<text class="more-text">点击查看更多</text>
			<image 
				class="more-arrow"
				:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
				mode="aspectFit"
			/>
		</view>

		<!-- 测试注册层按钮（开发调试用） -->
		<!-- <view class="test-register-btn" @click="showRegisterDialog" v-if="!islogin">
			<text class="test-btn-text">测试注册层</text>
		</view> -->

		<!-- 调试信息（开发调试用） -->
		<!-- <view class="debug-info" v-if="!islogin">
			<text class="debug-text">登录状态: {{ islogin ? '已登录' : '未登录' }}</text>
			<text class="debug-text">注册层状态: {{ showRegisterLayer ? '显示' : '隐藏' }}</text>
			<text class="debug-text">用户昵称: {{ nickName }}</text>
		</view> -->
		
			<!-- 积分底部填充位置 -->
		<view class="content">
		</view>

	<RegisterLayer 
		v-model="showRegisterLayer" 
		@confirm="handleRegisterConfirm"
		@cancel="handleRegisterCancel"
	/>
	</view>

</template>

<script setup>

	// 轮播图数据可在此定义（当前使用静态路径）
	// "rgba(255,255,255,0.5)"
	import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
	import { jump, JumpType } from '@/utils/index.js'
	import { useUserStore } from "@/stores/user";
	import { fetchIntegralJSON } from '../api/integral';
	import RegisterLayer from "../components/RegisterLayer.vue";
	import md from '../md';


	const integralData = ref({
	"tupianBanben": "1013",
	"swiper": [
		{
			"bannerImg": "integralBannerBg1.png",
			"url": "",
			"type": 2,
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		}
	],
	"viplv": {
		"imgs": [
			"imgPlatinum0.png",
			"imgPlatinum1.png",
			"imgPlatinum2.png",
			"imgPlatinum3.png",
			"imgPlatinum4.png"
		],
		"imgBgs":[
			"imgPlatinumBg0.png",
			"imgPlatinumBg1.png",
			"imgPlatinumBg2.png",
			"imgPlatinumBg3.png",
			"imgPlatinumBg4.png"
		],
		"nickNameColors":["#1d1e25","#1d1e25","#1d1e25","#1d1e25","#ffffff"],
		"dangqianColors":["#b27c1e","#447ab0","#332288","#674513","#674513"],
		"vipLvIcon":["imgPlatinumIcon0.png","imgPlatinumIcon1.png","imgPlatinumIcon2.png","imgPlatinumIcon3.png","imgPlatinumIcon4.png"],
		"vipNameImgs":["imgPlatinumName0.png","imgPlatinumName1.png","imgPlatinumName2.png","imgPlatinumName3.png","imgPlatinumName4.png"],
		"upLvTxts": [
			"扫罐内码或下单有机会提升至/V2铂金会员",
			"扫罐内码或下单有机会提升至/V3钻石会员",
			"扫罐内码或下单有机会提升至/V4星光会员",
			"扫罐内码或下单有机会提升至/V5星耀会员",
			"已提升至最高等级/V5星耀会员"
		]
	},
	"vipIntegral": {
		"gonglue": {
			"url": "https://mom.feihe.com/member/mine/pointStrategy",
			"type": 3,
			"img": "strategyBtn.png"
		},
		"progressBar": {
			"barImg": "progressBarIntegral.png",
			"barBgImg": "progressBarBgIntegral.png"
		},
		"excharge": {
			"url": "subPackages/shopMainList/topicNew/index?id=1000187",
			"type": 2,
			"img": "integralExchargeBtn.png",
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		},
		"vipCardInfo": {
			"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
			"type": 2,
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		},
		"jifenmingxi": {
			"url": "https://mom.feihe.com/member/mine/newPointDetail?crmId={crmid}&appCode=XMH",
			"type": 3
		}
	},
	"clickMore": {
		"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
		"type": 2,
		"extra": {
			"appId": "wx4205ec55b793245e",
			"envVersion": "release"
		}
	},
	"qunyiInfo": {
		"vipRule": {
			"url": "https://mom.feihe.com/member/mine/pointStrategy",
			"type": 3
		},
		"imgInfos": [
			{
				"img": "yueyueliBtn.png",
				"width": "68rpx",
				"height": "87rpx",
				"name": "月月礼"
			},
			{
				"img": "shengriBtn.png",
				"width": "70rpx",
				"height": "91rpx",
				"name": "生日礼"
			},
			{
				"img": "yuerBtn.png",
				"width": "94rpx",
				"height": "87rpx",
				"name": "育儿礼"
			},
			{
				"img": "heliBtn.png",
				"width": "48rpx",
				"height": "87rpx",
				"name": "贺礼"
			},
			{
				"img": "xinrenliBtn.png",
				"width": "71rpx",
				"height": "88rpx",
				"name": "新人礼"
			},
			{
				"img": "mianfeiBtn.png",
				"width": "95rpx",
				"height": "87rpx",
				"name": "免费礼"
			},
			{
				"img": "zhuanduanli.png",
				"width": "70rpx",
				"height": "86rpx",
				"name": "专端礼"
			},
			{
				"img": "changxianBtn.png",
				"width": "94rpx",
				"height": "87rpx",
				"name": "尝鲜礼"
			},
			{
				"img": "jinjiBtn.png",
				"width": "70rpx",
				"height": "89rpx",
				"name": "进阶礼"
			},
			{
				"img": "suyuanBtn.png",
				"width": "71rpx",
				"height": "90rpx",
				"name": "溯源礼"
			}
		],
		"rule": {
			"url": "https://mom.feihe.com/member/mine/pointStrategy",
			"type": 3
		},
		"vipQuanyiUrl": {
			"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
			"type": 2,
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		},
		"vipLvsQuanyi": [
			{
				"qunyiList": [0, 2, 4, 5],
				"isNewArr": []
			},
			{
				"qunyiList": [6, 7, 0, 2, 4, 5],
				"isNewArr": [6, 7]
			},
			{
				"qunyiList": [8, 1, 6, 7, 0, 2, 4, 5],
				"isNewArr": [8, 1]
			},
			{
				"qunyiList": [9, 8, 1, 6, 7, 0, 2, 4, 5],
				"isNewArr": [9]
			},
			{
				"qunyiList": [9, 8, 1, 6, 7, 0, 2, 4, 5],
				"isNewArr": [9]
			}
		]
	},
	"vipActive": [
		{
			"img": "vipAct1.png",
			"url": "subPackages/shopMainList/topicNew/index?id=1000912",
			"type": 2,
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		},
		{
			"img": "vipAct2.png",
			"url": "/subPackages/shopMainProcess/lottery/index?utm_campaign=%E6%BA%AF%E6%BA%90%E6%8A%BD%E5%A5%96&_channel_track_key=ngSppZAj",
			"type": 2,
			"extra": {
				"appId": "wx4205ec55b793245e",
				"envVersion": "release"
			}
		}
	],
	"goodsListData": {
		"listCommon": {
			"listItemImgBg": "integral/1008/listItemImgBg.png"
		},
		"tabInfo": {
			"tabBg": "tapSelectBg.png",
			"tabTexts": [
				{
					"line1": "星品榜单",
					"line2": ""
				},
				{
					"line1": "0元爆款",
					"line2": ""
				},
				{
					"line1": "北纬专场",
					"line2": ""
				}
			]
		},
		"productIdUrl": {
			"xingpin": [
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "632366292935447153",
					"skuId": "632366292935447154",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "434526218612696157",
					"skuId": "434526218612696158",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "779457178234291713",
					"skuId": "779457178234291714",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "632368902459430553",
					"skuId": "632368902459430554",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "748373470406312440",
					"skuId": "748373470406312441",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "700209063828145600",
					"skuId": "700209063828145601",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "444612538255511698",
					"skuId": "444612538255511699",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "748374838109458955",
					"skuId": "748374838109458956",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "748376191670080756",
					"skuId": "748376191670080757",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "444614841574228087",
					"skuId": "444614841574228088",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "642944987112793104",
					"skuId": "642944987112793105",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "660577242594873852",
					"skuId": "660577242594873853",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "593557253255397681",
					"skuId": "675866042011105275",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "670068445908034706",
					"skuId": "670072178498381183",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "660575857729992191",
					"skuId": "660575857729992192",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "486040248826077773",
					"skuId": "486040248826077774",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				}
			],
			"lingyuan": [
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "643301938280182989",
					"skuId": "643301938280182990",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "570770855028876907",
					"skuId": "570770855028876908",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "643302772176787321",
					"skuId": "643302772176787322",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "650261586675438161",
					"skuId": "650261761758111604",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "637115498514653835",
					"skuId": "637115498514653836",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "637462885116453461",
					"skuId": "637462885116453462",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "637125264624522797",
					"skuId": "637125264624522798",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "664995106239801237",
					"skuId": "664995106239801238",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "566750277742626607",
					"skuId": "566750277742626608",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "664992929630904330",
					"skuId": "702706680618457075",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "479814938702811385",
					"skuId": "479814938702811386",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "477231839213998660",
					"skuId": "477231839213998661",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "710238004623156187",
					"skuId": "710238148411278894",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "637105594356118250",
					"skuId": "637105594356118251",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "446767559140140163",
					"skuId": "446767559140140164",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "575869473685026384",
					"skuId": "575869473689219730",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				}
			],
			"beiwei": [
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "694019044167238066",
					"skuId": "694019044167238067",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "548984197069284758",
					"skuId": "548984197069284759",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "548991402553569325",
					"skuId": "548991402553569326",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "757045038059549612",
					"skuId": "757045038059549613",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "555507401709887582",
					"skuId": "555507401709887583",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "555151404052796950",
					"skuId": "555151404052796951",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "704050114989893289",
					"skuId": "704050114989893290",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				},
				{
					"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
					"productId": "710290587034550507",
					"skuId": "710290587034550508",
					"type": 2,
					"extra": {
						"appId": "wx4205ec55b793245e",
						"envVersion": "release"
					}
				}
			]
		},
		"goodsData": [
			{
				"titles": [
					"星飞帆4段儿童成长配...",
					"星飞帆卓睿4段儿童配...",
					"飞鹤臻贵儿童成长配方...",
					"茁然 茁护儿童配方奶...",
					"经典爱本乳铁蛋白配方...",
					"飞鹤茁然高钙奶酪泡芙...",
					"金装1962-中老年高钙...",
					"经典爱本膳骨配方奶粉...",
					"经典爱本清澄配方奶粉...",
					"金装1962-高钙高蛋白...",
					"德佑纯水湿巾80抽/包",
					"婴儿专护除菌除螨洗衣...",
					"多肉鳕鱼空气脆饼干宝...",
					"DHA深海鳕鱼肠80g*4袋",
					"云朵软软绵柔巾洗脸巾...",
					"凡士林100ml倍护精华..."
				],
				"prices": [
					"低至730积分+￥115",
					"低至865积分+￥195",
					"低至1000积分+￥228",
					"低至715积分+￥125",
					"低至560积分+￥102",
					"低至323积分+￥37.5",
					"低至210积分+￥68",
					"低至560积分+￥102",
					"低至480积分+￥114",
					"低至210积分+￥68",
					"低至65积分+￥36.5",
					"低至90积分+￥12.9",
					"低至2300积分+￥2",
					"低至65积分+￥19.5",
					"低至80积分+￥14.9",
					"低至86积分+￥21.3"
				],
				"goodsImgs": [
					"listItemImgJx0.png",
					"listItemImgJx1.png",
					"listItemImgJx2.png",
					"listItemImgJx3.png",
					"listItemImgJx4.png",
					"listItemImgJx5.png",
					"listItemImgJx6.png",
					"listItemImgJx7.png",
					"listItemImgJx8.png",
					"listItemImgJx9.png",
					"listItemImgJx10.png",
					"listItemImgJx11.png",
					"listItemImgJx12.png",
					"listItemImgJx13.png",
					"listItemImgJx14.png",
					"listItemImgJx15.png"
				]
			},
			{
				"titles": [
					"星飞帆4段儿童成长配...",
					"飞鹤茁然儿童配方奶升...",
					"茁然 茁护儿童配方奶...",
					"宝宝钙维生素D软胶囊...",
					"婴儿专护除菌除螨洗衣...",
					"公牛 新国标插座/插线...",
					"宝宝植萃深度洁净洗衣...",
					"九阳煮蛋器多功能智能...",
					"云朵软软绵柔巾洗脸巾...",
					"荣事达电煮锅家用多功...",
					"德佑小白羊绵柔巾珍珠...",
					"babygo进口户外防水...",
					"苏泊尔（SUPOR）真...",
					"超级飞侠儿童绘画笔套...",
					"可爱多湿巾纸无染清洁...",
					"亲肤纯水湿巾加厚加大..."
				],
				"prices": [
					11500,
					8900,
					12000,
					5450,
					2190,
					5980,
					2490,
					4900,
					2290,
					4900,
					2490,
					3800,
					9900,
					7900,
					990,
					1990
				],
				"goodsImgs": [
					"listItemImgXL0.png",
					"listItemImgXL1.png",
					"listItemImgXL2.png",
					"listItemImgXL3.png",
					"listItemImgXL4.png",
					"listItemImgXL5.png",
					"listItemImgXL6.png",
					"listItemImgXL7.png",
					"listItemImgXL8.png",
					"listItemImgXL9.png",
					"listItemImgXL10.png",
					"listItemImgXL11.png",
					"listItemImgXL12.png",
					"listItemImgXL13.png",
					"listItemImgXL14.png",
					"listItemImgXL15.png"
				]
			},
			{
				"titles": [
					"北纬47度水果玉米",
					"北纬47度黄糯鲜玉米",
					"北纬47度白甜糯玉米",
					"北纬47度东北烧烤...",
					"北纬47度花甜糯玉米",
					"北纬47度黑珍珠玉米",
					"N47°植物酵素乳245...",
					"N47°水果玉米汁245..."
				],
				"prices": [
					4740,
					3900,
					4600,
					5990,
					4600,
					5200,
					9990,
					7990
				],
				"goodsImgs": [
					"listItemImgPzh0.png",
					"listItemImgPzh1.png",
					"listItemImgPzh2.png",
					"listItemImgPzh3.png",
					"listItemImgPzh4.png",
					"listItemImgPzh5.png",
					"listItemImgPzh6.png",
					"listItemImgPzh7.png"
				]
			}
		]
	}
});

	// const integralData = ref({}); 
	
	const swiperData = ref(integralData.value.swiper);//banner图片地方
	const vipLvIcons = ref(integralData.value.viplv.imgs);//会员等级图标
	const vipLvNameImgs = ref(integralData.value.viplv.vipNameImgs);//会员等级名称图片
	const vipLvIconBgs = ref(integralData.value.viplv.imgBgs);//会员等级图标背景
	const nickNameColors = ref(integralData.value.viplv.nickNameColors);//会员等级昵称颜色
	const dangqianColors = ref(integralData.value.viplv.dangqianColors);//当前等级颜色
	const upLvTxts = ref(integralData.value.viplv.upLvTxts);//会员等级提升文字
	const vipIntegral = ref(integralData.value.vipIntegral);//积分明细\
	const clickMore = ref(integralData.value.clickMore);//点击更多
	const vipActive = ref(integralData.value.vipActive);//会员活动
	const tabInfo = ref(integralData.value.goodsListData.tabInfo);//tabbar信息
	const listCommon = ref(integralData.value.goodsListData.listCommon);//商品列表通用信息
	const goodsData = ref(integralData.value.goodsListData.goodsData);//商品数据
	const productIdUrl = ref(integralData.value.goodsListData.productIdUrl);//商品跳转链接
	const imgInfos = ref(integralData.value.qunyiInfo.imgInfos);//权益信息
	const vipRule = ref(integralData.value.qunyiInfo.vipRule);//会员规则跳转
	const vipLvsQuanyi = ref([]);//会员不同等级权益
	const points = ref(0);//积分
	const vipQuanyiUrl = ref(integralData.value.qunyiInfo.vipQuanyiUrl);//会员权益图标点击跳转

	const activeIndex = ref(0);//tabbar选中项

	const showRegisterLayer = ref(false);
	const tupianBanben = ref(integralData.value.tupianBanben);//图片版本号



	// const tabs = ref([
	// 	{ line1: '精选榜单', line2: '积分超值兑' },
	// 	{ line1: '品质专区', line2: '北纬47°' },
	// 	{ line1: '限量推荐', line2: '积分加价购' }
	// ]);

	// const goodsData = ref([
	// 	{
	// 		titles: ['六水香清禾香大米2.5kg','EDI纯水手口湿巾迷你...','全麦手撕面包麦香浓郁...','艾草植萃除菌除螨洗衣...','内衣专护洗衣液','婴儿专护除菌除螨洗衣...','宝宝钙维生素D软胶囊...','北纬47度鲜甜低GI水果...','牙博士青柠亮白牙膏','六水香泰来大米2.5kg','钙铁锌牛乳软饼干6g*...','飞鹤茁然儿童配方奶2...','酵素洗衣皂抑菌柔护尿...','云柔保湿纸巾乳霜纸...','超级飞侠儿童绘画笔套...','婴蓓INBER 儿童糖果...'],
	// 		prices: [
	// 			3200,990,1990,1990,
	// 			1590,2190,2680,990,
	// 			1580,4000,2490,5200,
	// 			1990,3900,7900,1990],
	// 		goodsImgs:['listItemImgJx0.png','listItemImgJx1.png','listItemImgJx2.png','listItemImgJx3.png','listItemImgJx4.png','listItemImgJx5.png','listItemImgJx6.png','listItemImgJx7.png','listItemImgJx8.png','listItemImgJx9.png','listItemImgJx10.png','listItemImgJx11.png','listItemImgJx12.png','listItemImgJx13.png','listItemImgJx14.png','listItemImgJx15.png']
	// 	},
	// 	{
	// 		titles:['北纬47度水果玉米','北纬47度黄糯鲜玉米','北纬47度白甜糯玉米','北纬47度东北烧烤...','北纬47度花甜糯玉米','北纬47度黑珍珠玉米','N47°植物酵素乳245...','N47°水果玉米汁245...'],
	// 		prices:[4200,3840,3840,5990,4200,4200,5500,4990],
	// 		goodsImgs:['listItemImgPzh0.png','listItemImgPzh1.png','listItemImgPzh2.png','listItemImgPzh3.png','listItemImgPzh4.png','listItemImgPzh5.png','listItemImgPzh6.png','listItemImgPzh7.png']
	// 	},
	// 	{
	// 		titles:['星飞帆4段儿童成长...','星飞帆卓睿4段儿童...','金装1962-高锌多维学...','香葱流心可颂面包500g','茁然 茁护儿童配方奶...','六水香清禾香大米5kg','星蕴孕产妇奶粉听装700g','美维仕宝宝钙维生素...','金装1962-中老年高钙...','金装1962-高钙高蛋白...','茁然纯牛奶(A2 B酪蛋...','北纬47度黄糯鲜玉米','钙铁锌牛乳软饼干6g*...','迪奥口红 烈焰蓝金唇...','浅香(ASAKA)百合氨基...','心相印茶语精选320抽...'],
	// 		prices:[188,368,89,19.9,268,69,158,78,89,89,65,66,39.9,158.51,31,29],
	// 		goodsImgs:['listItemImgXL0.png','listItemImgXL1.png','listItemImgXL2.png','listItemImgXL3.png','listItemImgXL4.png','listItemImgXL5.png','listItemImgXL6.png','listItemImgXL7.png','listItemImgXL8.png','listItemImgXL9.png','listItemImgXL10.png','listItemImgXL11.png','listItemImgXL12.png','listItemImgXL13.png','listItemImgXL14.png','listItemImgXL15.png']
	// 	}
	// 	// 其他分类数据...
	// ]);

	const vipLevel = ref(0);
	// const vipNameArr = ref(['V1 黄金会员', 'V2 铂金会员', 'V3 钻石会员', 'V4 星光会员', 'V5 星耀会员']);
	const systemInfo = uni.getWindowInfo();
	const rpxRatio = 750 / systemInfo.windowWidth;// 如果需要rpx换算（1px = 2rpx）
	const itemIndex = ref(0);
	const itemWidth = (686 + 64) / rpxRatio;

	const lastScrollLeft = ref(0);

	const vipQuanyiData = ref(integralData.value.qunyiInfo.vipLvsQuanyi);
	
	const recentAnnualPointsTotal = ref(0);
	const nextGradeScoreRuleMin = ref(0);
	const upLevelExp = ref([1000,2000,3000,4000,5000]);
	const quanyiListIcon = ref([
						'yueyueliBtn.png','shengriBtn.png','yuerBtn.png','heliBtn.png',
						'xinrenliBtn.png','mianfeiBtn.png','zhuanduanli.png','changxianBtn.png',
						'jinjiBtn.png','suyuanBtn.png'
					]);
	const vipBgArr = ref([]);

	const privilegeSizes = ref([
		{ width: '68rpx', height: '87rpx', name: '月月礼' },
		{ width: '70rpx', height: '91rpx', name: '生日礼' },
		{ width: '94rpx', height: '87rpx', name: '育儿课程' },
		{ width: '48rpx', height: '87rpx', name: '鹤礼' },
		{ width: '71rpx', height: '88rpx', name: '新人礼' },
		{ width: '95rpx', height: '87rpx', name: '免费问诊' },
		{ width: '70rpx', height: '86rpx', name: '转段礼' },
		{ width: '94rpx', height: '87rpx', name: '尝鲜有礼' },
		{ width: '70rpx', height: '89rpx', name: '晋级礼' },
		{ width: '71rpx', height: '90rpx', name: '溯源游' }
	]);

	const userStore = useUserStore();
	const memberInfo = ref({
		recentAnnualPointsTotal:0,
		willExpiredPoints:0,
		nextGradeScoreRuleMin:0,
		grade:0,
		points:0
	});


	const willExpiredPoints = ref(0);//即将过期积分

	const islogin = ref(true);//是否登录
	const vipLvDatas = ref([
	]);
	const nickName = ref('');

	const mdMap = ref([]);
	

	// Props 定义
	const props = defineProps({
		scrollTop: {
			type: Number,
			default:0
		}
	})

	// 监听 scrollTop 变化
	watch(() => props.scrollTop, (newVal) => {
		// console.log('scrollTop 变化:', newVal)
		// 执行相关逻辑，如曝光检测

		if(newVal > 650){
			if(mdMap.value.indexOf('积分服务页-二屏') == -1){

				md.sensorLogTake({
					xcxPage: "积分服务页-二屏页面浏览",
					pageName: "积分服务页-二屏",
				});

				mdMap.value.push('积分服务页-二屏');
			}
		}

		if(newVal > 1328){
			if(mdMap.value.indexOf('积分服务页-三屏') == -1){

				md.sensorLogTake({
					xcxPage: "积分服务页-三屏页面浏览",
					pageName: "积分服务页-三屏",
				});

				mdMap.value.push('积分服务页-三屏');
			}
		}

		if(newVal > 2058){
			if(mdMap.value.indexOf('积分服务页-四屏') == -1){

				md.sensorLogTake({
					xcxPage: "积分服务页-四屏页面浏览",
					pageName: "积分服务页-四屏",
				});

				mdMap.value.push('积分服务页-四屏');
			}
		}
		
	})
	

	onBeforeMount(async() => {
		console.log('onBeforeMount');
		

	})

	onMounted(async() => {

		mdMap.value = [];

		if(mdMap.value.indexOf('积分服务页-首屏') == -1){

			md.sensorLogTake({
				xcxPage: "积分服务页-首屏页面浏览",
				pageName: "积分服务页-首屏",
			});

			mdMap.value.push('积分服务页-首屏');
		}
		


		const {data} = await fetchIntegralJSON();
		integralData.value = {...data};

		swiperData.value = integralData.value.swiper;
		vipLvIcons.value = integralData.value.viplv.imgs;
		vipLvIconBgs.value = integralData.value.viplv.imgBgs;
		vipLvNameImgs.value = integralData.value.viplv.vipNameImgs;
		vipIntegral.value = integralData.value.vipIntegral;
		clickMore.value = integralData.value.clickMore;
		vipActive.value = integralData.value.vipActive;
		tabInfo.value = integralData.value.goodsListData.tabInfo;
		listCommon.value = integralData.value.goodsListData.listCommon;
		goodsData.value = integralData.value.goodsListData.goodsData;
		productIdUrl.value = integralData.value.goodsListData.productIdUrl;
		vipRule.value = integralData.value.qunyiInfo.vipRule;
		imgInfos.value = integralData.value.qunyiInfo.imgInfos;
		vipQuanyiUrl.value = integralData.value.qunyiInfo.vipQuanyiUrl;
		// vipQuanyiData.value = [];////??????
		vipQuanyiData.value = integralData.value.qunyiInfo.vipLvsQuanyi;
		tupianBanben.value = integralData.value.tupianBanben;

		quanyiListIcon.value = [];
		imgInfos.value.forEach((element,index) => {
			quanyiListIcon.value.push(element.img);
			privilegeSizes.value.push({ width: element.width, height: element.height, name: element.name });
		});
		
		await userStore.loadMemberInfo();

		initNetData();


		itemIndex.value = vipLevel.value;
	});

	const initNetData = () => {
		console.log('initNetData');
		
		memberInfo.value = userStore.memberInfo;

		recentAnnualPointsTotal.value = memberInfo.value.recentAnnualPointsTotal;
		willExpiredPoints.value = memberInfo.value.willExpiredPoints;
		nextGradeScoreRuleMin.value = memberInfo.value.nextGradeScoreRuleMin;
		vipLevel.value = memberInfo.value.grade;
		points.value = memberInfo.value.points;

		if(memberInfo.value.memberId == "not_login"){
			islogin.value = false;
		}else{
			islogin.value = true
		}

		if(islogin.value){
			nickName.value = memberInfo.value.memberName;
			
			// 清空之前的数据
			vipLvDatas.value = [];//??????????
			
			memberInfo.value?.gradeList.forEach((element, index) => {
				vipLvDatas.value.push({
					"vipName" : element.gradeName,
				});

				vipLvDatas.value[index].vipIcon = vipLvIcons.value[index];
				vipLvDatas.value[index].vipIconBg = vipLvIconBgs.value[index];
				vipLvDatas.value[index].vipNameImg = vipLvNameImgs.value[index];
				vipLvDatas.value[index].nickNameColor = nickNameColors.value[index];
				vipLvDatas.value[index].dangqianColor = dangqianColors.value[index];
			});
			
		}else{
			nickName.value = '未登录';
			vipLvDatas.value = [{
				"vipName": "登录查看会员等级",
				"vipIcon": "imgPlatinum-1.png",
				"vipIconBg": "imgPlatinumBg-1.png",
				"nickNameColor": "#1d1e25",
				"dangqianColor": "#b27c1e"
			}];
		}
	}


	//banner点击事件
	const bannerHandler = (item, index) => {
		let buttonName = '';
		switch(index){
			case 0:
				buttonName = '第一张焦点图';
				break;
			case 1:
				buttonName = '第二张焦点图';
				break;
			case 2:
				buttonName = '第三张焦点图';
				break;
			case 3:
				buttonName = '第四张焦点图';
				break;
		}

		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: buttonName,
		});

		if(item?.url != ""){
			jump({
				type: item.type,
				url: item.url, 
				extra: item.extra
			})
		}
	}



	//攻略点击事件
	const gonglueHandler = () => {

		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: "攻略",
		});

		const url = vipIntegral.value.gonglue.url;
		const type = vipIntegral.value.gonglue.type;
		jump({
			type: type,
			url: url
		})
		console.log('gonglueHandler')
	}

	//积分详情点击事件---积分进度条容器
	const integralHandler = () => {

		integralDetailHandler();
	}

	//会员规则
	const vipRuleHandler = () => {
		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: "会员规则入口",
		});

		const url = vipRule.value.url;
		const type = vipRule.value.type;
		jump({
			type: type,
			url: url
		})
		console.log('vipRuleHandler')
	}

	//积分明细点击事件
	const integralDetailHandler = () => {

		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: "积分明细",
		});

		const url = vipIntegral.value.jifenmingxi.url.replace("{crmid}", memberInfo.value.memberId);
		const type = vipIntegral.value.jifenmingxi.type;
		console.log('积分明细链接：==',url)
		
		jump({
			type: type,
			url: url
		})
	}

	//会员活动点击事件
	const handleVipActiveClick = (index, item) => {
		let buttonName = '';
		switch(index){
			case 0:
				buttonName = '第一张焦点图';
				break;
			case 1:
				buttonName = '第二张焦点图';
				break;
			case 2:
				buttonName = '第三张焦点图';
				break;
		}

		md.sensorLogTake({
			xcxClick: "积分服务页-二屏页面点击",
			pageName: "积分服务页-二屏",
			buttonName: buttonName,
		});

		const url = item?.url; 
		const type = item?.type;
		const extra = item?.extra;

		jump({
			type: type,
			url: url,
			extra:extra
		})
	}


	//商品点击
	const handleGoodsItemClick = (arridx,googidx) => {
		console.log('handleGoodsItemClick：',arridx,googidx);

		let buttonName0 = '';
		let buttonName1 = '';
		switch(activeIndex.value){
			case 0:
				buttonName0 = '品牌活动版分类1';
				break;
			case 1:
				buttonName0 = '品牌活动版分类2';
				break;
			case 2:
				buttonName0 = '品牌活动版分类3';
				break;
		}

		buttonName1 = `-商品${googidx}`;
		md.sensorLogTake({
			xcxClick: "积分服务页-二屏页面点击",
			pageName: "积分服务页-二三四屏",
			buttonName: buttonName0 + buttonName1,
		});

		let item = productIdUrl.value[arridx][googidx-1];
		const url = item.url.replace('{productId}',item.productId).replace('{skuId}',item.skuId);
		const type = item.type;
		const extra = item.extra;




		console.log('url11111=',url);

		jump({
			type: type,
			url: url,
			extra:extra
		})
	}

	const handleScroll = (e) => {
		const currentIndex = e.detail.current;
		// console.log('当前swiper-item索引:', currentIndex);
		itemIndex.value = currentIndex;
		// 获取当前滚动位置
		// const scrollLeft = e.detail.scrollLeft;
		// const directionVal = ref(0.3);
		// if ((scrollLeft - lastScrollLeft.value) > 0) {
		// 	directionVal.value = 0.3;
		// }else{
		// 	directionVal.value = -0.3;
		// }
		// lastScrollLeft.value = scrollLeft;
		
		// itemIndex.value = Math.round(scrollLeft / itemWidth + directionVal.value);

	}
	

	//滚动结束时更新数据
	const scrollToIndex = (index) => {
		
	};

	const tabItemClick = (index) => {
		
		activeIndex.value = index;

		let buttonName = '';
		switch(index){
			case 0:
				buttonName = '品牌活动版块部分-分类1';
				break;
			case 1:
				buttonName = '品牌活动版块部分-分类2';
				break;
			case 2:
				buttonName = '品牌活动版块部分-分类3';
				break;
		}

		console.log('buttonName=',buttonName);

		md.sensorLogTake({
			xcxClick: "积分服务页-二屏页面点击",
			pageName: "积分服务页-二屏",
			buttonName: buttonName,
		});
	}

	// 处理查看更多点击
	const handleMoreClick = () => {
		const url = clickMore.value.url;
		const type = clickMore.value.type;
		const extra = clickMore.value.extra;

		jump({
			type: type,
			url: url,
			extra:extra
		})
	}

	//积分兑换按钮点击事件
	const handleExchargeClick = () => {

		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: "积分兑换",
		});
		
		const url = vipIntegral.value.excharge.url; 
		const type = vipIntegral.value.excharge.type;
		const extra = vipIntegral.value.excharge.extra;

		jump({
			type: type,
			url: url,
			extra:extra
		})
	}

	//会员权益点击跳转
	const handlePrivilegeClick = (item) => {

		md.sensorLogTake({
			xcxClick: "积分服务页-首屏页面点击",
			pageName: "积分服务页-首屏",
			buttonName: `${item.name}`,
		});
		
		const url = vipQuanyiUrl.value.url; 
		const type = vipQuanyiUrl.value.type;
		const extra = vipQuanyiUrl.value.extra;

		jump({
			type: type,
			url: url,
			extra:extra
		})
	}
	

	const getRealtimePhoneNumber = async (e) => {
		console.log("获取手机号码", e);

		if (e.detail.errMsg !== "getPhoneNumber:ok") {
			uni.showToast({
				title: "请授权使用手机号",
				icon: "none",
			});
			return;
		}
		
		showRegisterLayer.value = true;
		await userStore.phoneCallback(e.detail);

		// try {
		// 	await userStore.phoneCallback(e.detail);
			
		// 	await userStore.loadMemberInfo();
		// 	initNetData();

		// 	// 检查是否需要显示注册层
		// 	// 如果是新用户或需要补充宝宝信息，显示注册层
		// 	if (userStore.memberInfo && userStore.memberInfo.memberId !== "not_login") {
		// 		// 显示注册层
		// 		showRegisterLayer.value = true;
		// 		console.log("用户登录成功，显示注册层 showRegisterLayer=", showRegisterLayer.value);
		// 	}
		// } catch (error) {
		// 	console.error("手机号授权处理失败:", error);
		// 	uni.showToast({
		// 		title: "登录失败，请重试",
		// 		icon: "none"
		// 	});
		// }
	};

	// 处理注册确认
	const handleRegisterConfirm = async (babyInfo) => {
		console.log("注册确认，宝宝信息:", babyInfo);
		await userStore.loadMemberInfo();
		showRegisterLayer.value = false;
		initNetData();
	};

	// 处理注册取消
	const handleRegisterCancel = () => {
		showRegisterLayer.value = false;
		console.log("注册取消");
	};


	const handleVipClick = () => {

        if(!islogin.value){
            return;
        }

		const item = vipIntegral.value.vipCardInfo;
		if(item.url== ""){
			return;
		}
		
		jump({
			type: item.type,
			url: item.url, 
			extra: item.extra
		})
		// if(islogin.value){
		// 	// console.log('点击了vip等级：',index);
		// }else{
		// }
	}

	

	// 手动显示注册层（用于测试）
	// const showRegisterDialog = () => {
	// 	console.log('手动显示注册层');
	// 	showRegisterLayer.value = true;
	// }

	// 添加 watch 监听 showRegisterLayer 变化
	// watch(showRegisterLayer, (newVal, oldVal) => {
	// 	console.log('showRegisterLayer 状态变化:', {
	// 		旧值: oldVal,
	// 		新值: newVal,
	// 		时间: new Date().toLocaleString()
	// 	});
	// }, { immediate: true });

	

</script>

<style lang="less" scoped>
@import '@/common.less';

.integral-container{
	width: 100%;
	// height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;

	// // 确保所有子容器正确布局
    // > view {
    //     width: 100%;
    //     flex-shrink: 0;
    // }

	.banner-swiper {
		width: 100%;
		height: 750rpx;
		flex-shrink: 0;
		// margin-bottom: 30rpx;
		
		.banner-img {
			width: 100%;
			height: 100%;
			// border-radius: 16rpx;
		}
		
		// 微信小程序指示点样式覆盖-----调整指示点大小
		// /deep/ .wx-swiper-dot {
		// 	width: 14rpx;
		// 	height: 14rpx;
		// 	margin: 0 8rpx;
			
		// 	&.wx-swiper-dot-active {
		// 		width: 28rpx;
		// 		border-radius: 14rpx;
		// 	}
		// }
	}

	.vip-swiper {
		width: 686rpx;
		height: 154rpx;
		// margin-top: 15rpx;
		margin-left:auto;
		margin-right: auto;
			.vip-area {
				width: 686rpx;
				height: 154rpx;
			// margin-left: 32rpx;
			// margin-right: 32rpx;
			// background: url('@{baseUrl}integral/1008/vipDetailBg.png') no-repeat center/cover;
				flex-direction: row;
				position: relative;
				display: flex;
				
				.vip-icon {
					width: 97rpx;
					height: 92rpx;
					margin-left: 30rpx;
					margin-top: 32rpx;
				}

				.vip-info {
					display: flex;
					flex-direction: column;
					position: relative;
					height: 100%;
					justify-content: center;
					margin-left: 15rpx;
					
					.vip-name {
						font-size: 25rpx;
						margin-bottom: 8rpx;
					}
					
					.title-container{
						width: 100%;
						display: flex;
						.vip-title1 {
							// margin-right: -15rpx;
							font-size: 31rpx;
							font-weight: bold;
							color: #1d1e25;
						}
						.vip-title{
							margin-top: 6rpx;
							width: 174rpx;
							height: 31rpx;
						}

					.phone-button{
						top:82rpx;
						position: absolute;
						width:285rpx;
						height: 36rpx;
						opacity: 0;
					}

					.rule-icon{
						margin-top: 14rpx;
						margin-left: 10rpx;
						width: 11rpx;
						height: 19rpx;
					}
						
						.current-tag {
							width: 60rpx;
							height: 37rpx;
							margin-left: 10rpx;
							margin-top: 5rpx;
						// background: url('@{baseUrl}integral/1008/tabNowBg.png') no-repeat center/contain;
							display: flex;
							align-items: center;
							justify-content: center;
							.tag-text {
								font-size: 22rpx;
								line-height: 37px;
								color: #b27c1e;
							}
						}
					}

					
				}
			}
	}

	.integral-detail {
		height: 144rpx;
		width: 100%;
		display: flex;
		align-items: center;
		// padding: 0 32rpx;
		margin-top: 15rpx;
		
		.excharge-btn {
			width: 178rpx;
			height: 144rpx;
			margin-left: 32rpx;
		}
		
		.inte-bar-area {
			position: relative;
			// flex: 1;
			height: 144rpx;
			width: 492rpx;
			// background: url('@{baseUrl}integral/1008/inteBarAreaBg.png') no-repeat center/cover;
			margin-left: 16rpx;
			// padding: 16rpx 24rpx;
			.integralClick {
				height: 100%;
				width: 100%;
			
			.header-row {
				position: relative;
				display: flex;
				justify-content: space-between;
				
					.integral-value{
						// background-color: #6f6d67;
						margin-left: 26rpx;
						margin-top: 23rpx;
				.integral-text {
					font-size: 28rpx;
					color: #1d1e25;
							margin-right: 13rpx;
						}
						.integral-total{
							// position: absolute;
							font-size: 24rpx;
							color:#1d1e25
						}
						.next-icon{
							top: -25rpx;
							margin-left: -28rpx;
							width: 66rpx;
							height: 27rpx;
							position: relative;
						}
					}
					
			}

			.progress-bar1 {
				position: relative;
				width: 444rpx;  // 根据图片宽度设置
				height: 14rpx;  // 根据图片高度设置
				// margin: 14rpx auto 16rpx auto;

				.upLvTxt1{
					font-size: 20rpx;
					color: #1d1e25;
					position: absolute;
					margin-left: 26rpx;
					margin-top: 5rpx;

					.upLvTxt2{
						color: #b27c1e;
						font-size: 20rpx;
					}
				}
				//预留进度条代码
				// .progress-bg1 {
				// 	margin-top: 0rpx;
				// 	position: absolute;
				// 	width: 444rpx;
				// 	height: 14rpx;
				// 	top: 0rpx;
				// 	left: 0rpx;
				// }
				// .progress-mask {
				// 	position: absolute;
				// 	width: 444rpx;
				// 	height: 14rpx;
				// 	overflow: hidden;
				// 	border-radius: 7rpx;
				// 	.progress-img1 {
				// 		position: absolute;
				// 		width: 444rpx;
				// 		height: 14rpx;
				// 		display: block;
				// 	}
				// }
			}
			
				
			}
			.info-row-container {
				position: relative;
				bottom: 45rpx;
			.info-row {
				display: flex;
				flex-direction: row;
				position: relative;
				height: 26rpx;
					// margin-top: -5rpx;
				margin-left: 26rpx;
				.count-text {
						font-size: 26rpx;
					color: #b27c1e;
				}
				
				.expire-text {
						margin-top: 2rpx;
					margin-left: 15rpx;
					font-size: 22rpx;
					color: #6f6d67;
				}

					.integral-detail-arrow{
						position: absolute;
						right: 20rpx;
						top: 8rpx;
						width: 11rpx;
						height: 19rpx;
					}
				}
				
			}

			.strategy-icon {
						position: absolute;
						right: 0rpx;
						top: 0rpx;
						width: 96rpx;
						height: 49rpx;
					}



			
		}
	}

	.privilege-container {
		// padding: 48rpx 0rpx;
		width: 686rpx;
		
		.privilege-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 40rpx;
			padding: 48rpx 16rpx;
			
			.title-text {
				font-size: 32rpx;
				color: #1d1e25;
				font-weight: bold;
				
				.highlight {
					color: #d3a358;
				}
			}
			
			.rule-container {
				display: flex;
				align-items: center;
				
				.rule-text {
					font-size: 24rpx;
					color: #1d1e25;
					margin-right: 8rpx;
				}
				
				.rule-icon {
					margin-right: 10rpx;
					width: 11rpx;
					height: 19rpx;
				}
			}
		}
		
		.privilege-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 36rpx;
			padding-left: 16rpx;
			.privilege-item {
				position: relative;
				
				// &:nth-child(1) { width: 68rpx; height: 87rpx; }  // 月月礼
				// &:nth-child(2) { width: 70rpx; height: 91rpx; }  // 生日礼
				// &:nth-child(3) { width: 94rpx; height: 87rpx; }  // 育儿礼
				// &:nth-child(4) { width: 48rpx; height: 87rpx; }  // 贺礼
				// &:nth-child(5) { width: 71rpx; height: 88rpx; }  // 新人礼
				// &:nth-child(6) { width: 95rpx; height: 87rpx; }  // 免费礼
				// &:nth-child(7) { width: 70rpx; height: 86rpx; }  // 专端礼
				// &:nth-child(8) { width: 94rpx; height: 87rpx; }  // 尝鲜礼
				// &:nth-child(9) { width: 70rpx; height: 89rpx; }  // 进阶礼
				// &:nth-child(10) { width: 71rpx; height: 90rpx; } // 溯源礼
				
				.privilege-icon {
					width: 100%;
					height: 100%;
				}
				
				.new-tip {
					position: absolute;
					top: -20rpx;
					right: -5rpx;
					width: 40rpx;
					height: 40rpx;
					pointer-events: none;
				}



				.phone-button-qyIcon{
					top:0rpx;
					position: absolute;
					opacity: 0;
				}
			}
		}
	}
	.vip-active-area {
		width: 686rpx;
		height: auto;
		margin-top: 62rpx;

		.vip-title{
			font-size: 32rpx;
			color: #1d1e25;
			font-weight: bold;
			margin-left: 16rpx;
		}

		.vip-active-swiper {
			width: 100%;
			height: 200rpx;
			flex-shrink: 0;
			margin-top: 30rpx;
			
			.vip-active-img {
				width: 100%;
				height: 100%;
				// border-radius: 16rpx;
			}
			
		}
		
	}

	

	.goods-container {
		width: 686rpx;
		height: auto;
		margin-top: 22rpx;
		
		
		.custom-tabs {
			display: flex;
			justify-content: space-between;
			
			.tab-item {
				width: 245rpx;
				height: 112rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				&.active {
					//https://duiba.oss-cn-hangzhou.aliyuncs.com/fh/integral/1008/tapSelectBg.png
					// background-image: url('@{baseUrl}integral/1008/tapSelectBg.png');
					background-size: 100% 100%;
					.tab-line1 { color: #1d1e25; }
					.tab-line2 { color: #b27c1e; }
				}
				
				.tab-line1 {
					font-size: 28rpx;
					font-weight: bold;
					color: #6f6d67;
					line-height: 40rpx;
				}
				.tab-line2 {
					font-size: 24rpx;
					color: #b2b2b0;
					line-height: 34rpx;
				}
			}
		}
		
		.goods-content {
			position: relative;
			margin-top: 30rpx;
			// margin-bottom: 50rpx;
			height: auto;
			
			.goods-list {
				// display: grid;
				// grid-template-columns: repeat(2, 1fr);
				gap: 20rpx;

				display: flex;
				flex-wrap: wrap;
				
				.goods-item {
					background-color: #6f6d67;
					position: relative;
					width: 333rpx;
					height: 459rpx;
					// background: #fff;
					// border-radius: 16rpx;
					// padding: 20rpx;

					// .goods-img-bg{
					// 	width: 333rpx;
					// 	height: 459rpx;
					// 	position: absolute;
					// 	top: 0rpx;
					// 	left: 0rpx;
					// }
					.goods-item-container{
						width: 100%;
						height: 100%;
						position: relative;
						.goods-img {
							width: 100%;
							height: 365rpx;
							margin-bottom: 20rpx;
						}

						.title-container1{
							width: 100%;
							// height: auto;
							margin-left: 20rpx;
							// margin-bottom: 10rpx;
							margin-top: -48rpx;
							.title-text1 {
								position: relative;
								width:100%;
								font-size: 28rpx;
								color: #1d1e25;
							}
						}

						
						.price-text {
							// height: auto;
							position: relative;
							font-size: 28rpx;
							color: #b27c1e;
							margin-top: 10rpx;
							margin-left: 20rpx;
							
							.num {
								font-size: 32rpx;
								margin-right: 5rpx;
							}
						}

						.num0 {
							position: relative;
							font-size: 28rpx;
							margin-left: 20rpx;
							color: #b27c1e;
							.price-text0{
								font-size: 20rpx;
							}
							.price-text1{
								font-size: 36rpx;
							}
						}
					}
					
				}
			}
		}
	}

	.more-container {
		// width: 686rpx;
		height: auto;
		margin-top:28rpx;
		margin-bottom: 28rpx;
		
		.more-text {
			font-size: 24rpx;
			color: #1d1e25;
			margin-right: 10rpx;
		}
		
		.more-arrow {
			width: 11rpx;
			height: 19rpx;
		}
	}

	.content{
		width: 100%;
		height: 180rpx;
	}

	// 测试注册层按钮样式
	// .test-register-btn {
	// 	width: 300rpx;
	// 	height: 80rpx;
	// 	background: #d3a358;
	// 	border-radius: 40rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	margin: 20rpx auto;
		
	// 	.test-btn-text {
	// 		font-size: 28rpx;
	// 		color: #fff;
	// 		font-weight: 500;
	// 	}
	// }

	// 调试信息样式
	// .debug-info {
	// 	width: 600rpx;
	// 	margin: 20rpx auto;
	// 	padding: 20rpx;
	// 	background: rgba(0, 0, 0, 0.1);
	// 	border-radius: 10rpx;
		
	// 	.debug-text {
	// 		display: block;
	// 		font-size: 24rpx;
	// 		color: #666;
	// 		margin-bottom: 10rpx;
	// 		line-height: 1.5;
	// 	}
	// }

}


</style>

