qjm/pages/index/coupon.vue

<template>
	<view class="content">
		<scroll-view class="coupon-box clamp" :style="{ height: height }">
			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
				<view class="row flex">
					<view class="list-money flex">
						<image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
						<view class="list-money-text">
							<view class="tit" :class="{ noAction: item.is_use }">
								<text>{{ item.coupon_price }}</text>
							</view>
						</view>
					</view>
					<view class="list-interval position-relative">
						<view class="bottom"></view>
						<view class="top"></view>
					</view>
					<view class="row_list_right">
						<view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
						<view class="right_time">
							<text>满{{ item.use_min_price }}使用</text>
						</view>
					</view>
					<view class="right_use noAction" v-if="item.is_use" @click="setCoupons(item)">
						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
					</view>
					<view class="right_use action" v-else @click="setCoupons(item)">
						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getCouponsList } from '@/api/index.js';
import { setCoupons, getwCouponsList } from '@/api/functionalUnit.js';
export default {
	data() {
		return {
			height: '',
			couponArray: [] //可领取优惠券
		};
	},
	onLoad() {
		this.loadData();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.coupon-box').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	methods: {
		loadData() {
			getwCouponsList({}).then(({ data }) => {
				this.couponArray = data;
			});
		},
		setCoupons(item) {
			// 判断是否已经领取了优惠券
			let obj = this;
			uni.showModal({
				title: '领取提示',
				content: '是否领取优惠券',
				success(e) {
					if (e.confirm) {
						setCoupons({ couponId: item.id }).then(e => {
							item.is_use = true;
							uni.showToast({
								title: '领取成功',
								type: 'top',
								duration: 2000
							});
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
}
$card-color-action: #fc4141;
.row {
	padding-right: 10rpx;
	border-radius: 15rpx;
	margin: 0 25rpx;
	margin-bottom: 25rpx;
	height: 200rpx;
	overflow: hidden;
	background-color: #ffffff;
	.list-interval {
		border: 1px dashed $border-color-light;
		height: 100%;
		.top,
		.bottom {
			border-radius: 100rpx;
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			background-color: $page-color-base;
			right: -15rpx;
		}
		.top {
			top: -18rpx;
		}
		.bottom {
			bottom: -18rpx;
		}
	}
	.list-money {
		height: 100%;
		image {
			height: 100%;
			width: 20rpx;
		}
		.list-money-text {
			width: 220rpx;
			padding: 0 25rpx;
			text-align: center;
			color: $font-color-light;
			.tit {
				padding: 15rpx 0rpx;
				font-size: 55rpx;
				font-weight: bold;
				&.action {
					color: $card-color-action;
				}
			}
			.price {
				padding-bottom: 25rpx;
			}
		}
	}
	.row_list_right {
		flex-grow: 1;
		padding-left: 25rpx;
		line-height: 1;
		.right_time {
			color: $font-color-light;
			font-size: $font-sm;
		}
		.right_top {
			margin: 15rpx 0;
			font-size: $font-lg;
			height: 50rpx;
			color: $font-color-light;
			.right_name {
				font-weight: bold;
			}
			.right_title {
				font-weight: bold;
				&.action {
					color: $font-color-base;
				}
			}
		}
	}
	.right_use {
		margin: 15rpx 0;
		padding: 10rpx;
		width: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		color: #fff;
		font-size: $font-sm - 4rpx;
		&.action {
			background-color: $card-color-action;
		}
		&.noAction {
			background-color: $color-gray;
		}
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
</style>