project init

2024-02-02 10:24:54 +08:00
commit 21a84c3035
253 changed files with 25212 additions and 0 deletions
--- a/pageMy/setUserBase/icCard/index.vue
+++ b/pageMy/setUserBase/icCard/index.vue
@@ -0,0 +1,182 @@
+<template>
+	<view>
+		<view class="cardList" v-for="item in cards" :key="item.id" @click="editIc(item)">
+			<image src="@/static/img/exp/map.svg" class="cardBack" mode=""></image>
+			<view class="cardName">
+				{{item.bankName}}
+			</view>
+			<view class="cardType">
+				储蓄卡
+			</view>
+			<view class="cardNo">
+				{{bankCardFilter(item.cardNumber)}}
+			</view>
+			<view class="delect" @click.stop="delect(item.id)" v-if="cards.length > 1 && item.def != 1">
+				<image src="@/static/img/exp/link.svg" mode=""></image>
+				<view class="delectContent">
+					解绑银行卡
+				</view>
+			</view>
+		</view>
+		<view class="btn" @click="addIc">
+			<image src="@/static/img/add.svg" mode=""></image>
+			添加银行卡
+		</view>
+		<view class="tx">
+			目前仅支持储蓄卡
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getUserCards,
+		remove
+	} from '@/api/bank.js'
+	import {
+		bankCardFilter
+	} from '@/untils/format.js'
+
+	export default {
+		data() {
+			return {
+				cards: []
+			}
+		},
+		onShow() {
+			this.getData()
+		},
+		methods: {
+			getData() {
+				getUserCards().then(res => {
+					this.cards = res.data.data
+				})
+			},
+			addIc: function() {
+				uni.navigateTo({
+					url: './add'
+				})
+			},
+			editIc(ic) {
+				uni.navigateTo({
+					url: `./add?id=${ic.id}&name=${ic.bankName}&card=${ic.cardNumber}&def=${ic.def}`
+				})
+			},
+			delect(id) {
+				uni.showModal({
+					title: '解绑银行卡',
+					content: '解绑银行卡后工资将不会发放到此银行卡中',
+					cancelText: '保持绑定',
+					cancelColor: '#1B66FF',
+					confirmText: '仍要解绑',
+					confirmColor: '#1B66FF',
+					success: (res) => {
+						if (res.confirm) {
+							remove(id).then(() => {
+								this.getData()
+							})
+						}
+					}
+				});
+			},
+			bankCardFilter
+		}
+	}
+</script>
+
+<style>
+	.cardBack {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		/* z-index: -1; */
+	}
+
+	.tx {
+		font-family: PingFangSC-Regular;
+		font-size: 24rpx;
+		color: #999999;
+		text-align: center;
+		margin-top: 20rpx;
+	}
+
+	.btn image {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.btn {
+		width: 690rpx;
+		margin: 30rpx;
+		background-color: #1B66FF;
+		color: #fff;
+		height: 90rpx;
+		line-height: 90rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8rpx;
+	}
+
+	.delect image {
+		width: 20rpx;
+		height: 20rpx;
+
+	}
+
+	.delect {
+		position: absolute;
+		right: 40rpx;
+		top: 30rpx;
+		background-color: rgba(255, 255, 255, 0.3) !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: PingFangSC-Regular;
+		font-size: 24rpx;
+		color: #FFFFFF;
+		height: 36rpx;
+		width: 170rpx;
+	}
+
+	.cardNo {
+		font-family: PingFangSC-Regular;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		position: absolute;
+		left: 40rpx;
+		bottom: 40rpx;
+	}
+
+	.cardType {
+		font-family: PingFangSC-Regular;
+		font-size: 26rpx;
+		color: #FFFFFF;
+		padding-left: 40rpx;
+		padding-top: 15rpx;
+	}
+
+	.cardName {
+		padding-left: 40rpx;
+		padding-top: 50rpx;
+		font-family: PingFangSC-Medium;
+		font-size: 36rpx;
+		color: #FFFFFF;
+	}
+
+	.cardList {
+		position: relative;
+		width: 690rpx;
+		margin: 30rpx;
+		background-image: linear-gradient(-31deg, #3E8EED 0%, #6BA5FF 24%, #84BDFF 45%, #397AFF 100%);
+		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
+		border-radius: 15rpx;
+		height: 280rpx;
+	}
+
+	page {
+		background-color: #f6f6f6;
+	}
+</style>