<template>
	<view>
		<view class="width100 mart20" v-for="(item,index) in cardList" :key="index">
			<view class="width90 conts backcolorb9" v-if="item.type == 1">
				<view class="width90 alijusstart">
					<image src="../static/unioncard.png" mode="widthFix" style="width: 80rpx;"></image>
					<text class="font18 fontwig6 fcorfff">工会卡</text>
				</view>
				<view class="width90 font18 fontwig6 fcorfff">
					卡号:<text class="margle">{{item.cardNo}}</text>
				</view>
				<!-- <view class="width90 font18 fontwig6 fcorfff">
					余额:<text class="margle">122</text>
				</view> -->
				<view class="width90 mart10 alijusstart font14">
					<view class="width30 height30 backcorfff colorb9  fotct border-r"
						@click="jumpDetails(item.cardNo,item.type)">查看详情</view>
					<view class="width30 height30 backcorfff colorb9 fotct border-r margle20"
						@click="unionCardPay(item.cardNo)">
						充值余额</view>
				</view>
			</view>
			<view class="width90 conts backcolor32" v-if="item.type == 2">
				<view class="width90 alijusstart">
					<image src="../static/oilcard.png" mode="widthFix" style="width: 80rpx;"></image>
					<text class="font18 fontwig6 fcorfff">油卡</text>
				</view>
				<view class="width90 font18 fontwig6 fcorfff">
					卡号:<text class="margle">{{item.cardNo}}</text>
				</view>
				<!-- <view class="width90 font18 fontwig6 fcorfff">
					余额:<text class="margle">122</text>
				</view> -->
				<view class="width90 mart10 alijusstart font14">
					<view class="width30 height30 backcorfff color32 fotct border-r"
						@click="jumpDetails(item.cardNo,item.type)">查看详情</view>
				</view>
			</view>
		</view>
		<view class="width90 height70w border-r mart20 alijusstart backcorfff" @click="jumpBindCard()">
			<image src="../static/addcards.png" mode="widthFix" class="margle10" style="width: 40rpx;"></image>
			<text class="margle font16 fcor333">添加新卡</text>
		</view>
	</view>
</template>

<script>
	import {
		getUserCardList
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				cardList: [] //绑定卡列表
			}
		},
		onLoad() {
			this.user = app.globalData.userInfo;
		},
		onShow() {
			this.getUserCardList();
		},
		methods: {
			//查询卡列表
			getUserCardList() {
				uni.showLoading({
					title: '加载中...'
				})
				getUserCardList().then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.cardList = res.return_data;
						return;
					}
				});
			},
			//跳转充值
			unionCardPay(item) {
				uni.navigateTo({
					url: '../trade-union-recharge/trade-union-recharge?cardId=' + item + '&RechargeType=1'
				})
			},
			//跳转详情
			jumpDetails(item, item1) {
				uni.navigateTo({
					url: '../cardsDetails/cardsDetails?cardNo=' + item + '&des=' + item1
				})
			},
			//跳转绑定卡
			jumpBindCard() {
				uni.navigateTo({
					url: '../../pages/user/bindingCard/bindingCard'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.conts {
		border-radius: 12rpx;
		padding: 12px 0;
	}
</style>
