caimei-applets-mcare/pages/user/pay/card-sus-list.vue

<template>
	<view class="container card clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="card-title">
				<view class="card-tabs" @click="handleCurrent(1)">
					<view class="card-tabs-text" :class="{ current : current === 1 }">借记卡</view>
				</view>
				<view class="card-tabs" @click="handleCurrent(2)">
					<view class="card-tabs-text" :class="{ current : current === 2 }">贷记卡</view>
				</view>
			</view>
			<view class="card-content">
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="list-pin">{{ item.initial }}</view>
					<view class="list-card">
						<view class="list-card-item" v-for="(card, index) in item.banks" :key="index">
							<view class="logo"><image :src="'https://static.caimei365.com/app/img/pay/icon_'+card.bankCode+'_@2x.png'"></image></view>
							<view class="name">
								<text>{{ card.bankName }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isIphoneX:this.$store.state.isIphoneX,
			skeletonShow:true,
			current:1,
			listQuery: {
				cardType: 1, // 页数
			},
			list: []
		}
	},
	onLoad() {
		this.getQuickBankInfos()
	},
	filters: {},
	methods: {
		async getQuickBankInfos() {
			//获取余额明细数据列表
			try {
				const res = await this.PayService.getQuickBankInfos(this.listQuery)
				console.log('res',res)
				this.list =  res.data
				setTimeout(() => {
					this.skeletonShow = false
				}, 1000)
			} catch (error) {
				console.log(error)
			}
		},
		handleCurrent(index){
			// tabs 切换
			this.current = this.listQuery.cardType = index
			this.getQuickBankInfos()
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.GetOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		this.listQuery.pageNum = 1
		this.GetAccountInitData()
		uni.stopPullDownRefresh()
	},
	onShow() {
		// this.beansList = []
	}
}
</script>

<style lang="scss">
page,
.container {
	background: #ffffff;
	height: 100%;
}
.card-title {
	width: 100%;
	height: 100rpx;
	.card-tabs{
		width: 50%;
		height: 100%;
		float: left;
		.card-tabs-text{
			width: 100rpx;
			line-height: 96rpx;
			margin: 0 auto;
			font-size: $font-size-32;
			color: #333;
			font-weight: bold;
			box-sizing: border-box;
			border-bottom: 2px solid #ffffff;
			&.current{
				color: #F3B574;
				border-color: #F3B574;
			}
		}
	}
}
.card-content {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	.list {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		position: relative;
		.list-pin{
			width: 100%;
			line-height: 48rpx;
			box-sizing: border-box;
			padding-left: 47rpx;
			background-color: #F7F7F7;
			font-size: 28rpx;
			color: #333;
			float: left;
		}
		.list-card{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			position: relative;
			padding: 0 32rpx;
			float: left;
			.list-card-item{
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-bottom: 1px solid #E1E1E1;
				&:last-child{
					border-bottom: none;
				}
				.logo{
					width: 60rpx;
					height: 60rpx;
					margin-right: 34rpx;
					float: left;
					border-radius: 50%;
					image{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						display: block;
					}
				}
				.name{
					line-height: 60rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 100rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.tui-button {
		width: 600rpx;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
		margin: 0 auto;
	}
}
</style>