junzitang/pagesT/user/GetCoupon.vue

<template>
	<view :class="['qn-page-' + theme]" class="content">
		<!-- 空白页 -->
		<Aempty text="没有可领取的优惠券～～" src="https://onlineimg.qianniao.vip/coupon.png" v-if="discountList.length === 0"></Aempty>
		<view class="discount-mian">
			<block v-for="(item, index) in discountList" :key="index">
				<view class="discount-mian-list clearfix">
					<image src="https://onlineimg.qianniao.vip/coupon_bg.png" class="mian-list-img" alt="" />
					<view class="mian-Icon-top"></view>
					<view class="mian-Icon-bottom"></view>
					<view class="mian-list-left">
						<view class="list-title-mian primary-color">
							￥
							<span style="font-size: 56upx;font-weight:500;">{{ Number(item.reducePrice) }}</span>
						</view>
						<view class="list-title-subheading primary-color">
							{{ item.applyRange === 10 ? '全店商品通用' : item.applyRange === 20 ? '指定分类商品可用' : item.applyRange === 30 ? '指定品牌商品可用' : '' }}
						</view>
					</view>
					<view class="mian-list-right">
						<view class="list-right-shop">{{ item.name }}</view>
						<view class="list-right-time" v-if="item.couponType === 20">有效期：领取后30天内有效</view>
						<view class="list-right-time" v-else>有效期至：{{ $_utils.formatDate(item.endTime, 'yyyy-MM-dd') }}</view>
					</view>
					<view class="liet-right-click primary-btn-pain" @click="receive(item)">
						立即领取
					</view>
					<view class="coupon-ruls" v-if="item.minPrice === '不限金额'">无门槛使用</view>
					<view class="coupon-ruls" v-else>满{{ item.minPrice }}元可用</view>
					<view class="coupon-rul">{{ item.couponType === 10 ? '普通优惠券' : '会员卡优惠券' }}</view>
				</view>
			</block>
		</view>
		<view class="buttom-btn">
			<text class="float_left get-coupon" @click="goCoupon('get')">领券中心</text>
			<text class="float_right my-coupon" @click="goCoupon('mine')">我的优惠券</text>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			discountList: [],
			vipCardId: ''
		};
	},
	onLoad() {
		this.getData();
	},
	onPullDownRefresh() {
		this.getData();
	},
	methods: {
		async getData() {
			this.$u.api.couponList({
				grantType: '10'
			}).then(res=>{
				uni.stopPullDownRefresh();
				this.discountList = res.data;
			});
		},
		async receive(item) {
			// if (this.$store.state.baseSet.personnelReview === 5) {
				// 验证账户状态
				this.userAudit();
				if (!this.isUserAudit) {
					return;
				}
			// }

			this.$u.api.receive({
				couponId: item.id,
				vipCardId: item.vipCardId
			}).then(res=>{
				this.$api.msg('领取成功');
			});
		},
		goCoupon(row) {
			if (row === 'mine') {
				this.goPage('/pagesT/user/DiscountCoupon', 'redirectTo');
			} else {
				// this.$api.msg('您已在优惠券领取页面');
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background: #f5f5f5;
}
// 底部按钮
.buttom-btn {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 95;
	display: flex;
	box-shadow: 0 0 10upx 1px #e7e7e7;
	.get-coupon {
		flex: 2;
		text-align: center;
		border-right: 1upx solid #f4f4f4;
		font-size: 28rpx;
		line-height: 88upx;
		color: #333333;
	}
	.my-coupon {
		flex: 2;
		text-align: center;
		font-size: 28rpx;
		line-height: 88upx;
		color: #333333;
	}
}
.content {
	width: 100%;
	height: 100vh;
}
.discount-mian{
	padding-bottom: 88rpx;
}
.discount-mian-list {
	border-radius: 10rpx;
	background-color: #FFFFFF;
	width: 700upx;
	height: 200upx;
	position: relative;
	margin: 24upx auto 0;
	box-shadow: 0px 38upx 14upx -30upx #e7e7e7;
}

.mian-list-img {
	width: 700upx;
	height: 200upx;
	border-radius: 6px;
}

.mian-list-left {
	width: 200upx;
	height: 200upx;
	position: absolute;
	left: 0upx;
	top: 0upx;
	z-index: 10;
}

.mian-Icon-bottom {
	height: 12upx;
	width: 24upx;
	position: absolute;
	left: 190upx;
	top: 190upx;
	border-radius: 100upx 100upx 0 0;
	z-index: 999;
}

.list-title-mian {
	font-size: 28upx;
	color: #45a418;
	position: absolute;
	top: 16upx;
	font-weight: 300;
	left: 0;
	width: 200upx;
	text-align: center;
}

.list-title-mian > span {
	font-size: 42upx;
}

.list-title-subheading {
	font-size: 24upx;
	color: #45a418;
	position: absolute;
	top: 75upx;
	left: 0;
	font-weight: 300;
	padding-top: 12upx;
	width: 216upx;
	text-align: center;
}

.mian-list-right {
	width: 500upx;
	height: 200upx;
	position: absolute;
	left: 200upx;
	top: 36upx;
	color: #333;
}

.list-right-shop {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 300rpx;
	font-size: 30upx;
	line-height: 36upx;
	padding-bottom: 10upx;
}
.list-right-shop:hover {
	overflow: visible;
}
.coupon-ruls {
	font-size: 24upx;
	color: #666;
	font-weight: 300;
	position: absolute;
	bottom: 14upx;
	left: 24upx;
}
.coupon-rul {
	font-size: 24upx;
	color: #666;
	font-weight: 600;
	position: absolute;
	bottom: 14upx;
	right: 24upx;
}
.list-right-time {
	font-size: 24upx;
	/* position: absolute;
	top: 100upx;
	left: 30upx; */
	font-weight: 300;
}

.liet-right-click {
	font-size: 24upx;
	color: $uni-color-primary;
	width: 132upx;
	height: 50upx;
	border-radius: 50upx;
	text-align: center;
	line-height: 50upx;
	font-weight: 300;
	position: absolute;
	right: 30upx;
	top: 45upx;
	z-index: 2;
	border: 1px solid $uni-color-primary;
}
</style>