college/pages/login/login.vue

<template>
	<view class="content">
		<image src="../../static/pcimg/loginLogo.png" mode="" class="loginLogo"></image>
		<view class="box">
			<view class="title">登录</view>
			<view class="inputBox">
				<input v-model="accountName" type="text" placeholder="账号" class="lineInput"/>
			</view>
			<view class="inputBox" style="position: relative;">
				<input  v-model="password" v-if="passwordType=='password'"  type="password" placeholder="密码" class="lineInput"/>
				<input  v-model="password" v-else  type="text" placeholder="密码" class="lineInput"/>
				<image  v-if="passwordType=='password'" src="../../static/pcimg/yc.png" mode="" class="yincIcon" @click="show(2)"></image>
				<image v-else src="../../static/pcimg/yj.png" mode="" class="yanjIcon" @click="show(1)"></image>
				
			</view>
			<view class="ckBox">
				<checkbox-group>
					<label>
						<checkbox style="transform:scale(0.7)" value="cb"  />记住密码
					</label>
					
				</checkbox-group>
			</view>
			<view class="btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 passwordType: 'password',
				 accountName:'',
				 password:'',
				 index:'',
			}
		},
		onLoad(opt) {
		 this.index=opt.index
		},
		methods: {
			login(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('/trainingOpenApi/login', {
					accountName:this.accountName,
					password:this.password
				}, 'POST').then(res => {
					uni.hideLoading();
					//console.log(res.code)
					if(res.code==1){
						var helpToken=res.data.helpToken
						const currentTime = Date.now();
						const expirationTime = currentTime + 7 * 24 * 60 * 60 * 1000; // 一周后过期
						uni.setStorage({
							key: 'helpToken',
							data:{
								 value: helpToken,
								 expiration: expirationTime
							},
							 success: function () {
							 if(this.index==2){
								 uni.navigateTo({
								 	url:'../pcLh/indexNew'
								 })
							 }
							 if(this.index==3){
									 uni.navigateTo({
										url:'../pc3/indexNew'
									 })
							 }else{
								 uni.navigateTo({
								 	url:'../pc/indexNew'
								 })
							 }
							 
							 }
						}); 
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
					
				})
			},
            show(num){
				if(num==1){
					this.passwordType='password'
				}else{
					this.passwordType='text'
				}
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100vw;
		height: 100vh;
		background: url(../../static/pcimg/loginBg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginLogo{
		width: 206px;height: 48px;
		position: fixed;
		left:100px;top: 50px;
	}
	.box{
		width: 508px;
		height: 447px;
		background: #FFFFFF;
		box-shadow: 0px 0px 19px 0px rgba(202,228,253,0.2);
		border-radius: 24px;
	}
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24px;
		color: #222222;
		line-height: 33px;
		text-align: center;
		padding-top: 52rpx;
	}
	.lineInput{
		height: 47px;
		line-height: 47px;
		font-size: 18px;
		padding-left: 19px;
		border: none;
	}
	.inputBox{
		width: 411px;
		height: 49px;
		border-radius: 8px;
		border: 1px solid #D4D9E2;
		margin-top: 40px;
		margin-left: 49px;
	}
	.yincIcon{
		position: absolute;
		top: 20px;right: 24px;
		width: 20px;height: 10px;
	}
	.ckBox{
		font-size: 14px;
		color: #666666;
		padding-left: 49px;
		padding-top: 15px;
	}
	.btn{
		width: 411px;
		height: 49px;
		background: #1472FF;
		border-radius: 8px;	
		text-align: center;
		line-height: 49px;
		font-size: 18px;
		color: #FFFFFF;
		margin-top: 49px;
		cursor: pointer;
		margin-left: 49px;
	}
	.yanjIcon{
		position: absolute;
		top: 18px;right: 24px;
		width: 19px;height: 14px;
		cursor: pointer;
	}
	input:focus {
	    outline: none;
	    box-shadow: none;
	}
	input[type="text"]:focus {
	    outline: none;
	    box-shadow: none;
	}
</style>