uptada
This commit is contained in:
parent
834c11882c
commit
c1f987c145
@ -345,7 +345,7 @@ export const asyncRoutes = [
|
||||
name: 'BaiduOrder',
|
||||
meta: {
|
||||
title: "百度订单",
|
||||
fullPath: "/orderManagement/baidu",
|
||||
fullPath: "/product/overview",
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
<div class="orderManagement">
|
||||
<!-- 移动端搜索框 -->
|
||||
<el-card class="mobileCaed" v-if="isMobile">
|
||||
<!-- 已移除路由参数提示 -->
|
||||
|
||||
<el-row :span="24">
|
||||
<el-col :span="24" class="search">
|
||||
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
|
||||
@ -81,6 +83,8 @@
|
||||
|
||||
<!-- PC端头部 -->
|
||||
<el-card class="pcCard" v-else>
|
||||
<!-- 已移除路由参数提示 -->
|
||||
|
||||
<!-- 头 -->
|
||||
<div class="top">
|
||||
<div class="header-container">
|
||||
@ -295,6 +299,9 @@ export default {
|
||||
userId: sessionStorage.getItem("userId"),
|
||||
dialogVisible: false,
|
||||
|
||||
// 当前激活的筛选类型（来自路由参数）
|
||||
activeFilterType: null,
|
||||
|
||||
// 订单类型筛选
|
||||
businessOpFilter: null,
|
||||
// 订单状态筛选
|
||||
@ -331,25 +338,69 @@ export default {
|
||||
computed: {
|
||||
// 检查是否有活跃的筛选条件
|
||||
hasActiveFilters() {
|
||||
return this.businessOpFilter || this.orderStatusFilter;
|
||||
return this.businessOpFilter || this.orderStatusFilter || this.activeFilterType;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrder();
|
||||
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
||||
this.initFromRouteQuery();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化，当从首页跳转过来时重新处理参数
|
||||
'$route'(to, from) {
|
||||
this.initFromRouteQuery();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 从路由参数初始化筛选条件
|
||||
initFromRouteQuery() {
|
||||
const query = this.$route.query;
|
||||
console.log('路由参数:', query);
|
||||
|
||||
if (query.filterType) {
|
||||
this.activeFilterType = query.filterType;
|
||||
|
||||
// 根据不同的筛选类型设置对应的筛选条件
|
||||
switch(query.filterType) {
|
||||
case 'pendingPayment':
|
||||
// 待支付：显示未支付和续费的数据
|
||||
this.orderStatusFilter = '0';
|
||||
this.businessOpFilter = 'RENEW';
|
||||
break;
|
||||
case 'pendingRenewal':
|
||||
// 待续费：只显示续费的数据
|
||||
this.businessOpFilter = 'RENEW';
|
||||
this.orderStatusFilter = null;
|
||||
break;
|
||||
case 'processing':
|
||||
// 处理中：显示未支付的数据
|
||||
this.orderStatusFilter = '0';
|
||||
this.businessOpFilter = null;
|
||||
break;
|
||||
}
|
||||
|
||||
// 重置其他筛选条件
|
||||
this.value1 = null;
|
||||
this.searchValue = null;
|
||||
this.select = null;
|
||||
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
} else {
|
||||
// 如果没有路由参数，使用当前的筛选条件
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化订单日期为 XXXX-XX-XX 格式
|
||||
formatOrderDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
|
||||
try {
|
||||
// 处理各种可能的日期格式
|
||||
const date = new Date(dateString);
|
||||
if (isNaN(date.getTime())) {
|
||||
// 如果 Date 解析失败，尝试直接处理字符串
|
||||
if (typeof dateString === 'string') {
|
||||
// 移除可能的时间部分
|
||||
const datePart = dateString.split(' ')[0];
|
||||
const parts = datePart.split('-');
|
||||
if (parts.length === 3) {
|
||||
@ -359,17 +410,16 @@ export default {
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
return dateString; // 如果无法处理，返回原字符串
|
||||
return dateString;
|
||||
}
|
||||
|
||||
// 标准日期格式化
|
||||
const year = date.getFullYear().toString();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
} catch (error) {
|
||||
console.error('日期格式化错误:', error, dateString);
|
||||
return dateString; // 出错时返回原字符串
|
||||
return dateString;
|
||||
}
|
||||
},
|
||||
|
||||
@ -405,8 +455,8 @@ export default {
|
||||
// 处理订单类型筛选
|
||||
handleBusinessOpFilter(type) {
|
||||
console.log("订单类型筛选:", type, this.getOrderTypeConfig(type).text);
|
||||
this.activeFilterType = null;
|
||||
|
||||
// 如果点击已经选中的按钮，则取消筛选
|
||||
if (this.businessOpFilter === type) {
|
||||
this.businessOpFilter = null;
|
||||
} else {
|
||||
@ -419,6 +469,7 @@ export default {
|
||||
// 清除订单类型筛选
|
||||
clearBusinessOpFilter() {
|
||||
this.businessOpFilter = null;
|
||||
this.activeFilterType = null;
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
},
|
||||
@ -426,8 +477,8 @@ export default {
|
||||
// 处理订单状态筛选
|
||||
handleOrderStatusFilter(status) {
|
||||
console.log("订单状态筛选:", status, this.getOrderStatusText(status));
|
||||
this.activeFilterType = null;
|
||||
|
||||
// 如果点击已经选中的按钮，则取消筛选
|
||||
if (this.orderStatusFilter === status) {
|
||||
this.orderStatusFilter = null;
|
||||
} else {
|
||||
@ -440,6 +491,7 @@ export default {
|
||||
// 清除订单状态筛选
|
||||
clearOrderStatusFilter() {
|
||||
this.orderStatusFilter = null;
|
||||
this.activeFilterType = null;
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
},
|
||||
@ -451,8 +503,12 @@ export default {
|
||||
this.select = null;
|
||||
this.businessOpFilter = null;
|
||||
this.orderStatusFilter = null;
|
||||
this.activeFilterType = null;
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
|
||||
// 清除路由参数
|
||||
this.$router.replace({ path: '/product/overview', query: {} });
|
||||
},
|
||||
|
||||
// 获取订单数据
|
||||
@ -460,7 +516,7 @@ export default {
|
||||
let params = {
|
||||
page: this.pagination.page,
|
||||
size: this.pagination.size,
|
||||
type: '200' // 确保始终传递type参数
|
||||
type: '200'
|
||||
};
|
||||
|
||||
// 订单号搜索
|
||||
@ -544,6 +600,7 @@ export default {
|
||||
|
||||
selectSearch(e) {
|
||||
this.select = e;
|
||||
this.activeFilterType = null;
|
||||
// 当选择状态选项时，直接触发搜索
|
||||
if (['0', '1', '3'].includes(e)) {
|
||||
this.getOrder();
|
||||
@ -560,6 +617,7 @@ export default {
|
||||
|
||||
input(e) {
|
||||
this.searchValue = e;
|
||||
this.activeFilterType = null;
|
||||
this.pagination.page = 1;
|
||||
this.getOrder();
|
||||
},
|
||||
@ -663,6 +721,7 @@ export default {
|
||||
// PC端优化样式
|
||||
.pcCard {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.btm{
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
@ -708,7 +767,6 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// height: 60px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.search-group {
|
||||
@ -804,11 +862,11 @@ export default {
|
||||
::v-deep .el-table {
|
||||
.el-table__row {
|
||||
width: 100%;
|
||||
height: 56px; // 增加行高
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 12px 0; // 增加单元格内边距
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
@ -821,7 +879,6 @@ export default {
|
||||
|
||||
.el-button {
|
||||
height: 32px;
|
||||
// line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
|
||||
<div class="section">
|
||||
<div class="bigTitle">到期预警</div>
|
||||
<!-- 表格容器用于控制宽度和溢出 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
height="250px"
|
||||
@ -54,7 +53,6 @@
|
||||
</div>
|
||||
|
||||
<div class="rightBox">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user card">
|
||||
<div class="userImg">
|
||||
<div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
|
||||
@ -79,7 +77,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待办事项组件 -->
|
||||
<div class="todos card">
|
||||
<div class="title">待办事项</div>
|
||||
<ul class="todo-list">
|
||||
@ -96,7 +93,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息中心弹窗 -->
|
||||
<MessageCenter
|
||||
ref="messageCenter"
|
||||
:visible.sync="messageCenterVisible"
|
||||
@ -110,8 +106,8 @@ import Vue from 'vue'
|
||||
import { mapState } from "vuex";
|
||||
import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
|
||||
import { editReachargelogAPI } from "@/api/finance/customerRechargeManagement";
|
||||
import { getUnreadmsgAPI } from "@/api/login"; // 导入站内信API
|
||||
import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'; // 导入消息中心组件
|
||||
import { getUnreadmsgAPI } from "@/api/login";
|
||||
import MessageCenter from '@/components/MessageCenter/MessageCenter.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
@ -129,19 +125,19 @@ export default Vue.extend({
|
||||
},
|
||||
viewList: [],
|
||||
navList: [],
|
||||
mybalance: 0, // 余额
|
||||
mybalance: 0,
|
||||
todoList: [
|
||||
{ name: '待支付', count: 1 },
|
||||
{ name: '待续费', count: 2 },
|
||||
{ name: '处理中', count: 2 },
|
||||
{ name: '站内信', count: 0 } // 初始值为0，将从API获取
|
||||
{ name: '待支付', count: 7 },
|
||||
{ name: '待续费', count: 3 },
|
||||
{ name: '处理中', count: 7 },
|
||||
{ name: '站内信', count: 0 }
|
||||
],
|
||||
messageCenterVisible: false // 控制消息中心弹窗显示
|
||||
messageCenterVisible: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initMybalance();
|
||||
this.getUnreadMsgCount(); // 获取未读消息数量
|
||||
this.getUnreadMsgCount();
|
||||
},
|
||||
mounted() {
|
||||
reqQuickNav().then(res => {
|
||||
@ -182,12 +178,10 @@ export default Vue.extend({
|
||||
this.mybalance = res.data
|
||||
}
|
||||
},
|
||||
// 获取未读消息数量
|
||||
async getUnreadMsgCount() {
|
||||
try {
|
||||
const res = await getUnreadmsgAPI();
|
||||
if (res.status) {
|
||||
// 更新站内信的未读数量
|
||||
const messageItem = this.todoList.find(item => item.name === '站内信');
|
||||
if (messageItem) {
|
||||
messageItem.count = res.data || 0;
|
||||
@ -200,24 +194,45 @@ export default Vue.extend({
|
||||
this.$message.error('获取未读消息失败');
|
||||
}
|
||||
},
|
||||
// 处理待办事项点击
|
||||
handleTodoClick(todoName) {
|
||||
// 根据不同的待办事项类型进行跳转
|
||||
if (todoName === '站内信') {
|
||||
// 打开消息中心弹窗
|
||||
this.openMessageCenter();
|
||||
} else {
|
||||
// 待支付、待续费、处理中都跳转到产品概览页面
|
||||
this.$router.push('/product/overview');
|
||||
let query = {};
|
||||
|
||||
switch(todoName) {
|
||||
case '待支付':
|
||||
// 待支付：显示未支付和续费的数据
|
||||
query = {
|
||||
filterType: 'processing' // 使用明确的标识
|
||||
};
|
||||
break;
|
||||
case '待续费':
|
||||
// 待续费：只显示续费的数据
|
||||
query = {
|
||||
filterType: 'pendingPayment'
|
||||
};
|
||||
break;
|
||||
case '处理中':
|
||||
// 处理中：显示未支付的数据
|
||||
query = {
|
||||
filterType: 'processing'
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
console.log(`跳转到资源概览，筛选类型: ${todoName}`, query);
|
||||
|
||||
this.$router.push({
|
||||
path: '/product/overview',
|
||||
query: query
|
||||
});
|
||||
}
|
||||
},
|
||||
// 打开消息中心
|
||||
openMessageCenter() {
|
||||
this.messageCenterVisible = true;
|
||||
},
|
||||
// 处理未读消息数量更新
|
||||
handleUnreadCountUpdate(count) {
|
||||
// 更新站内信的未读数量
|
||||
const messageItem = this.todoList.find(item => item.name === '站内信');
|
||||
if (messageItem) {
|
||||
messageItem.count = count || 0;
|
||||
@ -233,71 +248,63 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 样式保持不变，与之前相同 */
|
||||
.mainBox {
|
||||
background: #f5f7fa;
|
||||
width: 100%;
|
||||
/* 使用视口高度减去一个固定值来适应不同屏幕 */
|
||||
height: calc(100vh - 100px); /* 假设顶部导航栏等占 100px */
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
/* 移除 overflow-x: auto; 防止出现横向滚动条 */
|
||||
overflow-y: auto;
|
||||
/* 确保主容器不产生横向溢出 */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.leftBox {
|
||||
/* 使用百分比宽度，更适应容器 */
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0; /* 防止 flex 项目溢出 */
|
||||
min-width: 0;
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
/* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */
|
||||
}
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
/* 使用百分比宽度 */
|
||||
width: 35%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0; /* 防止 flex 项目溢出 */
|
||||
min-width: 0;
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
/* 移除 flex-shrink: 0; 允许在必要时轻微收缩 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格容器样式，用于处理内部可能的溢出 */
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto; /* 表格内部可能出现滚动条 */
|
||||
border-radius: 4px; /* 与表格圆角匹配 */
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 表格样式微调，确保宽度100% */
|
||||
.table-container ::v-deep .el-table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.recUl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 使用 auto-fit 和 minmax 实现更好的自适应 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 15px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -314,7 +321,7 @@ export default Vue.extend({
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0; /* 防止内部内容撑开 */
|
||||
min-width: 0;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
@ -331,8 +338,7 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.overView {
|
||||
/* 覆盖默认的 grid-template-columns */
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 资源概览项更宽 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
|
||||
li {
|
||||
cursor: default;
|
||||
@ -347,7 +353,7 @@ export default Vue.extend({
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-width: 0; /* 防止内部内容撑开 */
|
||||
min-width: 0;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
@ -382,7 +388,7 @@ export default Vue.extend({
|
||||
|
||||
.userImg {
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0; /* 防止头像被压缩 */
|
||||
flex-shrink: 0;
|
||||
|
||||
.imgUser {
|
||||
width: 80px;
|
||||
@ -399,8 +405,8 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.userBox {
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
min-width: 0; /* 防止内容溢出 */
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
@ -434,7 +440,7 @@ export default Vue.extend({
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap; /* 在小屏幕上换行 */
|
||||
flex-wrap: wrap;
|
||||
|
||||
.balance {
|
||||
font-size: 28px;
|
||||
@ -444,8 +450,10 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
|
||||
/* 待办事项样式 */
|
||||
.todos {
|
||||
.title {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.todo-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -505,12 +513,11 @@ export default Vue.extend({
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.mainBox {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
overflow-x: hidden; /* 小屏幕也隐藏横向滚动 */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.leftBox, .rightBox {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user