fundHoldApp/pages/mine/bankCard/index.vue

<template>
	<view class="container container-with-elep full-height-with-titile">
		<view class="card-list">
			<view class="card" v-for="(card, index) in cards" :key="index"
				:style="{ backgroundColor: colors[index%colors.length], backgroundPosition: bgPst[index%bgPst.length], backgroundSize:getRandomByseed(index*13) }"
				@click.stop="navigateToDetail(card)">
				<view class="card-logo">
					<uni-icons type="wallet" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="card-info">
					<text class="bank-name">{{ card.bankName }}</text>
					<text class="card-type">{{$languageData.settings.depCard}}</text>
				</view>
				<text class="card-number">{{ card.cardNum }}</text>
			</view>
		</view>
		<view class="add-card" @click.stop="navigateToAdd()">
			<uni-icons type="plusempty" size="20" color="#000000"></uni-icons>
			<text>{{$languageData.settings.addCard}}</text>
			<!--      <text class="promotion">绑新卡送立减金</text -->>
		</view>
		<view class="">
			<loading ref="loading" :custom="false" :shadeClick="false" :type="1" />
		</view>
	</view>
</template>

<script>
	import {
		getBankList
	} from '@/api/bank/index.js'
	export default {
		data() {
			return {
				cards: [{bankName:this.$languageData.tmp.zsyh, cardNum:'**************3910'},
				{bankName:this.$languageData.tmp.gsyh, cardNum:'**************9527'},
				{bankName:this.$languageData.tmp.nyyh, cardNum:'**************6379'}],
				colors: ['#2D2D2D', '#FDBE44', '#e54d42', '#0081ff', '#d3463c', '#006dd3'],
				bgPst: ['center', 'center', 'right', 'left', 'bottom', 'top'],
				param: {
					userId: this.$store.state.user.userId,
				}
			}
		},
		onLoad() {
			//TODO 暂时不走这一段
			if(false){
				this.selectBankList();
				uni.$on('refreshList', () => {
					this.selectBankList(); // 使用箭头函数确保 this 指向正确
				});
			}
			this.languageData = this.$languageData;
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.bankCard
			});
		},
		onUnload() {
			uni.$off('refreshList'); // 移除监听事件
		},
		methods: {
			getRandomByseed(seed, min = 190, max = 300) {
				seed = (seed * 9301 + 49297) % 233280;
				const rnd = seed / 233280.0;
				return Math.round(min + rnd * (max - min)) + '%'
			},
			selectBankList() {
				this.$nextTick(() => {
					this.$refs.loading.open();
				})
				getBankList(this.param).then(res => {
					this.cards = res.rows
					setTimeout(() => {
						this.$refs.loading.close();
					}, 650)
				}).catch(e => {
					this.$refs.loading.close();
				})
			},
			navigateToAdd() {
				this.$tab.navigateTo('/pages/mine/bankCard/addCard')
			},
			navigateToDetail(item) {
				// console.log("---item---",item)
				let obj = item
				uni.navigateTo({
					url: `/pages/mine/bankCard/cardDetail?data=${encodeURIComponent(JSON.stringify(obj))}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.card-list {
		margin-top: 20rpx;
	}

	.card {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background-color: #2D2D2D;
		background-image: url('/static/svgs/lines.svg');
		background-size: 259%;
		background-position: center;
	}

	.card-logo {
		margin-bottom: 20rpx;
	}

	.card-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.bank-name {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.card-type {
		font-size: 24rpx;
		color: #ffffff;
	}

	.card-number {
		font-size: 28rpx;
		color: #ffffff;
	}

	.add-card {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.add-card text {
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.promotion {
		margin-left: auto;
		font-size: 24rpx;
		color: #f1a43c;
	}
</style>