xytSk-App/pages/login/login.vue

<template>
	<view class="container">
		<div class="img">
			<image style="width: 100%; height: 100%" src="../../static/images/u8.png" mode="scaleToFill"></image>
		</div>
		<uni-forms :modelValue="formData" class="form">
			<uni-forms-item>
				<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item>
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item>
				<checkbox :checked="false" @click="handleChange(formData)" /><text>记住用户名和密码</text>
			</uni-forms-item>
			<!-- <button type="primary" class="button" @click="xian">县</button> -->
			<!-- <button type="primary" class="button" @click="xiang">乡</button> -->
			<button type="primary" class="button" @click="login(formData)">登录</button>
		</uni-forms>	
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js'
	
	let checked = false
	
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					checked: false,
				},

			}
		},
		methods: {
			
			handleChange(formData){
				checked = !checked
				formData.checked = !formData.checked
			},
			xian() {
				this.formData = {
					username: 'cwz',
					password: '12345678a',
					checked: false,
				}
			},
			xiang() {
				this.formData = {
					username: 'mdx',
					password: '1234567a',
					checked: false,
				}
			},
			login(formData){
				
				//loading
				// uni.showLoading({title:'努力登录中...', mask:true});
				
				//MD5加密
				const encryptData = (data) => {
					const encryptedData = CryptoJS.MD5(data).toString()
					return encryptedData
				}
				
				//创建提交表单
				let postForm = {
					loginName: formData.username,
					secretKey: encryptData(formData.password),
				}

				//记住密码功能
				if (formData.checked === true){
					uni.setStorageSync('loginName',postForm.loginName)
					uni.setStorageSync('secretKey',postForm.secretKey)
				} else {
					// uni.removeStorageSync('loginName')
					// uni.removeStorageSync('secretKey')
					// this.formData.username = ''
					// this.formData.password = ''
				}
				
				//提交表单
				
				uni.$http.post('/gunshiApp/xfflood/doLogin',postForm).then(res=>{
					uni.showLoading({title:'努力登录中...', mask:true});
					
					if (res.data.code === 200) {
						
						//localStorage保存token
						if (res.data.data){
							uni.setStorageSync('Gs-Token', res.data.data)
							uni.$http.get('/gunshiApp/xfflood/getLoginInfo').then(res=>{
								console.log("sss",res.data.data);
								uni.setStorageSync('value', res.data.data)
								console.log('-----value------',res.data.data);
							})
							
							//获取userId并获取头像
							uni.$http.get('/gunshiApp/xfflood/my/info/getByUserId').then(res=>{
								console.log('-----avatar1------',res.data);
								if (res.data.data) {
									let url = '/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/'
									url = url + res.data.data.fileId
									uni.$http.get(url).then(res=>{
										uni.setStorageSync('avatar','http://223.75.53.141:9102/test.by-lyf.tmp'+res.data.data.filePath)
										console.log('-----avatar------',uni.getStorageSync('avatar'));
									})
								} else {
									uni.setStorageSync('avatar','../../static/tabs/touxiang.png')
								}
							})
						}
						
						//登录成功后跳转界面
						setTimeout(
							function(){
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/homeIndex/index'
								})
							}
						,1000)
						clearTimeout()
					} else if (res.data.code === 400) {
						//登录失败后弹出信息
						setTimeout(
							function(){
								uni.hideLoading()
								uni.showToast({
									title:res.data.description,
									icon: 'none',
									duration: 2000
								})
							}
						,1000)
						clearTimeout()
					}
				})
				
			
			}
		}
	}
</script>

<style>
	.container{
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		align-items: center;
		background-color: #f3f5f8;
	}
	.img{
		width: 100vw;
		height: 50vh;
		margin-top: 5vh;
		/* background-color: red; */
		
	}
	.form{
		margin-top: 4vh;
		width: 80%;
		height: 8vh;
		align-items: center;
		justify-content: center;
	}
	.button{
		
	}
</style>