chatGpt/pages/main/login.vue

<template>
	<view style="height:100vh;background: #fff;">
		<view class="img-a bg-gradual-cyan">
			<view class="t-b">
				您好，
				<br />
				欢迎使用，AirSmartChat
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form v-show="showType === 'login'" class="cl">
					<view  class="t-a">
						<text class="txt">账号</text>
						<input type="text" name="username" placeholder="请输入您的账号" maxlength="20" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="password" maxlength="18" placeholder="请输入您的密码" v-model="password" />
					</view>
					<button v-show="showType === 'login'" class="bg-cyan shadow margin-top-lg" @tap="login()" :loading="loginLoading">登 录</button>
				</form>
			</view>
		</view>
	</view>
</template>
<script>
import { getUrlQuery } from '@/util/squ.js'
import { doLogin as doLoginApi, LoginSuccess } from '@/util/login.js'
import {
	post
} from '@/util/request.js'
export default {
	data() {
		return {
			showType: 'login',
			email: '',
			phone: '',
			password: '',
			username:'',
			passwordConfirm: '',
			verificationCode: '',
			identifyingCode: '',
			loginLoading: false,
			registerLoading: false,
			doRegisterLoading: false
		}
	},
	mounted() {
		this.createCode(4)
	},
	methods: {
		login() {
			if (!this.check()) {
				this.createCode(4)
				return
			}
			this.doLogin()
		},
		doLogin() {
			this.loginLoading = true
			doLoginApi('H5', {
				username: this.email || this.phone|| this.username,
				password: this.password
			}).then(res => {
				this.loginLoading = false
				if (res === LoginSuccess) {
					uni.showToast({ title: '登录成功' })
					// 跳转到主页发现已经登录，会自动重新获取用户信息，此处无需获取
					window.location.href = getUrlQuery('_originHref')
				} else {
					uni.showToast({ title: (res && res.data && res.data.message) || '登录失败', icon: 'none' })
					this.createCode(4)
				}
			})
		},
		check () {
			if (!this.username) {
				uni.showToast({ title: '请输入您的账号', icon: 'none' })
				return false
			}
			if (!this.password) {
				uni.showToast({ title: '请输入您的密码', icon: 'none' })
				return false
			}
			return true
		},
		createCode(length) {
		    var code = "";
		    var codeLength = parseInt(length); //验证码的长度
		    var checkCode = document.getElementById("checkCode");
		    // 所有候选组成验证码的字符，当然也可以用中文的
		    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
		    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
		    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
		    //循环组成验证码的字符串
		    for (var i = 0; i < codeLength; i++) {
		        //获取随机验证码下标
		        var charNum = Math.floor(Math.random() * 62);
		        //组合成指定字符验证码
		        code += codeChars[charNum]
		    }
		    if (checkCode) {
		        //为验证码区域添加样式名
		        checkCode.className = "code"
		        //将生成验证码赋值到显示区
		        checkCode.innerHTML = code
		    }
		},
		validateCode(inputCode) {
			// 获取显示区生成的验证码
			var checkCode = document.getElementById("checkCode").innerHTML
			//console.log(checkCode, inputCode);
			if (inputCode.length <= 0) {
				uni.showToast({ title: '请输入验证码', icon: 'none' })
				return false
			} else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
				uni.showToast({ title: '验证码输入有误', icon: 'none' })
				return false
			} else {
				return true
			}       
		}
	}
};
</script>
<style>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.bg-gradual-cyan {
	background-image: linear-gradient(45deg, #1da480, #1cbbb4);
	color: #ffffff;
}
.code-box .code {
	 font-family:Arial;
	 font-style:italic;
	 color:blue;
	 font-size:24px;
	 border:0;
	 padding:2px 3px;
	 letter-spacing:3px;
	 font-weight:bolder;            
	 float:left;           
	 cursor:pointer;
	 width:90px;
	 height:30px;
	 line-height:30px;
	 text-align:center;
	 vertical-align:middle;
	 background-color:#D8B7E3;
 }
.code-box span {
	text-decoration:none;
	font-size:14px;
	color:#288bc4;
	padding-left:10px;
}
.code-box span:hover {
	text-decoration:underline;
	cursor:pointer;
}
</style>