BlockChainH5/pages/wallet/bankList.vue

<template>
	<view class="selectCard">
		<view class="bankInfo" v-if="lists.length>0" v-for="(item,index) in lists" :key='index'
			@longpress='delBank(item.bank_account_id,index)'>
			<image class="bankLogin" @click="selectBank(item)" :src="item.bank.cover" mode="widthFix" />
			<view class="right" @click="selectBank(item)">
				<view class="left">
					<view class="title">{{item.bank.name}}
						<view class="tags">快捷支付</view>
					</view>
					<view class="des">储值卡</view>
					<view class="no">{{item.no}}</view>
				</view>
			</view>
			<u-icon name="edit-pen-fill" @click='editBank(item.bank_account_id)' color="rgba(255,255,255,0.6)"
				size='50' />
		</view>
		<!-- 底部新增按钮 -->
		<view class="addBtn" @click="$Router.push({	name: 'addBank'})">
			<u-icon name="plus" label-pos='bottom' color='#fff' label-color='#fff' label='新增' />
		</view>
		<!-- 无列表 -->
		<no-list v-if="lists.length === 0" name='no-shop' txt="没有任何提现银行 ~ " />
		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		withdrawsAccountsList,
		withdrawsAccountsDelete
	} from '@/apis/interfaces/withdraws'
	export default {
		data() {
			return {
				lists: [],
				page: 1,
				has_more: true
			}
		},
		onLoad() {
			this.withdrawsAccountsList()
		},
		onShow() {
			if (uni.getStorageSync('refresh')) {
				this.lists = []
				this.page = 1
				this.has_more = true
				this.withdrawsAccountsList()
			}
		},
		onReachBottom() {
			if (this.has_more) {
				this.page = this.page + 1
				this.withdrawsAccountsList()
			} else {
				this.$refs.uToast.show({
					title: '哎呦，没有更多了~',
					type: 'primary',
					duration: 3000
				})
			}
		},
		methods: {
			// 添加银行
			withdrawsAccountsList() {
				let data = {
					page: this.page
				}
				withdrawsAccountsList(data).then(res => {
					console.log(res)
					this.lists = this.lists.concat(res.data)
					this.has_more = res.page.has_more
					uni.setStorageSync('refresh', false)
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'primary',
						duration: 3000
					})
				})
			},
			// 跳转到编辑银行卡的页面
			editBank(id) {
				this.$Router.push({
					name: 'addBank',
					params: {
						id: id
					}
				})
			},
			// 删除银行
			delBank(id, index) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确认删除该银行',
					cancelColor: '#cacaca',
					cancelText: '我再想想',
					confirmColor: '#7C52FC',
					confirmText: '确认删除',
					success(res) {
						if (res.confirm) {
							withdrawsAccountsDelete(id).then(res => {
								console.log(res)
								that.lists.splice(index, 1)
								if (that.lists.length === 0) {
									uni.navigateBack({})
									uni.setStorageSync('refresh', true)
								}
							}).catch(err => {
								this.$refs.uToast.show({
									title: err.message,
									type: 'primary',
									duration: 3000
								})
							})
						}
					}
				})
			},
			// 选择银行返回上一页携带参数
			selectBank(item) {
				let bankInfo = {
					name: item.bank.name + '-' + item.no.substring(item.no.length - 4),
					bank_account_id: item.bank_account_id
				}
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				console.log(bankInfo)
				prevPage._data.bankInfo = bankInfo
				uni.navigateBack() //返回上一页面
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addBtn{
		position: fixed;
		bottom: 0;
		margin: 40rpx;
		text-align:  center;
		width: 130rpx;
		height: 130rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 50%;
		z-index: 100;
		right: 0;
		box-shadow: 0 0 20rpx 20rpx rgba($color: #fff, $alpha: .5);
		background-image: linear-gradient(to right, #7c52fc, #976dff);
	}
	.selectCard {
		width: 100%;
		min-height: 100vh;
		padding-top: 30rpx;
		background-color: #fff;
		padding-bottom: 80rpx;

		.bankInfo {
			width: calc(100% - 60rpx);
			background-image: linear-gradient(to right, #7c52fc, #976dff);
			box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #976dff, $alpha: 0.6);
			margin: 20rpx 30rpx 0 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			position: relative;
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			z-index: 1;

			.bankLogin {
				width: 70rpx;
				height: 70rpx;
				opacity: .9;
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				box-sizing: border-box;
				color: rgba($color: #fff, $alpha: .9);
				position: relative;
				z-index: 1;

				.u-icon {
					position: absolute;
					background-color: pink;
					z-index: 100;
					right: 0;
				}

				.left {
					flex: 1;

					.title {
						font-size: 38rpx;
						font-weight: bold;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;

						.tags {
							color: $text-price;
							font-size: 24rpx;
							margin-left: 20rpx;
							padding: 4rpx 14rpx;
							position: relative;
							display: inline-block;
							color: #7C52FC;

							&::before {
								background: rgba($color: #fff, $alpha: .8);
								z-index: -1;
								position: absolute;
								content: '';
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								transform: skewX(-10deg);
							}
						}
					}

					.des {
						font-size: 28rpx;
						margin-top: 14rpx;
					}

					.no {
						font-size: 36rpx;
						font-weight: bold;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>