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

<template>
	<view class="container" @click="choice(item.bankCardId)" v-for="(item,index) in state.bankListArr">
		<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(item.bankCardId)'>解除绑定</view>
			</view>
			<view class="value">{{item.bankCardId}}</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: '',
		params: {}, //传过来的参数
		choiceCard: "",
		bankListArr: []
	})
	onLoad((option : any) => {
		if (option.value) {
			state.params = JSON.parse(decodeURIComponent(option.value))
			state.name = state.params.name;
			state.choiceCard = state.params.choiceCard;
		}
		if (option.name) {
			state.name = option.name;
		}
		console.log("option", state.params)
		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)
			state.bankListArr = data.data
			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();
		})
	}
	const choice = (cardNumber) => {
		// if (!state.choiceCard) {
		// 	navTo('/subpackage/personal-center/setting/bank-card/bank-card-add')
		// } else {
		uni.redirectTo({
			//关闭当前页面，跳转到应用内的某个页面。
			url: `/subpackage/after-sale/account-recharge/recharge?cardNumber=${cardNumber}&value=${encodeURIComponent(JSON.stringify(state.params))}`
		});
		// navTo(`/subpackage/after-sale/account-recharge/recharge?cardNumber=${cardNumber}`)
		// }
	}
</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>