BRS1.0/pages/login/index.vue

<template>
	<view class="content">
		<!-- <img src="../../static/bei.png" alt="" class="tubei"> -->
		<form>
		<view class="avatorWrapper">
		</view>
    <view class="name">中小型机场手持终端</view>
		<view class="form">
			<view class="inputWrapper">
				<view class="log"></view>
				<input  class="input" name="username"  type="text" v-model="username"  placeholder-style="font-size:.8125rem;color:rgb(223, 223, 223);display:flex;justify-content: start;" placeholder="请输入登录账号"/>			
			</view>
			<view class="inputWrapper">
				<view class="pass"></view>
				<input  class="input"  name="password"  type="password" v-model="password" placeholder-style="font-size:.8125rem;color:rgb(223, 223, 223);display:flex;justify-content: start;" placeholder="请输入密码"/>
			</view>
			
			
		</view>
		<button form-type="submit" class="loginBtn" @tap="login">登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				username:"",
				password:"",
			}
		},
		created() {
			this.getToken()
		},
		onLoad() {

		},
		methods: {
			async getToken(){
				let that = this;
				let data = {
						"appid": "appdjmmaf0kerwpf",
						"appSecret": "appu7zpllz1folzsljm498dcpi0lsog1"
					}
				await that.$http.httpPost('/foxlibc/getToken',data).then(res => {
					if(res.code == "0"){
						that.$storage.setJson('apps',res.returnData);
					}
				})
			},
			async login () {
				const apps = this.$storage.getJson("apps")
				let that = this;
				let passWordMD5 = this.$md5(that.password)
				let data = {
					"app_token": apps.app_token,
					"username": that.username,
					"password": passWordMD5
				}
				if(data.username==""||data.password==""){
					uni.showToast({
						title: '请输入正确账号密码',
						icon: 'none',
						duration: 500
					});
					return;
				}
				await that.$http.httpPost('/foxlibc/sign-in',data).then(res => {
					if(res.code=="-1"){
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none',
							duration: 500
						});	
					}
					else if(res.code=="0"){
						that.$storage.setJson('users',res.returnData);
						uni.switchTab({
							url: "/pages/index/index"
						});	
						
					}
					else{
						uni.showToast({
							title: '登录失败请联系管理员',
							icon: 'none',
							duration: 500
						});	
					}
				})
				
			},
			
			
			/**发布提交 */
			formSubmit(e) {
				var that = this;
				var	yonghuming1= e.detail.value.yonghuming;
				var	mima1= e.detail.value.mima;
			
			uni.request({
				url:'https://换成你自己的域名接口',
			
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				method: 'POST',
				data: {
					yonghuming:yonghuming1,
					mima:mima1,
				},
				success: (res) => {
					if(res.data=="5"){
						wx.showToast({
							title: '用户名或密码错误',
							icon: 'none',
							duration: 500
						});	
					}
					else{
					uni.navigateTo({
							url:"/pages/index1/index1",
							})		
						
					}
				}
			})
			}

		}
	}
</script>
<style scoped>
	.content {
		background: #377EB4;
		width: 100vw;
		height: 100vh;
		background: url('../../static/bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.avatorWrapper{
		height: 15vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.name{
		/* padding: 0 90upx 50upx 90upx; */
		padding-left: 90upx;
		color: rgb(255, 255, 255);
		font-family: Noto Sans SC;
		font-size: 24px;
		font-weight: 700;
	}
	.form{
		padding: 0 100upx;
		margin-top: .625rem;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: rgba(0, 0, 0, 0);
		box-sizing: border-box;
		/* padding: 0 20px; */
		margin-top: 25px;
		border-bottom: 1px solid rgb(223, 223, 223);
		display: flex;
		align-items: center;
	}
	.log{
		width: .875rem;
		height: .875rem;
		background: url('../../static/login.png') no-repeat;
    background-size: 100% 100%;
		margin-right: .75rem;
	}
	.pass{
		width: .875rem;
		height: .875rem;
		background: url('../../static/mima.png') no-repeat;
    background-size: 100% 100%;
		margin-right: .75rem;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		/* text-align: center; */
		color: rgb(223, 223, 223);
		font-family: Noto Sans SC;
		font-size: .8125rem;
		font-weight: 500;

	}
	.loginBtn{
		width: 16.8rem;
		/* padding: 0 23px 0 23px; */
    height: 2.5rem;
		background: linear-gradient(179.11deg, rgba(51,161,165,1.00) 11.422%,rgba(59,111,142,1.00) 118.849%,rgba(59,111,142,1.00) 118.849%,rgba(59,111,142,1.00) 118.849%);
    border-radius: 2px;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(223, 223, 223);
		font-family: Noto Sans SC;
		font-size: 15px;
		font-weight: 700;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>