frontend-app/pages/mine_package/mine_bank_card/mine_bank_card.vue

<template>
	<view class="mine_bank_warp">
		<Header :leftTitle="$t('bankCard.title')" left-path-type="switchTab" left-path="/pages/mine/mine" />
		<view class="mine_bank_content_warp">
			<view class="bank_title">
				银行卡（{{ bankList.length }}张）
			</view>
			<view class="bank_list">
				<view v-if="bankList.length !== 0" class="bank_item" v-for="item in bankList" :key="item.id">
					<view class="bank_data">
						<up-image :src="item.bankLogo || '/static/bank/default.png'" width="50" height="50"
							bgColor="#f1f6ff00"></up-image>
						<view class="bank_info">
							<view class="bank_bank_name">{{ item.bankName }}</view>
							<view class="bank_user_name">{{ item.bankUsername }}</view>
						</view>
					</view>
					<view class="bank_parting_line"></view>
					<view class="operate_item">
						<view>{{ encipherBankNumber(item.bankNo) }}</view>
						<view class="operate_" @click="deleteClick(item)">解绑</view>
					</view>
				</view>
				<view v-else class="not_order_warp">
					<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_order.png" width="80" height="80"
						bgColor="#f1f6ff00"></up-image>
					<view class="not_order_msg_warp">还未绑定银行卡哦～</view>
				</view>
			</view>
			<view class="add_but" @click="jumpAddBank">
				添加银行卡
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getBankList, bindBank, unbind } from '@/api/bank.js';
import { encipherBankNumber } from '@/utils/index.js';
import Header from '@/components/header.vue';
import { getUserInfo } from '@/api/auth.js'

export default {
	components: { Header },
	data() {
		return {
			bankList: [],
			currentUserData: {},
		}
	},
	onLoad() {
		this.getBankList();
		this.getUserInfo();
	},
	methods: {
		encipherBankNumber,
		jumpAddBank() {
			const currentUserData = this.currentUserData;
			if (currentUserData && Object.keys(currentUserData).length !== 0 && currentUserData.certStatus && currentUserData.certStatus !== 0) {
				uni.navigateTo({
					url: '/pages/mine_package/mine_bank_add/mine_bank_add',
				})
			} else {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "还未进行实名认证，认证完才能绑定银行卡信息",
				});
			}
		},
		// 查询用户等级
		async getUserInfo() {
			const result = await getUserInfo();
			if (result && result.bizcode === 100) {
				const data = result.data;
				this.currentUserData = result.data || {};
			}
		},
		async getBankList() {
			const resp = await getBankList();
			if (resp && resp.bizcode === 100) {
				this.bankList = resp.data || [];
			}
		},
		// 删除
		deleteClick(item) {
			const then = this;
			uni.showModal({
				title: '提示',
				content: '是否要解绑该银行卡？',
				success: function (res) {
					if (res.confirm) {
						then.deleteFun(item);
					}
				}
			});
		},
		// 删除的方法
		async deleteFun(item) {
			const params = {
				id: item.id,
			}
			const respon = await unbind(params);
			if (respon && respon.bizcode === 100) {
				this.getBankList();
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.mine_bank_warp {
	height: calc(100vh - 58rpx);
	background-color: $app-bj;
	overflow-y: hidden;

	.mine_bank_content_warp {
		padding: 30rpx;
	}

	.bank_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}

	.bank_list {
		margin-top: 20rpx;
		height: calc(100vh - 250rpx);
		overflow: auto;
	}

	.bank_item {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.bank_data {
		display: flex;
		align-items: center;
	}

	.bank_info {
		margin-left: 10rpx;
	}

	.bank_bank_name {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.bank_user_name {
		font-weight: 500;
		font-size: 22rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.bank_parting_line {
		height: 1rpx;
		background: #EEEEEEFF;
		border-radius: 0rpx 0rpx 1rpx 1rpx;
		margin: 30rpx auto;
	}

	.operate_item {
		display: flex;
		justify-content: space-between;

		.operate_ {
			padding: 10rpx 30rpx;
			background: #F3F3F3;
			border-radius: 25rpx;
			font-size: 24rpx;
			color: #222222;
			margin-left: 20rpx;
		}
	}
}
</style>