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

<template>
	<view class="container card clearfix">
		<view class="card-title">我的银行卡 <text>3张</text></view>
		<view class="card-content">
			<view class="list" v-for="(card, index) in list" :key="index" :style="{ background: handleStyle(card.B2B) }">
				<view class="list-logo"> 
					<view class="logo"><image :src="handleLogo(card.B2B)"></image></view>
				</view> 
				<view class="list-main">  
					<view class="list-main-name">{{ card.name }}</view>
					<view class="list-main-tag"> <text class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </text> </view>
					<view class="list-main-code">
						{{ card.code }}
					</view>
				</view> 
				<view class="list-btn" @click="handleUnbind">解绑</view>
			</view>
		</view>
		<!-- 取消收藏操作 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button" @click="handleAddCard">添加银行卡</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>
<script>
export default {
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX:this.$store.state.isIphoneX,
			listQuery: {
				userId: '', // 用户ID
				pageNum: 1, // 页数
				pageSize: 10, // 加载条数
				type: 0 // 查询余额类型
			},
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			nomoreText: '上拉显示更多',
			popupShow:true,
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '保持绑定',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '继续解绑',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
					},
					plain: false
				}
			],
			list: [
				{
					type: 1,
					flag: 0,
					B2B: 'CCB',
					name: '建设银行',
					code:'45454545454521212'
				},
				{
					type: 1,
					flag: 0,
					B2B: 'ICBC',
					name: '工商银行',
					code:'45454545454521212'
				},
				{
					type: 0,
					flag: 0,
					B2B: 'ABC',
					name: '农业银行',
					code:'45454545454521212'
				}
			]
		}
	},
	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)
				})
		},
		handleAddCard(){
			// 跳转添加银行卡页面
			this.$api.navigateTo(`/pages/user/pay/card-add`)
		},
		handleUnbind(){
			//解绑
			this.modal = true
			this.contentModalText = '解绑后此卡需要重新绑定才能继续使用'
		},
		async handleClick(e) {
			//确认删除
			if (e.index == 1) {
				this.handleDeleteUserLike()
			}
			this.modal = false
		},
		hideMobel(){
			// 取消解绑
			this.modal = false
		},
		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;
	line-height: 100rpx;
	font-size: $font-size-32;
	color: #333;
	font-weight: bold;
	box-sizing: border-box;
	padding: 0 24rpx;
	text {
		font-size: $font-size-28;
		color: #999;
		font-weight: normal;
		margin-left: 10rpx;
	}
}
.card-content {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 40rpx;
	.list {
		width: 100%;
		height: 240rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 32rpx;
		position: relative;
		margin-bottom: 32rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.list-logo{
			width: 80rpx;
			height: 100%;
			float: left;
			.logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				padding: 10rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				float: left;
				image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: block;
				}
			}
		}
		.list-main{
			width: 452rpx;
			float: left;
			margin-left: 32rpx;
			.list-main-name{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-34;
				color: #ffffff;
			}
			.list-main-tag{
				width: 100%;
				height: 37rpx;
				margin: 8rpx 0 36rpx 0;
				.tag{
					display: inline-block;
					line-height: 37rpx;
					padding: 0 12rpx;
					border-radius: 19rpx;
					font-size: $font-size-24;
					color: #ffffff;
					background: rgba(255, 255, 255, 0.2);
					float: left;
				}
			}
			.list-main-code{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-34;
				color: #ffffff;
			}
		}
		.list-btn{
			font-size: $font-size-24;
			color: #ffffff;
			height: 30rpx;
			line-height: 30rpx;
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		}
	}
}
.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>