caimei-applets-mcare/pages/user/pay/card-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">我的银行卡 <text>{{ list.length }}张</text></view>
			<view class="card-content">
				<template  v-if="list.length > 0">
					<view class="list" v-for="(card, index) in list" :key="index" :style="{ backgroundImage: handleStyle(card.bankCode) }">
						<view class="list-logo"> 
							<view class="logo"><image :src="'https://static.caimei365.com/app/img/pay/icon_'+ card.bankCode+'_@2x.png'"></image></view>
						</view> 
						<view class="list-main">  
							<view class="list-main-name">{{ card.bankName }}</view>
							<view class="list-main-tag"> <text class="tag"> {{ card.bankType === 1 ? '借记卡' : '贷记卡' }} </text> </view>
							<view class="list-main-code">
								{{ card.quickPayBankNumber | cardsFormat }}
							</view>
						</view> 
						<view class="list-btn" @click="handleUnbind(card)">解绑</view>
					</view>
				</template>
				<view class="list-none" v-else>
					<text>暂无银行卡~</text>
				</view>
			</view>
		</template>
		<!-- 取消收藏操作 -->
		<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(1)">添加银行卡</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 {
			isIphoneX:this.$store.state.isIphoneX,
			skeletonShow:true,
			popupShow:true,
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '保持绑定',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '继续解绑',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
					},
					plain: false
				}
			],
			list: []
		}
	},
	onLoad() {
		this.GetUserClubBanks()
	},
	filters: {
		cardsFormat(valus) {
			// 银行卡只显示最后四位数 ,隐藏信息用*代替
			return  valus.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2")
		},
	},
	methods: {
		async GetUserClubBanks() {
			//获取列表
			try {
				const user = await this.$api.getStorage()
				const res = await this.UserService.userClubBanks({ userId:user.userId })
				this.list = res.data
				this.skeletonShow = false
			} catch (error) {
				console.log(error)
			}
		},
		handleAddCard(index){
			// 跳转添加银行卡页面
			this.$api.navigateTo(`/pages/user/pay/card-comfirm?type=${index}`)
		},
		handleUnbind(card){
			//点击解绑
			this.handleCardId = card.id
			this.modal = true
			this.contentModalText = '解绑后此卡需要重新绑定才能继续使用'
		},
		handleClick(e) {
			//确认解绑
			if (e.index == 1) {
				this.orderPayUnboundCard()
			}
			this.modal = false
		},
		async orderPayUnboundCard(){
			//请求
			try {
				const res = await this.PayService.orderPayUnboundCard({ cardId : this.handleCardId })
				console.log('res', res.data)
				this.$util.msg('解绑成功',2000,true,'success')
				this.GetUserClubBanks()
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		hideMobel(){
			// 取消解绑
			this.modal = false
		},
		handleStyle(type) {
			// 设置各个银行卡配色
			const styleMap = {
				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);',
				'BCCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
				'BOC':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
				'BOCO':'linear-gradient(90deg, #7275BE 0%, #434492 100%);',
				'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
				'CEB':'linear-gradient(90deg, #B673CB 0%, #843C9A 100%);',
				'CGB':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
				'CIB':'linear-gradient(90deg, #457EBC 0%, #1B518A 100%);',
				'CMBC':'linear-gradient(90deg, #3C9EC2 0%, #0584B4 100%);',
				'CMBCHINA':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
				'ECITIC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
				'HXB':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
				'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
				'PINGAN':'linear-gradient(90deg, #F5A15A 0%, #E47F29 100%);',
				'POST':'linear-gradient(90deg, #3EB97B 0%, #11874B 100%);',
				'SHB':'linear-gradient(90deg, #6479C8 0%, #314693 100%);',
				'SPDB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
			}
			return styleMap[type]
		},
	},
	onPullDownRefresh() {
		//下拉刷新
		this.GetUserClubBanks()
		uni.stopPullDownRefresh()
	},
	onShow() {
		
	}
}
</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-none{
		width: 100%;
		height: 900rpx;
		line-height: 900rpx;
		font-size: $font-size-28;
		text-align: center;
		color: #999;
	}
	.list {
		width: 100%;
		height: 240rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 32rpx;
		position: relative;
		margin-bottom: 32rpx;
		background: url(https://static.caimei365.com/app/img/pay/icon_bg_cards@2x.png);
		background-size: cover;
		&:last-child{
			margin-bottom: 0;
		}
		.list-logo{
			width: 80rpx;
			height: 100%;
			float: left;
			.logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				box-sizing: border-box;
				float: left;
				image{
					width: 80rpx;
					height: 80rpx;
					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>