web-africa-h5/pages/user/card/list.vue

<template>
	<view>
		<template v-if="listData.length > 0">
			<view class="cared-list">
				<view v-for="(item, index) in listData" :key="index" class="card-item  hh100">
					<image class="mr20 card-bg" :src="item.backgroundImg" mode="aspectFill"></image>
					<view class="d-b-c mb20 pr" style="z-index: 1;">
						<view class="flex-1 d-b-s" style="height: 80rpx;">
							<image class="mr20" :src="item.logo" mode=""
								style="width: 80rpx;height: 80rpx;flex-shrink: 0;"></image>
							<view class="flex-1">
								<view class="f36 fb  mb10">{{item.bankName}}</view>
								<view class="f24 fb">{{getCardInfo(item.cardNumber,'cardTypeName')}}</view>
							</view>
							<view class="d-e-c" v-if="item.defaultCard">
								<view class="tips-box mr10"></view>
								<view class="fb f28">{{$t('w_0263')}}</view>
							</view>
							<view class="d-e-c" v-else>
								<view class="defaul-btn" @click="setDefault(item.pkId)">{{$t('PER_DA_23')}}</view>
							</view>
						</view>
					</view>
					<view class="pr" style="z-index: 1;margin-top: 180rpx;margin-left: 34rpx;">
						<view class="flex-1 f32 fb ">{{ item.cardNumber }}</view>
						<view class="d-e-c" style="margin-top: 46rpx;">
							<view class="f28 fb ml20" @click="unBind(item.pkId)">[{{$t('MY_ORD_68')}}]</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view>
				<image class="card-null" src="/static/bg/card-null.png" mode=""></image>
			</view>
		</template>
		<button class="normal-sub-btn" @click="gotoPage('/pages/user/card/add')">{{$t('w_0179')}}</button>
	</view>
</template>

<script>
	import cardJs from './card.js';
	export default {
		data() {
			return {
				listData: [
					// 	{
					// 	pkBank: 505, //银行
					// 	cardNumber: '6212613047007675463', //银行卡号
					// 	backgroundImg: 'https://hzs-in.oss-cn-beijing.aliyuncs.com/test-new/20221111/f5f775bb-37ca-43f6-aa0d-6d170cbd13b3.jpg', //背景图
					// 	defaultCard: 1 //是否默认 1：默认 0：非默认
					// },
				]
			};
		},
		onShow(e) {
			this.getData();
		},
		methods: {
			getCardInfo(card, name) {
				if (cardJs.verifyBankCardNumber(card)) {
					console.log(cardJs.bankCardAttribution(card));
					let res = cardJs.bankCardAttribution(card);
					return res[name]
				} else {
					return ''
				}
			},
			/*获取数据*/
			getData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/bank/list', {}, function(res) {
					self.listData = res.data;
					self.loadding = false;
					uni.hideLoading();
				});
			},
			/*解绑*/
			unBind(e) {
				let self = this;
				uni.showModal({
					content: self.$t('MY_ORD_69') + '?',
					success(o) {
						if (o.confirm) {
							uni.showLoading({
								title: 'Loading...'
							})
							self._get(
								'member/api/bank/unbind-bank', {
									pkId: e
								},
								function(res) {
									self.getData();
									uni.showModal({
										title: self.$t('w_0034'),
										content: self.$t('w_0089')
									})

								},
								false, com => {
									uni.hideLoading();
								}
							);
						}
					}
				})

			},
			setDefault(e){
				console.log(e);
				let self = this;
				// self.default_id = e;
				self._get(
					'member/api/bank/update-default', {
						pkId: e
					},
					function(res) {
						self.getData();
						uni.showModal({
							title: self.$t('w_0034'),
							content: self.$t('fn_056')
						})
					}
				);
				return false;
			}
		}
	};
</script>

<style lang="scss">
	.card-null {
		width: 592rpx;
		height: 382rpx;
		display: block;
		margin: 0 auto;
		margin-top: 280rpx;
		margin-bottom: 380rpx;
	}

	.cared-list {
		margin-top: 7rpx;
		background-color: #fff;
		padding: 0 23rpx;
		margin-bottom: 60rpx;
	}

	.card-item {
		position: relative;
		width: 100%;
		height: 464rpx;
		padding: 44rpx 32rpx 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.card-bg {
		position: absolute;
		width: 100%;
		height: 464rpx;
		left: 0;
		top: 0;
		z-index: 0;
		border-radius: 15rpx;
	}

	.card-item:last-child {
		border: none;
	}

	.defaul-btn {
		font-size: 28rpx;
		color: #333;
		border: 1rpx solid #333;
		border-radius: 20rpx;
		height: 39rpx;
		text-align: center;
		line-height: 39rpx;
		padding:0 12rpx;
		font-weight: bold;
	}
	.tips-box{
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: rgb(47, 236, 47);
	}
</style>