登录注册界面

最新推荐文章于 2024-07-10 14:03:37 发布

杰妮67

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量437

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_74904651/article/details/135476673

版权

<template>
	<view class="">
		<view class="main">
			<view class="phoneReg">
				<view class="titleText">
					<h1 style="font-weight: 500;">手机号注册</h1>
					<p style="color: #aaa;font-size: 14px;margin-top: 10px;">欢迎使用智慧养老</p>
				</view>
				<view class="userData">
					<p>手机号码</p>
					<u-input v-model="phoneNum" class="inputClass" type="text" border="" placeholder="+86  |  请输入手机号" />
					<p>验证码</p>
					<view class="capt">
						<u-input class="inputClass" type="text" border="" placeholder="请输入验证码" />
						<button @click="getCapt()">获取验证码</button>
					</view>
					<p>密码</p>
					<u-input v-model="pwdNum" class="inputClass" type="password" border="" placeholder="请输入密码" />
				</view>
			</view>
			<view class="reg">
				<u-radio-group>
					<u-checkbox shape="square" v-model="checked">
						我已阅读并同意
						<span @click="policy()">《用户隐私政策》</span>
					</u-checkbox>
				</u-radio-group>
				<u-button type="primary" style="margin-top: 10px;" @click="reg()">注册</u-button>
				<view class="router">
					<a href="javascript:0" @click="gotoLog()">已有账号，去登陆</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 1,
				text: '账号密码登录',
				checked: true,
				phoneNum: '',
				pwdNum: ''
			}
		},
		methods: {
			policy() {
				uni.showModal({
					title: '嘻嘻'
				})
			},
			getCapt() {

			},
			gotoLog() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			reg() {
				uni.request({
					url: "http://127.0.0.1:5502/system/user/register",
					data: {
						"userName": this.phoneNum,
						"password": this.pwdNum
					},
					method:'POST',
					success: (res) => {
						console.log(res)
						if(res.data.code==200){
							console.log('success')
							uni.showToast({
								title:'注册成功',
								duration:2000
							}).then(()=>{
								uni.navigateTo({
									url:'/pages/login/login'
								})
							})
							
						}else{
							uni.showToast({
								icon:'error',
								title:res.data.msg
							})
						}
					}
				})
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.main {
		margin-top: 40px;
		padding: 20px;
	}

	.userData {
		margin-top: 40px;
		position: relative;
	}

	.userData .inputClass {
		margin-top: 10px;
		background-color: #F2F7FB;
		width: 100%;
		height: 35px;
		margin-bottom: 10px;
	}

	.userData button {
		border: 0px;
		background-color: transparent;
		position: absolute;
		font-size: 10px;
		color: #559DF1;
		right: 0;
		top: 2px;
	}

	.userData button::after {
		border: none;
	}

	.userData .capt {
		position: relative;
	}

	.userData span {
		position: absolute;
		right: 0;
		color: #aaa;
	}

	.reg {
		margin-top: 10px;
	}

	.reg span {
		color: #3489F0;
	}

	.router {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.router a {
		text-decoration: none;
		color: #3489F0;
	}
</style>

<template>
	<view class="">
		<view class="titleImg" style="text-align: center;">
			<image src="../../static/uni.png" mode="" style="width: 150px;height: 150px;"></image>
		</view>
		<view class="main">
			<view class="phoneLogin" v-show="flag">
				<view class="titleText">
					<h1 style="font-weight: 500;">手机验证码登录</h1>
					<p style="color: #aaa;font-size: 14px;margin-top: 10px;">欢迎使用智慧养老</p>
				</view>
				<view class="userData">
					<p>手机号码</p>
					<u-input v-model="phoneNum" class="inputClass" type="text" border="" placeholder="+86  |  请输入手机号" />
					<p>验证码</p>
					<view class="capt">
						<u-input v-model="captNum" class="inputClass" type="text" border="" placeholder="请输入验证码" />
						<button @click="getCapt()">获取验证码</button>
					</view>
				</view>
			</view>
			<view class="pwdLogin" v-show="!flag">
				<view class="titleText">
					<h1 style="font-weight: 500;">账号密码登录</h1>
					<p style="color: #aaa;font-size: 14px;margin-top: 10px;">欢迎使用智慧养老</p>
				</view>
				<view class="userData">
					<p>账号</p>
					<u-input v-model="idNum" class="inputClass" type="text" border="" placeholder="请输入账号" />
					<p>密码</p>
					<u-input v-model="pwdNum" class="inputClass" type="password" border="" placeholder="输入密码" />
					<span @click="forget()">忘记密码?</span>
				</view>
			</view>
			<view class="login">
				<u-radio-group>
					<u-checkbox shape="square" v-model="checked">
						我已阅读并同意
						<span @click="policy()">《用户隐私政策》</span>
					</u-checkbox>
				</u-radio-group>
				<u-button type="primary" style="margin-top: 10px;" @click="login()">登录</u-button>
				<view class="router">
					<a href="javascript:0" @click="flag=!flag,text = flag?'账号密码登录':'免密登录'">{{text}}</a>
					<a href="javascript:0" @click="gotoReg()">注册新用户</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 1,
				text: '账号密码登录',
				checked: true,
				phoneNum: '',
				captNum: '',
				idNum: '',
				pwdNum: '',
			}
		},
		methods: {
			policy() {
				uni.showModal({
					title: '嘻嘻'
				})
			},
			getCapt() {

			},
			gotoReg() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			},
			login() {
				if (!this.flag) {
					uni.request({
						url: 'http://127.0.0.1:5502/loginWithoutCode',
						data: {
							"username": this.idNum,
							"password": this.pwdNum
						},
						method: 'POST',
						success: (res) => {
							console.log(this.idNum,this.pwdNum)
							console.log(res)
							if (res.data.code == 200) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.msg
								})
							}
						}
					})
				} else {
					uni.request({
						url: 'http://127.0.0.1:5502/mobileLogin',
						data: {
							"userName": this.phoneNum,
							"code": this.captNum
						},
						method: 'POST',
						success: (res) => {
							console.log(res)
							if (res.data.code == 200) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.msg
								})
							}
						}
					})
				}

			},
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.main {
		margin-top: 40px;
		padding: 20px;
	}

	.userData {
		margin-top: 40px;
		position: relative;
	}

	.userData .inputClass {
		margin-top: 10px;
		background-color: #F2F7FB;
		width: 100%;
		height: 35px;
		margin-bottom: 10px;
	}

	.userData .capt {
		position: relative;
	}

	.userData button {
		border: 0px;
		background-color: transparent;
		position: absolute;
		font-size: 10px;
		color: #559DF1;
		right: 0;
		top: 5px;
	}

	.userData button::after {
		border: none;
	}

	.userData span {
		position: absolute;
		right: 0;

		color: #aaa;
	}

	.login {
		margin-top: 10px;
	}

	.login span {
		color: #3489F0;
	}

	.router {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.router a {
		text-decoration: none;
		color: #3489F0;
	}
</style>