wangluohuoyun-app/pages/mine/manageBankCards/index.vue

<template>
	<view class="content">
		<view class="top-title flex flex-space-between">
			<view class="left flex">
				<view class="text1">我的卡</view>
				<view class="text2">（共{{bankList?bankList.length:0}}张）</view>
			</view>

			<view @click="addBankCard" class="add-bankcard flex">
				<view class="car-text">添加银行卡</view>
				<u-icon class="icon" name="plus-circle-fill" color="#2979ff" size="24"></u-icon>
			</view>

		</view>
		<view class="card-list" v-for="(item,index) in bankList" :key='index'>
			<view class="card-list-item" :style='{"background-image":"url("+item.cardColor+")"}'>
				<view class="flex flex-end number carNumber">{{item.bankCard}}</view>
				<view class="flex align-center">
					<!-- @/static/images/mine/bank/gflogo@2x.png -->
					<image class="img left" :src="item.imgLogo" mode='widthFix'>
					</image>
					<view class="right">
						<view class="text1">{{item.bankDeposit}}</view>
						<view class="text2">收款人：{{item.payeeName}}</view>
					</view>
				</view>
			</view>

			<view class="flex flex-space-between row2 align-center">
				<view class="flex align-center">
					<radio :checked="item.defaultFlag==1" @click='radioChange(item)' />
					<view class="default-card">设为默认收款账户</view>
				</view>
				<view>
					<u-icon name="trash" size="24" @click="del(item,index)"></u-icon>
				</view>
			</view>
		</view>
		<!-- <view @click="addBankCard">添加银行卡</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				bankList: []
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
			this.init();
		},
		methods: {
			radioChange(val) {
				for (let i = 0; i < this.bankList.length; i++) {
					if (val.id == this.bankList[i].id) {
						this.bankList[i].defaultFlag = 1
						this.$request.baseRequest('post', '/driverPayeeInfo/api/setDefault', val).then(res => {
								if (res.code == '200') {
									// this.bankList = res.data
									this.$refs.uToast.show({
										type: 'success',
										message: "设置成功！",
									})
								} else {
									uni.$u.toast(res.message);
								}

							})
							.catch(res => {
								uni.$u.toast(res.message);
							});

					} else {
						this.bankList[i].defaultFlag = 0
					}
				}
			},
			number(value){
			  if(value&&value.length>8) {
			    let reg = /^(\d{4})(\d*)(\d{4})$/;
			    let str = value.replace(reg, (a, b, c, d)=> {
			      return b + c.replace(/\d/g, "*") + d;
			    });
			    return str
			  }else {
			    return value
			  }
			},
			init() {
				this.$request.baseRequest('post', '/driverPayeeInfo/selectDriverPayee', {
						driverId: this.userInfo.driverId,
					}).then(res => {
						if (res.code == '200') {
							debugger
							this.bankList = res.data
							for (let i = 0; i < this.bankList.length; i++) {
								let _obj = this.bankList[i]
								_obj.bankCard = this.number(_obj.bankCard)
								switch (_obj.bankDeposit) {
									case "建设银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/jiansheogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/jh@2x.png"
										break
									case "招商银行":
										this.bankList[i].imgLogo =
											"../../../static/images/mine/bank/zhaoshang@2x(1).png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "中国银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/zhongyin@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "邮政银行":
										this.bankList[i].imgLogo =
											"../../../static/images/mine/bank/youzhenglogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/nh@2x.png"
										break
									case "交通银行":
										this.bankList[i].imgLogo =
											"../../../static/images/mine/bank/jiaotognlogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/jh@2x.png"
										break
									case "工商银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/gslogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "农业银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/nongyelogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/nh@2x.png"
										break
									case "民生银行":
										this.bankList[i].imgLogo =
											"../../../static/images/mine/bank/minshenglogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/nh@2x.png"
										break
									case "中信银行":
										this.bankList[i].imgLogo =
											"../../../static/images/mine/bank/zhongxinlogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "广发银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/gflogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "华夏银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/huaxia.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/zsbg.png"
										break
									case "兴业银行":
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/xingye.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/jh@2x.png"
										break
									default:
										this.bankList[i].imgLogo = "../../../static/images/mine/bank/qitalogo@2x.png"
										this.bankList[i].cardColor = "../../../static/images/mine/bank/qt@2x.png"
										break
								}
							}
						} else {
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			addBankCard() {
				uni.$u.route('/pages/mine/manageBankCards/addBankCard');
			},
			edit() {
				uni.$u.route('/pages/mine/manageBankCards/editBankCard');
				let params = {
					type: 'success',
					message: "修改成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				}
				this.$refs.uToast.show({
					...params
				})
			},
			del(val, index) {
				this.$request.baseRequest('post', '/driverPayeeInfo/api/deleteDriverPayee', {
						id: val.id
					}).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.bankList.splice(index, 1)
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		},

	}
</script>

<style lang="scss">
	.content {
		background: white;
		padding: 20rpx;
	}

	.top-title {
		margin: 0 0 20rpx 0;

		.left {
			.text1 {
				font-size: 29rpx;
				color: #1F1F1F;
				font-weight: 700;
			}

			.text2 {
				font-size: 29rpx;
				color: #999999;
			}
		}
	}

	.card-list {
		padding: 0 20rpx;

		.number {
			color: white;
		}
	}

	.add-bankcard {
		background: #EEF4FF;
		color: #2772FB;
		font-weight: 700;
		font-size: 26rpx;
		align-items: center;
		padding: 4rpx 10rpx 4rpx 20rpx;
		border-radius: 30rpx;

	}

	.card-list-item {
		// background: url(../../../static/images/mine/bank/zsbg.png) center no-repeat;
		background-size: cover;
		padding: 60rpx 43rpx 100rpx 43rpx;
		border-radius: 20rpx;
		.carNumber{
			margin-bottom: 20rpx;
		}

		.img {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.right {
			.text1 {
				font-size: 36rpx;
				font-weight: 700;
				color: #FFFFFF;
			}

			.text2 {
				// font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}
	}

	.row2 {
		margin: 20rpx 0;
	}

	.default-card {
		// font-size: 28rpx;
		color: #333333;
	}
</style>