xxxxx

src/packages/pc/components/layouts/header/components/avater/index.vue

@@ -0,0 +1,72 @@
+<!-- 系统公告 -->
+<template>
+    <app-drawer title="头像" :width="600" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :model="formData" :rules="formRules">
+            <el-form-item prop="cardbackphotourl" label="用户头像">
+                <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="f_afterRead"
+                    :rules="formRules.cardbackphotourl" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="danger" @click="onSubmit">修改</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { updateUserHeadUrl } from '@/services/api/user'
+import { useLoginStore, useUserStore } from '@/stores'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+import AppUpload from '@pc/components/base/upload/index.vue'
+
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+const loginStore = useLoginStore()
+const userStore = useUserStore()
+
+const formData = reactive<Model.UserHeadUrlReq>({
+    userid: loginStore.userId, // 用户ID
+    headurl: '', // 头像地址
+})
+
+const formRules: FormRules = {
+    headurl: [{
+        message: '请上传头像',
+        validator: () => {
+            return !!formData.headurl
+        }
+    }],
+}
+
+const f_afterRead = ({ filePath }: { filePath: string }) => {
+    formData.headurl = filePath
+    formRef.value?.validateField('headurl')
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            updateUserHeadUrl({
+                data: formData
+            }).then(() => {
+                userStore.getUserData()
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+
+</script>

src/packages/pc/components/layouts/header/index.vue

@@ -21,6 +21,8 @@
                 </span>
                 <template #dropdown>
                     <el-dropdown-menu>
+                        <el-dropdown-item :icon="Avatar"
+                            @click="openComponent('avater')">修改头像</el-dropdown-item>
                         <el-dropdown-item :icon="Unlock"
                             @click="openComponent('modify')">修改密码</el-dropdown-item>
                         <el-dropdown-item :icon="Delete"
@@ -37,7 +39,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
-import { SwitchButton, Unlock, Delete } from '@element-plus/icons-vue'
+import { SwitchButton, Unlock, Delete, Avatar } from '@element-plus/icons-vue'
 import { getFileUrl } from '@/filters'
 import { useComponent } from '@/hooks/component'
 import { useUserStore, useGlobalStore, useNoticeStore } from '@/stores'
@@ -48,6 +50,7 @@ const componentMap = new Map<string, unknown>([
     ['notice', defineAsyncComponent(() => import('./components/notice/index.vue'))],
     ['modify', defineAsyncComponent(() => import('./components/modify/index.vue'))],
     ['cancel', defineAsyncComponent(() => import('./components/cancel/index.vue'))],
+    ['avater', defineAsyncComponent(() => import('./components/avater/index.vue'))],
 ])
 
 const { componentId, openComponent, closeComponent } = useComponent()