yicangzongtai_app_240321/pages/login/bindPhone.vue

<template>
	<view>
		<navbar ref="navbar" :config="config"></navbar>
		<view class="top">
			<view class="title">绑定手机号</view>
		</view>
		<view class="body">
			<view class="inpBox">
				<image src="/static/czd/phone.png" mode=""></image>
				<input class="uni-input" v-model="form.mobile" type="number" maxlength="11" placeholder="输入手机号码" />
			</view>
			<view class="inpBox">
				<image class="yzm" src="/static/czd/yzm.png" mode=""></image>
				<view>
					<input class="uni-input uni-code" v-model="form.captcha" type="number" maxlength="6" placeholder="输入验证码" />
					<view class="reset" @tap="getCode">{{tips}}</view>
				</view>
			</view>
			<view class="btnBox">
				<u-button type="primary" hover-class="hoverClass" @click="bind">完成</u-button>
			</view>
		</view>
		<u-verification-code :seconds="seconds"  @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {smsCode} from "@/api/government.js"
	export default{
		data(){
			return{
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#F9F9F9'],
				},
				tips: '',
				seconds: 60,
				form:{
					mobile:"",
					captcha:""
				}
			}
		},
		onLoad(options){
			this.form.thirdType=options.thirdType;
			this.form.identityCode=options.identityCode;
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					smsCode({mobile:this.form.mobile}).then(res=>{
							this.$u.toast('验证码已发送');
					}).finally(e=>{
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			bind(){
				// this.$yghttp.post('/user/login/yige-login',this.form).then(res=>{
				// 	if (res && res.code == 200) {
				// 		this.$u.toast('登录成功');
				// 		uni.setStorageSync('apiToken', res.data.token);
				// 		uni.switchTab({
				// 			url: '/pages/home'
				// 		})
				// 	} else {
				// 		this.$u.toast('验证码错误');
				// 	}
				// })
				if(!this.form.mobile){
					this.$u.toast('请输入手机号！');
					return
				}else if(!this.$u.test.mobile(this.form.mobile)){
					this.$u.toast('请输入正确手机号！');
					return
				}else if(!this.form.captcha){
					this.$u.toast('请输入验证码！');
					return
				}
				this.$yghttp.post('/user/login/third/register',this.form).then(res=>{
					if (res && res.code == 200) {
						uni.showToast({
							title: '登录成功！',
							icon: 'success',
							duration: 1500
						})
						uni.setStorageSync('apiToken', res.data.token);
						uni.switchTab({
							url: '/pages/home'
						})
					} else {
						this.$u.toast('验证码错误');
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	/deep/ .hx-navbar__icon {
		color: #303133 !important;
	}
	/deep/ .u-char-item{
		width: 120rpx !important;
		height: 120rpx !important;
		background: #ffffff;
		border-radius: 20rpx;
		border:none !important;
	} 
	.top {
		text-align: center;
		padding: 50rpx 0 100rpx;
		font-size: 28rpx;
	
		.title {
			font-size: 60rpx;
			margin-bottom: 10rpx;
			font-weight: 700;
		}
	}
	.body {
		margin: auto;
		width: 615rpx;
		margin-bottom: 30rpx;
	
		.inpBox {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			display: flex;
			margin-top: 30rpx;
			.uni-code{
				width: 200rpx;
			}
			>view{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		image{
			width: 36rpx;
			height: 44rpx;
			margin-right: 30rpx;
		}
		.yzm{
			width: 40rpx;
			height: 45rpx;
		}
		.uni-input {
			height: 40rpx;
			.uni-input-placeholder {
				color: #BEBEBE;
			}
		}
	
		.login-btn {
			background-color: #4095E5;
			color: #fff;
			margin-top: 100rpx;
		}
	}
	.btnBox{
		width: 100%;
		margin-top: 60rpx;
	}
	.u-btn{
		width: 615rpx;
		border-radius: 10rpx;
		background: rgb(64,149,229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg,#56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
	.hoverClass{
		background: linear-gradient(6deg,#56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
	.reset{
		font-size: 30rpx;
		color: #4AC2D4;
	}
</style>