liveShop/pages/user/mycard.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.orderList.length === 0"></empty>
					<view class="ka_box" v-for="(item, index) in tabItem.orderList" :key="index">
						<view class="ka_bg">
							<image class="ka_bg_img" src="https://tmp01.kktv6.com/img/ka1.png" v-if="item.status == 0 && item._msg !== '已失效'"></image>
							<image class="ka_bg_img" src="https://tmp01.kktv6.com/img/ka3.png" v-if="item.status !== 0 || item._msg == '已失效'"></image>
						</view>
						<view class="ka_item">
							<view class="ka_price" :class="{ 'ka_guoqi': item.status !== 0 || item._msg == '已失效' }">{{ item.coupon_price | parseFloatNum }}</view>
							<view class="ka_right">
								<view class="ka_tit">订单满{{ item.use_min_price | parseFloatNum }}使用</view>
								<view class="ka_synopsis">{{ item.coupon_title }}</view>
								<view class="ka_synopsis" v-if="item.applicable_type == 0">通用券</view>
								<view class="ka_synopsis" v-if="item.applicable_type == 1">商品券</view>
								<view class="ka_state" v-if="item.status == 0 && item._msg !== '已失效'">有效期至：{{ item._end_time }}</view>
								<view class="ka_state" v-if="item.status == 1">已使用</view>
								<view class="ka_state" v-if="item._msg == '已失效'">已过期</view>
							</view>
						</view>
					</view>

					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { mapState } from 'vuex';
import { getCouponsList } from '@/api/coupon.js';
export default {
	filters: {
		// 去处小数点后的0
		parseFloatNum(clock) {
			return parseFloat(clock);
		}
	},
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			tabCurrentIndex: 0,
			state: '',
			showModal: false,
			navList: [
				{
					state: 0,
					text: '全部',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '已使用',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '未使用',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
			]
		};
	},
	onLoad(options) {
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		//获取订单列表
		loadData(source) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			
			getCouponsList({}, state ).then(({data}) => {
				navItem.orderList = data;
				navItem.loadingType = 'noMore';
			})
			
		},
		
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		
	}
};
</script>

<style lang="scss">
page,
.content {
	// background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: calc(100% - 40px);
	padding: 20rpx 30rpx;
}
.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;
		&.current {
			color:  #FC4E6F ;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid  #FC4E6F ;
			}
		}
	}
}

.ka_box {
	position: relative;
	height: 240rpx;
	margin-bottom: 20rpx;
	.ka_bg {
		width: 100%;
		height: 240rpx;
		.ka_bg_img {
			width: 100%;
			height: 240rpx;
		}
	}
	.ka_item {
		position: absolute;
		top: 0;
		width: 100%;
		height: 240rpx;
		display: flex;
		.ka_guoqi {
			text-shadow: 0px 10rpx 5rpx rgba(173, 173, 173, 0.3) !important;
		}
		.ka_price {
			width: 32%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 240rpx;
			font-size: 100rpx;
			font-family: SJcuyuan;
			font-weight: 400;
			color: #FFFFFF;
			text-shadow: 0px 10rpx 5rpx rgba(255, 125, 69, 0.3);
			&::before {
				content: '￥';
				font-size: 40rpx;
				margin-top: 60rpx;
			}
		}
		.ka_right {
			width: 68%;
			line-height: 1;
			padding: 48rpx 48rpx 0 0;
			text-align: right;
			.ka_tit {
				font-size: 40rpx;
				font-family: SJcuyuan;
				font-weight: 400;
				color: #FFFFFF;
			}
			.ka_synopsis {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: SJcuyuan;
				font-weight: 400;
				color: #FFFFFF;
			}
			.ka_state {
				margin-top: 30rpx;
				font-size: 20rpx;
				font-family: SJcuyuan;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
}

.uni-swiper-item {
	height: auto;
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	align-items: center;
	justify-content: center;
}

.uni-load-more__text {
	font-size: 28rpx;
	color: #999;
}

.uni-load-more__img {
	height: 24px;
	width: 24px;
	margin-right: 10px;
}

.uni-load-more__img > view {
	position: absolute;
}

.uni-load-more__img > view view {
	width: 6px;
	height: 2px;
	border-top-left-radius: 1px;
	border-bottom-left-radius: 1px;
	background: #999;
	position: absolute;
	opacity: 0.2;
	transform-origin: 50%;
	animation: load 1.56s ease infinite;
}

.uni-load-more__img > view view:nth-child(1) {
	transform: rotate(90deg);
	top: 2px;
	left: 9px;
}

.uni-load-more__img > view view:nth-child(2) {
	transform: rotate(180deg);
	top: 11px;
	right: 0;
}

.uni-load-more__img > view view:nth-child(3) {
	transform: rotate(270deg);
	bottom: 2px;
	left: 9px;
}

.uni-load-more__img > view view:nth-child(4) {
	top: 11px;
	left: 0;
}

.load1,
.load2,
.load3 {
	height: 24px;
	width: 24px;
}

.load2 {
	transform: rotate(30deg);
}

.load3 {
	transform: rotate(60deg);
}

.load1 view:nth-child(1) {
	animation-delay: 0s;
}

.load2 view:nth-child(1) {
	animation-delay: 0.13s;
}

.load3 view:nth-child(1) {
	animation-delay: 0.26s;
}

.load1 view:nth-child(2) {
	animation-delay: 0.39s;
}

.load2 view:nth-child(2) {
	animation-delay: 0.52s;
}

.load3 view:nth-child(2) {
	animation-delay: 0.65s;
}

.load1 view:nth-child(3) {
	animation-delay: 0.78s;
}

.load2 view:nth-child(3) {
	animation-delay: 0.91s;
}

.load3 view:nth-child(3) {
	animation-delay: 1.04s;
}

.load1 view:nth-child(4) {
	animation-delay: 1.17s;
}

.load2 view:nth-child(4) {
	animation-delay: 1.3s;
}

.load3 view:nth-child(4) {
	animation-delay: 1.43s;
}

@-webkit-keyframes load {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}
</style>