legacy.pda.deploy-review/pages/login/login.vue

<template>
  <view class="main">
		<view class="login">
			<view class="logo">
				<image class="faceu" aspectFill src="/static/login@2x.png" />
			</view>
			<view class="title">
				<text class="text">中药处方煎配溯源管理</text>
			</view>
			<uni-forms :model="formData">
				<uni-forms-item name="name">
					<uni-icons class="item" type="person-filled" color="#cfcfcf" size="50"></uni-icons>
					<view class="input">
						<input type="text" class="item" v-model="formData.name" placeholder="请输入账号" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-icons type="locked" class="item" color="#cfcfcf" size="50"></uni-icons>
					<view class="input">
						<input class="item" v-model="formData.password" :password="showPassword" placeholder="请输入密码" />
						<!-- <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text> -->
						<uni-icons custom-prefix="iconfont" class="item" :type="showPassword?'icon-biyanjing':'icon-yanjing'" color="#cfcfcf" size="50" @click="changePassword"></uni-icons>
						<!-- :type="showPassword?'icon-biyanjing':'icon-yanjing'" -->
					</view>
				</uni-forms-item>
				
					<label for="" class="radio">
						<switch :checked="formData.remember" @change="handleChange" /> 记住密码
					</label>
				
			</uni-forms>
			<button class="button" @click="submit">登录</button>
		</view>
  </view>
</template>

<script>
  export default {
    name: ''
  }
</script>

<script setup>
import { onMounted, ref } from 'vue'
import { login } from '@/static/api.js'

const showPassword = ref(false)
const formData = ref({
	name:'',
	password:'',
	remember:false
})

const submit = async ()=> {
	console.log('formData', formData.value)
	if(formData.value.name && formData.value.password && formData.value.remember=== true ){
		uni.setStorageSync('username', formData.value.name);
		uni.setStorageSync('password', formData.value.password);
		uni.setStorageSync('remember', formData.value.remember);
	}
	const params = {
		username: formData.value.name,
		password: formData.value.password,
		code: '2',
	}
	const res = await login(params)
	if (res.code === 0 && res.token) {
		uni.setStorageSync('token', res.token);
		uni.redirectTo({
			url:"/pages/index/index"
		})
	} else {
			console.log('登录失败')
			uni.$showMsg('加购物车成功', 1500)
	}
}
const handleChange = ()=>{
	formData.value.remember = !formData.value.remember
	// 如果为true本地保存账号密码
	console.log('handleChange', formData.value)
}

const changePassword = ()=>{
	showPassword.value = ! showPassword.value
}
onMounted(() => {
	const name = uni.getStorageSync('username')
	const password = uni.getStorageSync('password')
	const remember = uni.getStorageSync('remember')
	if (name && password && remember) {
		formData.value.name = name
		formData.value.password = password
		formData.value.remember = remember
	}
})

</script>

<style lang="scss">
	@import "@/static/iconfont.css";
  .main{
		justify-content: center;
		align-items: center;
		background-color: #fff;
		.login {
			display: flex;
			flex-direction:column;
			align-items: center;
			width: 1074px;
			border-radius: 40rpx;
			background-color: #fff;
			margin-top: 100px;
			:deep(.uni-forms){
				margin-top: 80rpx;
				width: 1074px;
			};
			.logo{
				display: flex;
				.faceu{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 780px;
					height: 544px;
				}
			}
			.title {
				font-size: 50px;
				margin-top: 50px;
				width: 1074px;
				display: flex;
				justify-content: left;
				flex-direction:row;
				.text{
					
				}
			}
			:deep(.uni-forms-item__content) {
				display: flex;
				flex-direction:row;
				border-bottom: 1px solid #bcbcbc;
				.input{
					margin-left: 20rpx;
					width: 1000px;
					height: 48px;
					color:#bcbcbc;
					display: flex;
					align-items: center;
					justify-content: space-between;
					:deep(.uni-input-wrapper){
						font-size: 48px;
						width: 1000px;
					}
				}
				.item{
					font-size: 28px;
					color: #bcbcbc;
					
				}
			}
			:deep(.uni-label-pointer) {
				margin-left: 10rpx;
			}
			.button {
				background-color: #fff;
				margin-top: 40rpx;
				color: #fff;
				height: 30rpx;
				width: 400rpx;
			}
		}
	}
</style>