zhywpt-sp/subpackage/personal-center/setting/bank-card/bank-card.vue

<template>
	<view class="container" @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
		<view class="">
			<image class="bg" style="width:100%;height: 260rpx;" :src="`${$imgUrl}bank-bg.png`"></image>
			<view class="content">
				<view class="flex">
					<image style="width:68rpx;height:68rpx;" :src="`${$imgUrl}gongshang.png`">
					</image>
					<view style="margin-left: 15rpx;" class="">
						<view class="bank">工商银行</view>
						<view class="card">储蓄卡</view>
					</view>
				</view>
				<view class="button" @click.stop='delCard(11)'>解除绑定</view>
			</view>
			<view class="value">6216 **** **** 8721</view>
			<!-- <view class='default'>默认</view> -->
		</view>
	</view> 
	<view class="container" @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
		<view class="">
			<image class="bg" style="width:100%;height: 260rpx;" :src="`${$imgUrl}bank-bg.png`"></image>
			<view class="content">
				<view class="flex">
					<image style="width:68rpx;height:68rpx;" :src="`${$imgUrl}gongshang.png`">
					</image>
					<view style="margin-left: 15rpx;" class="">
						<view class="bank">工商银行</view>
						<view class="card">储蓄卡</view>
					</view>
				</view>
				<view class="button" @click.stop='delCard()'>解除绑定</view>
			</view>
			<view class="value">6216 **** **** 8721</view>
			<view class='default'>默认</view>
		</view>
	</view> 
       <view style='margin: 40rpx 30rpx;' @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')">
			<submit-button title="+ 添加银行卡"></submit-button>
		</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import {request} from "@/utils/network/request.js";
	import {queryBankCard,delBankCard} from "@/utils/network/api.js";
	import {stringToJson} from "@/utils/network/encryption.js";
	import {navTo} from '@/utils/utils';
	import { onLoad} from "@dcloudio/uni-app";
	const state = reactive({
		name:''
	})
	onLoad((option : any) => {
		state.name=option.name;
		getBankList();
	})
	const getBankList=()=>{
		const options = {
			type: 2,
			data: {
				'accountId': state.name
			},
			method: "POST",
			showLoading: true,
		};
		request(queryBankCard, options).then((res) => {
			const data = stringToJson(res.bizContent)
			console.log("获取银行卡",data)
		})
	}
	const delCard=(cardId)=>{
		const options = {
			type: 2,
			data: {
				'accountId': state.name,
				'bankCardId':cardId
			},
			method: "POST",
			showLoading: true,
		};
		request(delBankCard, options).then((res) => {
			const data = stringToJson(res.bizContent)
			console.log("删除银行卡",data);
			getBankList();
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 30rpx 0 30rpx;
        position:relative;
		.flex {
			display: flex;
			align-items: center;
		}

		.value {
			position: absolute;
			top: 160rpx;
			left: 30rpx;
			right: 30rpx;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 36rpx;
		}
        .default{
			position: absolute;
			top: 235rpx;
			left: 60rpx;
			font-size: 29rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
		}
		.content {
			padding: 30rpx;
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			right: 30rpx;
			display: flex;
			justify-content: space-between;

			.bank {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
			}

			.card {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 24rpx;
				margin-top: 5rpx;
			}

			.button {
				height: 48rpx;
				line-height: 48rpx;
				border: 1px solid #FFFFFF;
				border-radius: 20rpx;
				color: #ffffff;
				font-size: 24rpx;
				text-align: center;
				padding: 0 20rpx;
			}
		}
	}
</style>