<template>
	<view>
		<u-navbar :is-back="true" title="银行卡" :title-bold="true" :title-size="34" 
		:background="{background: '#f1f1f1'}"
			title-color="#404133" :border-bottom="false" z-index="1001">
			<view slot="right" class="u-m-r-20">
				<u-icon name="more-dot-fill" size="48"></u-icon>
			</view>
		</u-navbar>
		<template v-if="imgList.arr.length>0">
		<view class="yinhangitem" v-for="item in imgList.arr" :style="{backgroundImage:'url( '+ item.bg2x_url +' )'}"
				:key="item.bank_type">
			<image class="itemlogo1" :src="item.logo1x_url" mode=""></image>
			<view class="info">
				<view class="itemtitle">{{item.bank_desc}}<br><span>储蓄卡</span></view>
				<view class="itemnum"><span>·</span><span>·</span><span>·</span><span>· &nbsp;</span>
					<span>·</span><span>·</span><span>·</span><span>· &nbsp;</span>
					<span>·</span><span>·</span><span>·</span><span>· &nbsp;</span>
					{{item.bank_type}}
				</view>
			</view>
			<image class="itemlogo" :src="item.wl1x_url" mode="heightFix"></image>
		</view>
		</template>
		<view class="add">
			<span class="iconfont icon-jia"></span>
			<span>添加银行卡</span>
			<view>绑新卡送立减金</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:{
					arr:[]
				}
			};
		},
		onLoad() {
			let that=this;
			plus.io.resolveLocalFileSystemURL('/static/xml/tu.xml', (entry) => {
				entry.file(function(file) {
					const fileReader = new plus.io.FileReader()
					fileReader.onloadend = (evt) => {
						const data = JSON.parse(evt.target.result);
						that.imgList.arr = data.bank_urls_list;
					}
					fileReader.readAsText(file, 'utf-8')
				})
			}, (err) => {
				console.log("发生了错误", err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		height: 140rpx;
		width: calc(100% - 36rpx);
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 10rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 40rpx;
			margin-right: 16rpx;
			font-weight: 700;
		}

		div {
			color: #cea337;
			font-size: 24rpx;
			padding: 0 14rpx;
		}
	}

	.yinhangitem {
		background-repeat: no-repeat;
		background-size: 200%;
		background-position: center;
		position: relative;
		display: flex;
		height: 220rpx;
		width: calc(100% - 36rpx);
		// background-color: black;
		border-radius: 16rpx;
		margin: 10rpx auto;
		padding: 30rpx;
		box-sizing: border-box;

		.itemlogo1 {
			width: 80rpx;
			height: 80rpx;
		}

		.info {
			padding: 0 18rpx;
			box-sizing: border-box;
			color: white;

			.itemtitle {
				span {
					font-size: 24rpx;
					color: #cbcece;
				}
			}

			.itemnum {
				// font-weight: 700;
				font-size: 44rpx;
				padding-top: 40rpx;

				span {
					font-weight: 700;
				}
			}
		}

		.itemlogo {
			position: absolute;
			right: 20rpx;
			top: 0;
			// width: 100rpx;
			height: 100%;
		}
	}
</style>
<style>
	page {
		background-color: #f1f1f1;
	}
</style>
