积分页迭代

views/Integral.vue

@@ -10,6 +10,7 @@
 			indicator-color="#dfddd9"
 			indicator-active-color="#b27c1e"
 			:indicator-top="596"
+			v-if="swiperData?.length > 0"
 		>
 			<swiper-item v-for="(item, index) in swiperData" :key="index">
 				<image 
@@ -21,6 +22,8 @@
 			</swiper-item>
 		</swiper>
 
+		<view class="banner-swiper-space" v-else></view>
+
 		<!-- 会员等级区域 -->
 		<swiper 
 			class="vip-swiper"
@@ -32,24 +35,29 @@
 		>
 			<swiper-item 
 				class="vip-area"
-				v-for="(item, index) in vipLvDatas" 
+				v-for="(item, index) in integralData?.vipLvInfo" 
 				:key="index"
 				@click="handleVipClick"
 				:style="{
-					background: `url(${$baseUrl}integral/${tupianBanben}/${item?.vipIconBg}) no-repeat center/contain`
+					background: `url(../../static/integral/${tupianBanben}/${item?.vipLvBg}) no-repeat center/contain`
 				}"
 			>
 					<image 
 						class="vip-icon" 
-					:src="$baseUrl + `integral/${tupianBanben}/${item?.vipIcon}`"
-							mode="aspectFit"
-						/>
-						<view class="vip-info">
+						:src="`/static/integral/${tupianBanben}/${item?.vipLvIcon}`"
+						mode="aspectFit"
+					/>
+					<image class="current-tag"
+						:src="`/static/integral/${tupianBanben}/${item?.currentLvTip}`"
+						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
@@ -71,19 +79,8 @@
 							: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>
@@ -415,14 +412,42 @@
 	const integralData = ref({
 	"tupianBanben": "1013",
 	"swiper": [
+	],
+	"vipLvInfo":[
 		{
-			"bannerImg": "integralBannerBg1.png",
-			"url": "",
-			"type": 2,
-			"extra": {
-				"appId": "wx4205ec55b793245e",
-				"envVersion": "release"
-			}
+			"currentLvTip":"currentLvTip0.png",
+			"barVip":"barVip0.png",
+			"barBgVip":"barBgVip0.png",
+			"vipLvBg":"vipLvBg0.png",
+			"vipLvIcon":"vipLvIcon0.png",
+		},
+		{
+			"currentLvTip":"currentLvTip1.png",
+			"barVip":"barVip1.png",
+			"barBgVip":"barBgVip1.png",
+			"vipLvBg":"vipLvBg1.png",
+			"vipLvIcon":"vipLvIcon1.png",
+		},
+		{
+			"currentLvTip":"currentLvTip2.png",
+			"barVip":"barVip2.png",
+			"barBgVip":"barBgVip2.png",
+			"vipLvBg":"vipLvBg2.png",
+			"vipLvIcon":"vipLvIcon2.png",
+		},
+		{
+			"currentLvTip":"currentLvTip3.png",
+			"barVip":"barVip3.png",
+			"barBgVip":"barBgVip3.png",
+			"vipLvBg":"vipLvBg3.png",
+			"vipLvIcon":"vipLvIcon3.png",
+		},
+		{
+			"currentLvTip":"currentLvTip4.png",
+			"barVip":"barVip4.png",
+			"barBgVip":"barBgVip4.png",
+			"vipLvBg":"vipLvBg4.png",
+			"vipLvIcon":"vipLvIcon4.png",
 		}
 	],
 	"viplv": {
@@ -1378,8 +1403,8 @@
 		
 
 
-		const {data} = await fetchIntegralJSON();
-		integralData.value = {...data};
+		// const {data} = await fetchIntegralJSON();
+		// integralData.value = {...data};
 
 		swiperData.value = integralData.value.swiper;
 		vipLvIcons.value = integralData.value.viplv.imgs;
@@ -1434,19 +1459,20 @@
 			nickName.value = memberInfo.value.memberName;
 			
 			// 清空之前的数据
-			vipLvDatas.value = [];//??????????
+			// vipLvDatas.value = [];//??????????
+			// vipLvDatas.value = integralData.value.vipLvInfo;
 			
-			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];
-			});
+			// 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 = '未登录';
@@ -1857,15 +1883,21 @@
 		// }
 	}
 
+	.banner-swiper-space{
+		width: 100%;
+		height: 160rpx;
+		flex-shrink: 0;
+	}
+
 	.vip-swiper {
 		width: 686rpx;
-		height: 154rpx;
+		height: 256rpx;
 		// margin-top: 15rpx;
 		margin-left:auto;
 		margin-right: auto;
 			.vip-area {
-				width: 686rpx;
-				height: 154rpx;
+				width: 687rpx;
+				height: 256rpx;
 			// margin-left: 32rpx;
 			// margin-right: 32rpx;
 			// background: url('@{baseUrl}integral/1008/vipDetailBg.png') no-repeat center/cover;
@@ -1880,6 +1912,16 @@
 					margin-top: 32rpx;
 				}
 
+				.current-tag {
+					width: 60rpx;
+					height: 37rpx;
+					margin-left: 10rpx;
+					margin-top: 5rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
 				.vip-info {
 					display: flex;
 					flex-direction: column;
@@ -1908,36 +1950,22 @@
 							height: 31rpx;
 						}
 
-					.phone-button{
-						top:82rpx;
-						position: absolute;
-						width:285rpx;
-						height: 36rpx;
-						opacity: 0;
-					}
+						.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;
+						.rule-icon{
+							margin-top: 14rpx;
 							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;
-							}
+							width: 11rpx;
+							height: 19rpx;
 						}
+						
+						
 					}