<template>
	<view class="bg">
		<view class="top-box">
			<view>积分余额</view>
			<view class="points-num" style="margin: 24rpx 0 30rpx;">
				<text style="padding-right: 6rpx;">300</text>
				<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
			</view>
			<view>
				<view>已连签0天</view>
				<view class="sub-text">注：连续签到可获得更多积分，断签后重新累积</view>
			</view>
			
			<view class="day-sign-box">
				<view class="day-sign-item" v-for="(item,i) in daySign" :key="i">
					<view class="day-sign-points">+{{item.num}}</view>
					<view :class="['line','line'+i,i==lastSign?'last-line':'',i<lastSign?'active':'']">
						<view class="dot"></view>
						<view class="last-sign" v-if="i==lastSign"></view>
					</view>
				</view>
			</view>
			
			<view class="rule-area">
				<view class="rule-btn">积分规则</view>
				<view class="rule-btn" style="margin-top: 26rpx;">积分明细</view>
			</view>
			
			<view :class="['sign-btn', !isSign?'active':'']">
				点击签到
			</view>
			
			<view>
			<image src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
			</view>
		</view>
		
		<view class="product-box">
			<view class="flex-between">
				<view style="font-weight: bold;font-size: 35rpx;color: #000000;">每日精选</view>
				<view style="font-weight: 500;font-size: 27rpx;color: #999999;">1300人已兑换</view>
			</view>
			
			<view class="jx-box no-scrollbar">
				<view class="jx-item" v-for="(item,i) in JXList" :key="i">
					<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image>
					<view class="jx-content" >
						<view class="title text-overflowRows">{{item.title}}</view>
						<view class="flex-between">
							<view class="flex-between">
								<text class="price" style="padding-right: 6rpx;">{{item.price}}</text>
								<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
							</view>
							<view class="btn">兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSign: false,
				// 7日连续签到日期 0-6
				lastSign: 3,
				daySign: [
					{num:1, active:true},
					{num:2, active:true},
					{num:3, active:true}, 
					{num:4, active:false},
					{num:5, active:false},
					{num:6, active:false},
					{num:7, active:false},
				],
				JXList: [],
			}
		},
		onReady () {
			this.getJXList()
		},
		methods: {
			getJXList(){
				this.Post({
					tag_id: 95,
					offset: 0,
				    limit: 999,
				},'/api/product/get_product_by_tag_subject').then(res => {
					if (res.data.length < this.viewNum) {
						this.viewNum = 999
					}
					this.JXList = res.data.list
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bg{
		width: 750rpx;
		min-height: 100vh;
		background: #FFFFFF;
	}
	.point-image{
		width: 26rpx;
		height: 26rpx;
	}
	.top-box{
		width: 100%;
		height: 600rpx;
		padding: 26rpx;
		background: linear-gradient(-26deg, #FCE2C1, #F0BD90);
		font-weight: 500;
		font-size: 27rpx;
		color: #6E3D1D;
		position: relative;
		.points-num{
			font-weight: 500;
			font-size: 53rpx;
			color: #000000;
			display: flex;
			align-items: center;
		}
		
		.sub-text{
			font-weight: 500;
			font-size: 24rpx;
			color: rgba(110, 61, 29, 0.8);
		}
	
		.day-sign-box{
			width: 100%;
			margin: 21rpx 0 42rpx;
			display: flex;
			
			.day-sign-item{
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				.line{
					width: 100%;
					height: 8rpx;
					background: #FFF0B3;
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: visible;
					position: relative;
					.dot{
						width: 20rpx;
						height: 20rpx;
						background: #FFF0B3;
						border-radius: 50%;
					}
					&.line0{
						width: 55%;
						margin-left: auto;
						justify-content: flex-start;
					}
					&.line6{
						width: 55%;
						margin-right: auto;
						justify-content: flex-end;
					}
					&.active{
						background: #FB2A54;
						.dot{
							background: #FB2A54;
						}
					}
					&.last-line{
						.dot{
							background: #FB2A54;
						}
						.last-sign{
							width: 100%;
							background: #FB2A54;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							height: 100%;
							border-radius: 0 10rpx 10rpx 0;
							
						}
					}
				}
			}
			
			.day-sign-points{
				width: 93.33rpx;
				height: 113.33rpx;
				background-image: url("https://static.ticket.sz-trip.com/uploads/20250917/7f2c2ab38a4a6e97e876bc370786f6b7.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-weight: bold;
				font-size: 24rpx;
				color: #FB2A54;
				text-align: center;
				padding-top: 54rpx;
				position: relative;
			}
			
		}
	
		.rule-area{
			position: absolute;
			width: 134rpx;
			top: 26rpx;
			right: 0;
			.rule-btn{
				width: 134rpx;
				height: 40rpx;
				background: #F0BD90;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}
		
		.sign-btn{
			width: 100%;
			height: 67rpx;
			background: #FFFFFF;
			border-radius: 33rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #FB2A54;
			text-align: center;
			line-height: 67rpx;
			&.active{
				color: #FFFFFF;
				background: linear-gradient(-90deg, #FB2A54, #FF773D);
			}
		}
	}

	.product-box{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 32rpx 26rpx;
		margin-top: -20rpx;
		position: relative;
	}
	.jx-box{
		padding: 22rpx 0 80rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow-y: auto;
		
		.jx-item{
			width: 253rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			margin-right: 25rpx;
			flex-shrink: 0;
			.jx-content{
				width: 100%;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.jx-head-image{
				width: 253rpx;
				height: 253rpx;
				border-radius: 13rpx;
			}
			.price{
				font-weight: bold;
				font-size: 32rpx;
				color: #FB2A54;
			}
			.btn{
				width: 93rpx;
				height: 47rpx;
				background: #FB2A54;
				border-radius: 23rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 47rpx;
			}
		}
	}
</style>