hac/src/views/user/index.vue

<template>
    <HcCard  style="height:20%">
        <div class="top-box">
            <div class="user-avatar-box">
                <div class="user-avatar" v-loading="avatarLoading">
                    <img :src="userInfo['avatar'] || avatarPng" alt="" crossOrigin="anonymous"/>
                    <div class="user-avatar-upload">
                        <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()" :data="upData" :show-file-list="false" :on-success="uploadFinish" :on-error="uploadError" :before-upload="beforeUpload">
                            
                            <HcIcon name="camera" fill/>
                               
                        </el-upload>
                       
                    </div>
                    
                </div>
                <div class="user-name truncate">{{ userInfo['real_name'] || '游客' }}
                    <div class="el-upload__tip" style="margin-top: 27px;">支持.jpg 、png格式</div>
                </div>
            </div>
            <div class="btn_box">
                <el-button type="primary"  size="large"  @click="updatePassword" v-if="!updatePasswordshow">
                            <span>修改密码</span>
                 </el-button>
                 <el-button type="primary"  size="large"   @click="submit">
                            <span>提交</span>
                 </el-button>
            </div>
           
        </div>
    </HcCard>
    <HcCard  style="height:77%;margin-top:1%">
    <div>
        <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-position="left" v-if="!updatePasswordshow">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="用户姓名">
                                    <el-input v-model="formUserModel.real_name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="身份证号">
                                    <el-input v-model="formUserModel.idNumber" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="手机号码" :prop="basicFormEdit?'phone':''">
                                    <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属岗位">
                                    <el-select v-model="formUserModel.phone" class="m-2" placeholder="Select" size="large">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="登录账号">
                                    <el-input v-model="formUserModel.account" placeholder="" />
                                </el-form-item>
                            </el-col>
                        
                           
                            <el-col :span="12">
                                <el-form-item label="密码">
                                    <el-input v-model="formUserModel.password" placeholder="" />
                                </el-form-item>
                            </el-col>
                          
                           
                        </el-row>
            </el-form>
            <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" v-else
                             size="large" >
                        <el-form-item label="原密码" prop="oldPassword"  >
                            <el-input v-model="formUserModel.newPassword" placeholder="请输入原密码"  autocomplete="new-password"
                                      show-password type="password"/>
                        </el-form-item>
                 
                        <el-form-item label="新的密码" prop="newPassword"  >
                            <el-input v-model="formUserModel.newPassword" placeholder="请输入新的密码"  autocomplete="new-password"
                                      show-password type="password"/>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="newPassword1"   >
                            <el-input v-model="formUserModel.newPassword1" placeholder="请输入确认新密码" autocomplete="new-password"
                                      show-password type="password"/>
                        </el-form-item>
                    </el-form>
    </div>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";
import avatarPng from '~src/assets/images/avatar.png';
import {getTokenHeader} from '~src/api/request/header';
const useAppState = useAppStore()

//全局变量信息
const userInfo = ref(useAppState.getUserInfo);


//上传组件参数
const action = '/api/blade-resource/oss/endpoint/put-file';
const accept = 'image/png,image/jpg,image/jpeg';
const upData = ref({})

//上传前
const avatarLoading = ref(false)
const beforeUpload = () => {
    avatarLoading.value = true
    return true
}

//上传完成
const uploadFinish = async (res) => {
    const link = res?.data?.link ?? '';
    const user_id = userInfo.value?.user_id ?? '';
    if (link) {
        const { error, code } = await userApi.updateUserInfo({avatar: link, id: user_id})
        if (!error && code === 200) {
            avatarLoading.value = false
            userInfo.value.avatar = link
            window?.$message?.success('更换头像成功')
            useAppState.setUserInfo(userInfo.value)
        } else {
            avatarLoading.value = false
        }
    } else {
        window?.$message?.warning('上传头像异常，请稍后再试')
        avatarLoading.value = false
    }
}
//上传失败
const uploadError = () => {
    avatarLoading.value = false
    window?.$message?.warning('上传头像失败')
}
//基础信息表单
const formUserRef = ref(null)
const formUserModel = ref(userInfo.value)
const formUserRules = {
    phone: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!isPhone(value)) {
                callback(new Error('手机号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
}
const updatePasswordshow=ref(false)
const updatePassword=()=>{
    updatePasswordshow.value=true
}
const submit=()=>{
    updatePasswordshow.value=false
}
</script>

<style lang="scss" scoped>
        .user-avatar-box {
            display: flex;
            position: relative;
            text-align: left;
            padding: 24px;
            .user-avatar {
                position: relative;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                background: #d8d8d8;
                margin: 24px 0 0;
                border: 2px solid #ffffff;
                box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
                img {
                    display: block;
                    object-fit: cover;
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                }
                .user-avatar-upload {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f1f5f8;
                    border-radius: 50%;
                    color: #838791;
                    cursor: pointer;
                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15);
                    transition: color 0.2s;
                    &:hover {
                        color: var(--el-color-primary);
                    }
                }
            }
            .user-name {
                position: relative;
                margin-top: 38px;
                font-weight: bold;
                color: #1a1a1a;
                font-size: 28px;
                margin-left: 20px;
            }
        }
    .top-box{
        display: flex;
        position: relative;
        .btn_box{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
</style>

<style lang="scss">

</style>