bocai_supplyChain_uni/root/person/bankList.vue

<template>
	<view class="g_p_10">
		<view class="bgTest g_flex_row_start flex_center">
			<image src="https://matripe.oss-cn-beijing.aliyuncs.com/dagouAgency/wx.png" style="width: 46px; height: 46px; margin-left: 20px"></image>
			<text class="cardName">微信零钱</text>
		</view>
		<template v-for="(item, index) in bankArray">
			<view @click="toCardDetail(item)" class="cardbgTest g_flex_row_between flex_center g_mt_10" hover-class="thover">
				<view class="g_flex_1 g_flex_row_start flex_center">
					<view class="cardlogo">
						<image :src="item.bankLogo"></image>
					</view>
					<text class="cardName"> {{ item.bankName }} </text>
				</view>
				<view class="g_c_f g_fw_500 g_f_18 g_mr_16">{{ item.bankNo }}</view>
			</view>
		</template>

		<view class="addcard g_flex_row_center flex_center g_mt_16" hover-class="thover" @click="showDialog">
			<i class="iconfont icon-tianjia g_mr_8"></i>
			绑定银行卡
		</view>
		<u-popup v-model="showPop" mode="bottom">
			<view class="g_text_c g_bg_f5" style="overflow: hidden" hover-class="none" hover-stop-propagation="false">
				<view class="g_p_16 g_bg_f" @click="deleteUserBank"> 解除绑定 </view>
				<view class="g_h_12" hover-class="none" hover-stop-propagation="false"> </view>
				<view class="g_pt_16 g_pb_42 g_bg_f" hover-class="none" hover-stop-propagation="false"> 取消 </view>
			</view>
		</u-popup>
		
		<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px; ">
			<radio-group class="dib">
				<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" color="#3578f6"
					style="transform: scale(0.7)" />
			</radio-group>
			我已阅读并同意
			<navigator url="/root/person/agreeUser" class="aLink">《用户服务协议》</navigator>
			及
			<navigator url="/root/person/agreePrive" class="aLink">《隐私政策》</navigator>
		</view>
		<!-- <view class="tc f14 c9" style="margin-top:30px;">暂时仅支持绑定“微信零钱”账户(可用于提现)</view> -->
	</view>
</template>

<script>
export default {
  onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			bankArray: [],
			user: uni.getStorageSync("apply-userinfo").user,
			currentBank: {},
			showPop: false,
			switchChecked: false
		};
	},
	created() {},
	onLoad() {
		this.getBankList();
	},
	methods: {
		switchChange() {
			console.log(this.switchChecked);
			this.switchChecked = !this.switchChecked;
		},
		getBankList() {
			this.G.Get(this.api.person_bankList, {}, (res) => {
				console.log(res);
				res.forEach((item) => {
					if (item.bankNo && item.bankNo.length > 4) {
						item.bankNo = "****" + item.bankNo.substring(item.bankNo.length - 4);
					} else {
						item.bankNo = "";
					}
					item.bankLogo = item.bankLogo ? item.bankLogo : "https://matripe.oss-cn-beijing.aliyuncs.com/bankCard.png";
				});
				this.bankArray = res;
			});
		},
		showDialog() {
			if (this.user.idauth == 1) {
				uni.navigateTo({
					url: "/root/person/bindBankCard",
				});
				return false;
			}
			uni.showModal({
				title: "实名认证",
				content: "实名认证后才可以绑定银行卡，现在去实名吗?",
				confirmText: "去实名",
				cancelText: "取消",
				success(res) {
					if (res.confirm) {
						console.log("用户点击确定");
						uni.navigateTo({
							url: "/root/person/idcardForm",
						});
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		toCardDetail(_item) {
			console.log(_item);
			this.currentBank = _item;
			this.showPop = true;
		},
		deleteUserBank() {
			let that = this;
			// 622203 1708000666912
			uni.showModal({
				title: "解绑银行卡",
				content: "确定解除绑定此张银行卡么?",
				confirmText: "解绑",
				cancelText: "取消",
				success(res) {
					if (res.confirm) {
						that.G.Post(that.api.person_deleteUserBank, { id: that.currentBank.id }, (res) => {
							that.showPop = false;
							that.getBankList();
							uni.showToast({
								title: "解绑成功",
								icon: "none",
							});
						});
						console.log("用户点击确定");
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
	},
};
</script>

<style>
.bgTest {
	background-image: url("//matripe.oss-cn-beijing.aliyuncs.com/dagouAgency/bg.png");
	width: 100%;
	height: 90px;
	background-size: cover;
	border-radius: 8px;
	overflow: hidden;
}

.cardbgTest {
	background-image: url("//matripe.oss-cn-beijing.aliyuncs.com/dagouAgency/cardbg.png");
	width: 100%;
	height: 90px;
	background-size: cover;
	border-radius: 8px;
	overflow: hidden;
}

.cardName {
	font-size: 18px;
	font-weight: 601;
	color: #ffffff;
	line-height: 26px;
	margin-left: 12px;
}

.addcard {
	background-color: #ff44001a;
	border-radius: 8px;
	height: 80px;
	font-size: 20px;
	font-weight: 601;
	color: #ff4400;
	line-height: 26px;
}

.cardlogo {
	width: 46px;
	height: 46px;
	background-color: #fff;
	border-radius: 50%;
	margin-left: 20px;
	display: inline-block;
}

.cardbgTest image {
	width: 28px;
	height: 28px;
	margin-left: 9px;
	margin-top: 9px;
}
</style>