<template>
	<view class="content">
		<view class="pageList">
			<view class="bankCardModel" v-show="showFlag">
				<view class="cardName">
					{{pagedata.bank_name}}
				</view>
				<view class="useName">
					{{pagedata.card_name}}
				</view>
				<view class="phoneNum">
					电话号码：{{pagedata.tel_no}}
				</view>
				<view class="cardBottomModel">
					<view class="cardnum">
						{{pagedata.card_id}}
					</view>
					<view class="deleteBtn" @click="delBank">
						<u-icon name="trash" color="#ffffff" size="22"></u-icon>
					</view>
				</view>
			</view>
			<u-empty :show="!showFlag" mode="data" icon="https://amy.yyinhong.cn/uploads/wximg/nobank.png"></u-empty>
			<view @click="addBankCard" class="addBankCard" v-show="!showFlag">
				添加
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pagedata: [],
				userInfo: {},
				showFlag: false
			}
		},
		onShow() {
			this.getBalanceList();
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/merchant-info', 'GET', {}).then(res => {
					console.log('请求成功')
					this.userInfo = res.data;
				}).catch(err => {
				})
			},
			//添加银行卡
			addBankCard() {
				uni.navigateTo({
					url: '/pageSub-pc/pages/addbank/addbank'
				})
			},
			//获取银行卡
			getBalanceList() {
				this.$request('/hf-mycard', 'GET', {
					member_type: 0
				}).then(res => {
					this.pagedata = res.data;
					if (this.pagedata.card_id) {
						this.showFlag = true
					} else {
						this.showFlag = false
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			delBank() {
				this.$request('/hf-settle-account-delete', 'POST', {
					member_type: 0
				}).then(res => {
					console.log(res.data)
					uni.showToast({
						icon: 'success',
						title: '删除成功'
					})
					this.getBalanceList()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
	}

	.withdrawalBtn {
		width: 168rpx;
		height: 64rpx;
		margin: 60rpx auto;
		border-radius: 64rpx;
		color: #D3195E;
		font-size: 24rpx;
		background-color: #ffffff;
		text-align: center;
		line-height: 64rpx;
	}

	.pageList {
		width: 100%;
		padding-top: 40rpx;
		height: auto;
		overflow-y: scroll;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
	}

	.bankCardModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		margin-bottom: 0;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-image: url('http://amy.yyinhong.cn/uploads/wximg/bankBg.png');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
		height: 200rpx;

		.cardName {
			font-size: 34rpx;
			font-weight: 700;
			line-height: 60rpx;
		}

		.useName {
			font-size: 25rpx;
			font-weight: 700;
			line-height: 40rpx;
		}

		.phoneNum {
			font-size: 24rpx;
			line-height: 50rpx;
		}

		.cardBottomModel {
			height: 60rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}
	}

	.addBankCard {
		width: calc(100% - 100rpx);
		margin: 0 50rpx;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		height: 90rpx;
		color: #ffffff;
		text-align: center;
		letter-spacing: 5rpx;
		line-height: 90rpx;
		font-size: 33rpx;
		background-color: #D3195E;
		border-radius: 90rpx;
	}
</style>