784 lines
23 KiB
Vue
784 lines
23 KiB
Vue
<template>
|
||
<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="请选择"
|
||
size="small">
|
||
<el-option label="订单号" value="id" />
|
||
<el-option label="订单日期" value="order_date" />
|
||
<el-option label="订单状态:未支付" value="0" />
|
||
<el-option label="订单状态:已支付" value="1" />
|
||
<el-option label="订单状态:已取消" value="3" />
|
||
</el-select>
|
||
<el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select"
|
||
@input="input" v-model="searchValue" clearable></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24" style="margin-top:5px;">
|
||
<div v-if="select == 'order_date'">
|
||
<div class="datePicker">
|
||
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
||
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 筛选状态显示 -->
|
||
<el-row v-if="hasActiveFilters" style="margin-top: 5px;">
|
||
<el-col :span="24">
|
||
<div class="filter-status">
|
||
<span class="filter-label">当前筛选: </span>
|
||
<el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
|
||
{{ getOrderTypeConfig(businessOpFilter).text }}
|
||
</el-tag>
|
||
<el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
|
||
:type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
|
||
{{ getOrderStatusText(orderStatusFilter) }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 移动端类型筛选 -->
|
||
<el-row style="margin-top: 10px;">
|
||
<el-col :span="24">
|
||
<div class="mobile-filter">
|
||
<span class="filter-label">类型:</span>
|
||
<el-button
|
||
v-for="(config, type) in orderTypes"
|
||
:key="type"
|
||
size="mini"
|
||
:type="businessOpFilter === type ? config.buttonType : ''"
|
||
@click="handleBusinessOpFilter(type)">
|
||
{{ config.text }}
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 移动端状态筛选 -->
|
||
<el-row style="margin-top: 5px;">
|
||
<el-col :span="24">
|
||
<div class="mobile-filter">
|
||
<span class="filter-label">状态:</span>
|
||
<el-button
|
||
v-for="status in orderStatuses"
|
||
:key="status.value"
|
||
size="mini"
|
||
:type="orderStatusFilter === status.value ? status.buttonType : ''"
|
||
@click="handleOrderStatusFilter(status.value)">
|
||
{{ status.text }}
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row class="allPrice">
|
||
<el-col :span="24">
|
||
<span class="price" style="font-size: 18px">支付总金额:¥ {{ all_price }}</span>
|
||
<el-button type="primary" class="searchSelectIcon" @click="resetAllFilters">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- PC端头部 -->
|
||
<el-card class="pcCard" v-else>
|
||
<div class="header-container">
|
||
<div class="search-group">
|
||
<el-select v-model="select" filterable @change="selectSearch" class="search-select" placeholder="请选择"
|
||
size="small" style="width: 100px">
|
||
<el-option label="订单号" value="id" />
|
||
<el-option label="订单日期" value="order_date" />
|
||
<!-- <el-option label="订单状态:未支付" value="0" />
|
||
<el-option label="订单状态:已支付" value="1" />
|
||
<el-option label="订单状态:已取消" value="3" /> -->
|
||
</el-select>
|
||
|
||
<el-input size="small" v-show="select == 'id'" placeholder="请输入内容" class="search-input" @input="input"
|
||
v-model="searchValue" clearable style="width: 180px; margin-left: 10px">
|
||
</el-input>
|
||
|
||
<div v-if="select == 'order_date'" class="date-picker-container">
|
||
<el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
|
||
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
|
||
style="width: 240px; margin-left: 10px">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 筛选状态显示 -->
|
||
<div v-if="hasActiveFilters" class="filter-status-pc">
|
||
<span class="filter-label">当前筛选: </span>
|
||
<el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
|
||
{{ getOrderTypeConfig(businessOpFilter).text }}
|
||
</el-tag>
|
||
<el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
|
||
:type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
|
||
{{ getOrderStatusText(orderStatusFilter) }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<div class="stats-group">
|
||
<div class="stat-item">
|
||
<span class="stat-label">累计支付总金额:</span>
|
||
<div class="stat-value">
|
||
<el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
|
||
<span v-else class="price-text">¥ {{ all_price || '0.00' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">累计优惠总金额:</span>
|
||
<div class="stat-value">
|
||
<el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
|
||
<span v-else class="price-text">¥ {{ all_discount || '0.00' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 类型筛选 -->
|
||
<div class="type-filter">
|
||
<span>订单类型筛选：</span>
|
||
<el-button
|
||
v-for="(config, type) in orderTypes"
|
||
:key="type"
|
||
:type="businessOpFilter === type ? config.buttonType : ''"
|
||
@click="handleBusinessOpFilter(type)">
|
||
{{ config.text }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 状态筛选 -->
|
||
<div class="status-filter">
|
||
<span>订单状态筛选：</span>
|
||
<el-button
|
||
v-for="status in orderStatuses"
|
||
:key="status.value"
|
||
:type="orderStatusFilter === status.value ? status.buttonType : ''"
|
||
@click="handleOrderStatusFilter(status.value)">
|
||
{{ status.text }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 重置按钮 -->
|
||
<div class="reset">
|
||
<el-button type="primary" size="small" class="reset-btn" @click="resetAllFilters"
|
||
style="margin-left: 10px; padding: 7px 15px">
|
||
重置
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 表格部分 -->
|
||
<el-card class="orderList">
|
||
<el-table border :data="tableData" class="table" height="calc(100vh - 264px)" v-loading="all_price_show">
|
||
<el-table-column label="序号" width="180">
|
||
<template slot-scope="scope">
|
||
{{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" min-width="180" header-align="center" prop="product_name" label="产品名称">
|
||
</el-table-column>
|
||
<el-table-column align="center" min-width="180" header-align="center" prop="id" label="订单号"></el-table-column>
|
||
<el-table-column align="center" header-align="center" label="订单原价" prop="list_price">
|
||
<template slot-scope="scope">
|
||
￥{{ scope.row.list_price }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="订单折后价">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="订单类型">
|
||
<template slot-scope="scope">
|
||
<el-tag :style="{ padding: '0 8px' }" :type="getOrderTypeConfig(scope.row.business_op).type">
|
||
{{ getOrderTypeConfig(scope.row.business_op).text }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="订单状态">
|
||
<template slot-scope="scope">
|
||
<el-tag :style="{ padding: '0 5px' }" :type="getOrderStatusConfig(scope.row.order_status).tagType" effect="dark">
|
||
{{ getOrderStatusConfig(scope.row.order_status).text }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
|
||
<el-table-column align="center" header-align="center" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
|
||
@click="orderDetails(scope.row)" style="padding: 8px 15px">去支付
|
||
</el-button>
|
||
<el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
|
||
查看详情
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<div class="page">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="pagination.page" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.size"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrderAPI } from "@/api/product/product";
|
||
|
||
export default {
|
||
name: 'OrderManagement',
|
||
data() {
|
||
return {
|
||
pagination: {
|
||
page: 1,
|
||
size: 10,
|
||
total: 0
|
||
},
|
||
all_price_show: true,
|
||
userAgent: window.navigator.userAgent,
|
||
isMobile: false,
|
||
all_price: '',
|
||
all_discount: '0.00',
|
||
showDate: false,
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '最近一周',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}]
|
||
},
|
||
value1: '',
|
||
select: "",
|
||
tableData: [],
|
||
searchValue: null,
|
||
order_status_select: null,
|
||
userId: sessionStorage.getItem("userId"),
|
||
dialogVisible: false,
|
||
|
||
// 订单类型筛选
|
||
businessOpFilter: null,
|
||
// 订单状态筛选
|
||
orderStatusFilter: null,
|
||
|
||
// 订单类型配置
|
||
orderTypes: {
|
||
'BUY_REVERSE': { text: '退费', type: 'danger', buttonType: 'danger' },
|
||
'RENEW': { text: '续费', type: 'primary', buttonType: 'primary' },
|
||
'BUY': { text: '购买', type: 'success', buttonType: 'success' }
|
||
},
|
||
|
||
// 订单状态配置
|
||
orderStatuses: [
|
||
{ value: '1', text: '已支付', buttonType: 'success', tagType: 'success' },
|
||
{ value: '0', text: '未支付', buttonType: 'danger', tagType: 'warning' },
|
||
{ value: '3', text: '已取消', buttonType: 'info', tagType: 'info' }
|
||
],
|
||
|
||
orderDetail: {
|
||
order_goods: [
|
||
{
|
||
productid: "",
|
||
amount: "",
|
||
list_price: "",
|
||
quantity: "",
|
||
discount: "",
|
||
price: "",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
// 检查是否有活跃的筛选条件
|
||
hasActiveFilters() {
|
||
return this.businessOpFilter || this.orderStatusFilter;
|
||
}
|
||
},
|
||
created() {
|
||
this.getOrder();
|
||
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
||
},
|
||
methods: {
|
||
// 获取订单类型配置
|
||
getOrderTypeConfig(type) {
|
||
return this.orderTypes[type] || { text: "-", type: "primary", buttonType: "" };
|
||
},
|
||
|
||
// 获取订单状态配置
|
||
getOrderStatusConfig(status) {
|
||
const statusConfig = this.orderStatuses.find(s => s.value === status);
|
||
return statusConfig || { text: this.getOrderStatusText(status), tagType: 'info' };
|
||
},
|
||
|
||
// 获取订单状态文本
|
||
getOrderStatusText(status) {
|
||
switch (status) {
|
||
case "0":
|
||
return "未支付";
|
||
case "1":
|
||
return "已支付";
|
||
case "2":
|
||
return "已关闭";
|
||
case "3":
|
||
return "已取消";
|
||
case "4":
|
||
return "后付费";
|
||
default:
|
||
return "未知状态";
|
||
}
|
||
},
|
||
|
||
// 处理订单类型筛选
|
||
handleBusinessOpFilter(type) {
|
||
console.log("订单类型筛选:", type, this.getOrderTypeConfig(type).text);
|
||
|
||
// 如果点击已经选中的按钮，则取消筛选
|
||
if (this.businessOpFilter === type) {
|
||
this.businessOpFilter = null;
|
||
} else {
|
||
this.businessOpFilter = type;
|
||
}
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
// 清除订单类型筛选
|
||
clearBusinessOpFilter() {
|
||
this.businessOpFilter = null;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
// 处理订单状态筛选
|
||
handleOrderStatusFilter(status) {
|
||
console.log("订单状态筛选:", status, this.getOrderStatusText(status));
|
||
|
||
// 如果点击已经选中的按钮，则取消筛选
|
||
if (this.orderStatusFilter === status) {
|
||
this.orderStatusFilter = null;
|
||
} else {
|
||
this.orderStatusFilter = status;
|
||
}
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
// 清除订单状态筛选
|
||
clearOrderStatusFilter() {
|
||
this.orderStatusFilter = null;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
// 重置所有筛选条件
|
||
resetAllFilters() {
|
||
this.value1 = null;
|
||
this.searchValue = null;
|
||
this.select = null;
|
||
this.businessOpFilter = null;
|
||
this.orderStatusFilter = null;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
// 获取订单数据
|
||
getOrder() {
|
||
let params = {
|
||
page: this.pagination.page,
|
||
size: this.pagination.size,
|
||
type: '200' // 确保始终传递type参数
|
||
};
|
||
|
||
// 订单号搜索
|
||
if (this.select === 'id' && this.searchValue) {
|
||
params['id'] = this.searchValue;
|
||
}
|
||
|
||
// 日期范围搜索
|
||
if (this.select === 'order_date' && this.value1) {
|
||
params['start_time'] = this.value1[0];
|
||
params['end_time'] = this.value1[1];
|
||
}
|
||
|
||
// 下拉选择的状态筛选
|
||
if (['0', '1', '3'].includes(this.select)) {
|
||
params['order_status'] = this.select;
|
||
}
|
||
|
||
// 按钮状态筛选 - 优先级高于下拉选择
|
||
if (this.orderStatusFilter) {
|
||
params['order_status'] = this.orderStatusFilter;
|
||
}
|
||
|
||
// 订单类型筛选
|
||
if (this.businessOpFilter) {
|
||
params['business_op'] = this.businessOpFilter;
|
||
}
|
||
|
||
console.log("API请求参数:", params);
|
||
|
||
this.all_price_show = true;
|
||
getOrderAPI(params).then((res) => {
|
||
this.all_price_show = false;
|
||
console.log("API响应数据:", res);
|
||
|
||
if (res.status === true || res.code === 200) {
|
||
this.tableData = res.data || [];
|
||
this.all_price = res.all_price || '0.00';
|
||
this.all_discount = res.all_discount || '0.00';
|
||
|
||
// 修复分页总数设置
|
||
if (res.pagination && res.pagination.total !== undefined) {
|
||
this.pagination.total = res.pagination.total;
|
||
} else if (res.total !== undefined) {
|
||
this.pagination.total = res.total;
|
||
} else {
|
||
this.pagination.total = this.tableData.length;
|
||
}
|
||
|
||
// 调试信息：显示筛选后的数据
|
||
if (this.businessOpFilter) {
|
||
const filteredData = this.tableData.filter(item => item.business_op === this.businessOpFilter);
|
||
console.log(`类型筛选结果: ${this.getOrderTypeConfig(this.businessOpFilter).text}`, filteredData);
|
||
}
|
||
} else {
|
||
this.$message.error(res.message || '获取数据失败');
|
||
}
|
||
}).catch(error => {
|
||
console.error("获取订单数据失败:", error);
|
||
this.all_price_show = false;
|
||
this.$message.error('请求失败，请检查网络连接');
|
||
});
|
||
},
|
||
|
||
handleSizeChange(val) {
|
||
this.pagination.size = val;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
handleCurrentChange(val) {
|
||
this.pagination.page = val;
|
||
this.getOrder();
|
||
},
|
||
|
||
change(e) {
|
||
this.value1 = e;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
selectSearch(e) {
|
||
this.select = e;
|
||
// 当选择状态选项时，直接触发搜索
|
||
if (['0', '1', '3'].includes(e)) {
|
||
this.getOrder();
|
||
} else {
|
||
// 对于其他选项（如订单号、日期），清空其他搜索条件
|
||
if (e !== 'order_date') {
|
||
this.value1 = null;
|
||
}
|
||
if (e !== 'id') {
|
||
this.searchValue = null;
|
||
}
|
||
}
|
||
},
|
||
|
||
input(e) {
|
||
this.searchValue = e;
|
||
this.pagination.page = 1;
|
||
this.getOrder();
|
||
},
|
||
|
||
orderDetails(row) {
|
||
this.$router.push({ name: "orderDetil", query: { id: row.id } });
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.orderManagement {
|
||
height: calc(100vh - 180px);
|
||
|
||
.mobileCaed {
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
padding: 10px;
|
||
|
||
.search {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: 100%;
|
||
|
||
.searchSelect {
|
||
width: 150px;
|
||
}
|
||
|
||
.input-with-select {
|
||
width: 150px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.filter-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
|
||
.filter-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-tag {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.mobile-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
|
||
.filter-label {
|
||
margin-right: 8px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-button {
|
||
margin-right: 5px;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.allPrice {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.searchSelectIcon {
|
||
padding: 0 5px;
|
||
height: 20px;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.datePicker {
|
||
display: flex;
|
||
margin-left: 10px;
|
||
width: auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
// PC端优化样式
|
||
.pcCard {
|
||
margin-bottom: 10px;
|
||
|
||
.header-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
// height: 60px;
|
||
flex-wrap: wrap;
|
||
|
||
.search-group {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.search-select {
|
||
width: 130px;
|
||
}
|
||
|
||
.search-input {
|
||
width: 180px;
|
||
}
|
||
|
||
.date-picker-container {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.filter-status-pc {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-left: 8px;
|
||
|
||
.filter-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-tag {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.stats-group {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
.stat-label {
|
||
color: #606266;
|
||
margin-right: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stat-value {
|
||
min-width: 80px;
|
||
|
||
.price-text {
|
||
color: #e6a23c;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.type-filter, .status-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20px;
|
||
|
||
span {
|
||
margin-right: 8px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-button {
|
||
margin-right: 5px;
|
||
padding: 7px 12px;
|
||
}
|
||
}
|
||
|
||
.reset {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderList {
|
||
margin-top: 10px;
|
||
height: calc(100vh - 180px);
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page {
|
||
text-align: center;
|
||
margin: 20px;
|
||
}
|
||
|
||
// 全局样式调整
|
||
::v-deep .el-table .el-table__header {
|
||
background-color: #d0cff8;
|
||
}
|
||
|
||
::v-deep .el-tag {
|
||
padding: 0 8px !important;
|
||
}
|
||
|
||
// 响应式调整
|
||
@media screen and (max-width: 1200px) {
|
||
.pcCard .header-container {
|
||
height: auto;
|
||
padding: 10px 0;
|
||
|
||
.search-group,
|
||
.stats-group,
|
||
.type-filter,
|
||
.status-filter,
|
||
.reset {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 按钮选中状态优化
|
||
::v-deep .el-button--primary:focus,
|
||
::v-deep .el-button--primary:hover,
|
||
::v-deep .el-button--success:focus,
|
||
::v-deep .el-button--success:hover,
|
||
::v-deep .el-button--danger:focus,
|
||
::v-deep .el-button--danger:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
// 移动端适配
|
||
@media screen and (max-width: 768px) {
|
||
.mobile-filter {
|
||
flex-wrap: wrap;
|
||
|
||
.filter-label {
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.el-button {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|