guosen-ldt-shop/pages/withdraw/select-bank.vue

<template>
	<view class="margin-20">
		<u-radio-group v-model="radio" active-color="#ff9447" size="40">
			<view @click="radio=item.id" v-for="(item,index) in bankList" :key="index" class="bank" v-if="!$isEmpty(bankList)">
				<view class="left center">
					<image :src="'/static/bank/'+item.bankType+'.png'" mode=""></image>
					<view class="content">
						<text>{{item.bankTypeLabel}}</text>
						<text>{{item.cardNo}}</text>
					</view>
				</view>
				<view class="center">
					<u-radio :name="item.id"></u-radio>
				</view>
			</view>
		</u-radio-group>
			
		<view class="">
			<view class="" style="height: 120rpx;"></view>
			<view style="background-color: #FFFFFF ;height: 120rpx;" class="footer-fixed center">
				<view @click="confirm" class="cu-btn df btn-bg-color  radius " style="width: 86%;height: 80rpx;">
					<text>确认</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				bankList: [],
				radio: ''
			};
		},
		onLoad(options) {
			this.radio=options.id
			this.fetchCardList()
		},
		methods: {
			async fetchCardList() {
				let params = {
					userId:this.vuex_shopId,
					size: 10
				}
				let res=await this.$api.userBank.appList(params)
				if (!this.$isEmpty(res.data.records)) {
					this.bankList = res.data.records
				}
			},
			confirm(){
				let bankList= this.bankList.filter(item=>item.id==this.radio)
				let params={
					bank:bankList[0]
				}
				this.$util.backWithParams(params)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bank {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 44rpx;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;

			image {
				width: 90rpx;
				height: 90rpx;
				margin-right: 20rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				text:first-child {
					color: #252525;
					font-weight: 800;
					font-size: 34rpx;
				}

				text:last-child {
					margin-top: 15rpx;
					color: #888888;
					font-size: 26rpx;
				}
			}
		}
	}

	.card_add {}


	.submit-btn {
		background-color: #EE9230;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>