fix: for thesis
This commit is contained in:
@@ -9,7 +9,8 @@
|
|||||||
<div class="voice" v-if="onCall.panel">
|
<div class="voice" v-if="onCall.panel">
|
||||||
<div>
|
<div>
|
||||||
<div class="profilebox">
|
<div class="profilebox">
|
||||||
<img :src="onCall.target.avatar" alt="头像">
|
<!-- 原逻辑：:src="onCall.target.avatar"（远端头像） -->
|
||||||
|
<img :src="defaultAvatar" alt="头像">
|
||||||
</div>
|
</div>
|
||||||
<div class="infobox">
|
<div class="infobox">
|
||||||
<p>{{ onCall.target.name }}</p>
|
<p>{{ onCall.target.name }}</p>
|
||||||
@@ -37,6 +38,7 @@ import { onCallStore } from '@/store/VoiceTarget';
|
|||||||
import { Mic } from '@element-plus/icons-vue';
|
import { Mic } from '@element-plus/icons-vue';
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import { denyCall, hangupCall,sendOffer } from '@/store/Voice.ts';
|
import { denyCall, hangupCall,sendOffer } from '@/store/Voice.ts';
|
||||||
|
import defaultAvatar from '@/assets/defaultavatar.jpg';
|
||||||
|
|
||||||
const onCall = onCallStore();
|
const onCall = onCallStore();
|
||||||
const userinfo = userInfoStore()
|
const userinfo = userInfoStore()
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-link to="/home/user" v-if="userinfo.user.u_avatar" class="user-profile-link">
|
<router-link to="/home/user" class="user-profile-link">
|
||||||
<div class="user-profile">
|
<div class="user-profile">
|
||||||
<img :src="userinfo.user.u_avatar" alt="User Avatar" />
|
<!-- 原逻辑：:src="userinfo.user.u_avatar"（远端头像） -->
|
||||||
|
<img :src="defaultAvatar" alt="User Avatar" />
|
||||||
<div :class="['status-dot', statusClass]"></div>
|
<div :class="['status-dot', statusClass]"></div>
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
@@ -11,6 +12,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { userInfoStore } from '@/store/user.ts';
|
import { userInfoStore } from '@/store/user.ts';
|
||||||
|
import defaultAvatar from '@/assets/defaultavatar.jpg';
|
||||||
|
|
||||||
const userinfo = userInfoStore();
|
const userinfo = userInfoStore();
|
||||||
|
|
||||||
|
|||||||
@@ -1,33 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<h1>关于我们</h1>
|
<h1>关于我们</h1>
|
||||||
<p>前端是我</p>
|
<p>前端是我</p>
|
||||||
<p>后端是我</p>
|
<p>后端是我</p>
|
||||||
<p>测试是我</p>
|
<p>测试是我</p>
|
||||||
<p>运维是我</p>
|
<p>运维是我</p>
|
||||||
<p>UI设计是我</p>
|
<p>UI设计是我</p>
|
||||||
<p>项目管理是我</p>
|
<p>项目管理是我</p>
|
||||||
<p>架构设计是我</p>
|
<p>架构设计是我</p>
|
||||||
<p>数据库设计还是我</p>
|
<p>数据库设计还是我</p>
|
||||||
<p>感谢使用与支持</p>
|
<p>感谢使用</p>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="9">
|
<!-- <el-col :span="9">
|
||||||
可以添加微信询问详情
|
可以添加微信询问详情
|
||||||
<img class="QRcode" src="@/assets/微信二维码.png" alt="candlelight_official">
|
<img class="QRcode" src="@/assets/微信二维码.png" alt="candlelight_official">
|
||||||
</el-col>
|
</el-col> -->
|
||||||
<!-- <el-col :span="9">
|
<!-- <el-col :span="9">
|
||||||
<img class="QRcode" src="@/assets/微信收款码.png" alt="" />
|
<img class="QRcode" src="@/assets/微信收款码.png" alt="" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="9">
|
<el-col :span="9">
|
||||||
<img class="QRcode" src="@/assets/支付宝收款码.jpg" alt="" />
|
<img class="QRcode" src="@/assets/支付宝收款码.jpg" alt="" />
|
||||||
</el-col> -->
|
</el-col> -->
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.QRcode {
|
.QRcode {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-default">
|
<div class="home-default">
|
||||||
<h1>欢迎使用Myplayer！</h1>
|
<h1>欢迎使用Myplayer！</h1>
|
||||||
<h2>当前版本v0.3.0测试版</h2>
|
<h2>当前版本v0.4.0测试版</h2>
|
||||||
<p>v0.1.0 websocket实时聊天实装</p>
|
<!-- <p>v0.1.0 websocket实时聊天实装</p>
|
||||||
<p>v0.1.1 面板更新，websocket重连机制增加</p>
|
<p>v0.1.1 面板更新，websocket重连机制增加</p>
|
||||||
<p>v0.1.2 修复bug，群聊功能性实现，webRTC点对点语言聊天实装</p>
|
<p>v0.1.2 修复bug，群聊功能性实现，webRTC点对点语言聊天实装</p>
|
||||||
<p>v0.2.0 修复若干bug，完善了部分ui和逻辑</p>
|
<p>v0.2.0 修复若干bug，完善了部分ui和逻辑</p>
|
||||||
<p>v0.3.0 重构了后端以及前端逻辑</p>
|
<p>v0.3.0 重构了后端以及前端逻辑</p>
|
||||||
<p>预期开发计划：1、播放器相关开发 2、ui重绘 3、群聊功能完善......</p>
|
<p>预期开发计划：1、播放器相关开发 2、ui重绘 3、群聊功能完善......</p> -->
|
||||||
<p>总之还有好多事，慢慢写吧！</p>
|
<p>总之还有好多事，慢慢写吧！</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.home-default {
|
.home-default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -9,7 +9,8 @@
|
|||||||
@click="switchTemplate(item.id, item.u_name, item.u_avatar)"
|
@click="switchTemplate(item.id, item.u_name, item.u_avatar)"
|
||||||
:class="{ 'selected': selectedFriendId === item.id }">
|
:class="{ 'selected': selectedFriendId === item.id }">
|
||||||
<div class="user-profile">
|
<div class="user-profile">
|
||||||
<img :src="item.u_avatar" alt="User Avatar" />
|
<!-- 原逻辑：:src="item.u_avatar"（远端头像） -->
|
||||||
|
<img :src="defaultAvatar" alt="User Avatar" />
|
||||||
<div :class="['status-dot', statusClass]"></div>
|
<div :class="['status-dot', statusClass]"></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: inline-block;">{{ item.u_name }}#{{ item.u_id }}</div>
|
<div style="display: inline-block;">{{ item.u_name }}#{{ item.u_id }}</div>
|
||||||
@@ -24,8 +25,8 @@
|
|||||||
<div v-for="(item) in messagebox" class="message-item">
|
<div v-for="(item) in messagebox" class="message-item">
|
||||||
<div
|
<div
|
||||||
:class="{ 'message-item-profile': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
|
:class="{ 'message-item-profile': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
|
||||||
<img :src="item.from !== userinfo.user.id ? oppositeAvatar : userinfo.user.u_avatar"
|
<!-- 原逻辑：:src="item.from !== userinfo.user.id ? oppositeAvatar : userinfo.user.u_avatar"（远端头像） -->
|
||||||
alt="User Avatar" />
|
<img :src="defaultAvatar" alt="User Avatar" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:class="{ 'message-item-content': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
|
:class="{ 'message-item-content': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
|
||||||
@@ -48,7 +49,8 @@
|
|||||||
<el-dialog v-model="dialogVisibleCallConfirm" title="确认通话对象" width="30%" :before-close="handleClose">
|
<el-dialog v-model="dialogVisibleCallConfirm" title="确认通话对象" width="30%" :before-close="handleClose">
|
||||||
<el-row style="height: 80px;align-items: center;">
|
<el-row style="height: 80px;align-items: center;">
|
||||||
<div class="user-profile">
|
<div class="user-profile">
|
||||||
<img :src="oppositeAvatar" alt="User Avatar" />
|
<!-- 原逻辑：:src="oppositeAvatar"（远端头像） -->
|
||||||
|
<img :src="defaultAvatar" alt="User Avatar" />
|
||||||
</div>
|
</div>
|
||||||
<div>{{ oppositeName }}</div>
|
<div>{{ oppositeName }}</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -64,7 +66,8 @@
|
|||||||
<el-table-column prop="u_avatar" label="" width="100">
|
<el-table-column prop="u_avatar" label="" width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<!-- 使用 el-avatar 组件显示头像 -->
|
<!-- 使用 el-avatar 组件显示头像 -->
|
||||||
<el-avatar :src="friendSearchResult[scope.$index].u_avatar" size="large" />
|
<!-- 原逻辑：:src="friendSearchResult[scope.$index].u_avatar"（远端头像） -->
|
||||||
|
<el-avatar :src="defaultAvatar" size="large" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="u_name" label="姓名" width="100"></el-table-column>
|
<el-table-column prop="u_name" label="姓名" width="100"></el-table-column>
|
||||||
@@ -96,6 +99,7 @@ import { messageStore } from '@/store/message.ts';
|
|||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { onCallStore } from '@/store/VoiceTarget.ts';
|
import { onCallStore } from '@/store/VoiceTarget.ts';
|
||||||
import { getFriends, deleteFriend } from '@/api/friend';
|
import { getFriends, deleteFriend } from '@/api/friend';
|
||||||
|
import defaultAvatar from '@/assets/defaultavatar.jpg';
|
||||||
|
|
||||||
|
|
||||||
const userinfo = userInfoStore()
|
const userinfo = userInfoStore()
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1 +1 @@
|
|||||||
<template></template>
|
<template>设置</template>
|
||||||
@@ -1,496 +1,498 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="updateProfile">
|
<div class="updateProfile">
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<img :src="avatarPreview" alt="头像">
|
<!-- 原逻辑：:src="avatarPreview"（远端头像/本地预览） -->
|
||||||
</div>
|
<img :src="defaultAvatar" alt="头像">
|
||||||
<el-col span="12">
|
</div>
|
||||||
<input type="file" id="avatar" @change="handleAvatarChange" accept="image/*" />
|
<el-col span="12">
|
||||||
</el-col>
|
<input type="file" id="avatar" @change="handleAvatarChange" accept="image/*" />
|
||||||
<el-col span="12">
|
</el-col>
|
||||||
<el-button class="re-profile" @click="uploadAvatar">修改头像</el-button>
|
<el-col span="12">
|
||||||
</el-col>
|
<el-button class="re-profile" @click="uploadAvatar">修改头像</el-button>
|
||||||
<el-col span="12">
|
</el-col>
|
||||||
<span>推荐头像参数：<br>
|
<el-col span="12">
|
||||||
分辨率：1051*1051 96dpi <br>
|
<span>推荐头像参数：<br>
|
||||||
格式：jpg、png <br>
|
分辨率：1051*1051 96dpi <br>
|
||||||
大小：≤1M
|
格式：jpg、png <br>
|
||||||
</span>
|
大小：≤1M
|
||||||
</el-col>
|
</span>
|
||||||
</div>
|
</el-col>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :span="12">
|
</el-col>
|
||||||
<el-row>
|
<el-col :span="12">
|
||||||
<span style="width: 80%;">用户名：{{ userinfo.user.u_name }}</span>
|
<el-row>
|
||||||
<el-button @click="dialogVisibleChangeName = true">修改名字</el-button>
|
<span style="width: 80%;">用户名：{{ userinfo.user.u_name }}</span>
|
||||||
</el-row>
|
<el-button @click="dialogVisibleChangeName = true">修改名字</el-button>
|
||||||
<el-row>
|
</el-row>
|
||||||
<span style="width: 80%;">账号：{{ userinfo.account }}</span>
|
<el-row>
|
||||||
<!-- <el-button @click="dialogVisibleChangeAccount = true">修改账号</el-button> -->
|
<span style="width: 80%;">账号：{{ userinfo.account }}</span>
|
||||||
</el-row>
|
<!-- <el-button @click="dialogVisibleChangeAccount = true">修改账号</el-button> -->
|
||||||
<el-row>
|
</el-row>
|
||||||
<span style="width: 80%;">个性签名：{{ userinfo.user.u_introduction }}</span>
|
<el-row>
|
||||||
<el-button @click="dialogVisibleChangeIntro = true">修改简介</el-button>
|
<span style="width: 80%;">个性签名：{{ userinfo.user.u_introduction }}</span>
|
||||||
</el-row>
|
<el-button @click="dialogVisibleChangeIntro = true">修改简介</el-button>
|
||||||
<el-row>
|
</el-row>
|
||||||
<span style="width: 80%;">密码： *********************</span>
|
<el-row>
|
||||||
<el-button @click="dialogVisibleChangePassword = true">修改密码</el-button>
|
<span style="width: 80%;">密码： *********************</span>
|
||||||
</el-row>
|
<el-button @click="dialogVisibleChangePassword = true">修改密码</el-button>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-row>
|
</el-col>
|
||||||
<!-- 修改名字弹窗 -->
|
</el-row>
|
||||||
<el-dialog v-model="dialogVisibleChangeName" title="修改名字" width="500">
|
<!-- 修改名字弹窗 -->
|
||||||
<el-input v-model="newname" autocomplete="off" />
|
<el-dialog v-model="dialogVisibleChangeName" title="修改名字" width="500">
|
||||||
<template #footer>
|
<el-input v-model="newname" autocomplete="off" />
|
||||||
<div class="dialog-footer">
|
<template #footer>
|
||||||
<el-button @click="dialogVisibleChangeName = false">算了</el-button>
|
<div class="dialog-footer">
|
||||||
<el-button type="primary" @click="changeName">
|
<el-button @click="dialogVisibleChangeName = false">算了</el-button>
|
||||||
改！
|
<el-button type="primary" @click="changeName">
|
||||||
</el-button>
|
改！
|
||||||
</div>
|
</el-button>
|
||||||
</template>
|
</div>
|
||||||
</el-dialog>
|
</template>
|
||||||
<!-- 修改个签弹窗 -->
|
</el-dialog>
|
||||||
<el-dialog v-model="dialogVisibleChangeIntro" title="修改个签" width="500">
|
<!-- 修改个签弹窗 -->
|
||||||
<el-input v-model="newintro" autocomplete="off" size="large" />
|
<el-dialog v-model="dialogVisibleChangeIntro" title="修改个签" width="500">
|
||||||
<template #footer>
|
<el-input v-model="newintro" autocomplete="off" size="large" />
|
||||||
<div class="dialog-footer">
|
<template #footer>
|
||||||
<el-button @click="dialogVisibleChangeIntro = false">算了</el-button>
|
<div class="dialog-footer">
|
||||||
<el-button type="primary" @click="changeIntro">
|
<el-button @click="dialogVisibleChangeIntro = false">算了</el-button>
|
||||||
改！
|
<el-button type="primary" @click="changeIntro">
|
||||||
</el-button>
|
改！
|
||||||
</div>
|
</el-button>
|
||||||
</template>
|
</div>
|
||||||
</el-dialog>
|
</template>
|
||||||
<!-- 修改邮箱弹窗 -->
|
</el-dialog>
|
||||||
<el-dialog v-model="dialogVisibleChangeAccount" title="修改邮箱" width="500">
|
<!-- 修改邮箱弹窗 -->
|
||||||
<el-row style="margin-bottom: 10px;">
|
<el-dialog v-model="dialogVisibleChangeAccount" title="修改邮箱" width="500">
|
||||||
<el-col span="6">当前邮箱：</el-col>
|
<el-row style="margin-bottom: 10px;">
|
||||||
<el-col span="18">{{ userinfo.user.u_account }}</el-col>
|
<el-col span="6">当前邮箱：</el-col>
|
||||||
</el-row>
|
<el-col span="18">{{ userinfo.user.u_account }}</el-col>
|
||||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
</el-row>
|
||||||
<el-form-item label="新邮箱" prop="newaccount">
|
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||||
<el-col span="24">
|
<el-form-item label="新邮箱" prop="newaccount">
|
||||||
<el-input v-model="formData.newaccount" autocomplete="off" placeholder="请输入邮箱地址"
|
<el-col span="24">
|
||||||
style="width: 300px;" />
|
<el-input v-model="formData.newaccount" autocomplete="off" placeholder="请输入邮箱地址"
|
||||||
</el-col>
|
style="width: 300px;" />
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item label="验证码" prop="code">
|
</el-form-item>
|
||||||
<el-col span="18">
|
<el-form-item label="验证码" prop="code">
|
||||||
<el-input v-model="formData.code" autocomplete="off" placeholder="请输入验证码" style="width: 225px;" />
|
<el-col span="18">
|
||||||
</el-col>
|
<el-input v-model="formData.code" autocomplete="off" placeholder="请输入验证码" style="width: 225px;" />
|
||||||
<el-col span="6">
|
</el-col>
|
||||||
<button class="codebutton" type="button" :disabled="isCountingDown" @click="sendVerificationCode">
|
<el-col span="6">
|
||||||
{{ isCountingDown ? `${countdownTime} s` : 'Get Code' }}
|
<button class="codebutton" type="button" :disabled="isCountingDown" @click="sendVerificationCode">
|
||||||
</button>
|
{{ isCountingDown ? `${countdownTime} s` : 'Get Code' }}
|
||||||
</el-col>
|
</button>
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item>
|
</el-form-item>
|
||||||
<div class="dialog-footer">
|
<el-form-item>
|
||||||
<el-button @click="dialogVisibleChangeAccount = false">算了</el-button>
|
<div class="dialog-footer">
|
||||||
<el-button type="primary" @click="changeAccount">
|
<el-button @click="dialogVisibleChangeAccount = false">算了</el-button>
|
||||||
改！
|
<el-button type="primary" @click="changeAccount">
|
||||||
</el-button>
|
改！
|
||||||
</div>
|
</el-button>
|
||||||
</el-form-item>
|
</div>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
</el-dialog>
|
</el-form>
|
||||||
<!-- 修改密码弹窗 -->
|
</el-dialog>
|
||||||
<el-dialog v-model="dialogVisibleChangePassword" title="修改密码" width="500">
|
<!-- 修改密码弹窗 -->
|
||||||
<el-form ref="formRedPassword" :model="password" :rules="passwordRules">
|
<el-dialog v-model="dialogVisibleChangePassword" title="修改密码" width="500">
|
||||||
<el-form-item label="原密码" prop="oldpassword">
|
<el-form ref="formRedPassword" :model="password" :rules="passwordRules">
|
||||||
<el-col span="24">
|
<el-form-item label="原密码" prop="oldpassword">
|
||||||
<el-input v-model="password.oldpassword" autocomplete="off" placeholder="请输入原密码"
|
<el-col span="24">
|
||||||
show-password="true" style="width: 300px;" />
|
<el-input v-model="password.oldpassword" autocomplete="off" placeholder="请输入原密码"
|
||||||
</el-col>
|
show-password="true" style="width: 300px;" />
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item label="新密码" prop="password">
|
</el-form-item>
|
||||||
<el-col span="24">
|
<el-form-item label="新密码" prop="password">
|
||||||
<el-input v-model="password.password" autocomplete="off" placeholder="请输入新密码" show-password="true"
|
<el-col span="24">
|
||||||
style="width: 300px;" />
|
<el-input v-model="password.password" autocomplete="off" placeholder="请输入新密码" show-password="true"
|
||||||
</el-col>
|
style="width: 300px;" />
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item label="确认密码" prop="confirmPassword">
|
</el-form-item>
|
||||||
<el-col span="24">
|
<el-form-item label="确认密码" prop="confirmPassword">
|
||||||
<el-input v-model="password.confirmPassword" autocomplete="off" placeholder="确认密码"
|
<el-col span="24">
|
||||||
show-password="true" style="width: 300px;" />
|
<el-input v-model="password.confirmPassword" autocomplete="off" placeholder="确认密码"
|
||||||
</el-col>
|
show-password="true" style="width: 300px;" />
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item>
|
</el-form-item>
|
||||||
<div class="dialog-footer">
|
<el-form-item>
|
||||||
<el-button @click="dialogVisibleChangePassword = false">算了</el-button>
|
<div class="dialog-footer">
|
||||||
<el-button type="primary" @click="changePassword">
|
<el-button @click="dialogVisibleChangePassword = false">算了</el-button>
|
||||||
改！
|
<el-button type="primary" @click="changePassword">
|
||||||
</el-button>
|
改！
|
||||||
</div>
|
</el-button>
|
||||||
</el-form-item>
|
</div>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
|
||||||
|
</el-form>
|
||||||
</el-dialog>
|
|
||||||
|
</el-dialog>
|
||||||
</template>
|
|
||||||
<script setup>
|
</template>
|
||||||
import { userInfoStore } from '@/store/user';
|
<script setup>
|
||||||
import axios from 'axios';
|
import { userInfoStore } from '@/store/user';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import axios from 'axios';
|
||||||
import { reactive, ref } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { getUserInfo } from '@/functions/user';
|
import { reactive, ref } from 'vue'
|
||||||
|
import { getUserInfo } from '@/functions/user';
|
||||||
const userinfo = userInfoStore();
|
import defaultAvatar from '@/assets/defaultavatar.jpg'
|
||||||
console.log(userinfo.account);
|
|
||||||
|
const userinfo = userInfoStore();
|
||||||
|
console.log(userinfo.account);
|
||||||
const dialogVisibleChangeName = ref(false)
|
|
||||||
const dialogVisibleChangeIntro = ref(false)
|
|
||||||
const dialogVisibleChangeAccount = ref(false)
|
const dialogVisibleChangeName = ref(false)
|
||||||
const dialogVisibleChangePassword = ref(false)
|
const dialogVisibleChangeIntro = ref(false)
|
||||||
const isCountingDown = ref(false);
|
const dialogVisibleChangeAccount = ref(false)
|
||||||
const countdownTime = ref(60);
|
const dialogVisibleChangePassword = ref(false)
|
||||||
|
const isCountingDown = ref(false);
|
||||||
|
const countdownTime = ref(60);
|
||||||
const newname = ref('')
|
|
||||||
const newintro = ref('')
|
|
||||||
|
const newname = ref('')
|
||||||
const formRef = ref(null); // 表单引用
|
const newintro = ref('')
|
||||||
const formData = ref({
|
|
||||||
newaccount: '',
|
const formRef = ref(null); // 表单引用
|
||||||
v_id: '',
|
const formData = ref({
|
||||||
code: '' // 初始化表单数据
|
newaccount: '',
|
||||||
});
|
v_id: '',
|
||||||
const formRedPassword = ref(null); // 密码表单引用
|
code: '' // 初始化表单数据
|
||||||
const password = ref({
|
});
|
||||||
oldpassword: '',
|
const formRedPassword = ref(null); // 密码表单引用
|
||||||
password: '',
|
const password = ref({
|
||||||
confirmPassword: ''
|
oldpassword: '',
|
||||||
}); // 密码输入框
|
password: '',
|
||||||
|
confirmPassword: ''
|
||||||
// 定义验证规则
|
}); // 密码输入框
|
||||||
const rules = {
|
|
||||||
newaccount: [
|
// 定义验证规则
|
||||||
{ required: true, message: '请输入账号', trigger: 'blur' }, // 非空验证
|
const rules = {
|
||||||
{ type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } // 邮箱格式验证
|
newaccount: [
|
||||||
],
|
{ required: true, message: '请输入账号', trigger: 'blur' }, // 非空验证
|
||||||
code: [
|
{ type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } // 邮箱格式验证
|
||||||
{ required: true, message: '请输入验证码', trigger: 'blur' }, // 非空验证
|
],
|
||||||
]
|
code: [
|
||||||
};
|
{ required: true, message: '请输入验证码', trigger: 'blur' }, // 非空验证
|
||||||
// 定义密码验证规则
|
]
|
||||||
const passwordRules = {
|
};
|
||||||
oldpassword: [
|
// 定义密码验证规则
|
||||||
{ required: true, message: '请输入原密码', trigger: 'blur' }, // 非空验证
|
const passwordRules = {
|
||||||
],
|
oldpassword: [
|
||||||
password: [
|
{ required: true, message: '请输入原密码', trigger: 'blur' }, // 非空验证
|
||||||
{ required: true, message: '请输入新密码', trigger: 'blur' }, // 非空验证
|
],
|
||||||
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }, // 密码长度验证
|
password: [
|
||||||
],
|
{ required: true, message: '请输入新密码', trigger: 'blur' }, // 非空验证
|
||||||
confirmPassword: [
|
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }, // 密码长度验证
|
||||||
{ required: true, message: '请确认密码', trigger: 'blur' }, // 非空验证
|
],
|
||||||
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }, // 密码长度验证
|
confirmPassword: [
|
||||||
]
|
{ required: true, message: '请确认密码', trigger: 'blur' }, // 非空验证
|
||||||
};
|
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }, // 密码长度验证
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
//修改头像部分
|
|
||||||
//预览头像
|
|
||||||
const avatarPreview = ref(userinfo.user.u_avatar);
|
//修改头像部分
|
||||||
const avatar = ref(null); // 存储上传的头像文件
|
//预览头像
|
||||||
|
// const avatarPreview = ref(userinfo.user.u_avatar); // 原：远端头像预览
|
||||||
|
const avatar = ref(null); // 存储上传的头像文件
|
||||||
// 处理头像预览并将文件保存到变量
|
|
||||||
const handleAvatarChange = (event) => {
|
|
||||||
const file = event.target.files[0];
|
// 处理头像预览并将文件保存到变量
|
||||||
if (file) {
|
const handleAvatarChange = (event) => {
|
||||||
avatar.value = file;
|
const file = event.target.files[0];
|
||||||
avatarPreview.value = URL.createObjectURL(file);
|
if (file) {
|
||||||
}
|
avatar.value = file;
|
||||||
};
|
// avatarPreview.value = URL.createObjectURL(file); // 原：本地预览
|
||||||
|
}
|
||||||
//上传到服务器
|
};
|
||||||
const uploadAvatar = () => {
|
|
||||||
if(!avatar.value){
|
//上传到服务器
|
||||||
ElMessage('请选择头像')
|
const uploadAvatar = () => {
|
||||||
return
|
if(!avatar.value){
|
||||||
}
|
ElMessage('请选择头像')
|
||||||
const formdata = new FormData();
|
return
|
||||||
formdata.append('file', avatar.value)
|
}
|
||||||
formdata.append('id', userinfo.user.u_id)
|
const formdata = new FormData();
|
||||||
axios({
|
formdata.append('file', avatar.value)
|
||||||
headers: {
|
formdata.append('id', userinfo.user.u_id)
|
||||||
'Content-Type': 'multipart/form-data',
|
axios({
|
||||||
'Authorization': userinfo.token
|
headers: {
|
||||||
},
|
'Content-Type': 'multipart/form-data',
|
||||||
method: 'post',
|
'Authorization': userinfo.token
|
||||||
url: '/api/avatar/upload',
|
},
|
||||||
data: formdata
|
method: 'post',
|
||||||
}).then((response) => {
|
url: '/api/avatar/upload',
|
||||||
if (response.data.code !== 200) {
|
data: formdata
|
||||||
ElMessage.error(response.data.msg || '上传失败')
|
}).then((response) => {
|
||||||
return
|
if (response.data.code !== 200) {
|
||||||
}
|
ElMessage.error(response.data.msg || '上传失败')
|
||||||
getUserInfo()
|
return
|
||||||
ElMessage.success('上传成功')
|
}
|
||||||
}).catch((error) => {
|
getUserInfo()
|
||||||
console.error('上传失败:', error);
|
ElMessage.success('上传成功')
|
||||||
ElMessage.error('上传失败')
|
}).catch((error) => {
|
||||||
})
|
console.error('上传失败:', error);
|
||||||
}
|
ElMessage.error('上传失败')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const changeName = async () => {
|
|
||||||
|
|
||||||
const response = await axios.post('/api/user/updatename', {
|
const changeName = async () => {
|
||||||
u_name: newname.value
|
|
||||||
}
|
const response = await axios.post('/api/user/updatename', {
|
||||||
, {
|
u_name: newname.value
|
||||||
headers: {
|
}
|
||||||
'Authorization': userinfo.token,
|
, {
|
||||||
'Content-Type': 'application/json'
|
headers: {
|
||||||
}
|
'Authorization': userinfo.token,
|
||||||
});
|
'Content-Type': 'application/json'
|
||||||
if (response.data.code === 200) {
|
}
|
||||||
userinfo.user.u_name = newname.value
|
});
|
||||||
newname.value = ''
|
if (response.data.code === 200) {
|
||||||
dialogVisibleChangeName.value = false
|
userinfo.user.u_name = newname.value
|
||||||
ElMessage.success('修改成功')
|
newname.value = ''
|
||||||
} else {
|
dialogVisibleChangeName.value = false
|
||||||
ElMessage.error(response.data.msg)
|
ElMessage.success('修改成功')
|
||||||
}
|
} else {
|
||||||
}
|
ElMessage.error(response.data.msg)
|
||||||
|
}
|
||||||
const changeIntro = async () => {
|
}
|
||||||
console.log(newintro.value);
|
|
||||||
const response = await axios.post('/api/user/updateintroduction', {
|
const changeIntro = async () => {
|
||||||
u_introduction: newintro.value
|
console.log(newintro.value);
|
||||||
}, {
|
const response = await axios.post('/api/user/updateintroduction', {
|
||||||
headers: {
|
u_introduction: newintro.value
|
||||||
'Authorization': userinfo.token,
|
}, {
|
||||||
'Content-Type': 'application/json'
|
headers: {
|
||||||
}
|
'Authorization': userinfo.token,
|
||||||
});
|
'Content-Type': 'application/json'
|
||||||
if (response.data.code === 200) {
|
}
|
||||||
userinfo.user.u_introduction = newintro.value
|
});
|
||||||
newintro.value = ''
|
if (response.data.code === 200) {
|
||||||
dialogVisibleChangeIntro.value = false
|
userinfo.user.u_introduction = newintro.value
|
||||||
ElMessage.success('修改成功')
|
newintro.value = ''
|
||||||
} else {
|
dialogVisibleChangeIntro.value = false
|
||||||
ElMessage.error(response.data.msg)
|
ElMessage.success('修改成功')
|
||||||
}
|
} else {
|
||||||
}
|
ElMessage.error(response.data.msg)
|
||||||
|
}
|
||||||
// 发送验证码
|
}
|
||||||
const sendVerificationCode = () => {
|
|
||||||
formRef.value.validateField('newaccount', (isValid) => {
|
// 发送验证码
|
||||||
console.log(isValid);
|
const sendVerificationCode = () => {
|
||||||
if (isValid) {
|
formRef.value.validateField('newaccount', (isValid) => {
|
||||||
// 如果邮箱验证通过
|
console.log(isValid);
|
||||||
ElMessage.success('邮箱格式正确，正在发送验证码...');
|
if (isValid) {
|
||||||
axios({
|
// 如果邮箱验证通过
|
||||||
headers: {
|
ElMessage.success('邮箱格式正确，正在发送验证码...');
|
||||||
'Content-Type': 'application/json'
|
axios({
|
||||||
},
|
headers: {
|
||||||
method: "post",
|
'Content-Type': 'application/json'
|
||||||
url: "/api/code/sendcode",
|
},
|
||||||
data: JSON.stringify({ u_account: formData.value.newaccount })
|
method: "post",
|
||||||
})
|
url: "/api/code/sendcode",
|
||||||
.then((response) => {
|
data: JSON.stringify({ u_account: formData.value.newaccount })
|
||||||
if (response.data && response.data.code !== 200) {
|
})
|
||||||
ElMessageBox.alert("注册失败,请重新填写 msg:" + (response.data.msg || '未知错误'), '注册失败');
|
.then((response) => {
|
||||||
} else {
|
if (response.data && response.data.code !== 200) {
|
||||||
startCountdown();
|
ElMessageBox.alert("注册失败,请重新填写 msg:" + (response.data.msg || '未知错误'), '注册失败');
|
||||||
formData.value.v_id = response.data.data;
|
} else {
|
||||||
console.log(formData.value.v_id);
|
startCountdown();
|
||||||
ElMessageBox.alert('发送成功，请耐心等待', '请求成功');
|
formData.value.v_id = response.data.data;
|
||||||
}
|
console.log(formData.value.v_id);
|
||||||
})
|
ElMessageBox.alert('发送成功，请耐心等待', '请求成功');
|
||||||
.catch((error) => {
|
}
|
||||||
console.error("请求失败:", error);
|
})
|
||||||
ElMessageBox.alert("请求失败，请稍后再试", '网络错误');
|
.catch((error) => {
|
||||||
});
|
console.error("请求失败:", error);
|
||||||
} else {
|
ElMessageBox.alert("请求失败，请稍后再试", '网络错误');
|
||||||
// 如果邮箱验证失败
|
});
|
||||||
ElMessage.error('请输入有效的邮箱地址');
|
} else {
|
||||||
return;
|
// 如果邮箱验证失败
|
||||||
}
|
ElMessage.error('请输入有效的邮箱地址');
|
||||||
});
|
return;
|
||||||
|
}
|
||||||
};
|
});
|
||||||
|
|
||||||
|
};
|
||||||
// 开始倒计时
|
|
||||||
const startCountdown = () => {
|
|
||||||
isCountingDown.value = true;
|
// 开始倒计时
|
||||||
const interval = setInterval(() => {
|
const startCountdown = () => {
|
||||||
countdownTime.value--;
|
isCountingDown.value = true;
|
||||||
if (countdownTime.value <= 0) {
|
const interval = setInterval(() => {
|
||||||
clearInterval(interval);
|
countdownTime.value--;
|
||||||
isCountingDown.value = false;
|
if (countdownTime.value <= 0) {
|
||||||
countdownTime.value = 60;
|
clearInterval(interval);
|
||||||
}
|
isCountingDown.value = false;
|
||||||
}, 1000);
|
countdownTime.value = 60;
|
||||||
};
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
// 验证验证码，并进行邮箱更改
|
|
||||||
const changeAccount = async () => {
|
|
||||||
|
// 验证验证码，并进行邮箱更改
|
||||||
// 验证新邮箱字段
|
const changeAccount = async () => {
|
||||||
formRef.value.validateField(['newaccount', 'code'], (errorMessage) => {
|
|
||||||
console.log(errorMessage);
|
// 验证新邮箱字段
|
||||||
if (errorMessage) {
|
formRef.value.validateField(['newaccount', 'code'], (errorMessage) => {
|
||||||
// 如果验证通过（errorMessage为空）
|
console.log(errorMessage);
|
||||||
ElMessage.success('正在修改邮箱...');
|
if (errorMessage) {
|
||||||
// 验证验证码
|
// 如果验证通过（errorMessage为空）
|
||||||
axios({
|
ElMessage.success('正在修改邮箱...');
|
||||||
headers: {
|
// 验证验证码
|
||||||
'Content-Type': 'application/json'
|
axios({
|
||||||
},
|
headers: {
|
||||||
method: "post",
|
'Content-Type': 'application/json'
|
||||||
url: "/api/code/verifycode",
|
},
|
||||||
data: {
|
method: "post",
|
||||||
v_id: formData.value.v_id,
|
url: "/api/code/verifycode",
|
||||||
code: formData.value.code
|
data: {
|
||||||
}
|
v_id: formData.value.v_id,
|
||||||
}).then((response) => {
|
code: formData.value.code
|
||||||
if (response.data.code !== 200) {
|
}
|
||||||
ElMessage.error(response.data.msg || '验证码错误');
|
}).then((response) => {
|
||||||
return;
|
if (response.data.code !== 200) {
|
||||||
} else {
|
ElMessage.error(response.data.msg || '验证码错误');
|
||||||
// 验证码验证通过，发起修改邮箱的请求
|
return;
|
||||||
axios({
|
} else {
|
||||||
headers: {
|
// 验证码验证通过，发起修改邮箱的请求
|
||||||
'Content-Type': 'application/json',
|
axios({
|
||||||
'Authorization': userinfo.token
|
headers: {
|
||||||
},
|
'Content-Type': 'application/json',
|
||||||
method: "post",
|
'Authorization': userinfo.token
|
||||||
url: "/api/user/updateaccount",
|
},
|
||||||
data: {
|
method: "post",
|
||||||
u_account: formData.value.newaccount
|
url: "/api/user/updateaccount",
|
||||||
}
|
data: {
|
||||||
}).then((response) => {
|
u_account: formData.value.newaccount
|
||||||
if (response.data.code !== 200) {
|
}
|
||||||
ElMessage.error(response.data.msg || '修改失败');
|
}).then((response) => {
|
||||||
return;
|
if (response.data.code !== 200) {
|
||||||
} else {
|
ElMessage.error(response.data.msg || '修改失败');
|
||||||
ElMessage.success('邮箱修改成功');
|
return;
|
||||||
userinfo.user.u_account = formData.value.newaccount; // 更新当前邮箱
|
} else {
|
||||||
formRef.value.resetFields(); // 重置表单数据
|
ElMessage.success('邮箱修改成功');
|
||||||
formRef.value.clearValidate(); // 清除验证错误
|
userinfo.user.u_account = formData.value.newaccount; // 更新当前邮箱
|
||||||
dialogVisibleChangeAccount.value = false; // 关闭弹窗
|
formRef.value.resetFields(); // 重置表单数据
|
||||||
}
|
formRef.value.clearValidate(); // 清除验证错误
|
||||||
})
|
dialogVisibleChangeAccount.value = false; // 关闭弹窗
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
}
|
||||||
// 如果验证失败（errorMessage不为空）
|
})
|
||||||
ElMessage.error('请输入正确的验证码');
|
} else {
|
||||||
}
|
// 如果验证失败（errorMessage不为空）
|
||||||
});
|
ElMessage.error('请输入正确的验证码');
|
||||||
};
|
}
|
||||||
|
});
|
||||||
// 修改密码
|
};
|
||||||
const changePassword = async () => {
|
|
||||||
// 验证密码字段
|
// 修改密码
|
||||||
formRedPassword.value.validateField(['oldpassword', 'password', 'confirmPassword'], (errorMessage) => {
|
const changePassword = async () => {
|
||||||
console.log(errorMessage);
|
// 验证密码字段
|
||||||
if (password.value.password !== password.value.confirmPassword) {
|
formRedPassword.value.validateField(['oldpassword', 'password', 'confirmPassword'], (errorMessage) => {
|
||||||
ElMessage.error('两次密码输入不一致');
|
console.log(errorMessage);
|
||||||
return;
|
if (password.value.password !== password.value.confirmPassword) {
|
||||||
}
|
ElMessage.error('两次密码输入不一致');
|
||||||
if (password.value.password === password.value.oldpassword) {
|
return;
|
||||||
ElMessage.error('密码一样你改密码呢');
|
}
|
||||||
return;
|
if (password.value.password === password.value.oldpassword) {
|
||||||
}
|
ElMessage.error('密码一样你改密码呢');
|
||||||
if (errorMessage) {
|
return;
|
||||||
// 如果验证通过（errorMessage为空）
|
}
|
||||||
ElMessage.success('正在修改密码...');
|
if (errorMessage) {
|
||||||
// 发送修改密码请求
|
// 如果验证通过（errorMessage为空）
|
||||||
axios({
|
ElMessage.success('正在修改密码...');
|
||||||
headers: {
|
// 发送修改密码请求
|
||||||
'Content-Type': 'application/x-www-form-urlencoded',
|
axios({
|
||||||
'Authorization': userinfo.token
|
headers: {
|
||||||
},
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
method: "post",
|
'Authorization': userinfo.token
|
||||||
url: "/api/user/updatepassword",
|
},
|
||||||
data: password.value
|
method: "post",
|
||||||
}).then((response) => {
|
url: "/api/user/updatepassword",
|
||||||
if (response.data.code !== 200) {
|
data: password.value
|
||||||
ElMessage.error(response.data.msg || '修改失败');
|
}).then((response) => {
|
||||||
return;
|
if (response.data.code !== 200) {
|
||||||
} else {
|
ElMessage.error(response.data.msg || '修改失败');
|
||||||
ElMessage.success('密码修改成功');
|
return;
|
||||||
formRedPassword.value.resetFields(); // 重置表单数据
|
} else {
|
||||||
formRedPassword.value.clearValidate(); // 清除验证错误
|
ElMessage.success('密码修改成功');
|
||||||
dialogVisibleChangePassword.value = false; // 关闭弹窗
|
formRedPassword.value.resetFields(); // 重置表单数据
|
||||||
}
|
formRedPassword.value.clearValidate(); // 清除验证错误
|
||||||
})
|
dialogVisibleChangePassword.value = false; // 关闭弹窗
|
||||||
} else {
|
}
|
||||||
// 如果验证失败（errorMessage不为空）
|
})
|
||||||
ElMessage.error('请输入正确的密码');
|
} else {
|
||||||
}
|
// 如果验证失败（errorMessage不为空）
|
||||||
});
|
ElMessage.error('请输入正确的密码');
|
||||||
};
|
}
|
||||||
|
});
|
||||||
</script>
|
};
|
||||||
<style>
|
|
||||||
.updateProfile {
|
</script>
|
||||||
position: relative;
|
<style>
|
||||||
}
|
.updateProfile {
|
||||||
|
position: relative;
|
||||||
.profile {
|
}
|
||||||
top: 50px;
|
|
||||||
left: 100px;
|
.profile {
|
||||||
width: 150px;
|
top: 50px;
|
||||||
height: 150px;
|
left: 100px;
|
||||||
border-radius: 50%;
|
width: 150px;
|
||||||
background-color: #fff;
|
height: 150px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
border-radius: 50%;
|
||||||
}
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
.profile img {
|
}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
.profile img {
|
||||||
object-fit: cover;
|
width: 100%;
|
||||||
border-radius: 50%;
|
height: 100%;
|
||||||
}
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
.userinfo {
|
}
|
||||||
position: relative;
|
|
||||||
}
|
.userinfo {
|
||||||
|
position: relative;
|
||||||
.re-profile {
|
}
|
||||||
|
|
||||||
margin-top: 20px;
|
.re-profile {
|
||||||
}
|
|
||||||
|
margin-top: 20px;
|
||||||
.el-row {
|
}
|
||||||
margin-top: 30px;
|
|
||||||
}
|
.el-row {
|
||||||
|
margin-top: 30px;
|
||||||
.dialog-footer {
|
}
|
||||||
position: relative;
|
|
||||||
margin-left: 300px;
|
.dialog-footer {
|
||||||
}
|
position: relative;
|
||||||
|
margin-left: 300px;
|
||||||
.codebutton {
|
}
|
||||||
width: 75px;
|
|
||||||
padding: 8px;
|
.codebutton {
|
||||||
background-color: #007bff;
|
width: 75px;
|
||||||
color: white;
|
padding: 8px;
|
||||||
border: none;
|
background-color: #007bff;
|
||||||
border-radius: 5px;
|
color: white;
|
||||||
cursor: pointer;
|
border: none;
|
||||||
}
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
.codebutton:hover {
|
}
|
||||||
background-color: #0056b3;
|
|
||||||
}
|
.codebutton:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
.codebutton:disabled {
|
}
|
||||||
background-color: #ccc;
|
|
||||||
cursor: not-allowed;
|
.codebutton:disabled {
|
||||||
}
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user