rax-medical/src/components/user-info.vue

<template>
    <div class="user-info-part">
        <div class="header-box">
            <h3>个人信息</h3>
            <el-icon @click="close">
                <Close />
            </el-icon>
        </div>
        <div class="custom-tabs">
            <div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
                :class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}</div>
        </div>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
            <template v-if="tabActive === 0">
                <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
                    <img v-else src="@/assets/imgs/home/avatar.png" class="avatar" />
                </el-upload>
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="formData.account" disabled></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="mailbox">
                    <el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="密码" prop="password" label-width="100">
                    <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword" label-width="100">
                    <el-input v-model="formData.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword" label-width="100">
                    <el-input v-model="formData.confirmPassword" type="password" show-password placeholder="请输入新密码"></el-input>
                </el-form-item>
            </template>
        </el-form>
        <div class="submit-box">
            <el-button type="primary" @click="submitForm">{{ tabActive === 0 ? '更新个人信息' : '修改密码' }}</el-button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { useLoginStore } from '@/stores/user-info-store'

const emit = defineEmits(['close'])

const userInfo = useLoginStore().getlogin()

const formRef = ref()

const validatePassword = (rule: any, value: any, callback: any) => {
    if (formData.value.newPassword !== formData.value.confirmPassword) {
        callback(new Error('两次密码不一致'))
    } else {
        callback()
    }
}

//自定义校验规则函数
const validatorPassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error('密码长度至少6位'));
  }
}

const validatorPhone = (rule: any, value: any, callback: any) => {
  if (value.length == 11) {
    callback();
  } else {
    callback(new Error('手机号码长度为11位'));
  }
}

const rules = reactive({
    phone: [
        { required: true, validator:validatorPhone, trigger: 'change' },
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    mailbox: [
        { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
    ],
    password: [
        { required: true, validator: validatorPassword, trigger: 'change' },
    ],
    newPassword: [
        { required: true, validator: validatorPassword, trigger: 'change' },
        //{ validator: validatePassword, trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请输入密码', trigger: 'change' },
        { validator: validatePassword, trigger: 'blur' }
    ]
})
const tabActive = ref(0)
const formData = ref({
    avatar: '',
    account: userInfo.account,
    phone: '',
    name: userInfo.name,
    mailbox: '',
    password: '',
    newPassword: '',
    confirmPassword: ''
})

const close = () => {
    emit('close')
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    uploadFile
) => {
    formData.value.avatar = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片必须为jpg格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不得超过2MB!')
        return false
    }
    return true
}
const submitForm = async () => {
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            // console.log('submit!')
            // 更改用户名
            useLoginStore().setlogin('name', formData.value.name)
            ElMessage.success('更新成功')
            close()
        } else {
            // console.log('error submit!', fields)
        }
    })
}
</script>

<style lang='scss' scoped>
.user-info-part {
    width: 100%;
    height: 100%;
    padding: 30px;

    .header-box {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
            color: $main-color;
            font-size: 20px;
        }

        .el-icon {
            cursor: pointer;
            color: #606266;
        }
    }
    img.avatar {
        width: 128px;
        height: 148px;
        object-fit: contain;
        margin: 0 0 20px 60px;
    }
    .submit-box {
        padding-left: 60px;
    }
}
</style>