guosen-ldt-shop/pages/userBank/userBank.vue

<template>
	<view>
		<view @click="add(item.id)" style="position: relative;" hover-class="none" v-for="(item,index) in bankList"
			:key="index" class="card card_bg">
			<view @click.stop="del(item.id)" style="position: absolute;right: 10rpx;top: 10rpx;">
				<u-icon name="close-circle" color="#fff" size="40"></u-icon>
			</view>

			<view class="top center" style="justify-content: flex-start;">
				<view class="center margin-top-10">
					<image @error="error" :src="bankImg(item.bankCode)"></image>
				</view>
				<view class="">
					<text class="bankType">{{item.bankName}}</text>
					<text class="bankAccountType">{{dealBankCodeType(item.bankCardType)}}</text>
				</view>
			</view>
			<view class="number">
				<text>{{dealAccountNo(item.accountNo)}}</text>
			</view>
		</view>
		<navigator url="./add" class="card_add" hover-class="none">
			<view class="margin-bottom-10">
				<u-icon name="plus-circle-fill" color="#F5A85B" size="80"></u-icon>
			</view>
			<view class="" style="color: #666666;">
				添加新的银行卡
			</view>
		</navigator>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgError:false,
				bankList: []
			}
		},
		onShow() {
			this.fetchCardList()
		},
		computed: {
			dealAccountNo() {
				return data => {
					return this.$util.dealAccountNo(data)
				}
			},

			dealBankCodeType() {
				return data => {
					return this.$getBankCodeType(data)
				}
			},
			
			bankImg(){
				return (data)=>{
					if (this.imgError) {
						return '/static/icon/card1.png'
					}
					return '/static/bank/'+data+'.png'
				}
			}
		},
		methods: {
			error(){
				this.imgError=true
			},
			fetchCardList() {
				let params = {
					merchantNo: this.vuex_merchantNo
				}
				this.$api.yeepay.withdrawCardQuery(params).then(res => {
					let result = JSON.parse(res.data.result)
					this.bankList = result.bankCardAccountList
				})
			},
			del(id) {
				this.$dialog.showModal('确定要解绑？').then(() => {
					this.$api.userBank.remove(id).then(res => {
						if (res.success) {
							this.$u.toast('解绑成功!')
							this.fetchCardList()
						}
					})
				})
			},
			add(id) {
				return
				uni.navigateTo({
					url: `./add?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_add {
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.card {
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		background-image: linear-gradient(#F5A85B, #EF9944);
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			margin-bottom: 20rpx;

			image {
				border-radius: 50%;
				background-color: #FFFFFF;
				width: 70rpx;
				height: 70rpx;
			}

			.bankType {
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: 800;
				margin-left: 30rpx;
			}

			.bankAccountType {
				color: #F8E0C6;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}

		.number {
			margin-left: 110rpx;
			color: #FFFFFF;
			font-weight: 800;
			font-size: 34rpx;
		}
	}
</style>