cocorobo/pages/persion.vue

<script setup>
import { ref, onMounted } from 'vue'
import serverConfig from "../serverConfig"
const router = useRouter()
const userInfo = useUserInfoStore()
const alias = ref("")
const gender = ref("")
const defaultSchool = ref("")
const defaultSchoolAddress = ref("")
const username = ref("")
const reset = ref(true)
const newPasswordStr = ref("")

onMounted(() => {
    setTimeout(() => {
        // console.log(userInfo)
        alias.value = userInfo.value.alias
        gender.value = userInfo.value.gender
        defaultSchool.value = userInfo.value.defaultSchool
        defaultSchoolAddress.value = userInfo.value.defaultSchoolAddress
        username.value = userInfo.value.username
    }, 100);
    let url = new URL(location.href)
    if (url.searchParams.get("name") && url.searchParams.get("resetKey")) {
        reset.value = false
    }
})

const updateProfile = () => {
    let obj = {
        alias: alias.value,
        gender: gender.value,
        defaultSchool: defaultSchool.value,
        defaultSchoolAddress: defaultSchoolAddress.value
    }
    // const cache = { obj }
    const cache = JSON.parse(JSON.stringify(obj))
    // str = null;
    useFetch('https://api.cocorobo.cn/api/user', {
        method: 'PUT',
        credentials: 'include',
        mode: 'cors',
        body: JSON.stringify(cache),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => {
        // console.log(res)
        if (res.data.value == "") {
            alert('变更完成');
            userInfo.value.alias = alias.value
            userInfo.value.gender = gender.value
            userInfo.value.defaultSchool = defaultSchool.value
            userInfo.value.defaultSchoolAddress = defaultSchoolAddress.value
        }

    })
}

const newPassword = async () => {
    let url = new URL(location.href)
    let obj = {
        name: url.searchParams.get("name"),
        resetKey: url.searchParams.get("resetKey"),
        newPassword: newPasswordStr.value.trim()
    }
    obj = JSON.parse(JSON.stringify(obj))
    // serverConfig.server +
    const { data } = await useFetch(serverConfig.server + "/reset/pwd", {
        method: 'POST',
        body: JSON.stringify(obj)
    })
    if (data.value == "OK") {
        alert('密码重置成功')
        router.push("/")
    }
}
</script>

<template>
    <div class="persion">
        <div v-if="reset" class="persion-info content">
            <div class="persion-info-img">
                <img src="@/assets/img/avatar.svg" alt="">
            </div>
            <div class="persion-info-content">
                <div>
                    <span>昵称</span>
                    <input type="text" placeholder="昵称" v-model="alias">
                </div>
                <div>
                    <span>性别</span>
                    <select name="gender" id="Profile__gender" v-model="gender">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="unknown">保密</option>
                    </select>
                </div>
            </div>
            <div class="persion-info-content">
                <div>
                    <span>邮箱</span>
                    <input disabled type="text" placeholder="邮箱" v-model="username">
                </div>
                <div>
                    <span>默认学校名称</span>
                    <input type="text" placeholder="默认学校名称" v-model="defaultSchool">
                </div>
            </div>
            <div class="persion-info-content">
                <div>
                    <span>默认学校地址</span>
                    <input type="text" placeholder="默认学校地址" v-model="defaultSchoolAddress">
                </div>
            </div>
            <div style="margin-top: 80px;">
                <button @click="updateProfile()">提交修改</button>
            </div>
        </div>
        <div v-else class="persion-reset content">
            <h2>重置密码</h2>
            <div>
                <p>新密码</p>
                <input type="password" placeholder="请输入新密码" v-model="newPasswordStr">
                <button @click="newPassword()">提交</button>
            </div>
        </div>
    </div>
</template>
<style scoped>
.persion {
    padding-bottom: 80px;

    .persion-info {
        margin-top: 80px;

        .persion-info-img {
            width: 200px;
            padding: 25px;
            border-radius: 200px;
            background-color: #d6e4ea;
            overflow: hidden;
            margin: 0 auto;
            border: 10px solid #b8bfc1;
        }

        .persion-info-content {
            display: flex;
            justify-content: space-between;
            margin-top: 80px;
            text-align: left;

            div {
                width: 25%;
                min-width: 200px;

                input {
                    width: 100%;
                    outline: none;
                    padding: 10px 5px;
                    font-size: 16px;
                }

                select {
                    width: 100%;
                }
            }
        }
    }

    .persion-reset {
        padding: 50px 10px;
        text-align: left;

        h2 {
            display: inline-block;
            text-align: left;
            padding: 20px 60px;
            background-color: #1eaaff;
            color: #fff;
            font-size: 24px;
        }
        div{
            width: 350px;
            margin: 80px auto;
            text-align: center;
            p{
                text-align: left;
                font-size: 16px;
                color: #555;
            }
            input{
                margin: 30px 0;
                width: 100%;
                border: none;
                outline: none;
                border-bottom: 3px solid #000;
                padding: 5px 0;
            }
        }
    }

}
</style>