junzitang/pagesT/user/DiscountCoupon.vue

<template>
	<view class="content"  :class="['qn-page-' + theme]">
		
		<view class="sort-sel-view">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="sort-btn">
					<span :class="[type === item.index?'actives primary-color':'']" @click="toggleTab(item.index)">
						{{ item.tabName }}
					</span>
					<span
						class="split-line primary-btn"
						v-if="type === item.index"
					></span>
				</view>
			</block>
		</view>
		<scroll-view scroll-y="true" class="out-scroll" @scrolltolower="scrolltolower">
			<!-- 空白页 -->
			<Aempty text="您还没有优惠券哦～～" src="https://onlineimg.qianniao.vip/coupon.png" v-if="discountList.length === 0"></Aempty>
			<block v-if="type === 5">
				<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/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">有效期至：{{ $_utils.formatDate(item.endTime, 'yyyy-MM-dd') }}</view>
							</view>
							<view
								class="liet-right-click primary-btn-pain"
								@click="goPage('/pages/classification/cate', 'switchTab')"
							>
								立即使用
							</view>
							<view class="coupon-ruls" v-if="item.minPrice === '不限金额' || Number(item.minPrice) === 0">无门槛使用</view>
							<view class="coupon-ruls" v-else>满{{ item.minPrice }}元可用</view>
						</view>
					</block>
				</view>
			</block>
			<block v-if="type === 4">
				<view class="discount-mian used-main">
					<block v-for="(item, index) in discountList" :key="index">
						<view class="discount-mian-list clearfix">
							<image src="https://onlineimg.qianniao.vip/coupon/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">有效期至：{{ $_utils.formatDate(item.endTime, 'yyyy-MM-dd') }}</view>
							</view>
							<text class="coupon-tag ibonfont ibonyishiyong" style="color: #c77556"></text>
							<view class="coupon-ruls" v-if="item.minPrice === '不限金额'">无门槛使用</view>
							<view class="coupon-ruls" v-else>满{{ item.minPrice }}元可用</view>
						</view>
					</block>
				</view>
			</block>
			<block v-if="type === 3">
				<view class="discount-mian void-main">
					<block v-for="(item, index) in discountList" :key="index">
						<view class="discount-mian-list clearfix">
							<image src="https://onlineimg.qianniao.vip/coupon/coupon_bg.png" class="mian-list-img" alt="" />
							<view class="mian-list-left">
								<view class="list-title-mian">
									￥
									<span style="font-size: 56upx;font-weight:500;">{{ Number(item.reducePrice) }}</span>
								</view>
								<view class="list-title-subheading">
									{{ 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">有效期至：{{ $_utils.formatDate(item.endTime, 'yyyy-MM-dd') }}</view>
							</view>
							<text class="coupon-tag ibonfont ibonyiguoqi" style="color: #999999"></text>
							<view class="coupon-ruls" v-if="item.minPrice === '不限金额'">无门槛使用</view>
							<view class="coupon-ruls" v-else>满{{ item.minPrice }}元可用</view>
						</view>
					</block>
				</view>
			</block>
			<u-loadmore margin-top="20" v-if="discountList.length" :status="loading_status" />
		</scroll-view>
		<view class="buttom-btn">
			<text class="float_left get-coupon" @click="goCoupon('get')">领券中心</text>
			<text class="line"></text>
			<text class="float_right my-coupon" @click="goCoupon('mine')">我的优惠券</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading_status: 'loadmore',
			type: 5,
			tabList: [
				{
					tabName: '待使用',
					index: 5
				},
				{
					tabName: '已使用',
					index: 4
				},
				{
					tabName: '已过期',
					index: 3
				}
			],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			discountList: []
		};
	},
	onLoad() {
		this.getData();
	},

	methods: {
		toggleTab(index) {
			this.type = index;
			this.getData();
		},
		scrolltolower() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		 getData() {
			this.loading_status = 'loading';
			this.$u.api.couponAll({
				type: this.type,
				page: this.page,
				pageSize: this.pageSize
			}).then(({ data, pageTotal })=>{
				this.pageTotal = pageTotal;
				if (this.page === 1) {
					this.discountList = data;
				} else {
					this.discountList = data.concat(data);
				}
				this.loading_status = this.$_utils.loadStatus(this.discountList.length, data.pageTotal);
			});

		},
		// 页面跳转
		goCoupon(row) {
			const text = row;
			if (text === 'get') {
				this.goPage('/pagesT/user/GetCoupon', 'redirectTo');
			} else {
				// this.$api.msg('您已在我的优惠券列表页面');
			}
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style lang="scss">
.content {
	width: 750rpx;
	// height: calc(100vh - 200upx);
	// overflow: scroll;
}

.out-scroll {
	height: calc(100vh - 180upx);
}

// 底部按钮
.buttom-btn {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 95;
	box-shadow: 0 0 10upx 1px #e7e7e7;
	display: flex;
	.get-coupon {
		flex: 2;
		border-right: 1upx solid #f4f4f4;
		text-align: center;
		font-size: 28rpx;
		line-height: 88upx;
		color: #333;
	}

	.my-coupon {
		flex: 2;
		text-align: center;
		font-size: 28rpx;
		line-height: 88upx;
		color: #333;
	}
}

.sort-sel-view {
	display: flex;
	background: #fff;
}

.sort-sel-view .sort-btn {
	flex: 3;
	text-align: center;
	color: #111111;
	line-height: 80upx;
	font-weight: 300;
	position: relative;
	font-size: 24upx;
}

.split-line {
	position: absolute;
	display: block;
	width: 48upx;
	height: 6upx;
	background: $base-btn-bg;
	border-radius: 8upx;
	bottom: 6upx;
	left: 50%;
	transform: translateX(-24upx);
}

.sort-sel-view .sort-btn:last-child {
	border-right: 0 none;
}

.sort-sel-view .sort-btn .actives {
	color: #6eb74b;
	font-weight: 500;
	font-size: 28upx;
}

.discount-mian {
	width: 750rpx;
	height: auto;
}

.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-list-left-stock {
	width: 200upx;
	height: 200upx;
	border-right: 1upx dashed rgba(157, 113, 53, 0.5);
	position: absolute;
	left: 0upx;
	top: 0upx;
	z-index: 10;
}

.mian-list-left-color {
	width: 200upx;
	height: 200upx;
	border-right: 1upx dashed rgba(152, 152, 152, 0.5);
	position: absolute;
	left: 0upx;
	top: 0upx;
	z-index: 10;
}

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

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

.list-left-title {
	height: 140upx;
	width: 140upx;
	position: absolute;
	left: 30upx;
	top: 30upx;
}

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

.list-title-mian-color {
	color: #9c9c9c;
}

.list-title-mian-stock {
	font-size: 30upx;
	color: #c89857;
	position: absolute;
	top: 45upx;
	left: 45upx;
}

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

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

.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;
}

.list-title-subheading-color {
	color: #9c9c9c;
}

.list-title-subheading-stock {
	font-size: 26upx;
	color: #c89857;
	position: absolute;
	top: 105upx;
	left: 0;
}

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

.list-right-shop {
	font-size: 30upx;
	line-height: 36upx;
	padding-bottom: 10upx;
	width: 100%;
	overflow: hidden;
	height: 36upx;
	text-overflow: -o-ellipsis-lastline;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.list-right-annotation {
	font-size: 24upx;
	position: absolute;
	top: 80upx;
	left: 30upx;
	font-weight: 300;
}

.coupon-ruls {
	font-size: 24upx;
	color: #666;
	font-weight: 300;
	position: absolute;
	bottom: 14upx;
	left: 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: 8upx;
	text-align: center;
	line-height: 50upx;
	font-weight: 300;
	position: absolute;
	right: 30upx;
	top: 45upx;
	border: 1px solid $uni-color-primary;
}

.coupon-tag {
	position: absolute;
	right: 30upx;
	top: 45upx;
	width: 128upx;
	height: 128upx;
	font-size: 120rpx;
}

.void-main .list-title-mian,
.void-main .list-title-subheading,
.void-main .mian-list-right {
	color: #999;
}

.used-main .list-title-mian {
	// color: #a8e063;
	opacity: 0.6;
}
</style>