LocalLivingServicesUniapp/pages/groupMeal/users/bankCard-select.vue

<template>
	<u-popup mode="bottom" :border-radius="20"
        :safe-area-inset-bottom="true"
        v-model="show" @close="close"
    >
		<view class="popup-container">
			<view class="popup-header">
				<view class="title">选择提现银行卡</view>
				<view class="subtitle">请留意各银行到账时间</view>
			</view>

			<scroll-view scroll-y class="card-list-scroll">
				<!-- 银行卡列表 -->
				<view 
					class="card-item" 
					v-for="card in dataList" 
					:key="card.id"
					@click="selectCard(card)"
				>
					<image class="bank-icon" :src="card.icon" mode="aspectFit"></image>
					<text class="card-name">{{ card.name }} ({{ card.last4 }})</text>
					<u-icon v-if="selectedCardId === card.id" name="checkbox-mark" color="#2979ff" size="40"></u-icon>
				</view>

				<!-- 添加银行卡 -->
				<view class="card-item add-card" @click="addCard">
					<image class="bank-icon" src="/static/groupMeal/icon_bankadd.png" mode="aspectFit"></image>
					<text class="card-name">添加银行卡</text>
					<u-icon name="arrow-right" color="#C7C6CA" size="32"></u-icon>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'BankCardSelector',
	props: {
		// 银行卡列表
		dataList: {
			type: Array,
			default: () => []
		},
		// 当前选中的银行卡ID (v-model)
		value: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
            show: false,
			selectedCardId: this.value
		};
	},
	watch: {
		// 监听v-model的变化，同步内部状态
		value(newVal) {
			this.selectedCardId = newVal;
		}
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		selectCard(card) {
			this.selectedCardId = card.id;
			// 通过v-model更新父组件的值
			this.$emit('input', card.id);
			this.$emit('select', card);
			this.close();
		},
		addCard() {
			console.log('跳转到添加银行卡页面');
			uni.navigateTo({
				url: '/pages/wallet/AddBankCard' // 假设这是添加银行卡的页面路径
			});
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-drawer-bottom {
	background: #F7F8FC;
}
.popup-container {
    .popup-header {
        padding: 20rpx 30rpx;
        text-align: center;
        border-bottom: 1rpx solid #f0f0f0;
        .title {
            font-size: 30rpx;
            font-weight: 500;
            color: #232832;
        }
        .subtitle {
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(51,51,51,0.8);
        }
    }
    .card-list-scroll {
        max-height: 60vh; // 限制最大高度，超出则滚动
		background: #fff;
    }
    .card-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;

        .bank-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
        }
        .card-name {
            flex: 1;
            font-size: 30rpx;
            color: #303133;
        }
    }
}
</style>