3.6 第一次个人作业(一)

所花时间：半小时

代码量：117行

博客量：1篇

了解到的知识：

一直用框架，css不熟练了，所以这次作业不用框架
<script setup>
    import { onMounted, ref } from 'vue'
    
    const isRegist = ref(false)
    const isLogin = ref(false)
    const page = ref(false)
    const user = ref()
    
       const userInfo = ref({
          userId: '',
          password:'',
          phoneNumber: '',
          userUnit: '',
          userClass: ''
        });
        
        const registerUser=()=>{
            uni.setStorageSync('user',userInfo)
            isRegist.value = true
            isLogin.value = true
            
        }
        const login=()=>{
            uni.setStorageSync('user',userInfo)
            isRegist.value = true
            isLogin.value = false
            page.value=true
            
        }
    onMounted(()=>{
         user.value = uni.getStorageSync('user')
        if(!user){
            isRegist = false
        }
    })
</script>

<template>
    <view class="login" v-if="!isRegist">
      <view class="title">
        <text class="centered-title">注册</text>
      </view>
      <view class="container">
        <form @submit="registerUser">
          <input type="text" v-model="userInfo.userId" placeholder="用户Id（学号）" style="border: 1px solid black;margin-bottom: 20rpx;" />
           <input type="password" v-model="userInfo.password" placeholder="密码" style="border: 1px solid black;margin-bottom: 20rpx;" />
          <input type="text" v-model="userInfo.phoneNumber" placeholder="手机号码" style="border: 1px solid black;margin-bottom: 20rpx" />
          <input type="text" v-model="userInfo.userUnit" placeholder="用户单位（学校）" style="border: 1px solid black;margin-bottom: 20rpx" />
          <input type="text" v-model="userInfo.userClass" placeholder="用户班级" style="border: 1px solid black;margin-bottom: 20rpx" />
          <button form-type="submit" style="font-weight: bold; margin-left: auto; margin-right: auto; display: flex; justify-content: center;">注册</button>
        </form>
      </view>
    </view>
    
    <view class="dl" v-if="isLogin">
        <view class="title">
          <text class="centered-title">登录</text>
        </view>
        <view class="container">
          <form @submit="login">
            <input type="text" v-model="userInfo.userId" placeholder="用户Id（学号）" style="border: 1px solid black;margin-bottom: 20rpx;" />
            <input type="password" v-model="userInfo.password" placeholder="密码" style="border: 1px solid black;margin-bottom: 20rpx;" />
            <button form-type="submit" style="font-weight: bold; margin-left: auto; margin-right: auto; display: flex; justify-content: center;">登录</button>
          </form>
        </view>
    </view>
    
    <view class="page" v-if="page">
        {{ user._value }}
    </view>
</template>

<style lang="scss" scoped>
    .login{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20;
        .title{
            font-size: 60rpx;
            width: 600;
            margin-bottom: 20rpx;
        }
        .container{
            display: flex;
            width: 75%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    
    .dl{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20;
        .title{
            font-size: 60rpx;
            width: 600;
            margin-bottom: 20rpx;
        }
        .container{
            display: flex;
            width: 75%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>