web-base-h5/pages/mine/bindBank/index.vue

<template>
	<view class="content">
		<view class="tablebox" v-if="tableData.length > 0">
			<view class="card" v-for="(item, index) in tableData"
				:style="{ backgroundImage: 'url(' + item.backgroundImg + ')'}" :key="index">
				<view class="cardtopflex">
					<view class="cardtopflex2">
						<view class="imgbox"><img :src="item.logo" alt="" /></view>
						<view class="titlebox">
							<view class="cardtitle">{{item.bankName}}</view>
							<view class="cardtitle2">{{'储蓄卡'}}</view>
						</view>
					</view>
					<view class="flexs_1" v-if="item.defaultCard==1">
						<view class="qiu"></view>
						<view v-if="userInfo.pkCountry == 1">{{'默认'}}</view>
						<view v-else style="color: #000;font-weight: bold;" class="cardfooter">{{'默认'}}</view>
					</view>
					<view class="flexs_1" v-else>

						<view style="color: #fff; font-weight: bold; cursor: pointer" @click="setDefault(item.pkId)"
							class="cardfooter">{{'设为默认'}}</view>
					</view>
				</view>
				<view class="cardNumber">{{ item.cardNumber }}</view>
				<view v-if="userInfo.pkCountry == 1" class="cardfooter" @click="removeBind(item)">
					[{{'解绑'}}]</view>
				<view v-else style="color: #000;font-weight: bold;" class="cardfooter" @click="removeBind(item)">
					[{{'解绑'}}]</view>
			</view>
		</view>
		<u-modal :showCancelButton="true" @cancel="modalShow=false" :content="'是否确认解绑银行卡'" :show="modalShow"
			@confirm="confirmRemove" ref="uModal" :asyncClose="true"></u-modal>
		<view class="footerbtn" @click="goAdd">
			+{{'添加银行卡'}}
		</view>

		<u-modal :showCancelButton="true" @cancel="modalShow2=false" content="当前解绑为默银行卡，请设置为另一张卡为默认银行卡"
			:show="modalShow2" @confirm="confirmRemove2" ref="uModal" :asyncClose="true"></u-modal>
		<!-- <el-button class="footerbtn" @click="bindBank(true)">{{'绑定银行卡'}}</el-button> -->
	</view>
</template>

<script>
	import * as ban from "@/config/balance.js"
	export default {
		data() {
			return {
				tableData: [],
				modalShow: false,
				modalShow2: false,
				pkId: "",
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('User')
		},
		onShow() {
			this.getSearch()
		},
		methods: {
			setDefault(pkId) {
				ban.updateDefault({
					pkId: pkId
				}).then((res) => {
					if (res.code == 200) {
						uni.$u.toast(res.msg)
						this.getSearch();
					} else {
						uni.$u.toast(res.msg)
					}
				});
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/mine/bindBank/bindBank'
				})
			},
			removeBind(item) {
				this.pkId = item.pkId
				if (item.defaultCard == 1) {
					this.modalShow2 = true
				} else {
					this.modalShow = true
				}

			},
			confirmRemove2() {
				this.modalShow2 =false
				this.modalShow = true
			},
			//解除绑定
			confirmRemove() {
				ban.removeBankBind({
					pkId: this.pkId
				}).then((res) => {
					if (res.code == 200) {
						uni.$u.toast(res.msg)
						this.modalShow = false
						this.getSearch();
					} else {
						uni.$u.toast(res.msg)
						this.modalShow = false
					}
				});
			},
			//点击绑定银行卡
			bindBank(val) {
				// this.isAdd = true;
				// this.jdTl = val;
			},
			getSearch() {
				ban.getBankList().then((res) => {
					this.tableData = res.data;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f9f9f9;
		padding: 22rpx;

		.tablebox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.card {
				width: 100%;
				background-color: rgba(170, 45, 42, 0.9);
				background-size: 100% 100%;
				border-radius: 20rpx;
				margin: 20rpx 0;
				padding: 28rpx 32rpx 40rpx 32rpx;
				margin-top: 20rpx;

				.cardtopflex {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.flexs_1 {
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						color: #ffffff;
						font-size: 24rpx;

						.qiu {
							margin-right: 10rpx;
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: rgb(47, 236, 47);
						}
					}

					.cardtopflex2 {
						.imgbox {
							margin-right: 20rpx;

							img {
								width: 68rpx;
								height: 68rpx;
							}
						}

						.titlebox {
							color: #ffffff;
							text-align: left;

							.cardtitle {
								font-size: 36rpx;
								font-weight: 600;
							}

							.cardtitle2 {
								font-size: 20rpx;
								margin-top: 8rpx;
								font-weight: 400;
							}
						}
					}

				}

				.cardNumber {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					margin-top: 100rpx;
					margin-left: 36rpx;
				}

				.cardfooter {
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					margin-top: 24rpx;
					cursor: pointer;
				}
			}
		}

		.footerbtn {

			display: flex;
			align-items: center;
			padding: 40rpx;
			background: #ffffff;
			font-size: 24rpx;
			font-weight: 600;
			border-radius: 20rpx;
			margin-top: 32rpx;
			width: 100%;
		}
	}
</style>