YuKangTang/pages/users/user_bind/index.vue

<template>
	<view class="login-wrapper" :style="colorStyle">
		<view class="whiteBg">
			<view class="list">
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/bankcard.png" style="width: 34rpx;" mode="widthFix"></image>
						<input type="text" :placeholder="$t(`输入银行卡号`)" v-model="bank_code" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/name.png" style="width: 34rpx;" mode="widthFix"></image>
						<input type="text" :placeholder="$t(`姓名`)" v-model="payer_name"  />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/bankcard.png" style="width: 34rpx; " mode="widthFix"></image>
						<input type="text" :placeholder="$t(`身份证号`)" v-model="id_card" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/phone_1.png" style="width: 24rpx; " mode="widthFix"></image>
						<input type="text" :placeholder="$t(`输入手机号码`)" v-model="account" :maxlength="11" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="../static/code_2.png" style="width: 28rpx;" mode="widthFix"></image>
						<input type="text" :placeholder="$t(`填写验证码`)" :maxlength="6" class="codeIput"
							v-model="captcha" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</view>
				</view>
			</view>
			<view class="logon" v-if="!bindCard" @click="loginMobile">{{$t(`绑定`)}}</view>
			<view class="logon" v-else @click="cancelBind">{{$t(`取消签约`)}}</view>
			<!-- TODO -->
		</view>
		<Verify @success="success" :captchaType="captchaType" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify"></Verify>
	</view>
</template>
<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		saveCardBind,
		bindCardVerify,
		getCodeApi,
		getUserInfo,
		getCardBindStatus,
		bankCancel
	} from "@/api/user";
	import colors from '@/mixins/color.js';
	import Verify from '../components/verify/index.vue';
	export default {
		name: "Login",
		components: {
			Verify
		},
		mixins: [sendVerifyCode,colors],
		data: function() {
			return {
				bank_code: "",
				id_card: "",
				payer_name: "",
				account: "",
				password: "",
				captcha: "",
				type: "login",
				// 用户信息
				userInfo:{},
				bindCard:false,
			};
		},
		onLoad() {
			this.getCardBindStatus();
			this.getUserInfo();
		},
		mounted: function() {
			
		},
		methods: {
			// 解约
			cancelBind(){
				bankCancel().then(res => {
					that.$util.Tips({
						title: "签约已取消"
					});
					this.bindCard=false
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					that.bank_code=that.userInfo.bank_code;
					that.id_card=that.userInfo.bank_id;
					that.payer_name=that.userInfo.bank_name;
					that.account=that.userInfo.bank_mobile;
				});
			},
			success(data) {
				this.$refs.verify.hide()
				this.getCode(data);
			},
			code() {
				let that = this
				if (!that.account) return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				this.$refs.verify.show()
			},
			async loginMobile() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				if (!that.captcha) return that.$util.Tips({
					title: that.$t(`请填写验证码`)
				});
				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
					title: that.$t(`请输入正确的验证码`)
				});
				if (!that.payer_name) return that.$util.Tips({
					title: that.$t(`请填写姓名`)
				});
				if (!that.bank_code) return that.$util.Tips({
					title: that.$t(`请填写银行卡号`)
				});
				if (!that.id_card) return that.$util.Tips({
					title: that.$t(`请填写身份证号`)
				});
				saveCardBind({
						code: that.captcha,
					})
					.then(res => {
						let data = res.data;
						that.getCardBindStatus();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});

			},
			// 获取签约状态
			getCardBindStatus(){
				let that = this;
				getCardBindStatus().then((e)=>{
					console.log(e);
					if(e.data.status=='02'){
						that.$util.Tips({
							title: "已签约"
						});
						that.bindCard = true;
					}
				}).catch((e)=>{
					console.log(e);
				})
			},
			async getCode(data) {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				if (!that.payer_name) return that.$util.Tips({
					title: that.$t(`请填写姓名`)
				});
				if (!that.bank_code) return that.$util.Tips({
					title: that.$t(`请填写银行卡号`)
				});
				if (!that.id_card) return that.$util.Tips({
					title: that.$t(`请填写身份证号`)
				});
				await bindCardVerify({
						mobile: that.account,
						payer_name: that.payer_name,
						bank_code: that.bank_code,
						id_card: that.id_card,
					})
					.then(res => {
						this.sendCode()
						that.$util.Tips({
							title: '验证码已发送'
						});
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
		}
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss">
	.code img {
		width: 100%;
		height: 100%;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}

	.login-wrapper {
		padding: 30rpx;

		.whiteBg {

			.list {
				border-radius: 16rpx;
				overflow: hidden;

				.item {
					border-bottom: 1px solid #F0F0F0;
					background: #fff;

					.row-middle {
						position: relative;
						padding: 16rpx 45rpx;

						input {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
						}

						.code {
							position: absolute;
							right: 30rpx;
							top: 50%;
							color: var(--view-theme);
							font-size: 26rpx;
							transform: translateY(-50%);
						}
					}
				}
			}

			.logon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 86rpx;
				margin-top: 80rpx;
				background-color: var(--view-theme);
				border-radius: 120rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}
</style>