yichael_proadvanced/pages/login-page/bindPhone/bindPhone.vue

<template>
	<view class="container">
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack" :title="pageTitle" color="#000000" fixed="true"
			:border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>

		</uni-nav-bar>
		<view style="height:6px ;width: 100%; background-color: #f2eff2;"></view>

		<!-- 手机端登录,获取验证码 -->
		<view class="input-container" style="margin: 32px 102rpx 0 68rpx;">
			<view class="make-text-bPurple text-bold margin-bottom" style="font-size: 20px;">{{pageTitle}}</view>
			<view class="input-row padding" style="width: 318px;">
				<m-input :inputmode="bBindPhone?'numeric':'email'" :type="bBindPhone?'number':'text'" :maxlength="bBindPhone?'11':'32'" clearable
					v-model="account" :placeholder="bBindPhone?'请填写11位手机号码':'请输入邮箱'"></m-input>
			</view>
		</view>
		<view class="flex justify-between" style="margin: 32px  96rpx 0 68rpx; ">
			<view class="text-22px make-text-bPurple">输入验证码</view>
			<view v-if="bCodeDisabled" class="btn-code" style="background-color: rgb(0,0,0);opacity: 0.5;">
				重新获取({{count}})</view>
			<view v-else class="btn-code" @tap="onGetCode">获取验证码</view>
		</view>

		<!-- 手机端登录 -->
		<view v-if="bCodeDisabled" class="text-16px text-gray" style="margin: 20px 0 0 96rpx;">已发送4位验证码至{{account}}
		</view>
		<view v-else class="text-16px text-gray" style="margin: 20px 0 0 96rpx;">获取验证码后输入下面方格...</view>

		<view class="code-input-main">
			<view class="inputLine">
				<view class="input-item">{{inputCode[0]}}</view>
				<view class="input-item">{{inputCode[1]}}</view>
				<view class="input-item">{{inputCode[2]}}</view>
				<view class="input-item">{{inputCode[3]}}</view>
			</view>

			<input class="code-input-input" v-model="inputCode" maxlength="4" type="number" />
		</view>

		<view class="btn-row">
			<view class="btn-confirm" :disabled="inputCode.length<4" @tap="onConfirm">确认绑定</view>
		</view>

		<input class='ipt' type="number" :maxlength="Length" :focus="bFocus"></input>

	</view>
</template>

<script>
	import mInput from '@/components/m-input.vue'
	import config from '@/common/config.js';
	import reqUtil from "@/util/util-js/requstUtil.js";
	import verify from '@/util/util-js/verify.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				//获取验证码页面
				bGetCode: true,
				bMobileLogin: true,
				providerList: [],
				hasProvider: true,
				account: '',
				password: '',
				positionTop: 0,
				//输入框参数
				Length: 4, //输入框个数
				bFocus: false, //聚焦
				Value: "", //输入的内容
				inputCode: '',

				pageTitle: "绑定手机",
				bConfirm: false,
				bBindPhone: true
			}
		},
		computed: mapState(['bNewUser', 'forcedLogin', 'phoneNumber', 'bCodeDisabled', 'count']),
		onLoad(option) {
			if (option.type == 'phone') {
				this.pageTitle = "绑定手机";
				this.bBindPhone = true;
			} else if (option.type == 'mailbox') {
				this.pageTitle = "绑定邮箱";
				this.bBindPhone = false;
			}
		},
		methods: {
			...mapMutations(['countDown', 'resetCountDown']),
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onGetCode() {
				//置灰状态
				if (this.bCodeDisabled) return;
				
				if (this.bBindPhone) {
					if (!verify.checkPhone(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确手机号'
						});
						return;
					}

					//调用store 倒计时
					this.countDown({
						account: this.account,
						type: 0
					});
				} else {
					if (!verify.checkEMail(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确邮箱号'
						});
						return;
					}

					//调用store 倒计时
					this.countDown({
						account: this.account,
						type: 1
					});
				}



			},
			inputEvent(res) {
				console.log("input 1 input inputCode  components : ", res.detail.value);
			},
			//验证码操作
			//注册
			onConfirm() {
				var _self = this;

				if (this.bBindPhone) {
					if (!verify.checkPhone(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确手机号'
						});
						return;
					}
				} else {
					if (!verify.checkEMail(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确邮箱号'
						});
						return;
					}
				}
				if (_self.bConfirm) return;

				uni.showToast({
					title: "",
					icon: "loading",
					mask: true,
					duration: 10000
				})
				_self.bConfirm = true;

				reqUtil.requestData(config.URL.BINDACCOUNT, {
					"account": _self.account,
					"type": _self.bBindPhone ? 0 : 1,
					"code": _self.inputCode
				}).then(res => {
						console.log('requestData BINDACCOUNT =====', res);
						uni.hideToast();
						_self.bConfirm = false;
						if (res.code == 0) {
							uni.showToast({
								title: _self.bBindPhone ? '绑定手机号成功！' : '绑定邮箱成功！',
								mask: true,
								duration: 1000
							})
							if (_self.bBindPhone)
								_self.$store.state.phoneNumber = _self.account;
							else
								_self.$store.state.mailboxNumber = _self.account;

							_self.resetCountDown();
							// 绑定电话成功后，回退页面
							uni.navigateBack({
								delta: 1
							})

						} else if (res.code == 213) {
							uni.showToast({
								title: "手机号已使用过,请换个号码！",
								mask: true,
								icon: 'none',
								duration: 3000
							})
						} else if (res.code == 216) {
							uni.showToast({
								title: "邮箱号已使用过,请换个邮箱！",
								mask: true,
								icon: 'none',
								duration: 3000
							})
						} else {
							uni.showToast({
								title: "绑定失败！",
								mask: true,
								icon: 'none',
								duration: 1000
							})
						}


					},
					e => {
						console.log(e);
						uni.hideToast();
						_self.bConfirm = false;
					});
			}
		}
	}
</script>

<style>
	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.btn-row {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
	}



	.input-container {
		border-bottom: 1rpx solid #e7e9eb;
	}

	.btn-code {
		width: 235rpx;
		height: 63rpx;
		background-color: rgba(151, 151, 255, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		color: #FFFFFF;
	}

	.btn-confirm {
		width: 636rpx;
		height: 102rpx;
		background-color: rgba(151, 151, 255, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		color: #FFFFFF;
	}




	.code-input-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* border: 1rpx solid #000000; */
		height: 150px;
		position: relative;
	}

	.input-item {
		width: 106rpx;
		height: 118rpx;
		font-size: 20px;
		line-height: 118rpx;
		background-color: rgba(244, 241, 244, 255);
		/* border: 1rpx solid #ddd; */
		text-align: center;
		border-radius: 8px;
		margin-left: 44rpx;
		/* margin-right: 40upx; */
		color: rgba(86, 86, 86, 1);
		font-weight: bold;

	}

	.inputLine {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		top: 80rpx;
		left: 52rpx;
		position: absolute;
		z-index: 1;
	}

	.code-input-input {
		height: 150px;
		position: absolute;
		width: 100%;
		outline: none;
		color: transparent;
		text-shadow: 0 0 0 transparent;
		width: 300%;
		left: -100%;
		top: 0;
		/* background: #000000; */
		/* border: 1rpx solid #007AFF; */
		z-index: 10;
	}

	.ipt {
		width: 0;
		height: 0;
	}
</style>