tongli_WeChat/subPackages/user/getCoupon.vue

<template>
	<view class="bg">
		<view class="topLeft flex-center">
			<span class="iconfont" @click="goBack">&#xe660;</span>
		</view>
		<img :src="showImg(headImg)" class="topImg" />
		
		<view v-for="(item,index) in list" :key="index" class="item">
			<view class="item-left">
				<view>{{item.discounts / 100}}</view>
				<view>满{{item.min_limit / 100}}可用</view>
			</view>
			<view class="item-right flex-column">
				<view>{{item.discounts / 100}}元优惠券</view>
				<view class="subtitle text-overflow">有效期：{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}</view>
				<view class="flex-between">
					<view class="subtitle" @click="note = item.note;$refs.popupRule.open()">使用规则 ></view>
					<view class="btn" @click="getCoupon(item.id)">立即领取</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popupRule" type="center">
			<view class="rule-box" >
				{{note}}
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				headImg: '',
				note: ''
			}
		},
		onReady() {
			this.getHeadImg('coupon').then(res => {this.headImg = res})
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.Post({
					tag_id: 2
				},'/api/coupon/getTagCouponActList').then(res => {
					this.list = res.data
				})
			},
			// 领取优惠券
			getCoupon(id) {
				this.Post({
					ids: id
				},'/api/coupon/getCouponsByActivityIds').then(res => {
					if(res.code == 1) {
						uni.showToast({
						    title: '优惠券领取成功!',
						    icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: 200rpx;
	}
	
	.topImg {
		width: 100%;
		height: 440rpx;
	}
	
	.item {
		width: 696.67rpx;
		height: 200rpx;
		background-image: url('https://static.ticket.sz-trip.com/tongli/images/index/couponBg.png');
		background-size: 100% 100%;
		margin: 27rpx auto 0;
		padding: 0 20rpx 0 0rpx;
		display: flex;
		justify-content: space-between;
		
		.item-left {
			width: 240rpx;
			padding: 45rpx 0 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;
			text-align: center;
			
			&>view:first-child {
				font-weight: bold;
				font-size: 57rpx;
				color: #FFFFFF;
			}
			&>view:first-child::before {
				font-size: 32rpx;
				content: '￥';
			}
		}
		
		.item-right {
			width: 410rpx;
			height: 200rpx;
			padding: 25rpx 0 20rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			justify-content: space-between;
			
			.subtitle {
				font-weight: 400;
				font-size: 25rpx;
				color: #333333;
			}
			
			.btn {
				width: 140rpx;
				line-height: 51rpx;
				background: linear-gradient(0deg, #FC5109, #FC930A);
				border-radius: 25rpx;
				text-align: center;
				font-weight: 500;
				font-size: 27rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.rule-box {
		width: 70vw;
		padding: 20rpx;
		background-color: #fff;
	}
</style>