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="cardInfo.bankType.startsWith('请') ? 'text-gray': ''">{{cardInfo.bankType}}</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="cardInfo.bankAccountType.startsWith('请') ? 'text-gray': ''">{{cardInfo.bankAccountType}}</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="cardInfo.cardNo" 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="cardInfo.realName" 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="cardInfo.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,
				cardInfo: {
					userId: '',
					bankType: '请选择银行',
					cardNo: '',
					bankAccountType: '请选择类型',
					realName: '',
					phone: '',
				},
				accountType: [],
				accountShow: false,
				code: '',
				state: false,		//是否开启倒计时
				totalTime: 120,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				selector: [],
			}
		},
		onLoad(options) {
			if (!this.$u.test.isEmpty(options.cardId)) {
				this.getCardInfo();
			}
			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;
				})
			},
			getCardInfo() {
				let userId = uni.getStorageSync("userId");
				this.$u.api.bankCard.cardDetail({userId: userId}).then(res => {
					console.log(res);
					this.cardInfo = res.records[0];
				})
			},
			bankConfirm(index) {
				this.cardInfo.bankType = this.selector[index].dictValue;
			},
			accountConfirm(index) {
				this.cardInfo.bankAccountType = this.accountType[index].dictValue;
			},
			checking() {
				if(!this.$u.test.mobile(this.cardInfo.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					})
					return;
				} else {
					let url = 'huawei/sms/sendSms?phone=' + this.cardInfo.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.cardInfo.bankType)) {
					uni.showToast({
						icon: "none",
						title: '请选择银行',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.cardInfo.bankAccountType)) {
					uni.showToast({
						icon: "none",
						title: '请选择账号类型',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.cardInfo.cardNo)) {
					uni.showToast({
						icon: "none",
						title: '请输入银行卡号',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.cardInfo.realName)) {
					uni.showToast({
						icon: "none",
						title: '请输入真实姓名',
					})
					return;
				}
				if (this.$u.test.isEmpty(this.cardInfo.phone) || !this.$u.test.mobile(this.cardInfo.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.cardInfo.phone + '&code=' + this.code;
				this.$u.post(url).then(res => {
					if (res == 'success') {
						uni.showLoading({
						    title: '绑定银行卡号...',
							mask: true
						})
						setTimeout(() => {
							this.saveCardInfo();
						},700)
					} else {
						uni.showToast({
							icon: "none",
							title: res,
						})
					}
				})
			},
			saveCardInfo() {
				this.cardInfo.userId = uni.getStorageSync("userId");
				this.$u.api.bankCard.bindCard(this.cardInfo).then(res => {
					console.log("插入成功",res);
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: res,
						duration: 3000,
						success: () => {
							uni.navigateBack({
								delta: 1,
							})
						}
					})
				})
			}
		}
	}
</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>