|
|
@@ -1,17 +1,235 @@
|
|
|
<template>
|
|
|
- <HcCard>
|
|
|
- 1111
|
|
|
+ <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">
|
