zdsz_WeChatApplet/pages/login/login.vue

<template>
	<view>
		<image src="/static/icon/background.png" mode="" class="background"></image>
		<view class="title">
			<image src="/static/icon/logo.png" mode="" class="logo"></image>
			<view class="font-sixty-four">
				贞达市政工程
			</view>
		</view>
		<view>
			<view class="align-items margin" style="border-bottom: 2rpx solid #000000;">
				<image src="/static/icon/number.png" mode="" class="img"></image>
				<input type="text" placeholder="请输入工号" placeholder-class="font-forty-eight"
					class="input font-forty-eight" v-model="form.number" />
			</view>
			<view class="align-items margin" style="border-bottom: 2rpx solid #000000;">
				<image src="/static/icon/password.png" mode="" class="img"></image>
				<input type="password" placeholder="请输入密码" placeholder-class="font-forty-eight"
					class="input font-forty-eight" v-model="form.password" />
			</view>
		</view>
		<view class="remember">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox
					@change="checkboxChange"
					v-model="item.checked" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view @click="login()">
			<button class="background-color1 white font-forty-eight btn">登录</button>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data() {
			return {
				form: {
					number: '',
					password: ''
				},
				list:[
					{
						name: '记住密码',
						checked: true,
						disabled: false
					}
				],
				flag: true,
			}
		},
		onLoad() {
			const HCnumber = uni.getStorageSync('HCnumber');
			const HCpassword = uni.getStorageSync('HCpassword');//缓存的密码
			if(HCnumber && HCpassword){
				this.form.number = HCnumber;
				this.form.password = HCpassword;
			}
		},
		methods: {
			login() {
				if (this.form.number === '') {
					this.$UTILS.showPrompt('请输入工号！')
				} else if (this.form.password === '') {
					this.$UTILS.showPrompt('请输入密码！')
				} else {
					let _this = this;
					let param = {
						jobNum: _this.form.number,
						password: _this.form.password
					}
					if(_this.flag){
						uni.setStorageSync('HCnumber', _this.form.number);
						uni.setStorageSync('HCpassword', _this.form.password);
					}else{
						uni.removeStorageSync('HCnumber');
						uni.removeStorageSync('HCpassword');
					}
					service.login(param).then(res => {
						console.log('res', res.token)
						uni.setStorage({
							key: 'token',
							data: res.token,
							success: (res) => {
								console.log('登陆成功res',res)
								console.log('登陆成功')
								this.$UTILS.showPrompt('登录成功！')
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/noLogin/typeList'
									})
								},2000)
							
							},
							fail: (e) => {
								console.log(e)
							}
						})
					})
				}
			},
			checkboxChange(e) {
				this.flag = e.value;
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				if(e.length > 0){
					uni.setStorageSync('HCnumber', this.form.number);
					uni.setStorageSync('HCpassword', this.form.password);
				}else{
					uni.removeStorageSync('HCnumber');
					uni.removeStorageSync('HCpassword');
				}
			},
		}
	}
</script>

<style lang="scss">
	.background {
		z-index: -1;
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.title {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		padding: 200rpx 0 0;

		.logo {
			width: 150rpx;
			height: 150rpx;
			margin: 0 25rpx;
		}
	}

	.margin {
		margin: 80rpx;

		.img {
			width: 80rpx;
			height: 80rpx;

		}

		.input {
			width: 70%;
			height: 90rpx;
			padding: 30rpx;
		}
	}
	
	.remember{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 80rpx;
		letter-spacing: 2rpx;
	}
	
	.btn {
		width: 590rpx;
		margin: 0rpx auto 0;
		background: #3857F3;
		border-radius: 72rpx;
	}
</style>