添加avatar修改、聊天显示头像，聊天有消息提前
This commit is contained in:
junleea
parent
3f16b7a0b8
commit
e41b5ef5ff
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="图片发送"
|
||||
v-model="sendImgDialogVisible"
|
||||
width="60%"
|
||||
height="60%"
|
||||
center
|
||||
>
|
||||
<!-- 图片输入 -->
|
||||
<input type="file" @change="handleFileUpload" />
|
||||
<el-button type="primary" size="default" @click="sendImageOrVideo" >发送</el-button>
|
||||
title="图片发送"
|
||||
v-model="sendImgDialogVisible"
|
||||
width="60%"
|
||||
height="60%"
|
||||
center
|
||||
>
|
||||
<!-- 图片输入 -->
|
||||
<input type="file" @change="handleFileUpload" />
|
||||
<el-button type="primary" size="default" @click="sendImageOrVideo"
|
||||
>发送</el-button
|
||||
>
|
||||
</el-dialog>
|
||||
|
||||
<el-container
|
||||
|
|
@ -25,9 +27,7 @@
|
|||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<message /> </el-icon
|
||||
>联系人
|
||||
<el-icon> <message /> </el-icon>联系人
|
||||
</template>
|
||||
<el-scrollbar height="300px">
|
||||
<el-menu-item-group v-for="user in filteredUsers" :key="user.id">
|
||||
|
|
@ -36,7 +36,9 @@
|
|||
@click="handleGetMessage(user.id)"
|
||||
style="height: 40px"
|
||||
>
|
||||
<el-avatar style="float: left" :src="user.avatar"></el-avatar>
|
||||
{{ user.name }}
|
||||
|
||||
<span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
|
@ -47,7 +49,7 @@
|
|||
<el-icon><icon-menu /></el-icon>
|
||||
群组
|
||||
</template>
|
||||
<el-scrollbar height="200px">
|
||||
<el-scrollbar height="250px">
|
||||
<el-menu-item-group v-for="item in groupList" :key="item.ID">
|
||||
<!-- <template #title>Group 1</template> -->
|
||||
<el-menu-item
|
||||
|
|
@ -116,9 +118,10 @@
|
|||
style="margin-left: 10px; margin-bottom: 8px"
|
||||
>
|
||||
<el-row class="row-bg" type="flex" align="middle">
|
||||
<el-avatar size="default" fit="fit">{{
|
||||
<!-- <el-avatar size="default" fit="fit">{{
|
||||
cur_user_name
|
||||
}}</el-avatar>
|
||||
}}</el-avatar> -->
|
||||
<el-avatar size="default" :src="cur_user_avatar"></el-avatar>
|
||||
<span style="margin-left: 10px"
|
||||
>{{ cur_user_name }} : {{ formatTime(item.CreatedAt) }}</span
|
||||
>
|
||||
|
|
@ -143,9 +146,17 @@
|
|||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="1000" :offset="1" class="msg" style="max-width: 50%;">
|
||||
<el-col
|
||||
:span="1000"
|
||||
:offset="1"
|
||||
class="msg"
|
||||
style="max-width: 50%"
|
||||
>
|
||||
<!-- {{ item.Msg }} -->
|
||||
<div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
|
||||
<div
|
||||
v-html="renderMarkdown(item.Msg)"
|
||||
style="max-width: 50%"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -159,56 +170,64 @@
|
|||
{{ tokenData.username }} :
|
||||
{{ formatTime(item.CreatedAt) }}</span
|
||||
>
|
||||
<el-avatar size="default" fit="fit">
|
||||
{{ tokenData.username }}
|
||||
</el-avatar>
|
||||
<el-avatar size="default" :src="tokenData.avatar"></el-avatar>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="end">
|
||||
<el-col :span="1000" class="msg2" style="margin-right: 20px; max-width: 50%;">
|
||||
<el-col
|
||||
:span="1000"
|
||||
class="msg2"
|
||||
style="margin-right: 20px; max-width: 50%"
|
||||
>
|
||||
<!-- {{ item.Msg }} -->
|
||||
<div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
|
||||
<div
|
||||
v-html="renderMarkdown(item.Msg)"
|
||||
style="max-width: 50%"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
<div></div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<el-row class="row-bg" type="flex" justify="space-around" align="middle">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="default"
|
||||
@click="SendImage"
|
||||
class="send-image-button-bg"
|
||||
>
|
||||
文件发送
|
||||
</el-button>
|
||||
<el-col :span="20">
|
||||
<el-input
|
||||
type="textarea"
|
||||
style="width: 100%"
|
||||
rows="1"
|
||||
autofocus
|
||||
@keyup.enter="handleSendBtnClick"
|
||||
placeholder="请输入消息按Enter发送"
|
||||
v-model="currentMsg"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-row
|
||||
class="row-bg"
|
||||
type="flex"
|
||||
justify="space-around"
|
||||
align="middle"
|
||||
>
|
||||
<el-button
|
||||
class="sendBtn"
|
||||
@click="handleSendBtnClick"
|
||||
type="primary"
|
||||
size="default"
|
||||
@click="SendImage"
|
||||
class="send-image-button-bg"
|
||||
>
|
||||
发送
|
||||
文件发送
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="20">
|
||||
<el-input
|
||||
type="textarea"
|
||||
style="width: 100%"
|
||||
rows="1"
|
||||
autofocus
|
||||
@keyup.enter="handleSendBtnClick"
|
||||
placeholder="请输入消息按Enter发送"
|
||||
v-model="currentMsg"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button
|
||||
class="sendBtn"
|
||||
@click="handleSendBtnClick"
|
||||
type="primary"
|
||||
size="default"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
|
@ -217,12 +236,12 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import { inject } from "vue";
|
||||
import { ref } from 'vue';
|
||||
import { ref } from "vue";
|
||||
import { getFriendListService } from "@/api/chat.js";
|
||||
import { getMessageService } from "@/api/chat.js";
|
||||
import { sendMessageService } from "@/api/chat.js";
|
||||
import { UploadFileService } from "@/api/tool.js";
|
||||
import {GetFileInfoByMd5Service } from "@/api/tool.js";
|
||||
import { GetFileInfoByMd5Service } from "@/api/tool.js";
|
||||
|
||||
import {
|
||||
ElAvatar,
|
||||
|
|
@ -241,8 +260,8 @@ import {
|
|||
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
|
||||
import router from "@/router/index.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import CryptoJS from 'crypto-js';
|
||||
import MarkdownIt from "markdown-it";
|
||||
import CryptoJS from "crypto-js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -250,13 +269,17 @@ export default {
|
|||
ip: "",
|
||||
tableData: [],
|
||||
sendImgDialogVisible: false,
|
||||
file : null,
|
||||
file: null,
|
||||
file_md5: "",
|
||||
tokenData: {
|
||||
token: localStorage.getItem("token"),
|
||||
ip: localStorage.getItem("ip"),
|
||||
userId: localStorage.getItem("userId"),
|
||||
username: localStorage.getItem("username"),
|
||||
avatar:
|
||||
localStorage.getItem("avatar") === ""
|
||||
? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
|
||||
: localStorage.getItem("avatar"),
|
||||
},
|
||||
username: localStorage.getItem("username"),
|
||||
userList: [],
|
||||
|
|
@ -270,6 +293,7 @@ export default {
|
|||
md: new MarkdownIt(), //md解析器
|
||||
|
||||
cur_user_name: "",
|
||||
cur_user_avatar: "",
|
||||
eventSource: null, // 事件源
|
||||
uid: localStorage.getItem("userId"),
|
||||
currentMsg: "",
|
||||
|
|
@ -292,8 +316,13 @@ export default {
|
|||
let data = result.data;
|
||||
this.userList = data.friends;
|
||||
for (let i = 0; i < data.friends.length; i++) {
|
||||
this.userList[i].avatar = data.friends[i].avatar ===""?"https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg" : data.friends[i].avatar;
|
||||
this.hasUnreadMsg[data.friends[i].id] = false;
|
||||
}
|
||||
console.log("avatar: " + this.userList[0].avatar);
|
||||
for (let i = 0; i < data.groups.length; i++) {
|
||||
this.hasUnreadMsg["g_" + data.groups[i].ID] = false;
|
||||
}
|
||||
this.groupList = data.groups;
|
||||
},
|
||||
filterUsers() {
|
||||
|
|
@ -360,6 +389,10 @@ export default {
|
|||
for (let i = 0; i < this.userList.length; i++) {
|
||||
if (this.userList[i].id === id) {
|
||||
this.cur_user_name = this.userList[i].name;
|
||||
this.cur_user_avatar =
|
||||
this.userList[i].avatar === ""
|
||||
? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
|
||||
: this.userList[i].avatar;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -422,8 +455,8 @@ export default {
|
|||
// 重新组合并返回格式化的日期时间字符串
|
||||
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
||||
},
|
||||
renderMarkdown(markdown) {
|
||||
// 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML
|
||||
renderMarkdown(markdown) {
|
||||
// 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML
|
||||
return this.md.render(markdown);
|
||||
},
|
||||
SendImage() {
|
||||
|
|
@ -481,21 +514,40 @@ export default {
|
|||
// 如果是消息类型，解密消息内容
|
||||
// console.log("收到数据====" + JSON.stringify(msg.data));
|
||||
console.log("msg_:", data.data);
|
||||
console.log("hasUnreadMsg:", _this.hasUnreadMsg);
|
||||
let msg_data = JSON.parse(data.data);
|
||||
_this.MsgList.push(msg_data);
|
||||
if (
|
||||
_this.cur_user_id != msg_data.FromUserID &&
|
||||
_this.cur_group_id != msg_data.GroupID
|
||||
) {
|
||||
if (msg_data.GroupID === 0) {
|
||||
if (msg_data.GroupID === 0) {
|
||||
//如果msg_data.GroupID === 0,则为用户消息
|
||||
if (msg_data.FromUserID !== _this.cur_user_id) {
|
||||
//如果不是是当前用户发送的消息，则设置为未读
|
||||
_this.hasUnreadMsg[msg_data.FromUserID] = true;
|
||||
} else {
|
||||
_this.hasUnreadMsg["g_" + msg_data.GroupID] = true;
|
||||
//将当前用户移动到第一位
|
||||
for (let i = 0; i < _this.userList.length; i++) {
|
||||
if (_this.userList[i].id === msg_data.FromUserID) {
|
||||
let temp = _this.userList[i];
|
||||
_this.userList.splice(i, 1); //删除当前用户
|
||||
_this.userList.unshift(temp); //将当前用户移动到第一位
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_this.scrollToBottom();
|
||||
if (msg_data.GroupID !== _this.cur_group_id) {
|
||||
//如果不是是当前用户发送的消息，则设置为未读
|
||||
_this.hasUnreadMsg["g_" + msg_data.GroupID] = true;
|
||||
//将当前用户移动到第一位
|
||||
for (let i = 0; i < _this.groupList.length; i++) {
|
||||
if (_this.groupList[i].ID === msg_data.GroupID) {
|
||||
let temp = _this.groupList[i];
|
||||
_this.groupList.splice(i, 1); //删除当前用户
|
||||
_this.groupList.unshift(temp); //将当前用户移动到第一位
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_this.scrollToBottom();
|
||||
//console.log("msglist:", _this.MsgList);
|
||||
// 构建消息内容
|
||||
} else if (data.type == "check") {
|
||||
|
|
@ -624,15 +676,15 @@ export default {
|
|||
};
|
||||
reader.readAsArrayBuffer(this.file);
|
||||
} catch (error) {
|
||||
console.error('计算MD5值出错:', error);
|
||||
console.error("计算MD5值出错:", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
handleMenuSelect(val) {
|
||||
router.push(val);
|
||||
//关闭websocket
|
||||
if (this.socket!= null) {
|
||||
if (this.socket != null) {
|
||||
this.socket.close();
|
||||
}
|
||||
},
|
||||
|
|
@ -641,68 +693,69 @@ export default {
|
|||
console.log("file has been selected:", this.file);
|
||||
},
|
||||
readFileAndCalculateMD5() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
|
||||
const md5Hash = CryptoJS.MD5(wordArray);
|
||||
const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
|
||||
//console.log("onload: " + md5Str);
|
||||
this.file_md5 = md5Str;
|
||||
resolve(md5Str);
|
||||
};
|
||||
reader.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
reader.readAsArrayBuffer(this.file);
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
|
||||
const md5Hash = CryptoJS.MD5(wordArray);
|
||||
const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
|
||||
//console.log("onload: " + md5Str);
|
||||
this.file_md5 = md5Str;
|
||||
resolve(md5Str);
|
||||
};
|
||||
reader.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
reader.readAsArrayBuffer(this.file);
|
||||
});
|
||||
},
|
||||
async sendImageOrVideo(){
|
||||
async sendImageOrVideo() {
|
||||
if (this.file == null) {
|
||||
alert('请先选择要上传的文件');
|
||||
alert("请先选择要上传的文件");
|
||||
return;
|
||||
}
|
||||
//查看文件是否是图片或视频
|
||||
|
||||
|
||||
try {
|
||||
let result={};
|
||||
let result = {};
|
||||
this.file_md5 = await this.readFileAndCalculateMD5(this.file);
|
||||
//console.log("md5:",this.file_md5);
|
||||
let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
|
||||
if(md5_result.code === 0){
|
||||
let md5_result = await GetFileInfoByMd5Service({
|
||||
md5: this.file_md5,
|
||||
token: this.tokenData.token,
|
||||
type: 1,
|
||||
});
|
||||
if (md5_result.code === 0) {
|
||||
result = md5_result;
|
||||
}else{
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.file);
|
||||
//console.log("add file: " + this.file);
|
||||
formData.append('upload_type', "1");
|
||||
formData.append('md5', this.file_md5);
|
||||
formData.append('auth_type', "public");
|
||||
//console.log("formData:",formData);
|
||||
} else {
|
||||
let formData = new FormData();
|
||||
formData.append("file", this.file);
|
||||
//console.log("add file: " + this.file);
|
||||
formData.append("upload_type", "1");
|
||||
formData.append("md5", this.file_md5);
|
||||
formData.append("auth_type", "public");
|
||||
//console.log("formData:",formData);
|
||||
|
||||
|
||||
result = await UploadFileService(formData,this.tokenData.token);
|
||||
if (result.code!== 0) {
|
||||
ElMessage.error('上传文件失败，请稍后再试');
|
||||
return;
|
||||
}
|
||||
result = await UploadFileService(formData, this.tokenData.token);
|
||||
if (result.code !== 0) {
|
||||
ElMessage.error("上传文件失败，请稍后再试");
|
||||
return;
|
||||
}
|
||||
}
|
||||
let resp_data = result.data;
|
||||
|
||||
//console.log("resp:",resp_data);
|
||||
let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
|
||||
let msg_ ="";
|
||||
let url = "https://gep.ljsea.top/tool/file/" + resp_data.FileStoreName;
|
||||
let msg_ = "";
|
||||
//markdown 图片格式
|
||||
let fileType = this.file.name.split('.')[1];
|
||||
if (!['jpg', 'jpeg', 'png', 'gif', 'mp4'].includes(fileType)) {
|
||||
//alert('请选择正确的图片或视频格式');
|
||||
msg_ = `文件：[${resp_data.FileName}](${url})`;
|
||||
}else{
|
||||
msg_ = ``;
|
||||
|
||||
}
|
||||
|
||||
|
||||
let fileType = this.file.name.split(".")[1];
|
||||
if (!["jpg", "jpeg", "png", "gif", "mp4"].includes(fileType)) {
|
||||
//alert('请选择正确的图片或视频格式');
|
||||
msg_ = `文件：[${resp_data.FileName}](${url})`;
|
||||
} else {
|
||||
msg_ = ``;
|
||||
}
|
||||
|
||||
let req = {
|
||||
token: localStorage.getItem("token"),
|
||||
ip: localStorage.getItem("ip"),
|
||||
|
|
@ -729,12 +782,12 @@ export default {
|
|||
Msg: msg_,
|
||||
CreatedAt: new Date(),
|
||||
};
|
||||
console.log("msg:",msg);
|
||||
console.log("msg:", msg);
|
||||
this.MsgList.push(msg);
|
||||
this.scrollToBottom();
|
||||
this.sendImgDialogVisible = false;
|
||||
} catch (error) {
|
||||
ElMessage.error('上传文件时出现网络错误，请稍后再试');
|
||||
ElMessage.error("上传文件时出现网络错误，请稍后再试");
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
|
@ -842,8 +895,8 @@ export default {
|
|||
}
|
||||
|
||||
.send-image-button-bg {
|
||||
background-image: url(../assets/img.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../assets/img.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,13 @@ import {GetUserInfoService} from "@/api/user.js";
|
|||
import { GetRedisInfoService } from "@/api/tool.js";
|
||||
import {DelFGService} from "@/api/user.js";
|
||||
import router from "@/router/index.js";
|
||||
import { UploadFileService } from "@/api/tool.js";
|
||||
import {GetFileInfoByMd5Service } from "@/api/tool.js";
|
||||
import Cookies from "js-cookie";
|
||||
import { getFriendListService } from "@/api/chat.js";
|
||||
import {sendMessageService} from "@/api/chat.js";
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import CryptoJS from 'crypto-js';
|
||||
import Menu from "@/views/Menu.vue";
|
||||
|
||||
export default {
|
||||
|
|
@ -30,6 +32,8 @@ export default {
|
|||
FriendsGRequestList:[],
|
||||
FriendsTableIsDisplay:false,
|
||||
RedisIsDisplay:false,
|
||||
avatar_file: null,
|
||||
file_md5: "",
|
||||
RedisList:[],
|
||||
FriendsGList:[],
|
||||
GroupList:[],
|
||||
|
|
@ -201,6 +205,76 @@ export default {
|
|||
console.log(e);
|
||||
}
|
||||
},
|
||||
handleAvatarFileUpload(e) {
|
||||
this.avatar_file = e.target.files[0];
|
||||
//判断文件类型是否为图片
|
||||
if (!this.avatar_file.type.startsWith("image/")) {
|
||||
ElMessage.error("请选择图片文件");
|
||||
this.avatar_file = null;
|
||||
return;
|
||||
}
|
||||
//this.UserUpdateForm.avatar = URL.createObjectURL(this.avatar_file);
|
||||
this.uploadAvatarFile();
|
||||
},
|
||||
readFileAndCalculateMD5() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
|
||||
const md5Hash = CryptoJS.MD5(wordArray);
|
||||
const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
|
||||
//console.log("onload: " + md5Str);
|
||||
this.file_md5 = md5Str;
|
||||
resolve(md5Str);
|
||||
};
|
||||
reader.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
reader.readAsArrayBuffer(this.avatar_file);
|
||||
});
|
||||
},
|
||||
async uploadAvatarFile(){
|
||||
if (this.avatar_file == null) {
|
||||
alert('请先选择要上传的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let result={};
|
||||
this.file_md5 = await this.readFileAndCalculateMD5(this.avatar_file);
|
||||
//console.log("md5:",this.file_md5);
|
||||
let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
|
||||
if(md5_result.code === 0){
|
||||
result = md5_result;
|
||||
}else{
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.avatar_file);
|
||||
//console.log("add file: " + this.file);
|
||||
formData.append('upload_type', "1");
|
||||
formData.append('md5', this.file_md5);
|
||||
formData.append('auth_type', "public");
|
||||
//console.log("formData:",formData);
|
||||
|
||||
|
||||
result = await UploadFileService(formData,this.tokenData.token);
|
||||
if (result.code!== 0) {
|
||||
ElMessage.error('上传文件失败，请稍后再试');
|
||||
return;
|
||||
}
|
||||
}
|
||||
let resp_data = result.data;
|
||||
|
||||
//console.log("resp:",resp_data);
|
||||
let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
|
||||
|
||||
this.UserUpdateForm.avatar = url;
|
||||
//更新用户信息
|
||||
await this.updateUserInfo();
|
||||
} catch (error) {
|
||||
ElMessage.error('上传文件时出现网络错误，请稍后再试');
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
async updateUserInfo(){
|
||||
let result ={}
|
||||
try{
|
||||
|
|
@ -296,6 +370,7 @@ export default {
|
|||
this.UserUpdateForm.run = result.data.Run;
|
||||
this.UserUpdateForm.upload = result.data.Upload;
|
||||
this.UserUpdateForm.age = result.data.Age;
|
||||
this.UserUpdateForm.avatar = result.data.Avatar === "" ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg":result.data.Avatar;
|
||||
this.UserUpdateForm.role = result.data.Role;
|
||||
this.UserUpdateForm.gender = result.data.Gender;
|
||||
this.UserUpdateForm.create_time = result.data.CreatedAt;
|
||||
|
|
@ -309,6 +384,7 @@ export default {
|
|||
localStorage.setItem("video_func",result.data.VideoFunc);
|
||||
localStorage.setItem("device_func",result.data.DeviceFunc);
|
||||
localStorage.setItem("cid_func",result.data.CIDFunc);
|
||||
localStorage.setItem("avatar",result.data.Avatar);
|
||||
//console.log("my role:",this.role);
|
||||
}
|
||||
}
|
||||
|
|
@ -442,6 +518,11 @@ export default {
|
|||
autocomplete="on"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" prop="name">
|
||||
<el-avatar :size="80" :src="UserUpdateForm.avatar"></el-avatar>
|
||||
<!-- 选择图片 -->
|
||||
<input type="file" @change="handleAvatarFileUpload">更换头像</input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="name">
|
||||
<el-input
|
||||
v-model="UserUpdateForm.name"
|
||||
|
|
|
|||
Loading…
Reference in New Issue