xiaohulu-app/src/pages/login/index.vue

<template>
	<view>
		<view class="loginway">
			<div class="navigation"></div>
			<image class="loginimg" mode="widthFix" src="/static/login/logo_word.png"></image>
			<view class="input_wrap">
				<up-form labelPosition="left" :model="form" :rules="rules" ref="loginFormRef">
					<up-form-item label="" prop="username" class="inputFormWrap">
						<up-input shape="circle" clearable prefixIcon="/static/login/icon-account.png"
							:prefixIconStyle="prefixIconStyle" v-model="form.username" placeholder="请输入账号"></up-input>
					</up-form-item>
					<up-form-item label="" prop="password" class="inputFormWrap">
						<up-input shape="circle" clearable password prefixIcon="/static/login/icon-password.png"
							:prefixIconStyle="prefixIconStyle" v-model="form.password" placeholder="请输入密码"></up-input>
					</up-form-item>
					<up-form-item label="" prop="" class="inputFormWrap">
						<up-checkbox-group v-model="checkboxs" placement="column" @change="changeRemember">
							<up-checkbox :label="'记住密码'" :name="'remember'"></up-checkbox>
						</up-checkbox-group>
					</up-form-item>
					<up-form-item label="" prop="agreePrivacy" class="inputFormWrap agree_form_item">
						<view class="agree_row">
							<up-checkbox-group v-model="agreePrivacyList" placement="row" @change="onAgreeChange">
								<up-checkbox :name="'agree'"></up-checkbox>
							</up-checkbox-group>
							<text class="agree_text">我已阅读并同意</text>
							<text class="agree_link" @click="toPrivacy">《隐私政策》</text>
						</view>
					</up-form-item>
					<up-form-item>
						<up-button type="primary" text="登录" shape="circle" :loading="loading" @click="handleLogin"></up-button>
					</up-form-item>
				</up-form>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { loginApi } from '@/apis/login'
import type { Login_Params, userInfo_Result } from '@/types/login'
import { computed } from 'vue'
const remember = computed(() => {
	return checkboxs.value.length > 0
})
const prefixIconStyle = {
	width: "16px",
	height: "16px",
	marginRight: "4px",
	marginLeft: "10px"
}
const rules = ref({
	username: {
		type: 'string',
		required: true,
		message: '请输入账号',
		trigger: []
	},
	password: {
		type: 'string',
		required: true,
		message: '请输入密码',
		trigger: []
	},
	agreePrivacy: {
		required: true,
		message: '请阅读并同意《隐私政策》',
		trigger: [],
		validator: (rule: any, value: any, callback: any) => {
			if(!value){
				callback(new Error('请阅读并同意《隐私政策》'));
			}else{
				callback();
			}
		}
	}
})
const form = ref<Login_Params>({
	username: '',
	password: '',
	systemCode: "system_crm",
	clientFlag: "2",
	code: "996007qa.code",
	uuid: "123",
	agreePrivacy: false
})
const checkboxs = ref<string[]>([])
const agreePrivacyList = ref<string[]>([])
const getUserByCache = () => {
	const savedUsername = uni.getStorageSync('username');
	const savedPassword = uni.getStorageSync('password');

	if (savedUsername && savedPassword) {
		form.value.username = savedUsername;
		form.value.password = savedPassword;
		checkboxs.value = ['remember']
	}
}
const onAgreeChange = (list: string[]) => {
	form.value.agreePrivacy = (list || []).indexOf('agree') >= 0;
}
const toPrivacy = () => {
	uni.navigateTo({ url: '/pages/privacy/index' });
}
const changeRemember = (value: string[]) => {
	if (value.length > 0) {
		uni.setStorageSync('username', form.value.username);
		uni.setStorageSync('password', form.value.password);
	} else {
		uni.removeStorageSync('username');
		uni.removeStorageSync('password');
	}
}
const loginFormRef = ref<any>(null)
const loading = ref<boolean>(false)
const handleLogin = () => {
	loginFormRef.value.validate().then(async () => {
		loading.value = true
		if (remember.value) {
			uni.setStorageSync('username', form.value.username);
			uni.setStorageSync('password', form.value.password);
		} else {
			uni.removeStorageSync('username');
			uni.removeStorageSync('password');
		}
		const res = await loginApi.login(form.value)
		uni.setStorageSync('token', res.data.access_token)
		const infoRes = await loginApi.getInfo()
		uni.setStorageSync('userInfo', infoRes.user)
		loading.value = false
		uni.showToast({ title: '登录成功', icon: 'success' })
		setTimeout(() => {
			uni.reLaunch({ url: '/pages/repair/index' })
		}, 50)
	}).catch((res: any) => {
		uni.$u.toast(res[0].message);
	})
}

onMounted(() => {
	getUserByCache();
})
</script>

<style lang="scss" scoped>
.inputFormWrap {
	:deep(.u-border) {
		border: 1px solid #dadbde !important;
	}
}

.agree_form_item {
	:deep(.u-form-item__body__right) {
		flex: 1;
	}
}

.agree_row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.agree_text {
	font-size: 26rpx;
	color: #606266;
	margin-left: 8rpx;
}

.agree_link {
	font-size: 26rpx;
	color: #108cff;
	margin-left: 4rpx;
}

page {
	background: #fff;
}

.loginway {
	display: flex;
	flex-direction: column;
	height: 100vh;

	.navigation {
		background-color: #108cff;
		width: 100%;
		height: 120rpx;
	}

	.loginimg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.input_wrap {
		padding: 20rpx 30rpx;
	}
}
</style>