shop-uniapp-240426/pages/user/bankCart/bankCart.vue

<template>
	<view class="bankCart">
		<u-navbar
			:title="$t('page.bankCart.title')"
			:safeAreaInsetTop="false"
			placeholder
			@leftClick="leftClick"
			>
		</u-navbar>
		<view class="list">
			<view class="item" 
			v-for="(item,index) in bankCartList"
			:key="index">
				<view class="Bank-of-deposit">
					<view>{{ item.title }}</view>
					<view class="icon">
						{{ item.name }}
					</view>
				</view>
				<view class="cart-number">
					{{ item.no }}
				</view>
			</view>
			<view class="item add" @click="toEdit()">
				<u-icon name="plus" size="20"></u-icon>
				<view class="text">
					{{ $t('page.bankCart.add-bank-card') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams : {
					uid : 1
				},
				bankCartList : []
			};
		},
		created(){
			this.getBankCartList();
		},
		methods: {
			leftClick(){
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			getBankCartList(){		//获取银行卡列表
				this.request('bankCardPage', {}, this.queryParams).then(res=>{
					if(res.code == 200){
						this.bankCartList = res.result.records
					}
				})
			},
			toEdit(id){
				let url = '/pages/user/bankCart/editBankCart'
				if(id){
					url += '?id=' + id
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bankCart{
	.list{
		.item{
			background-color: #ED762F;
			border-radius: 10px;
			margin: 10px;
			box-sizing: border-box;
			color: #fff;
			box-shadow: 1px 1px 1px 1px #00000021;
			.Bank-of-deposit{
				border-bottom: 1px solid #ffffff99;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				.icon{
					
				}
			}
			.cart-number{
				text-align: center;
				font-size: 40rpx;
				padding: 20px;
			}
		}
		.add{
			padding: 30px 20px;
			background-color: #fff;
			color: #000;
			display: flex;
			align-items: center;
			.text{
				padding-left: 10px;
			}
		}
	}
}
</style>