<template>
	<view class="bg">
		<image :src="showImg('/uploads/20250411/c2f08776888c2c46ffbd2c48cc232baf.png')" class="topImg" />
		<view class="rule" @click="goRule()">
			<text style="padding-bottom: 6rpx;display: inline-block;">活动规则</text>
			<uni-icons color="#ffffff" type="right" size="14"></uni-icons></view>
		
		<image :src="showImg('/uploads/20250411/98c8999a389c972aa7e2af20595e4045.png')" class="coupon-header">
		
		<view class="coupon-box">
			<view class="coupon-item" v-for="(item,i) in couponList" :key="i" @click="getCoupon(item)"
				:style="{'backgroundImage':`url(${item.img})`}">
				<image src="https://tongli.sz-trip.com/uploads/20250411/c5c7e3ee78863380bbdace18bd8ac228.png" class="coupon-btn" />
			</view>
		</view>
		
		<view class="box">
			<view class="item" v-for="item in list" :key="item.id" @click="goDetailByType(item.goods)">
				<image class="item-img" :src="showImg(item.goods.image)" mode=""></image>
				<view class="content">
					<view>
						<view class="title text-overflowRows">{{item.goods.title}}</view>
						<view class="tag-content" v-if="item.goods.goods_new_tag">
							<view class="tag-item" v-for="(tag,i) in item.goods.goods_new_tag.split(',')" :key="i">
								{{tag}}
							</view>
						</view>
					</view>
					
					<view class="bottom">
						<view >
							<text class="oldPrice">￥{{item.goods.price/100}}</text>
							<text class="price">{{item.goods.money/100}}</text>
						</view>
						<view class="buy">
							抢购
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<image v-if="goTop" @click="Totop()" class="goTopImg" src="https://tongli.sz-trip.com/uploads/20250411/83aaaa1a483aa1effe82f6a869ffce50.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponList: [
					{id: 1, price:5, title: '满15减5',img: 'https://tongli.sz-trip.com/uploads/20250411/c94ac0d977b4767d2809134fdace5a62.png'},
					{id: 2, price:10, title: '满30减10',img: 'https://tongli.sz-trip.com/uploads/20250411/15a8af6400b71c5b7e2f8da78ead6f04.png'},
					{id: 3, price:15, title: '满50减15',img: 'https://tongli.sz-trip.com/uploads/20250411/529b589eec9ac511f13fadbdd8188f2c.png'},
					{id: 4, price:20, title: '满60减20',img: 'https://tongli.sz-trip.com/uploads/20250411/883734155ee9cbbbcee590194f6143be.png'},
				],
				
				list:[],
				finished: false,
				isReceive: true,
				goTop: false
			}
		},
		onReady() {
			this.getCouponId()
			this.getList()
		},
		onPageScroll(e){
			 // 监听页面滚动
			if(e.scrollTop>200){
				this.goTop=true;
			}else{
				this.goTop=false;
			}
		},
		methods: {
			Totop(){
				uni.pageScrollTo({
					scrollTop: 0,//滚动到页面的目标位置
					duration: 300
				});
			},
			// 获取优惠券id
			getCouponId () {
				this.Post({id: 256},'/api/multimedia/detail').then(res=>{
					if (res.code == 1 && res.data) {
						let ids = res.data.ext_link.split(',')
						for(let i=0;i<this.couponList.length;i++) {
							this.couponList[i].id = ids[i]
						}
						console.log(this.couponList)
					}
				})
			},
			
			// 根据产品分类获取产品列表
			getList(){
				this.Post({
					tag_id: 57,
					offset: this.list.length,
					limit: 10,
				},'/api/tag/getGoodsByTagId').then(res => {
					this.list = [...this.list, ...res.data];
					if (res.data.length < 10) {
						this.finished = true
					}
				})
			},
			
			goRule() {
				uni.navigateTo({
					url: '/subPackages/activity/commonRule?id=1&title=花开盐都 春游水乡-活动规则'
				})
			},
			getCoupon (item) {
				if(!this.isReceive) {
					uni.showToast({
						title:'短时间内请勿重复点击！',
						icon:'none'
					})
				}

				if(item.id && this.isReceive){
					this.isReceive = false
					setTimeout(() => {
						this.isReceive = true
					},3000)
					this.Post({
						ids: item.id
					},'/api/coupon/getCouponsByActivityIds').then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						
					})
					
					// this.Post({
					// 	ids: item.id,
					// 	is_all: 1
					// },'/api/coupon/getNewCouponsByActivitiesIds').then(res => {
						
					// })
				}
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	
	.bg {
		background: #AFEBB7;
		min-height: 100vh;
		padding-bottom: 120rpx;
		position: relative;
	}
	
	.topImg {
		width: 750rpx;
		height: 893.33rpx;
	}
	.rule{
		width: 58rpx;
		height: 170rpx;
		background: rgba(255,122,69,0.86);
		border-radius: 7rpx 0rpx 0rpx 7rpx;
		border: 2px solid #FF503B;
		font-weight: 500;
		font-size: 27rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		top: 529rpx;
		right: 0;
		padding: 8rpx 14rpx 0;
		line-height: 28rpx;
	}
	
	.box {
		margin-top: 50rpx;
		padding: 0 26rpx;
	}
	
	.item {
		margin-bottom: 22rpx;
		width: 100%;
		height: 272.67rpx;
		position: relative;
	}
	
	.item-img {
		width: 307rpx;
		height: 100%;
		background: #FA6216;
		border-radius: 20rpx;
	}
	
	.content {
		height: 100%;
		width: 459rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		right: 0;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.title {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #00132F;
	}
	
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.oldPrice{
		font-weight: 400;
		font-size: 24rpx;
		color: #66676A;
		line-height: 15rpx;
		text-decoration-line: line-through;
		display: block;
	}
	.price {
		font-size: 33.33rpx;
		font-family: PingFangSC;
		font-weight: bold;
		color: #F75008;
	}
	.price::before {
		content: '￥';
		font-size: 24rpx;
	}
	.tag-content {
		display: flex;
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		.tag-item{
			border-radius: 20rpx;
			border: 1px solid #FFA416;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFA416;
			line-height: 23rpx;
			padding:10rpx 20rpx;
			flex-shrink: 0;
			margin-right: 13rpx;
		}
	}
	
	
	.buy {
		width: 107rpx;
		height: 53rpx;
		background: linear-gradient(90deg, #FF413B, #FFAB2E);
		border-radius: 27rpx;
		text-align: center;
		line-height: 53rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 27rpx;
		color: #FFFFFF;
	}
	
	.coupon-header{
		width: 450rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	.coupon-box{
		width: 697rpx;
		height: 597rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: -50rpx auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 62rpx 32rpx 0;
		position: relative;
		z-index: 1;
		
		
		
		.coupon-item{
			width: 306.67rpx;
			height: 233.33rpx;
			display: flex;
			background-size: 100% 100%;
			margin-bottom: 24rpx;
		}
		.coupon-price{
			font-weight: 600;
			font-size: 67rpx;
			color: #E71F57;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.coupon-content{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			flex: 1;
		}
		.coupon-btn{
			width: 205.33rpx;
			height: 48.67rpx;
			margin: 161rpx auto 0;
		}
	}
	.goTopImg{
		width: 102rpx;
		height: 102rpx;
		position: fixed;
		right: 28rpx;
		bottom: 48rpx;
	}
</style>
