jiuyiUniapp/jiuyi2/pages/mine/setting/bankCard.vue

<script setup>
	// 我的银行卡
	import {
		ref,
		computed,
		reactive,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 列表
	const list = reactive([])
	// 滑动菜单
	const options = reactive([{
		text: '解绑',
		style: {
			backgroundColor: '#007aff'
		},
		cb: (event) => removeBank(event)
	}])

	onLoad(() => {
		// 获取列表
		getList()
		// 开启监听
		addListener()
	})

	onUnload(() => {
		// 关闭监听
		removeListener()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateBindingBank', () => {
			// 获取列表
			getList()
		})
	}

	// 关闭监听
	function removeListener() {
		uni.$off('updateBindingBank')
	}

	// 获取列表
	function getList() {
		api.mine.getBankCards({}).then(rs => {
			if (rs.code == 200) {
				Object.assign(list, rs.data)
				list.push({
					bankName: "建设银行",
					cardHolderName: "商旭",
					cardId: "1",
					cardNumber: "6217002270031535710",
					cardType: "DEBIT",
					createTime: null,
					delFlag: "0",
					isDefault: null,
					updateTime: null,
					userId: 13,
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 跳转
	function link(url) {
		uni.navigateTo({
			url,
		})
	}

	/**
	 * 右滑菜单项点击
	 * @param {Object} event
	 */
	function handleItem(event, item) {
		console.log('event', event, item)
		item.cb(item)
	}

	/**
	 * 删除银行卡
	 * @param {Object} item 银行卡信息
	 */
	function removeBank(item) {
		util.alert({
			content: '删除后不可恢复，确认删除？',
		}).then(rs => {
			api.mine.deleteBankCard({
				path: [item.cardId],
			}).then(rs => {
				if (rs.code == 200) {
					// 获取列表
					getList()
					return
				}
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="list">
			<uni-swipe-action ref="swipeAction">
				<view class="card item" v-for="(item,index) in list" :key="index">
					<uni-swipe-action-item :right-options="options" @click="handleItem($event,item)">
						<view class="main ptb30 plr40">
							<view class="name">{{item.bankName}}</view>
							<view class="type">
								<text v-if="item.cardType == 'DEBIT'">储蓄卡</text>
								<text v-else-if="item.cardType == 'CREDIT'">信用卡</text>
							</view>
							<view class="number">{{item.cardNumber}}</view>
						</view>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>

			<view class="item add rows ptb30 plr40" @click="link('/pages/mine/setting/bankCardAdd')">
				<view>添加银行卡</view>
				<uni-icons type="right" color="#999" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 列表
	.list {
		.item {
			overflow: hidden;
			margin: 20rpx;
			border-radius: 25rpx;
		}

		// 卡片
		.card {
			background: linear-gradient(130deg, #ff8888 0%, #ff4142 35%, #f65253ff 60%, #ff9999 100%);
			color: #fff;

			// 名称
			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			// 类型
			.type {
				color: #ffffffcc;
				font-size: 26rpx;
			}

			// 卡号
			.number {
				letter-spacing: 1rpx;
				margin: 30rpx 0;
				font-size: 40rpx;
			}
		}

		// 
		.add {
			background: #fff;
			// border: 2rpx solid #ff4142;
		}
	}
</style>