WeChatAppH5/pages/code/entitlementCard/index.vue

<template>
	<view class="entitlementCard">
		<view class="lable-box">
			<view @click.stop="activeLable = item.value"
				:class="['lable-item',activeLable === item.value ? 'active-lable-item' : '']" v-for="item in lableList">
				{{ item.lable }}
			</view>
		</view>
		<view class="entitlementCard-content">
			<template v-for="item in dataList[activeLable]">
				<card :styles="{'margin-bottom': '30rpx'}" :cardInfo="item" @onClickCard="onClickCard" />
			</template>
			<uni-load-more :status="loadingStatus" v-if="loadingStatus ==='loading' " />
			<view class="empty-data" v-if="loadingStatus=== 'noMore' && dataList[activeLable].length === 0 ">
				<EmptyDate />
			</view>
		</view>
	</view>
</template>

<script>
	import { getYimaCard } from "@/api/government.js"
	import card from "./card.vue"
	export default {
		components: { card },
		data() {
			return {
				activeLable: 'ACTIVED',
				lableList: [{
					value: 'ACTIVED',
					lable: '未使用'
				}, {
					value: 'FROZEN',
					lable: '已停用'
				}, {
					value: 'EXPIRED',
					lable: '已过期'
				}],
				dataList: {
					ACTIVED: [],
					FROZEN: [],
					EXPIRED: []
				},
				loadingStatus: 'noMore'
			}
		},
		created() {
			// this.init()
		},
		methods: {
			// 点击卡包
			onClickCard(e) {
				uni.navigateTo({
					url: `/pages/government/entitlementCard/cardDetails?cardNo=${e.cardNo}`
				})
			},
			init() {
				this.getCard();
			},

			getCard() {
				this.loadingStatus = 'loading'
				this.dataList = {
					ACTIVED: [],
					EXPIRED: [],
					FROZEN: []
				};
				getYimaCard().then(res => {
					if (res.code == 200) {
						// ACTIVED-正常
						// FROZEN-停用
						// EXPIRED-过期
						const { outAppCardVoList } = res.data || []
						outAppCardVoList.forEach(el => { 
							const key = el.status;
							this.dataList[key].push(el);
						})
					}
				}).finally(() => {
					setTimeout(() => {
						this.loadingStatus = 'noMore'
						uni.stopPullDownRefresh();
					}, 150)
				})
			},


		}



	}
</script>

<style lang="scss" scoped>
	.entitlementCard {
		.lable-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: stretch;
			padding: 0 92rpx;
			height: 103.5rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.lable-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					height: 4rpx;
					width: 100%;
					background: transparent;
					border-radius: 2rpx;
				}
			}

			.active-lable-item {
				color: #3BB7CE;

				&:before {
					background: #3bb7ce;
				}
			}
		}

		.entitlementCard-content {
			width: 100%;
			padding: 50rpx 30rpx 0;
		}

	}
</style>