cyzh-SoundOfMusic-H5/pages/activityList/activity/bankCard.vue

<template>
	<view>
		<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/5f263a5a6e7c4f2493e0325f28ab659a-bgimg.png');height: 310upx;"></view>
		<view class="container">
			<view class="text-bold" style="font-size: 40upx;padding: 30upx 0upx 10upx 40upx;">绑定银行卡</view>
			<view class="padding-left-lg" style="font-size: 28upx;">请如实填写一下资料</view>
			<u-picker mode="selector" v-model="bankShow"  :default-selector="[0]" :range="selector" range-key="dictValue" @confirm="bankConfirm"></u-picker>
			<u-picker mode="selector" v-model="accountShow"  :default-selector="[0]" :range="accountType" range-key="dictValue" @confirm="accountConfirm"></u-picker>
			<view class="flex align-center" style="padding: 30upx 60upx 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>选择银行</view>
				<view class="flex justify-between align-center" style="width: 260upx;height: 60upx;border: #b0b0b0 1upx solid;border-radius: 16upx;" @click="bankShow = true">
					<view class="padding-left-sm" :class="bank.startsWith('请') ? 'text-gray': ''">{{bank}}</view>
					<view class="padding-right-xs cuIcon-unfold"></view>
				</view>
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>账号类型</view>
				<view class="flex justify-between align-center" style="width: 260upx;height: 60upx;border: #b0b0b0 1upx solid;border-radius: 16upx;" @click="accountShow = true">
					<view class="padding-left-sm" :class="account.startsWith('请') ? 'text-gray': ''">{{account}}</view>
					<view class="padding-right-xs cuIcon-unfold"></view>
				</view>
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>银行卡号</view>
				<u-input v-model="cardNum" placeholder="请输入银行卡号" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>真实姓名</view>
				<u-input v-model="name" placeholder="请输入真实姓名" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-red">*</text>手机号码</view>
				<u-input v-model="phone" placeholder="请输入手机号码" :clearable="false" />
			</view>
			<view style="padding: 0 60upx;">
				<u-line color="#d4d4d4"></u-line>
			</view>
			<view class="flex align-center" style="padding: 20upx 60upx;">
				<view style="width: 160upx;font-family: PingFang SC;font-weight: bold;color: #000000;"><text class="text-white">*</text>验证码</view>
				<u-input v-model="code" placeholder="请输入验证码" :clearable="false" />
				<button class="cu-btn round" style="width: 150upx;background-color: #5d41ed;color: #ffffff;" @click="checking" v-if="!state">验证码</button>
				<button class="cu-btn round" style="width: 150upx;background-color: #5d41ed;color: #ffffff;" v-else>{{currentTime}}s</button>
			</view>
		</view>
		<view class="padding">
			<u-button class="custom-style" shape="circle" @click="bind">确定绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankShow: false,
				bank: '请选择银行',
				cardNum: '',
				account: '请选择类型',
				accountType: [],
				accountShow: false,
				name: '',
				phone: '',
				code: '',
				state: false,		//是否开启倒计时
				totalTime: 120,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				selector: [],
			}
		},
		onLoad() {
			this.getBankType('bank_type');
			this.getAccountType('bank_account_type');
		},
		methods: {
			getBankType(param) {
				this.$u.api.dict.code({code: param}).then(res => {
					this.selector = res;
				})
			},
			getAccountType(param) {
				this.$u.api.dict.code({code: param}).then(res => {
					this.accountType = res;
				})
			},
			bankConfirm(index) {
				this.bank = this.selector[index].dictValue;
			},
			accountConfirm(index) {
				this.account = this.accountType[index].dictValue;
			},
			checking() {
				if(!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					})
					return;
				} else {
					let url = 'huawei/sms/sendSms?phone=' + this.phone
					this.$u.post(url).then(res => {
						if (res == 'success') {
							//把显示时间设为总时间
							this.currentTime = this.totalTime;
							//开始倒计时
							this.state = true;
							//执行倒计时
							this.checkingTime();
						} else {
							uni.showToast({
								icon: "none",
								title: res
							})
						}
					})
				}
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false;		//关闭倒计时
						this.recordingTime = 0;	//记录时间为0
						this.currentTime = this.totalTime;	//显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			bind() {
				if (this.$u.test.isEmpty(this.bank)) {
					uni.showToast({
						icon: "none",
						title: '请选择银行',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.account)) {
					uni.showToast({
						icon: "none",
						title: '请选择账号类型',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.cardNum)) {
					uni.showToast({
						icon: "none",
						title: '请输入银行卡号',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.name)) {
					uni.showToast({
						icon: "none",
						title: '请输入真实姓名',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.phone) || !this.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: "none",
						title: '请填写正确的手机号',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.code)) {
					uni.showToast({
						icon: "none",
						title: '请输入验证码',
					})
					return;
				}
				let url = 'huawei/sms/validCode?phone=' + this.phone + '&code=' + this.code;
				this.$u.post(url).then(res => {
					if (res == 'success') {
						uni.showLoading({
						    title: '绑定银行卡号...',
							mask: true
						})
						this.$u.api.bankCard.bindCard({
							userId: uni.getStorageSync("userId"),
							cardNo: this.cardNum,
							realName: this.name,
							phone: this.phone,
							bankType: this.bank,
							bankAccountType: this.account,
						}).then(res => {
							console.log("绑定成功", res)
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								title: res,
								duration: 3000,
								success() {
									uni.navigateBack({
										delta: 1,
									})
								}
							})
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res,
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		border-radius: 36upx;
		background-color: #ffffff;
		padding-bottom: 30upx;
		margin: -120upx 30upx 30upx 30upx;
	}
	.custom-style {
		background-color: #5b3ee7;
		color: #ffffff;
	}
</style>