cocorobo/pages/signup.vue

<script setup>
import { ref } from 'vue'
import serverConfig from "../serverConfig"
const router = useRouter()
const username = ref('')
const password = ref('')
const schoolName = ref('')
const isShowPassword = ref(true)

const signup = async () => {
    let LoginState = await useFetch(serverConfig.host+'/api/user', {
        method: 'POST',
        credentials: 'include',
        mode: 'cors',
        body: {
            username: username.value.trim(),
            password: password.value.trim(),
            college: schoolName.value.trim(),
            geetest_challenge: "",
            geetest_validate: "",
            geetest_seccode: "",
            googleId: "",
            identity: 1,
        }
    }).then(r => {
        return r
    })
    console.log(LoginState.data.value)
    if (LoginState.data.value == "OK") {
        alert("注册成功")
        await useFetch(serverConfig.host+'/api/profile', {
            method: 'GET',
            credentials: 'include',
            mode: 'cors'
        }).then(r => {
            console.log(r)
            if (r.data.value) {
                router.push('/persion')
                let data = r.data.value
                let obj = {
                    username: data.username,
                    alias: data.alias,
                    userid: data.userid,
                    isLoading: true,
                    googleId: data.gender,
                    login: true,
                    gender: data.gender,
                    defaultSchool: data.defaultSchool,
                    defaultAddress: data.defaultAddress,
                    apiKey: data.apiKey
                }
                userInfo.value = obj
                try {
                    window.parent.postMessage({ id: 'loginVerify', status: 'logged', data }, "*");
                } catch (error) {
                    console.log(error);
                }
            }
        })
    }else if(LoginState.data.value.code === 11000){
        alert("用户名已注册")
    }else{
        alert("注册失败")
    }
}
</script>
<template>
    <div class="signup">
        <div class="signup-box">
            <div class="box-item" style="min-height: 100px;">
                <p>电子邮箱</p>
                <input type="text" v-model="username">
            </div>
            <div class="box-item">
                <p>密码</p>
                <input :type="isShowPassword ? 'password' : 'text'" v-model="password" placeholder="至少6位数">
                <img :src="!isShowPassword ? './image/password.png' : './image/showPassword.png'" alt=""
                    @click="isShowPassword = !isShowPassword">
            </div>
            <div class="box-item" style="min-height: 100px;">
                <p>学校名称</p>
                <input type="text" v-model="schoolName">
            </div>
            <div class="box-item flex-right" style="text-align: right;">
                <button @click="signup()">注册</button>
            </div>
            <div class="box-item flex-right">
                <nuxt-link to="/login" style="margin: 0 auto;">
                    <button>返回</button>
                </nuxt-link>

            </div>
        </div>
    </div>
</template>
<style scoped>
.signup {

    width: 100%;
    height: calc(100vh - 80px);
    position: relative;

    .signup-box {
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
        padding: 30px;
        border-radius: 10px;

        .box-item {
            width: 80%;
            margin: 10px auto;
            position: relative;

            img {
                position: absolute;
                bottom: 5px;
                right: 3px;
                width: 22px;
                cursor: pointer;
            }

            .error {
                color: red;
                animation-name: errorSide;
                animation: 1s;
            }

            p {
                color: #666;
            }

            input {
                width: 100%;
                padding: 10px 10px 10px 5px;
                font-size: 16px;
                outline: none;
                border: none;
                border-bottom: 2px solid #000;
            }

            button {
                width: 200px;
                font-size: 16px;
                padding: 10px 30px;
                margin: 10px auto;
            }
        }

        .flex-right {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>