This commit is contained in:
hrx 2025-10-20 09:50:15 +08:00
parent d653ca3107
commit d365c1ad62
5 changed files with 122 additions and 235 deletions

View File

@ -271,7 +271,8 @@ export default {
props: { props: {
userId: { userId: {
type: [String, Number], type: [String, Number],
required: true required: false,
default: null
}, },
visible: { visible: {
type: Boolean, type: Boolean,
@ -375,6 +376,13 @@ export default {
}, },
getUnreadmsg() { getUnreadmsg() {
//
const userId = sessionStorage.getItem('userId');
if (!userId) {
console.log('用户未登录,跳过获取未读消息');
return;
}
getUnreadmsgAPI().then(res => { getUnreadmsgAPI().then(res => {
if (res.status) { if (res.status) {
this.count = res.count; this.count = res.count;
@ -389,14 +397,24 @@ export default {
} }
}).catch(error => { }).catch(error => {
console.error('获取未读消息失败:', error); console.error('获取未读消息失败:', error);
// 401
if (error.response && error.response.status !== 401) {
this.$message({ this.$message({
message: "获取未读消息失败", message: "获取未读消息失败",
type: "error", type: "error",
}); });
}
}); });
}, },
getReadmsg() { getReadmsg() {
//
const userId = sessionStorage.getItem('userId');
if (!userId) {
console.log('用户未登录,跳过获取已读消息');
return;
}
getReadmsgAPI().then(res => { getReadmsgAPI().then(res => {
if (res.status) { if (res.status) {
this.readInformationList = res.msg; this.readInformationList = res.msg;
@ -435,7 +453,14 @@ export default {
}, },
getMsg() { getMsg() {
getMsgAPI({ userid: this.userId }).then(res => { //
const userId = sessionStorage.getItem('userId');
if (!userId) {
console.log('用户未登录,跳过获取消息');
return;
}
getMsgAPI({ userid: userId }).then(res => {
if (res.status && res.msg) { if (res.status && res.msg) {
this.alliInformationList = res.msg; this.alliInformationList = res.msg;
} else { } else {

View File

@ -11,7 +11,7 @@
id="breadcrumb-container" class="breadcrumb-container" /> id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu" <div class="right-menu"
style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;"> style="display:flex;justify-content: flex-end!important;align-items: center!important;margin-right: 10px;">
<template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;"> <template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
<span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')" <span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
class="right-menu-item hover-effect " class="right-menu-item hover-effect "
@ -34,7 +34,7 @@
style="font-size: 26px;display: flex;justify-content: center;align-items: center"> style="font-size: 26px;display: flex;justify-content: center;align-items: center">
<el-badge :value="messageCount == 0 ? '' : messageCount" :max="9" class="badge" <el-badge :value="messageCount == 0 ? '' : messageCount" :max="9" class="badge"
style="height: 35px;display: flex;justify-content: center;align-items: center"> style="height: 35px;display: flex;justify-content: center;align-items: center">
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="openMessageCenter" /> <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="handleMessageClick" />
</el-badge> </el-badge>
</span> </span>
</el-tooltip> </el-tooltip>
@ -67,7 +67,7 @@
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="12" height="12" style="fill: #1019ab;"> width="12" height="12" style="fill: #1019ab;">
<path <path
d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666666V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z" d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
p-id="1521"></path> p-id="1521"></path>
</svg> </svg>
</span> </span>
@ -101,6 +101,7 @@
<message-center <message-center
ref="messageCenter" ref="messageCenter"
:userId="userId" :userId="userId"
:visible.sync="messageCenterVisible"
@unread-count-update="handleUnreadCountUpdate" @unread-count-update="handleUnreadCountUpdate"
/> />
@ -275,6 +276,7 @@ import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'
export default { export default {
data() { data() {
return { return {
messageCenterVisible: false, //
drawerPro: false, drawerPro: false,
searchLoading: false, searchLoading: false,
searchResultList: [], searchResultList: [],
@ -325,8 +327,8 @@ export default {
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
passwordDialog: false, passwordDialog: false,
editUserInfoDialog: false, editUserInfoDialog: false,
nick_name: JSON.parse(localStorage.getItem('user_info')).username, nick_name: JSON.parse(localStorage.getItem('user_info'))?.username || '用户',
userId: sessionStorage.getItem("userId"), userId: sessionStorage.getItem("userId") || '',
org_type: sessionStorage.getItem("org_type"), org_type: sessionStorage.getItem("org_type"),
role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"), role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
dialogTableVisible: false, dialogTableVisible: false,
@ -384,9 +386,18 @@ export default {
this.handleResize() this.handleResize()
}, },
methods: { methods: {
// //
openMessageCenter() { handleMessageClick() {
const userId = sessionStorage.getItem('userId');
if (!userId) {
this.$message.warning('请先登录');
this.$router.push('/login');
return;
}
this.messageCenterVisible = true;
if (this.$refs.messageCenter) {
this.$refs.messageCenter.open(); this.$refs.messageCenter.open();
}
}, },
// //
@ -567,6 +578,8 @@ export default {
this.$router.push('/customer/customerInformation') this.$router.push('/customer/customerInformation')
}, },
async getUserInfo() { async getUserInfo() {
if (!this.userId) return;
getUserInfoAPI({ id: this.userId }).then((res) => { getUserInfoAPI({ id: this.userId }).then((res) => {
if (res.status == true) { if (res.status == true) {
this.userInfoList = res.data; this.userInfoList = res.data;
@ -636,6 +649,8 @@ export default {
this.editUserInfoForm.mobile = this.userInfoList[0].mobile; this.editUserInfoForm.mobile = this.userInfoList[0].mobile;
}, },
getPicture() { getPicture() {
if (!this.userId) return;
let params = { let params = {
userid: this.userId userid: this.userId
} }
@ -644,6 +659,8 @@ export default {
}) })
}, },
getOpicture() { getOpicture() {
if (!this.userId) return;
let params = { let params = {
userid: this.userId userid: this.userId
} }
@ -942,9 +959,11 @@ export default {
} }
.right-menu { .right-menu {
float: right; // float: right;
display: flex;
align-items: center;
height: 100%; height: 100%;
line-height: 50px; padding: 10px;
//.shopCar { //.shopCar {
// padding-top: 19px; // padding-top: 19px;

View File

@ -83,6 +83,7 @@ const actions = {
//客户获取余额 //客户获取余额
async getCustmoersMoney({commit}) { async getCustmoersMoney({commit}) {
let result = await myBalanceAPI() let result = await myBalanceAPI()
if (result.status) { if (result.status) {
commit('SETMYBANLANCE', result.data) commit('SETMYBANLANCE', result.data)
} }
@ -249,4 +250,5 @@ export default {
state, state,
mutations, mutations,
actions, actions,
}; };

View File

@ -34,11 +34,6 @@
<!-- 用户区域登录/注册按钮和用户下拉菜单 --> <!-- 用户区域登录/注册按钮和用户下拉菜单 -->
<div class="user-area"> <div class="user-area">
<!-- 搜索框 -->
<!-- <div class="search-box">
<i class="el-icon-search"></i>
<input type="text" :placeholder="translations[language].searchPlaceholder">
</div> -->
<!-- 中英互译 --> <!-- 中英互译 -->
<div class="language-toggle" @click="toggleLanguage"> <div class="language-toggle" @click="toggleLanguage">
<span class="iconfont icon-ditu_diqiu_o"></span> <span class="iconfont icon-ditu_diqiu_o"></span>
@ -183,9 +178,12 @@
</div> </div>
<!-- 消息中心组件 --> <!-- 消息中心组件 -->
<message-center
<message-center ref="messageCenter" :visible.sync="messageCenterVisible" :userId="userId" ref="messageCenter"
@unread-count-update="handleUnreadCountUpdate" /> :visible.sync="messageCenterVisible"
:userId="userId"
@unread-count-update="handleUnreadCountUpdate"
/>
</div> </div>
</template> </template>
@ -742,6 +740,8 @@ export default Vue.extend({
// //
async getUserInfo() { async getUserInfo() {
if (!this.userId) return;
getUserInfoAPI({ id: this.userId }).then((res) => { getUserInfoAPI({ id: this.userId }).then((res) => {
if (res.status) { if (res.status) {
// this.nick_name = res.data[0].nick_name; // this.nick_name = res.data[0].nick_name;

View File

@ -57,7 +57,7 @@
<!-- 用户信息 --> <!-- 用户信息 -->
<div class="user card"> <div class="user card">
<div class="userImg"> <div class="userImg">
<div class="imgUser">{{ userInfo.username ? userInfo.username.charAt(0) : '' }}</div> <div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
</div> </div>
<div class="userBox"> <div class="userBox">
<h3>{{ userInfo.username }}</h3> <h3>{{ userInfo.username }}</h3>
@ -72,27 +72,19 @@
<div class="price card"> <div class="price card">
<div class="title">账户余额</div> <div class="title">账户余额</div>
<div class="content"> <div class="content">
<span class="balance">{{ displayBalance }}</span> <span class="balance">{{ initMybalance() }}</span>
<el-button size="mini" type="primary" @click="$router.push('/kbossCharge')"> <el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
立即充值 立即充值
</el-button> </el-button>
</div> </div>
</div> </div>
<!-- 待办事项 --> <div class="announcements card">
<div class="todo card"> <div class="title">系统公告</div>
<div class="title">待办事项</div> <ul class="announcement-list">
<ul class="todo-list"> <li v-for="i in 3" :key="i">
<li v-for="item in todoList" :key="item.type" @click="handleTodoClick(item)"> <i class="el-icon-bell"></i>
<div class="todo-item"> <span>这是第{{ i }}条系统公告内容...</span>
<div class="todo-icon">
<i :class="item.icon"></i>
</div>
<div class="todo-content">
<div class="todo-title">{{ item.title }}</div>
<div class="todo-count">{{ item.count }}</div>
</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -102,7 +94,7 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { mapState, mapActions } from "vuex"; import { mapState } from "vuex";
import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome"; import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
export default Vue.extend({ export default Vue.extend({
@ -117,117 +109,31 @@ export default Vue.extend({
email: "" email: ""
}, },
viewList: [], viewList: [],
navList: [], navList: []
localBalance: '0.00', //
todoList: [
{ type: 'pending_payment', title: '待支付', count: 1, icon: 'el-icon-money' },
{ type: 'pending_renewal', title: '待续费', count: 2, icon: 'el-icon-refresh' },
{ type: 'processing', title: '处理中', count: 2, icon: 'el-icon-loading' },
{ type: 'message', title: '站内信', count: 2, icon: 'el-icon-message' }
]
}
},
computed: {
...mapState({
mybalance: state => state.user.mybalance,
}),
// 使 Vuex
displayBalance() {
if (this.mybalance && this.mybalance !== '0.00') {
return this.mybalance;
}
return this.localBalance;
} }
}, },
mounted() { mounted() {
this.initPage(); reqQuickNav().then(res => {
this.navList = res.data
})
this.userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
reqNewHomeResource().then(res => {
if (res.status) {
this.viewList = res.data || [];
} else {
this.$message.error(res.msg);
}
})
reqNewHomeResourceWarning().then(res => {
if (res.status) {
this.tableData = res.data || [];
} else {
this.$message.error(res.msg);
}
})
}, },
methods: { methods: {
async initPage() {
try {
//
const [navRes, resourceRes, warningRes] = await Promise.all([
reqQuickNav(),
reqNewHomeResource(),
reqNewHomeResourceWarning()
]);
this.navList = navRes.data;
if (resourceRes.status) {
this.viewList = resourceRes.data || [];
} else {
this.$message.error(resourceRes.msg);
}
if (warningRes.status) {
this.tableData = warningRes.data || [];
} else {
this.$message.error(warningRes.msg);
}
//
this.initUserInfo();
//
await this.initBalance();
} catch (error) {
console.error('初始化页面失败:', error);
this.$message.error('页面初始化失败');
}
},
initUserInfo() {
const userInfoStr = localStorage.getItem("user_info");
if (userInfoStr) {
try {
this.userInfo = JSON.parse(userInfoStr);
} catch (e) {
console.error('解析用户信息失败:', e);
this.userInfo = {};
}
}
},
async initBalance() {
try {
// sessionStorage
const sessionBalance = sessionStorage.getItem('mybalance');
if (sessionBalance) {
this.localBalance = sessionBalance;
}
//
if (this.userInfo.id) {
await this.fetchUserBalance();
}
// Vuex
if (this.mybalance && this.mybalance !== '0.00') {
this.localBalance = this.mybalance;
sessionStorage.setItem('mybalance', this.mybalance);
}
} catch (error) {
console.error('初始化余额失败:', error);
// 使
this.localBalance = '0.00';
}
},
async fetchUserBalance() {
setTimeout(() => {
const mockBalance = '100.00';
this.localBalance = mockBalance;
sessionStorage.setItem('mybalance', mockBalance);
this.$store.commit('user/SET_MYBALANCE', mockBalance);
}, 100);
},
goBaidu(item) { goBaidu(item) {
this.$store.commit('setRedirectUrl', item.url) this.$store.commit('setRedirectUrl', item.url)
localStorage.setItem('redirectUrl', item.url) localStorage.setItem('redirectUrl', item.url)
@ -240,37 +146,15 @@ export default Vue.extend({
} }
}) })
}, },
initMybalance() {
handleTodoClick(item) { return sessionStorage.getItem('mybalance') || '0.00'
//
switch (item.type) {
case 'pending_payment':
// this.$router.push('/pending-payment');
break;
case 'pending_renewal':
// this.$router.push('/pending-renewal');
break;
case 'processing':
// this.$router.push('/processing');
break;
case 'message':
// this.$router.push('/messages');
break;
}
}
}, },
//
watch: {
'userInfo.id': {
handler(newVal) {
if (newVal) {
this.fetchUserBalance();
}
}, },
immediate: true computed: {
} ...mapState({
} mybalance: state => state.user.mybalance,
})
},
}) })
</script> </script>
@ -486,72 +370,33 @@ export default Vue.extend({
} }
} }
/* 待办事项样式 */ .announcements {
.todo { .announcement-list {
.todo-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
li { li {
cursor: pointer; padding: 10px 0;
transition: all 0.3s ease; border-bottom: 1px solid #eee;
&:hover {
transform: translateY(-2px);
.todo-item {
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}
}
}
.todo-item {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: 1px solid #ebeef5;
.todo-icon { &:last-child {
width: 40px; border-bottom: none;
height: 40px; }
border-radius: 50%;
background: linear-gradient(135deg, #409eff, #64b5f6);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
i { i {
font-size: 18px; color: #e6a23c;
color: white; margin-right: 10px;
} flex-shrink: 0;
} }
.todo-content { span {
flex: 1;
min-width: 0;
.todo-title {
font-size: 14px;
color: #606266; color: #606266;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} white-space: nowrap;
.todo-count {
font-size: 20px;
font-weight: bold;
color: #303133;
}
} }
} }
} }
@ -595,9 +440,5 @@ export default Vue.extend({
.overView { .overView {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
} }
.todo-list {
grid-template-columns: 1fr !important;
}
} }
</style> </style>