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

<template>
	<view class="container card clearfix">
		<view class="card-title">
			<view class="card-tabs" @click="handleCurrent(0)">
				<view class="card-tabs-text" :class="{ current : current === 0 }">借记卡</view>
			</view>
			<view class="card-tabs" @click="handleCurrent(1)">
				<view class="card-tabs-text" :class="{ current : current === 1 }">贷记卡</view>
			</view>
		</view>
		<view class="card-content">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="list-pin">{{ item.pin }}</view>
				<view class="list-card">
					<view class="list-card-item" v-for="(card, index) in item.data" :key="index">
						<view class="logo"><image :src="handleLogo(card.B2B)"></image></view>
						<view class="name">
							<text>{{ card.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX:this.$store.state.isIphoneX,
			current:0,
			listQuery: {
				userId: '', // 用户ID
				pageNum: 1, // 页数
				pageSize: 10, // 加载条数
				type: 0 // 查询余额类型
			},
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			nomoreText: '上拉显示更多',
			list: [
				{
					pin:'G',
					data:[
						{
							type: 1,
							flag: 0,
							B2B: 'ICBC',
							name: '工商银行',
						}
					]
				},
				{
					pin:'J',
					data:[
						{
							type: 1,
							flag: 0,
							B2B: 'CCB',
							name: '建设银行',
						},
						{
							type: 1,
							flag: 0,
							B2B: 'CCB',
							name: '交通银行',
						},
					]
				},
				{
					pin:'N',
					data:[
						{
							type: 1,
							flag: 0,
							B2B: 'ABC',
							name: '农业银行',
						}
					]
				}
			]
		}
	},
	onLoad() {
		// this.GetAccountInitData()
	},
	filters: {},
	methods: {
		async GetAccountInitData(index) {
			//获取余额明细数据列表
			const user = await this.$api.getStorage()
			this.listQuery.userId = user.userId ? user.userId : 0
			this.UserService.GetUserClubBeansList(this.listQuery)
				.then(response => {
					let data = response.data
					let list = data.pageInfo.list
					this.userBeans = data.userBeans
					this.hasNextPage = data.pageInfo.hasNextPage
					if (list && list.length > 0) {
						this.isEmpty = false
						this.beansList = [...list]
					} else {
						this.isEmpty = true
					}
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						if (this.beansList.length < 10) {
							this.pullUpOn = true
						} else {
							this.pullUpOn = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.UserService.GetUserClubBeansList(this.listQuery)
				.then(response => {
					let data = response.data
					let list = data.pageInfo.list
					this.userBeans = data.userBeans
					this.hasNextPage = data.pageInfo.hasNextPage
					this.beansList = this.beansList.concat(list)
					this.pullFlag = false // 防上拉暴滑
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleCurrent(index){
			// tabs 切换
			this.current = index
		},
		handleLogo(type) {
			const LogoMap = {
				'CCB':'https://img2.baidu.com/it/u=4262210206,1883697020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
				'ICBC':'https://www.weixinyunduan.com/ups/2016/01/309212/edf5a48e69afa569eb31a52fc36de450.jpg',
				'ABC':'https://userfile.yksup.com/userdata/18039/img/brand-20170315232223_e0p18k.jpg'
			}
			return LogoMap[type]
		},
		handleStyle(type) {
			const styleMap = {
				'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
				'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
			}
			return styleMap[type]
		},
	},
	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: #FF5B00;
				border-color: #FF5B00;
			}
		}
	}
}
.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: 26rpx 0;
				border-bottom: 1px solid #E1E1E1;
				&:last-child{
					border-bottom: none;
				}
				.logo{
					width: 48rpx;
					height: 48rpx;
					margin-right: 34rpx;
					float: left;
					border-radius: 50%;
					image{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						display: block;
					}
				}
				.name{
					line-height: 48rpx;
					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>