<template>
	<view class="indexPage">
		<image class="indexBG" src="@/integralMall/static/indexBG.png" mode="widthFix"></image>
		<view class="userBox">
			<text>积分余额</text>
			<view class="">
				<text class="number">23980</text>
				<text class="jifen">积分</text>
			</view>
		</view>
		<view class="card">
			<view class="cardHead">
				<image class="miaoshaImg" src="@/integralMall/static/miaoshaImg.png" mode="widthFix"></image>
				<text class="shuxian">|</text>
				<text>距结束</text>
				<uni-countdown class="countdown" :day="1" :hour="2" :minute="30" :second="0" color="#3A71FF" background-color="#FFFFFF" />
			</view>
			<view class="cardBody">
				<view class="list">
					<view class="listItem" v-for="item in 5">
						<view class="imgBox">
							<image src="@/integralMall/static/test/test.png" mode="aspectFill"></image>
							<uni-tag text="剩余23件" class="unitag"
								custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
							</uni-tag>
						</view>
						<view class="itemBody">
							<text class="title">iPhone16 pro</text>
							<view class="qiangBox">
								<image class="qiangtag" src="@/integralMall/static/qiangtag.png" mode="aspectFill"></image>
								<text class="number">20000<text class="jifen">积分</text></text>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="headBar">
			<view class="barItem" :class="activeIndex === 0?'active':''" @click="changeBar(0)">
				<text>全部商品</text>
				<view class="rect" v-show="activeIndex === 0"></view>
			</view>
			<view class="barItem" :class="activeIndex === 1?'active':''" @click="changeBar(1)">
				<text>我可兑换</text>
				<view class="rect" v-show="activeIndex === 1"></view>
			</view>
		</view>
		<view class="proList">
			<view class="proItem" v-for="item in 5" @click="$util.redirectTo('./pro/detail')">
				<view class="proLeft">
					<image class="proImg" src="@/integralMall/static/test/test2.png" mode="aspectFill"></image>
					<uni-tag text="剩余23件" class="unitag"
						custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
					</uni-tag>
				</view>
				<view class="proRight">
					<text class="proName">索尼丨索尼A7M4全画幅微单数码相机套装ILCE-7M4高清旅游摄影拍照</text>
					<view class="tagBox">
						<uni-tag text="品牌正品" class="unitag"
							custom-style="background-color: #000000; border: none; color: #FFCC33;">
						</uni-tag>
						<uni-tag text="限时限量" class="unitag"
							custom-style="background-color: #07C160; border: none; color: #FFF9F9;">
						</uni-tag>
					</view>
					<view class="buyBox">
						<text class="number">25000<text class="jifen">积分</text></text>
						<image class="qiang" src="@/integralMall/static/qiang.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'	
const activeIndex = ref(0)
const changeBar = (index)=>{
	if(activeIndex.value === index) return;
	activeIndex.value = index
}

</script>

<style lang="scss" >
.indexPage{
	position: relative;
	padding-bottom: 26rpx;
	.indexBG{
		width: 100%;
		height: auto;
	}
}
.userBox{
	position: relative;
	z-index: 10;
	margin: -40rpx 26rpx 26rpx;
	background: linear-gradient( 180deg, #D0DDFF 0%, #FFFFFF 100%);
	box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	box-sizing: border-box;
	padding: 40rpx 26rpx;
	@include fontStyle(28rpx,#000000,left,500,38rpx);
	@include flexBox(between,center);
	.number{
		@include fontStyle(58rpx,#333333,right,800,68rpx);
		padding-right: 10rpx;
	}
	.jifen{
		@include fontStyle(24rpx,#333333,right,400,38rpx);
	}
}	       

.card{
	margin: 26rpx;
	background: linear-gradient( 360deg, #094EF3 0%, #4B91FE 45%, #D6E4FD 100%);
	box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	box-sizing: border-box;
	padding: 26rpx;
	.cardHead{
		width: 100%;
		@include flexBox(start,center);
		padding-bottom: 26rpx;
		@include fontStyle(34rpx,#000000,left,500,44rpx);
		.miaoshaImg{
			width: 142rpx;
			height: auto;
		}
		.shuxian{
			padding: 0 26rpx;
		}
		.countdown{
			margin-left: 26rpx;
		}
	}
	.cardBody{
		.list{
			width: 100%;
			@include flexBox(start,center);
			overflow-x: auto;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				display: none;
			}
			.listItem{
				width: 240rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				&:not(:last-child){
					margin-right: 26rpx;
				}
				.imgBox{
					width: 100%;
					position: relative;
					image{
						width: 240rpx;
						height: 240rpx;
						border-radius: 18rpx 18rpx 0 0;
					}
					.unitag{
						position: absolute;
						top: 180rpx;
						left: 10rpx;
					}
				}
				.qiangBox{
					position: relative;
				}
				.qiangtag{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 46rpx;
				}
				.itemBody{
					box-sizing: border-box;
					padding: 10rpx;
					.title{
						@include fontStyle(32rpx,#000000,left,500,44rpx);
						@include truncateText(1);
						padding-bottom: 26rpx;
					}
					.number{
						position: relative;
						z-index: 10;
						padding-left: 10rpx;
						@include fontStyle(28rpx,#FFFFFF,left,800,44rpx);
						.jifen{
							@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
						}
					}	
				}
								
			}
		}
	}
}

.headBar{
	width: 60%;
	margin: 46rpx auto;
	@include flexBox(around,center);
	.barItem{
		position: relative;
		@include fontStyle(34rpx,#3A71FF,left,400,48rpx);
		&.active{
			@include fontStyle(34rpx,#3A71FF,left,bold,48rpx);
		}
		.rect{
			position: absolute;
			bottom: 0;
			left: 50%;
			z-index: -1;
			transform: translate(-50%,0%);
			width: 100%;
			height: 20rpx;
			background: linear-gradient( 180deg, #6694FF 0%, #FFFFFF 100%);
		}
	}
	
}

.proList{
	.proItem{
		margin: 26rpx;
		@include flexBox(start,start);
		.proLeft{
			position: relative;
			margin-right: 16rpx;
			.proImg{
				width: 252rpx;
				height: 252rpx;
				border-radius: 18rpx;
			}
			.unitag{
				position: absolute;
				top: 200rpx;
				left: 16rpx;
				z-index: 2;
			}	
		}
		.proRight{
			flex: 1;
			min-height: 252rpx;
			@include flexBox(between,start,column);
			.tagBox{
				margin: 10rpx 0;
				@include flexBox(start,center);
				.unitag{
					margin-right: 20rpx;
				}
			}
			.proName{
				@include fontStyle(28rpx,#000000,left,500,38rpx);
				@include truncateText();
			}
			.buyBox{
				width: 100%;
				height: 80rpx;
				background: #E6EDFF;
				border-radius: 10rpx;
				@include fontStyle(40rpx,#3A71FF,left,600,48rpx);
				@include flexBox(between,center);
				box-sizing: border-box;
				padding-left: 26rpx;
				.jifen{
					@include fontStyle(24rpx,#3A71FF,left,500,38rpx);
					padding-left: 10rpx;
				}
				.qiang{
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
}
</style>
