wangluohuoyun-app/pages/order/bankCard.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+")"}' @click="bankOk(item)">
				<view class="flex flex-end number carNumber">{{item.bankCard}}</view>
				<view class="flex align-center">
					<!-- @/static/images/mine/bank/gflogo.png -->
					<image class="img left" :src="item.imgLogo" mode='widthFix'>
					<!-- <image class="img left" src="@/static/images/mine/bank/zhaoshang.png" 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-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true' confirmColor='#F5BA3C'  @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				bankList: [],
				obj:{},
				index:null,
				isShowAlert:false,
				alertTitle:'确认删除该银行卡？'
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
			this.init();
			
		},
		methods: {
			bankOk(item){//设置收款账户
				let obj = {
					 bankCard : item.bankNo,
					 bankDeposit:item.bankDeposit,
					 bankDepositBranch :item.bankDepositBranch,
					 payeeName :item.payeeName
				}
				uni.setStorageSync("payInfo",obj)
				uni.navigateBack({
					delta:1
				})
			},
			confirmClick(){
				this.isShowAlert = false
				this.$request.baseRequest('post', '/driverPayeeInfo/api/deleteDriverPayee', {
						id: this.obj.id
					}).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.bankList.splice(this.index, 1)
						}
				
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			cancelClick(){
				this.isShowAlert = false
			},
			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,
						commonId: this.userInfo.id,
					}).then(res => {
						if (res.code == '200') {
							this.bankList = res.data
							for (let i = 0; i < this.bankList.length; i++) {
								let _obj = this.bankList[i]
								_obj.bankNo = this.bankList[i].bankCard
								_obj.bankCard = this.number(_obj.bankCard)
								switch (_obj.bankDeposit) {
									case "建设银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/jiansheogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/jh.png"
										break
									case "招商银行":
										this.bankList[i].imgLogo =
											"https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zhaoshang.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "中国银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zhongyin.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "邮政银行":
										this.bankList[i].imgLogo =
											"https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/youzhenglogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/nh.png"
										break
									case "交通银行":
										this.bankList[i].imgLogo =
											"https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/jiaotognlogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/jh.png"
										break
									case "工商银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/gslogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "农业银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/nongyelogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/nh.png"
										break
									case "民生银行":
										this.bankList[i].imgLogo ="https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/minshenglogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/nh.png"
										break
									case "中信银行":
										this.bankList[i].imgLogo =
											"https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zhongxinlogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "广发银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/gflogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "华夏银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/huaxia.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png"
										break
									case "兴业银行":
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/xingye.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/jh.png"
										break
									default:
										this.bankList[i].imgLogo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/qitalogo.png"
										this.bankList[i].cardColor = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/qt.png"
										break
								}
							}
							this.$forceUpdate()
						} 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.obj = val
				this.index = index
				this.isShowAlert = true
		
			}
		},

	}
</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: #F5BA3C;
		font-weight: 700;
		font-size: 26rpx;
		align-items: center;
		padding: 4rpx 10rpx 4rpx 20rpx;
		border-radius: 30rpx;

	}

	.card-list-item {
		// background: url(https://taohaoliang.oss-cn-beijing.aliyuncs.com/template/zsbg.png) center no-repeat;
		background-size: cover;
		padding: 60rpx 43rpx 100rpx 43rpx;
		border-radius: 20rpx;
		margin:10px 0;
		.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>