yandu_WeChat/subPackages/activity/springTour.vue

<template>
	<view class="bg">
		<img :src="showImg('/uploads/20250401/c1cd30fafca4c753259aa3272dc7852e.png')" class="topImg" />
		
		<img :src="showImg('/uploads/20250401/d87051740887376b0cb9b57b37485017.png')" class="coupon-header">
		
		<view class="coupon-box">
			<view class="rule" @click="goRule()">规则</view>
			
			<view class="coupon-item" v-for="(item,i) in couponList" :key="i" @click="getCoupon(item)">
				<view class="coupon-price">
					<view >
						<text style="font-weight: bold;font-size: 25rpx;">￥</text>{{item.price}}
					</view>
				</view>
				<view class="coupon-content">
					<view style="font-weight: bold;font-size: 24rpx;color: #333333;">{{item.title}}</view>
					<view class="coupon-btn">立即领取</view>
				</view>
			</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 class="title text-overflowRows">{{item.goods.title}}</view>
					<view class="bottom">
						<view class="price">
							{{item.goods.money/100}}
						</view>
						<view class="buy">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponList: [
					{id: 1, price:5, title: '满15减5'},
					{id: 2, price:10, title: '满30减10'},
					{id: 3, price:15, title: '满50减15'},
					{id: 4, price:20, title: '满60减20'},
				],
				
				list:[],
				finished: false,
				isReceive: true,
			}
		},
		onReady() {
			this.getCouponId()
			this.getList()
		},
		methods: {
			// 获取优惠券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: #A2EEC0;
		min-height: 100vh;
		padding-bottom: 26rpx;
	}
	
	.topImg {
		width: 750rpx;
		height: 440rpx;
	}
	
	.box {
		margin-top: 50rpx;
		// border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 0 26rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.item {
		margin-bottom: 22rpx;
		width: 335rpx;
		height: 448rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
		border-radius: 13rpx;
	}
	
	.item-img {
		width: 100%;
		height: 266.67rpx;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}
	
	.content {
		height: 145rpx;
		padding: 0 13rpx 13.33rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.title {
		font-family: PingFang SC;
		font-size: 29rpx;
		color: #000000;
		width: 291rpx;
		font-weight: 500;
	}
	
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.price {
		font-size: 33.33rpx;
		font-family: PingFangSC;
		font-weight: bold;
		color: #F40F0B;
	}
	.price::before {
		content: '￥';
		font-size: 24rpx;
	}
	.price::after {
		content: '起';
		font-size: 20rpx;
		color: #666;
		font-weight: 400;
	}
	
	.buy {
		width: 151rpx;
		height: 48rpx;
		background: linear-gradient(180deg, #FB6493, #E2235B);
		border-radius: 24rpx;
		text-align: center;
		line-height: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 27rpx;
		color: #FFFFFF;
	}
	
	.coupon-header{
		width: 589.33rpx;
		height: 75.33rpx;
		display: block;
		margin: 0 auto;
		position: relative;
		margin-top: 35rpx;
		z-index: 2;
	}
	.coupon-box{
		width: 697rpx;
		height: 413rpx;
		background: #FFFDEB;
		border-radius: 20rpx;
		margin: -50rpx auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 92rpx 17rpx 0;
		position: relative;
		z-index: 1;
		
		.rule{
			width: 83rpx;
			height: 40rpx;
			background: #27967B;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			font-weight: 500;
			font-size: 25rpx;
			color: #FFFFFF;
			position: absolute;
			top: 13rpx;
			right: 0;
			text-align: center;
			line-height: 40rpx;
		}
		
		.coupon-item{
			width: 327.33rpx;
			height: 120.67rpx;
			display: flex;
			background-image: url("https://tongli.sz-trip.com/uploads/20250401/df0ba64e58d91457c062be571ea51b3e.png");
			background-size: 100% 100%;
		}
		.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: 133rpx;
			height: 40rpx;
			background: linear-gradient(180deg, #FB6493, #E2235B);
			border-radius: 20rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 40rpx;
		}
	}

</style>