zd_wechatApp/pages/login/login.vue

<template>
	<view class="bigback">
		<image src="https://zdsz.obs.cn-south-1.myhuaweicloud.com/file/42ad4e72a9bb4f08ac613933c04c679a.png" mode="" class="background"></image>
		<view class="title">
			<image src="https://zdsz.obs.cn-south-1.myhuaweicloud.com/file/41743f2fb9b54c8e87e1168bb094505b.png" mode="" class="logo"></image>
			<!-- <view class="font-sixty-four">
				长春贞达市政施工管理平台
			</view> -->
		</view>
		<view>
			<view class="align-items margin">
				<image src="/static/icon/zh.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">
				<image src="/static/icon/mm.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(()=>{
									console.log('跳')
									uni.switchTab({
										url:'/pages/index/index'
									})
									// uni.navigateTo({
									// 	url:'/pages/noLogin/roadSection/roadSection?type=2'
									// })
									console.log('跳')
								},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;
		width: 100%;
		height: 610rpx;
	}
	.title {
		display: flex;
		margin: 20rpx 0;
		.logo {
			width: 690rpx;
			height: 62rpx;
			margin: 0 auto;
		}
	}
	.margin {
		margin:20rpx;
		background: #f1f7ff;
		border: solid 1rpx #84b7ff;
		border-radius: 80rpx;
		padding: 0 50rpx;
		width: 86%;
		margin: 26rpx auto;
		.img {
			width: 70rpx;
			height: 60rpx;
		}

		.input {
			width: 100%;
			height: 75rpx;
			padding: 20rpx 20rpx;
			font-size: 32rpx;
			color: #999999;
		}
	}
	.remember{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 80rpx;
		letter-spacing: 2rpx;
	}
	.btn {
		width: 86%;
		margin: 0rpx auto 0;
		background: linear-gradient(45deg, #55bafe, #3072ff);
		border-radius: 72rpx;
		box-shadow: 0rpx 0rpx 20rpx #3f8fff;
	}
</style>