<template>
	<view class="">
		<navigation>
			Bank Card
			<view class="bread" slot="bread">
				<image src="../../../static/bankCard/nav_icon_add@3x.png" mode="aspectFit"
					@click="goAddCard()"></image>
			</view>
		</navigation>

		<!-- v-for="item,index in record_list" :key="item.id" -->
		<view class="record_body">
			<view class="record_item flex" v-for="item,index in record_list" :key="index">
				<view class="numcon flex">
					<image src="../../../static/bankCard/list_icon_bankcard@3x.png" mode="aspectFit" class="img1">
					</image>
					<view class="num">
						<view class="rec">
							{{item.bankName}}
						</view>
						<view class="cpay">
							{{item.acctId}}
						</view>
					</view>
				</view>
				<view class="time" @click="show=true">
					i
				</view>
			</view>

			<u-mask :z-index="10" :show="show" @click="show = false"></u-mask>
			
			<!-- 下拉选择 -->
			<view class="select_con" v-show="show">
                <view class="select">
                	Select
                </view>
				
				<view class="ed_con" >
					<view class="ed">
						<image src="/static/bankCard/pop_icon_edit@3x.png" mode="aspectFill" class="img"></image>  
						<text class="text">Edit</text>
					</view>
					<view class="ed">
						<image src="/static/bankCard/pop_icon_del@3x.png" mode="aspectFill" class="img"></image>
						<text class="text">Delete</text>
					</view>
				</view>
			 </view>

		</view>



	</view>

</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	import Vue from 'vue';
	import api from '@/utils/api'
	export default {
		data() {
			return {
				record_list: [],
				show: true
			}
		},
		onLoad() {
	const post = api.bankcardList({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post.then(res => {
			  this.record_list=res.data
				})
				.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
				})

		},
		methods: {
			goAddCard() {
        uni.navigateTo({
        	url:'addBankCard/index',
        })
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import './index.css';

	.bread image {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 36rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
