yql/pages/set/bindPhone.vue

<template>
	<view class="login-container">
		<view class="login-form">
			<view class="form-item">
				<text class="item-lable">手机号码</text>
				<input class="item-input" v-model="form.phone" placeholder="请输入手机号码" />
			</view>
			<view class="form-item">
				<text class="item-lable">输入密码</text>
				<input class="item-input" v-if="close_icon" type="password" v-model="form.password"
					placeholder="请输入密码" />
				<input class="item-input" v-else type="text" v-model="form.password" placeholder="请输入密码" />
				<view class="login-icon" @tap="close_icon = !close_icon">
					<image v-if="close_icon" src="@/static/login/close.png" mode=""></image>
					<image v-else src="@/static/login/open.png" mode=""></image>
				</view>
			</view>
			<view class="form-item" >
				<text class="item-lable">验证码</text>
				<input class="item-input" v-model="form.sms_code" placeholder="请输入验证码" />
				<view class="" @click="showText?getCode():''">
					{{showText?'获取验证码':second}}
				</view>
			</view>
			<view class="" style="height: 30rpx;">
				
			</view>
			<button :class="['landing',checkIn ? 'landing_true' : 'landing_false']" :disabled="checkIn ? false : true"
				class="zai-btn" @tap="subReg">绑定</button>
		</view>
		<uni-popup ref="popup" type="confirm">
			<uni-popup-confirm title="温馨提示" :beforeClose="true" @close="close" :content="popuMsg" @confirm="confirm">
			</uni-popup-confirm>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	import uniPopupConfirm from '../../components/uni-popup/uni-popup-confirm.vue';
	import _get from "../../common/_get";
	import _data from "../../common/_data";
	export default {
		data() {
			return {
				miaoqiang: 'tests',
				popuMsg: '恭喜您注册成功,是否立即更改资料?',
				showPassword: true,
				showText: true,
				second: 60,
				form: {
					phone: '',
					password: '',
					code_coerce:1,
					sms_code: '',
					type: 'REGISTER'
				},
				close_icon: true
			}
		},
		components: {
			uniPopup,
			uniPopupConfirm
		},
		onLoad() {

		},
		onShow() {
			console.log(this.form.mobileCode);
			let _this = this;
			_get.getSysConfig({}, function(res) {
				// console.log('111111111111111111111',res.user_regiter_code_status)
				if (res.user_regiter_sms_status == 1) {
					_this.form.mobileCode = 1
				} else {
					_this.form.mobileCode = 0
				}
				if(res.user_regiter_code_status == 1){
					_this.form.code_coerce = 1
				}else {
					_this.form.code_coerce = 0
				}
			})

			// #ifdef APP-PLUS
			// plus.push.getClientInfoAsync(function(info) {
			// 	_this.form.client_id = info.clientid;
			// }, function(e) {
			// 	console.log('Failed');
			// 	console.log(JSON.stringify(e));
			// });
			// #endif
		},
		computed: {
			checkIn() {
				return this.form.password != '' && this.form.password.length > 5 && this.form.phone.length == 11;
			}
		},
		methods: {
			backLogin() {
				uni.navigateBack({

				})
			},
			goTerms() {
				uni.navigateTo({
					'url': '/pages/in/terms'
				})
			},
			goPrivacy() {
				uni.navigateTo({
					'url': '/pages/in/privacy'
				})
			},
			goPath() {
				uni.navigateTo({
					'url': '/pages/in/web'
				})
			},
			close() {
				let _this = this;
				uni.reLaunch({
					url: '../chat/index',
					success: function() {
						_this.$refs.popup.close();
					}
				});
			},
			confirm(e) {
				let _this = this;
				uni.redirectTo({
					url: '/pages/my/details',
					success: function() {
						_this.$refs.popup.close();
					}
				});
			},
			isPoneAvailable($poneInput) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test($poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			getCode() {
				let _this = this;
				if (this.form.phone.trim() == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}

				if (!this.isPoneAvailable(this.form.phone.trim())) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				_get.getSms({
					mobile: this.form.phone,
					type: 'REGISTER'
				}, function(res) {
					console.log(22222)
					_this.cutDown();
				}, function(res) {
					console.log(1111)
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				})
			},
			cutDown(val) { //倒计时
				//获取验证码
				this.showText = false;
				var interval = setInterval(() => {
					let times = --this.second;
					times = times < 0 ? 0 : times;
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60;
					this.showText = true;
				}, 60000)
			},
			subReg() {
				let _this = this;
				if (!_this.checkIn) {
					return;
				}
				if (this.form.phone.trim() == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				if (!this.isPoneAvailable(this.form.phone.trim())) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!(/^\w{1,20}$/.test(this.form.password))) {
					uni.showModal({
						content: '密码只能包括下划线、数字、字母,长度6-20位',
					});
					return;
				}
				if (this.form.sms_code.trim() == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				_this.$httpSend({
					path: '/im/user/phone_bangding',
					data: _this.form,
					success: (data) => {
						console.log(data,'bangding');
						uni.showToast({
							title: '绑定成功',
							duration: 1000,
						});
						setTimeout(()=> {
							uni.switchTab({
								url:'/pages/my/index'
							});
						},1500)
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.uni-input-placeholder {
		color: #ccc !important;
	}

	input[type="password"]::-ms-reveal {
		display: none;
	}

	.login-icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.login-nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		position: absolute;
		justify-content: flex-start;
		left: 0;
		top: 0;
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height);

		/* #endif */
		.arrow-back {
			width: 44rpx;
			height: 44rpx;
			margin-left: 20rpx;
		}
	}


	.login-container {
		background-color: #ffffff;
		height: 100vh;
		width: 100vw;
		padding: 0 60rpx;
		position: relative;
		box-sizing: border-box;
		// background-image: url(@/static/login/bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;

		.login-form {
			display: flex;
			flex-direction: column;

			.login-bottom {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;

				.login-random {
					text-decoration: none;
					color: #999;
					font-size: 14px;
				}

				.tips {
					font-size: 12px;
					color: #b5746c;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					// width: 100%;
				}
			}

			.login-btn {
				width: 100%;
				height: 100rpx;
				border-radius: 50px;
				background-color: #2da2fd;
				color: #fff;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 100rpx;
			}

			.form-item {
				display: flex;
				height: 100rpx;
				align-items: center;
				border-bottom: 1px solid #eee;

				.item-lable {
					font-size: 16px;
					color: #333;
					width: 180rpx;
				}

				.item-input {
					border: none;
					outline: none;
					background: none;
					font-size: 16px;
					color: #000;
					height: 100%;
					flex: 1;
				}
			}
		}

		.login-title {
			padding-top: 250rpx;
			font-size: 24px;
			font-weight: bold;
			padding-bottom: 150rpx;
		}
		.login-logo{
			padding-top: 200rpx;
			padding-bottom: 80rpx;
			text-align: center;
		}
		.login-logo image{
			width: 150rpx;
			height: 150rpx;
		}
	}

	.zai-viewl {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		width: 160upx;
		width: 160upx;
		height: 160upx;
		margin-top: 114upx;
	}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.zai-form {
		margin-top: 150upx;
	}

	.form-code {
		margin-top: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.form-code .code {
		height: 100%;
		border-radius: 50px;
		text-align: center;
		font-size: 14px;
		background: #ff65a3;
		color: #ffffff;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.code-input {
		background: #e2f5fc;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
		width: 40%;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		text-align: center;
		font-size: 30upx;
		color: #666;
		height: 120rpx;
		display: flex;
		align-items: center;
		text-align: left;
	}

	.zai-btn {
		background: #2da2fd;
		border: 0;
		border-radius: 50rpx;
		font-size: 16px;
		color: #fff;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.zai-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #a7b6d0;
		padding-top: 10px;
	}
</style>