RiyueGorge/pages/otherNumlogin.vue

<template>
	<view class="page">
		<view class="icon">
			<image src="../static/login/icon.png" mode="widthFix"></image>
			<view class="text">手机号一键登录</view>
		</view>
			
		<view class="input">
			<input type="text" value="" v-model="phone" placeholder="输入手机号"/>
			<view class="" style="display: flex;align-items: center;">
				<input type="text" value="" placeholder="输入验证码"/>
				<view class="">
				  	<u-code ref="uCode" @change="codeChange" seconds="60" :changeText="'x'"></u-code>
				  	<u--text :text="tips"  @tap="getCode" size="28" decoration="underline"></u--text>
				</view>
			</view>
		</view>
		
		
		<view class="submit" @click="gohome">
			完成
		</view>
	
		
		<view class="aggre">
			登录即代表您同意我们的
			<text class="underline">用户协议</text>和
			<text class="underline">隐私政策</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tips:"获取验证码",
				value: '',
				// 输入的验证码
				code:'',
				phone:"",
				verify_key:""
			}
		},
		methods:{
			// 去首页
			gohome(){
				uni.switchTab({
					url:"index/index"
				})
			},
			codeChange(text){
			    this.tips = text;
			},
			 getCode() {
				 console.log("XXXXXXXXX",this.phone)
			    if (this.$refs.uCode.canGetCode) {
					uni.$u.http.post("/api/sms/send",{phone:this.phone}).then((res) => {
						console.log(res)
						uni.showLoading({
						     title: '正在获取验证码'
						})
						setTimeout(() => {
						    uni.hideLoading();
						    // 这里此提示会被this.start()方法中的提示覆盖
						    uni.$u.toast('验证码已发送');
						    // 通知验证码组件内部开始倒计时
						    this.$refs.uCode.start();
						}, 2000);
						this.verify_key=res.verify_key
					}).catch((err) => {
						console.log(err)
						// uni.showToast({
						// 	title: '',
						// 	icon:"none"
						// })
					})
			        // 模拟向后端请求验证码
			        
					
			        
			    } else {
			        uni.$u.toast('倒计时结束后再发送');
			    }
			},
			change(e) {
			    console.log('change', e);
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
		color: #333333 ;
	}
	.page{
		margin: 40rpx;
	}
	.icon{
		display: flex;
		margin-top: 72rpx;
		image{
			width: 38rpx;
			margin: 0 20rpx;
		}
		.text{
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #101010;
		}
	}
	.aggre{
		margin-top: 470rpx;
		text-align: center;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		font-size: 26rpx;
		.underline{
			text-decoration:underline;
			padding: 0 6rpx;
		}
	}
	.input{
		input{
			width: 448rpx;
			height: 72rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			margin: 38rpx 0;
			margin-right: 20rpx;
		}
	}
	.submit{
		margin: 108rpx auto 0;
		text-align: center;
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #1E9F6A;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		color: #ffffff;
	}
	
</style>