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="#999999" size="30"></uni-icons>
					<view class="input">
						<input type="text" class="item" v-model="formData.username" placeholder="请输入账号" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-icons type="locked" class="item" color="#999999" size="30"></uni-icons>
					<view class="input">
						<input class="item" v-model="formData.password" :password="showPassword" placeholder="请输入密码" />
						<uni-icons custom-prefix="iconfont" class="item" :type="showPassword?'icon-biyanjing':'icon-yanjing'" color="#999999" size="30" @click="changePassword"></uni-icons>
					</view>
				</uni-forms-item>
				
				<label for="" class="radio">
					<switch :checked="formData.remember" style="transform:scale(0.7)" @change="handleChange" /> 记住密码
				</label>
				
			</uni-forms>
			<button class="button" :class="formData.username.length>0 && formData.password.length>0 ? 'active':''" :disabled="formData.username.length>0 && formData.password.length>0 ? false:true" @click="submit">登录</button>
		</view>
  </view>
</template>

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

<script setup>
import { onMounted, ref, computed } from 'vue'
import { login } from '@/static/js/request.js'
import { onLoad } from '@dcloudio/uni-app'
import { updateOnlineStatus } from "@/static/js/api.js"

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

const isFull = computed(()=>{
	if(formData.value.username.length>0 && formData.value.password>0 ){
		console.log('true')
		return true
	} else {
		console.log('false')
		return false 
	}
	
	
})

onLoad(() => {
	const sRemember = false
	if(uni.getStorageSync('remember')){
		JSON.parse(uni.getStorageSync('remember')) 
	}
	console.log('onLoad sRemember', sRemember)
	if(sRemember && sRemember===true){
		formData.value.username = uni.getStorageSync('username')
		formData.value.password = uni.getStorageSync('password')
		formData.value.remember = true
	}
})

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)
		uni.setStorageSync('workStatus', formData.value.remember);
	}
	const params = {
		username: formData.value.username,
		password: formData.value.password,
		code: '2',
	}
	
	let {data:res} = await login(params)
	console.log('res',res.code)
	if (res.code === 200 && res.token && res.userId) {
		
		uni.setStorageSync('token', res.token)
		uni.setStorageSync('userId', res.userId)
		uni.$emit('login',{userId:res.userId})
		console.log('11')
		console.log('res.token',res.token)
		// JSON.stringify(params.data.data)
		const param = {
			token: res.token,
			data: JSON.stringify({ pharmacistUserId: res.userId, onlineStatus: 0})
		}
		console.log('res.param',param)
		await updateOnlineStatus(param)
		
		uni.redirectTo({
			url:"/pages/index/index"
		})
	} else {
			console.log('登录失败')
			uni.$showMsg('登录失败', 1500)
			// TODO 本地测试
			// uni.redirectTo({
			// 	url:"/pages/index/index"
			// })
	}
}
const handleChange = ()=>{
	formData.value.remember = !formData.value.remember
	console.log('formData.value.username',formData.value.username)
	console.log('formData.value.password',formData.value.password)
	console.log('formData.value.remember',formData.value.remember)
	// 如果为true本地保存账号密码
	if(formData.value.remember === true){
		uni.setStorageSync('username', formData.value.username)
		uni.setStorageSync('password', formData.value.password)
		uni.setStorageSync('remember', true)
	} else{
		uni.removeStorageSync('username')
		uni.removeStorageSync('password')
		uni.removeStorageSync('remember')
	}
}

const changePassword = ()=>{
	showPassword.value = ! showPassword.value
}
onMounted(() => {
	const username = uni.getStorageSync('username')
	const password = uni.getStorageSync('password')
	const remember = uni.getStorageSync('remember')
	// console.log('name password remember', name,password,remember)
	if (typeof(username)===typeof(password)==='string' && remember) {
		formData.value.username = username
		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: 614px;
			border-radius: 40px;
			background-color: #fff;
			margin-top: 43.75rpx;
			:deep(.uni-forms){
				margin-top: 50rpx;
				// width: 614px;
			};
			.radio{
				font-size: 14px;
				:deep(.uni-switch-input.uni-switch-input-checked){
					border-color: #18C7B0;
					background-color: #18C7B0;
				}
			}
			.logo{
				display: flex;
				.faceu{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 487.5rpx;
					height: 340rpx;
				}
			}
			.title {
				font-size: 30rpx;
				font-weight: bolder;
				margin-top: 46.25rpx;
				width: 750rpx;
				display: flex;
				justify-content: flex-start;
				.text{
					margin-left: 34rpx;
				}
			}
			:deep(.uni-forms-item__content) {
				display: flex;
				flex-direction:row;
				border-bottom: 1px solid #bcbcbc;
				.input{
					margin-left: 20rpx;
					width: 500rpx;
					height: 30rpx;
					color:#bcbcbc;
					display: flex;
					align-items: center;
					justify-content: space-between;
					:deep(.uni-input-wrapper){
						font-size: 15rpx;
						width: 600rpx;
					}
				}
				.item{
					font-size: 15rpx;
					color: #999999;
				}
			}
			:deep(.uni-label-pointer) {
				// margin-left: 10rpx;
			}
			.button {
				background-color: #F2F2F2;
				margin-top: 50rpx;
				color: #999999;
				height: 50rpx;
				width: 500rpx;
				font-size: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.active{
				background-color:#18C7B0;
				color: #fff;
			}
		}
	}
</style>