mabao/pages/personal/coupon/couponList.vue

<template>
	<view class="main">
		<view class="body-Discount margin-top-sm">
			<view class="collar">
				<!-- 	<view class="title-Discount">
					领券
				</view> -->
				<view class="couponList">
					<view class="couponItem" v-for="(item,index) in list" :key="index">
						<view class="couponItem-subject">
							<view class="couponItem-subject-left">
								<view class="couponItem-subject-price">
									<text class="couponItem-subject-icon">{{item.type==1?'¥':''}}</text>
									<text class="couponItem-subject-price-min">{{item.type==1?item.money/100:item.discount.substring(0,item.discount.indexOf(".")+2)}}</text>
									<view class="couponItem-subject-price-reduce">{{item.name}}</view>
								</view>
							</view>
							<view class="couponItem-subject-right">
								<view class="couponItem-subject-right-header">
									<span class="couponItem-subject-right-header-icon">{{item.type==1?'满减':'折扣'}}</span>
									{{item.title}}
								</view>
								<button :data-index="index" @click="collectCoupons(item,index)" v-if="item.is_receive==0" class="couponItem-subject-right-btn">领取</button>
								<button v-else class="iscouponItem-subject-right-btn">已领取</button>
								<view class="closing-date" v-if="item.expire_type == 2">
									{{item.start_time}} - {{item.end_time}}
								</view>
								<view class="" v-else>
									有效期：{{item.effective_days}}天
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty text="暂无数据" :show="show" mode="order" margin-top="250"></u-empty>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pageindex: 1,
				show: false
			}
		},
		methods: {
			getcoupon: async function() {
				let res = await this.$request.post("/api/v1/coupon/couponList", {
					page: this.pageindex
				})
				console.log(res)
				if (res.status == 0) {
					if (this.pageindex > res.data.last_page) {
						uni.showToast({
							title: "没有更多了",
							icon: "none"
						})
					} else {
						this.list = this.list.concat(res.data.data)
						this.list.forEach((item, index) => {
							item.start_time = this.$util.formatDate(item.start_time)
							item.end_time = this.$util.formatDate(item.end_time)
						})
						let i = this.list.length
						while (i--) {
							if (this.list[i].position_type == 2) {
								this.list.splice(i, 1)
							}
						}
						this.pageindex++
					}
				}
				if (this.list.length == 0) {
					this.show = true
				} else {
					this.show = false
				}
			},
			collectCoupons: async function(item, index) {
				if (item.num == 0) {
					uni.showToast({
						title: "该优惠卷数量不足",
						icon: "none"
					})
					return false
				}
				let res = await this.$request.post("/api/v1/coupon/receiveCoupon", {
					coupon_id: item.id
				})
				console.log(res)
				if (res.status == 0) {
					uni.showToast({
						title: "领取成功"
					})
					this.list[index].is_receive = 1
					this.$forceUpdate()
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getcoupon()
		}
	}
</script>

<style>
	/* 优惠券样式 */
	.discount {
		position: relative;
		display: inline-block;
		margin-right: 5px;
		margin-left: 15px;
		padding: 0 9px 0 12px;
		border-top: 1px solid rgb(11, 115, 186);
		border-bottom: 1px solid rgb(11, 115, 186);
		height: 16px;
		line-height: 16px;
		color: rgb(11, 115, 186);
		font-size: 10px;
	}

	.discount::before {
		content: "";
		left: 0;
		width: 7px;
		position: absolute;
		top: -1px;
		height: 18px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAPFBMVEUAAAD////kOTzqaGr+9vb4zc32vL3sdXfnTE/mRUfxmpz87O3yn6HqZ2npXWDlQEP97e33xsf3xsbxl5nHV2NIAAAAAXRSTlMAQObYZgAAAJpJREFUOMvllEsSwiAQRMnjF8g/3v+uKhIrjhHK0l16B4+C7hlALS07qSyS2kVlKnHmCpqdNvwYwTdY6yKGX7AeKtb+jmN3jLuYMMEd5XYBUMZ6cO/BHHhr7ut6wizxHOhvM+kUT5S5I77ZsGWU1kbsExsmiSdMBVc3l9a0tJaDdR+CVcryWtRBFLXYkku1oae955Xnv5Y+j/UKs1MGwyraxf4AAAAASUVORK5CYII=);
		background-size: 15px 18px;
		background-repeat: no-repeat;
	}

	.discount::after {
		right: 0;
		width: 4px;
		background-position: -11px 0;
		content: "";
		position: absolute;
		top: -1px;
		height: 18px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAMAAACpD3pbAAAAPFBMVEUAAAD////kOTzqaGr+9vb4zc32vL3sdXfnTE/mRUfxmpz87O3yn6HqZ2npXWDlQEP97e33xsf3xsbxl5nHV2NIAAAAAXRSTlMAQObYZgAAAJpJREFUOMvllEsSwiAQRMnjF8g/3v+uKhIrjhHK0l16B4+C7hlALS07qSyS2kVlKnHmCpqdNvwYwTdY6yKGX7AeKtb+jmN3jLuYMMEd5XYBUMZ6cO/BHHhr7ut6wizxHOhvM+kUT5S5I77ZsGWU1kbsExsmiSdMBVc3l9a0tJaDdR+CVcryWtRBFLXYkku1oae955Xnv5Y+j/UKs1MGwyraxf4AAAAASUVORK5CYII=);
		background-size: 15px 18px;
		background-repeat: no-repeat;
	}

	/* 优惠头部 */
	.header-Discount {
		position: relative;
		height: 46px;
		line-height: 46px;
		padding-left: 10px;
		font-size: 15px;
		color: #333;
		text-align: center;
		font-weight: 700;
	}

	.body-Discount {
		padding: 0 18px;
		font-size: 13px;
		color: #333;
		margin-bottom: 50px;
	}

	.body-Discount>.collar {
		position: relative;
		padding-bottom: 9px;
	}

	.body-Discount>.collar>.title-Discount {
		height: 40px;
		line-height: 40px;
		color: #262626;
		font-weight: 700;
	}

	.body-Discount>.collar .couponList>.couponItem {
		color: rgb(11, 115, 186);
		margin-bottom: 18px;
		padding: 12px 10px;
		border-top: 6px solid currentColor;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.body-Discount>.collar .couponList>.couponItem>.couponItem-subject {
		display: flex;
		min-height: 58px;
		color: rgb(11, 115, 186);
	}

	.body-Discount>.collar .couponList>.couponItem>.couponItem-subject>.couponItem-subject-left {
		width: 220rpx;
		margin-right: 10px;
		line-height: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}

	.couponItem-subject-price {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1;
		text-align: center;
	}

	.couponItem-subject-icon {
		font-size: 14px;
		display: inline-block;
		vertical-align: bottom;
		margin: 0 4px 3px 0;
	}

	.couponItem-subject-price-min {
		position: relative;
		top: 1px;
		font-size: 36px;
		letter-spacing: 0;
	}

	.couponItem-subject-price-reduce {
		font-size: 14px;
		margin-top: 5px;
	}

	.couponItem-subject-right {
		flex: 1;
		position: relative;
	}

	.couponItem-subject-right-header {
		height: 36px;
		line-height: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 12px;
		color: #666;
	}

	.couponItem-subject-right-header-icon {
		background-color: rgb(11, 115, 186);
		color: #fff;
		font-size: 12px;
		display: inline-block;
		padding: 0 6px 0 12px;
		height: 14px;
		margin-right: 4px;
		line-height: 14px;
		position: relative;
		border-radius: 0 3px 3px 0;
	}

	.couponItem-subject-right-header-icon::before {
		position: absolute;
		z-index: 1;
		content: "";
		width: 0;
		top: 0;
		left: -7px;
		height: 0;
		border-top: 7px solid #fff;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #fff;
		border-left: 7px solid #fff;
	}

	.couponItem-subject-right-header-icon::after {
		content: ".";
		position: absolute;
		color: #fff;
		left: 5px;
		top: -6px;
		font-size: 20px;
	}

	.couponItem-subject-right-btn {
		background-color: rgb(11, 115, 186);
		color: #fff;
		font-size: 12px;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 68px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 10px;
		box-sizing: border-box;
		z-index: 2;
	}

	.iscouponItem-subject-right-btn {
		background-color: #dcdcdc;
		color: #fff;
		font-size: 12px;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 68px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 10px;
		box-sizing: border-box;
		z-index: 2;
	}

	.desc-style {
		padding: 5px 18px 10px 18px;
		line-height: 1.3;
		position: relative;
		font-size: 12px;
		max-height: 46px;
		overflow: hidden;
		color: #666;
		background-color: white;
	}

	.closing-date {
		/* padding-right: 68px; */
		position: absolute;
		left: -18rpx;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
		line-height: 20px;
		font-size: 10px;
		color: #8c8c8c;
	}
</style>