hire-wx-houxuanren/pagesD/bank-card.vue

<template>
	<view class="bank-card">
		<view class="bank-box u-flex-col u-row-center" v-if="bankdata.bank_name && bankdata.bank_no">
			<view class="bank-name" style="margin-bottom: 30rpx;">{{bankdata.bank_type_name}}</view>
			<view class="bank-num u-flex">
				<view v-for="(a,b) in 3" :key="b" class="num-doc u-flex">
					<text v-for="(c,d) in 4" :key="d"></text>
				</view>
				<view class="num">
					{{bankdata.bank_no.substring(bankdata.bank_no.length - 4)}}
				</view>
			</view>
			<view class="jiebang" @click="jiebang">解绑</view>
		</view>
		<view class="not-bank u-flex-col u-col-center" v-else>
			<text>暂未绑定银行卡</text>
			<text @click="toadd">绑定银行卡</text>
		</view>
	</view>
</template>

<script>
	import {
		getBank,
		deleteBank
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				bankdata: {}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getdata()
		},
		methods: {
			jiebang() {
				uni.showModal({
					title: "提示",
					content: "确定解绑吗",
					success: (e) => {
						if (e.confirm) {
							uni.showLoading({
								mask: true,
								title: "请稍后"
							})
							deleteBank().then(res => {
								this.$u.toast(res.msg)
								if (res.code == 1) {
									setTimeout(() => {
										this.getdata()
									}, 800)
								}
							})
						}
					}
				})
			},
			toadd() {
				uni.navigateTo({
					url: "/pagesD/bank-add"
				})
			},
			getdata() {
				getBank().then(res => {
					this.bankdata = res.data || {}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bank-card {
		padding: 0 32rpx;
		box-sizing: border-box;

		.bank-box {
			width: 686rpx;
			height: 200rpx;
			background: #0C66C2;
			border-radius: 16rpx;
			margin: 20rpx auto;
			padding: 0 60rpx;
			position: relative;
			box-sizing: border-box;

			.jiebang {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 68rpx;
				line-height: 32rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				text-align: center;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F7F7F7;
			}

			.bank-num {
				.num {
					font-size: 30rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #F7F7F7;
				}

				.num-doc {
					margin-right: 12rpx;

					text {
						width: 12rpx;
						height: 12rpx;
						background: #FFFFFF;
						opacity: 0.3;
						border-radius: 100rpx;
						margin-right: 8rpx;
					}
				}
			}

			.bank-qiye {
				margin-bottom: 24rpx;

				text:first-child {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F7F7F7;
					margin-right: 12rpx;
					opacity: 0.6;
				}

				text:last-child {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F7F7F7;
				}
			}

			.bank-type {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F7F7F7;
				margin-bottom: 16rpx;
				opacity: 0.6;
			}

			.bank-name {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #F7F7F7;
			}
		}

		.not-bank {
			padding: 134rpx 0;

			text:first-child {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 110rpx;
			}

			text:last-child {
				width: 602rpx;
				line-height: 96rpx;
				background: #0C66C2;
				border-radius: 20rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>