qjd-user-uniapp/pagesMain/couponList.vue

<template>
	<view class="container">
		<view class="coupon-tab">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A"
			 inactive-color="#666666" :bold="false" height="90" bar-width="120"></u-tabs>
		</view>
		<view class="coupon-box" v-if="tabIndex == 0">
			<view class="coupon-row" v-for="(site, index2) in couponList1" :key="index2">
				<view class="coupon-mask" v-if="site.status == 0"></view>
				<view class="coupon-left">
					<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{site.discountAmount}}</view>
					<view class="coupon-left-text">满减金额</view>
				</view>
				<view class="coupon-info">
					<view class="coupon-text1">{{site.couponName}}</view>
					<view class="coupon-text1" style="margin-bottom: 4px;">满{{site.fullAmount}}减{{site.discountAmount}}</view>
					<view class="coupon-text2">{{site.couponType == 1 ? '仅限用于' + site.name + '的店铺' : '通用优惠券'}}</view>
					<view class="coupon-text2" style="color: #999999;">有效期：{{site.termDate}}</view>
				</view>
			</view>
			<u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
				<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
			</u-divider>
		</view>
		<view class="coupon-box" v-if="tabIndex == 1">
			<view class="coupon-row" v-for="(site, index2) in couponList2" :key="index2">
				<view class="coupon-left">
					<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{site.discountAmount}}</view>
					<view class="coupon-left-text">满减金额</view>
				</view>
				<view class="coupon-info">
					<view class="coupon-text1">{{site.couponName}}</view>
					<view class="coupon-text1" style="margin-bottom: 4px;">满{{site.fullAmount}}减{{site.discountAmount}}</view>
					<view class="coupon-text2">{{site.couponType == 1 ? '仅限用于' + site.name + '的店铺' : ''}}</view>
					<view class="coupon-text2" style="color: #999999;">有效期：{{site.term}}</view>
				</view>
			</view>
			<u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
				<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
			</u-divider>
		</view>
		<view class="coupon-box" v-if="tabIndex == 2">
			<view class="coupon-row" v-for="(site, index2) in couponList3" :key="index2">
				<view class="coupon-mask"></view>
				<view class="coupon-left">
					<view class="coupon-left-price"><text style="font-size: 16px;">￥</text>{{site.discountAmount}}</view>
					<view class="coupon-left-text">满减金额</view>
				</view>
				<view class="coupon-info">
					<view class="coupon-text1">{{site.couponName}}</view>
					<view class="coupon-text1" style="margin-bottom: 4px;">满{{site.fullAmount}}减{{site.discountAmount}}</view>
					<view class="coupon-text2">{{site.couponType == 1 ? '仅限用于' + site.name + '的店铺' : ''}}</view>
					<view class="coupon-text2" style="color: #999999;">有效期：{{site.term}}</view>
				</view>
			</view>
			<u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
				<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
			</u-divider>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
						name: '我的券'
					},
					{
						name: '未使用'
					},
					{
						name: '已使用'
					}
				],
				loadingData: false,
				isOver: false,
				pageIndex1: 1,
				couponList1: [],
				pageIndex2: 1,
				couponList2: [],
				pageIndex3: 1,
				couponList3: [],
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this['pageIndex' + (this.tabIndex + 1)] = 1
			this['couponList' + (this.tabIndex + 1)] = []
			this.getList('refresh')
		},
		methods: {
			//  切换tab
			changeTabs(index) {
				this.tabIndex = index
				this['pageIndex' + (index + 1)] = 1
				this['couponList' + (index + 1)] = []
				this.isOver = false
				this.loadingData = false
				this.getList()
			},
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this['pageIndex' + (this.tabIndex + 1)]++
					this.getList()
				}
			},
			//  获取列表数据
			getList(refresh) {
				this.loadingData = true
				NET.request(API.getCouponList, {
					isUse: this.tabIndex == 0 ? null : (this.tabIndex == 1 ? 0 : 1),
					pageIndex: this['pageIndex' + (this.tabIndex + 1)],
					pageSize: 10,
				}, 'POST').then(res => {
					if (refresh == 'refresh') {
						uni.stopPullDownRefresh();
					}
					if (res.isSuccess) {
						if (res.data.list.length) {
							this.loadingData = false
							this.isOver = res.data.list.length != 10
							this['couponList' + (this.tabIndex + 1)] = this['couponList' + (this.tabIndex + 1)].concat(res.data.list)
						}
					}
				}).catch(error => {
					this.loadingData = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		overflow-y: auto;

		.coupon-tab {
			width: 100%;
			height: 45px;
			float: left;
			background-color: #FFFFFF;
			margin-bottom: 16px;
		}

		.coupon-row {
			width: calc(100% - 32px);
			height: 105px;
			float: left;
			margin: 0 16px 10px 16px;
			border-radius: 10px;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px 0px rgba(103, 103, 103, 0.3);
			overflow: hidden;
			position: relative;

			.coupon-mask {
				width: 100%;
				height: 100%;
				position: absolute;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.coupon-left {
				width: 107px;
				height: 105px;
				box-sizing: border-box;
				padding-right: 10px;
				float: left;
				background-size: 107px 105px;
				background-position: center;
				background-repeat: no-repeat;
				background-image: url(@/static/images/couponHead.png);

				.coupon-left-price {
					width: 100%;
					height: 24px;
					float: left;
					margin: 28px 0 12px 0;
					font-size: 24px;
					font-family: PingFang SC;
					color: #FFFFFF;
					line-height: 24px;
					text-align: center;
				}

				.coupon-left-text {
					width: 100%;
					height: 20px;
					float: left;
					color: #FFFFFF;
					font-size: 12px;
					font-family: PingFang SC;
					line-height: 20px;
					text-align: center;
				}
			}

			.coupon-info {
				width: calc(100% - 115px);
				height: 100%;
				float: right;
				box-sizing: border-box;
				padding: 16px 0 12px 0;

				.coupon-text1 {
					width: 100%;
					height: 20px;
					float: right;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.coupon-text2 {
					width: 100%;
					height: 18px;
					float: right;
					font-size: 13px;
					font-family: PingFang SC;
					color: #EB5F2F;
					line-height: 18px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}

	/deep/.u-divider {
		background-color: transparent !important;
	}
</style>