bank2.vue

<template>
	<view class="bank">
		<view
			style="width: 100%; height: 25vh; color: #fff; text-align: center; margin-bottom: 10px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;">
			<view
				style="width: 60px; height: 60px; background-image: url('static/wx4.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;">
			</view>
		</view>

		<view class="addbank">
			<view class="content">
				<view class="item">
					<text>授权人姓名</text>
					<input class="inp" v-model="xsName" type="text" placeholder="请输入您的真实姓名" :disabled="bd"
						style="background-color: #f7f7f7; text-align: left;" />
				</view>
				<view class="item">
					<text>授权人身份证</text>
					<input class="inp" v-model="xsId" type="text" placeholder="请输入您的身份证号" :disabled="bd"
						style="background-color: #f7f7f7; text-align: left;" />
				</view>
				<view style="width: 90%;margin-left: 5%;">注：所填的资料请于金砖世界银行账户登记的实名信息一致，否则不予通过</view>
			</view>
		</view>

		<!-- 第一个 view: 没有数据时显示 -->
		<view v-if="!bd" class="an"
			style="width: 95%; margin: 40px auto; height: 40px; line-height: 40px; color: #fff; text-align: center; font-size: 20px; border-radius: 8px; background-image: url('../static/wx3.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"
			@click="add">
			<!-- 这里可以是按钮的内容，比如“提交” -->
		</view>

		<!-- 第二个 view: 有数据时显示 -->
		<view v-else class="an"
			style="width: 95%; margin: 40px auto; height: 40px; line-height: 40px; color: #fff; text-align: center; font-size: 20px; border-radius: 8px; background-color:#00a3e8;"
			@click="add">
			成功绑定
		</view>
		<view style="width: 90%;margin-left: 5%;color: red;text-align: center;">绑定支付宝享受6大特权</view>

		<view class="nav bgimg"
			style=" width: 90%; height: 160px;margin-top: 10px;display: flex;flex-wrap: wrap;justify-content: center;margin-left: 20px;  border-radius: 5px;">
			<view @click="go4"
				style="width: 33%;height: 50%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf1.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>扫码支付</view>
			</view>
			<view @click="gomc3123"
				style="width: 33%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf5.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>JSAPI支付</view>
			</view>

			<view @click="gotx"
				style="width: 33%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf6.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>小程序支付</view>
			</view>
			<view @click="gozijin"
				style="width: 33%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf3.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>APP支付</view>
			</view>
			<view @click="go1"
				style="width: 33%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf2.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>刷脸支付</view>
			</view>
			<view @click="go22"
				style="width: 33%;height: 50%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view
					style="width: 35px;height: 35px;  background-image: url('../../../static/zf4.png');background-size: 100% 100%; background-position: center; background-repeat: no-repeat;border-radius: 5px;margin-bottom: 5px;">
				</view>
				<view>刷掌支付</view>
			</view>
		</view>
		<u-popup :show="show" @close="closepop" mode="center" closeable :round="10">
			<view class="walletcontainer"
				style=" width: 300px;height: 250px;border-radius: 10px;display: flex;justify-content: space-between;flex-direction: column;">
				<!-- <view class="title" style="height: 50px;">
					<view class="text"></view>
				</view> -->

				<view
					style="display: flex;justify-content: center;align-items: center;width: 90%;font-size: 18px;margin:50px auto 0;">
					卡片未激活，请先激活卡片
				</view>

				<view @click="payb"
					style=" height: 30px;background-color: #f76126;width: 66%;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 18px;margin: 10px auto 30px;border-radius: 5px;">
					前往激活</view>


			</view>
		</u-popup>
		<Payup @close='payclose' :show="payshow" :url="urls" wechat="1" zfb="1" :mony=paymony :title="paytitle"
			:type="paytype" payway="0" :zfsm="paysm" btn="立即支付" :ysf="ysf" :isBindpay="isBindpay">
		</Payup>
	</view>
</template>


<script>
import Payup from '@/components/payup/payup.vue'

export default {
	components: {

		Payup,

	},
	data() {
		return {
			bd: false,
			xsName: '',
			xsId: '',
			bdlist: [],
			extend1: '',
			payshow: false,
			show: false,

			paysm: '',
			paytitle: '付费激活',
			paytype: 26,
			paymony: 399,
			urls: '/ops/daybook',
			payshow: false,
			xm: '',
			dh: '',
			sfz: '',
			ysf: '',
			isBindpay: true,

		};
	},
	onShow() {
		this.getBdList();
		this.getuserinfo()
	},
	methods: {
		getuserinfo() {
			this.$request("/system/user/", {}, "get").then((res) => {
				if (res.data.data == "true") {
				}
				this.extend1 = res.data.extend1;

			});
		},
		payclose(i) {
			this.payshow = i
		},
		payb() {
			this.payshow = true
		},
		closepop() {
			this.show = false
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		add() {
			if (this.xsName == '' || this.xsId == '') {
				uni.showToast({
					title: "内容不能为空！",
					icon: "none",
				});
				return
			}
			if (this.extend1 != 4) {
				// uni.showToast({
				// 	title: "请先激活卡片",
				// 	icon: "none",
				// });
				setTimeout(() => {
					this.show = true

				}, 500)
				return
			}
			if (!this.bd) {
				const data = {
					xsName: this.xsName,
					xsId: this.xsId,
					userName: 1,
				};

				this.$request("/system/xs/add", data, "post")
					.then((res) => {
						if (res.code == 200) {
							this.getuserinfo()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
							});
						}
					})
					.catch((error) => {
						console.error("请求失败:", error);
					});
			} else {
				alert("已绑定信息，无法修改。如需更改，请联系客服。");
			}
		},

		getBdList() {
			this.$request("/system/xs/list?userName=1", {}, "get")
				.then((res) => {
					if (res.data && res.data.rows) {
						this.bdlist = res.data.rows;

						// 判断是否有绑定数据
						if (this.bdlist.length > 0) {
							this.xsName = this.bdlist[0].xsName || '';
							this.xsId = this.bdlist[0].xsId || '';
							this.bd = true; // 有数据时，bd为true
						} else {
							this.bd = false; // 没有数据时，bd为false
						}
					}
				})
				.catch((error) => {
					console.error("请求失败:", error);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.bank {
	width: 100%;
	height: 95vh;
	background: linear-gradient(180deg, #FFFFFF 20%, #FED0D0 100%);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.an {}

.addbank {
	background-color: #fff;
	width: 95%;
	margin: 0 auto;
	border-radius: 12px;

	.item {
		display: flex;
		height: 50px;
		align-items: center;
		font-size: 18px;
		justify-content: space-around;
		color: rgba(0, 0, 0, 1);
		margin: 0 auto;
		width: 90%;
		border-bottom: 1px solid #ccc;

		.inp {
			width: 60%;
			border-radius: 6px;
			height: 40px;
			text-indent: 20px;
			color: #3c4951;
		}
	}
}

.alert-message {
	color: red;
	text-align: center;
	margin-top: 20px;
}

.nav {
	display: flex;
	// flex-direction: column;
	justify-content: space-around;
	flex-wrap: wrap;

	// background-image: url('../../static/my/navbg.png');
	// height: 300px;
	padding: 10px 0;

	.nav-item {
		// background-color: red;
		// border-bottom: 1px solid #ccc;
		// border-radius: 6px;
		// height: 45px;
		display: flex;
		text-align: center;
		// flex-direction: column;
		align-items: center;
		// background-color: rebeccapurple;
		justify-content: center;
		box-sizing: border-box;
		padding: 7px 0;
		margin: 0px auto;
		width: 32%;
		color: #000;
	}

	.zh {
		border-bottom: none;
	}
}
</style>