uptada
This commit is contained in:
parent
0d73cba8bf
commit
90eb714995
@ -1,21 +1,19 @@
|
||||
<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="all" /> -->
|
||||
|
||||
<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-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>
|
||||
@ -29,102 +27,193 @@
|
||||
</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="set">重置</el-button>
|
||||
<el-button type="primary" class="searchSelectIcon" @click="resetAllFilters">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="pcCard" v-else style="height:80px;display: flex;justify-content: flex-start;align-items: center;">
|
||||
<el-row :span="24">
|
||||
<el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
|
||||
<el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
|
||||
width="130px" size="small">
|
||||
<!-- <el-option label="全部" value="all" /> -->
|
||||
<!-- 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="0" />
|
||||
<el-option label="订单状态:已支付" value="1" />
|
||||
<el-option label="订单状态:已取消" value="3" />
|
||||
<el-option label="订单状态:已取消" value="3" /> -->
|
||||
</el-select>
|
||||
<el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
|
||||
class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
|
||||
<div v-if="select == 'order_date'">
|
||||
<div style="display:flex;margin-left:10px;">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
|
||||
@click="set">重置
|
||||
</el-button>
|
||||
<span
|
||||
style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
|
||||
<div style="width: 250px;line-height: 36px">
|
||||
<el-skeleton animated v-if="all_price_show" rows="2" />
|
||||
<span v-else> ¥ {{ all_price }}</span>
|
||||
<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>
|
||||
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 类型筛选 -->
|
||||
<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 - 280px)" v-loading="all_price_show">
|
||||
<!-- 序号 -->
|
||||
<el-table-column label="序号" width="80">
|
||||
<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">
|
||||
{{ scope.$index + 1 }}
|
||||
{{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 订单名称 -->
|
||||
<el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
|
||||
<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="300" header-align="center" prop="id" label="订单号"></el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="订单原价">
|
||||
<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">
|
||||
<!-- <div style="padding-left: 35px">-->
|
||||
￥{{ scope.row.countprice }}
|
||||
<!-- </div>-->
|
||||
￥{{ 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">
|
||||
<!-- {{ orderTypeMap(scope.row.business_op) }}-->
|
||||
<el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
|
||||
{{ orderTypeMap(scope.row.business_op).text }}
|
||||
<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 v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
|
||||
{{ getResult(scope.row.order_status) }}
|
||||
</el-tag>
|
||||
<el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
|
||||
{{ getResult(scope.row.order_status) }}
|
||||
</el-tag>
|
||||
<el-tag v-else style="padding: 0 5px" type="info" effect="dark">
|
||||
{{ getResult(scope.row.order_status) }}
|
||||
<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 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">
|
||||
查看详情
|
||||
@ -133,12 +222,12 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分 页-->
|
||||
<!-- 分页 -->
|
||||
<div class="page">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
|
||||
:page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
<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>
|
||||
@ -148,15 +237,19 @@
|
||||
import { getOrderAPI } from "@/api/product/product";
|
||||
|
||||
export default {
|
||||
name: 'OrderManagement',
|
||||
data() {
|
||||
return {
|
||||
|
||||
all_price_show: true,//金额显示骨架屏
|
||||
// 获取用户代理字P串
|
||||
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: [{
|
||||
@ -188,11 +281,30 @@ export default {
|
||||
value1: '',
|
||||
select: "",
|
||||
tableData: [],
|
||||
page: 1,
|
||||
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: [
|
||||
{
|
||||
@ -207,82 +319,31 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
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: {
|
||||
// 订单类型映射
|
||||
orderTypeMap(type) {
|
||||
switch (type) {
|
||||
case 'BUY_REVERSE':
|
||||
// return <el-tag type="danger"></el-tag>;
|
||||
return { text: "退款", type: "danger" };
|
||||
case 'RENEW':
|
||||
return { text: "续费", type: "primary" };
|
||||
case 'BUY':
|
||||
return { text: "购买", type: "success" };
|
||||
default:
|
||||
return { text: "-", type: "primary" };
|
||||
}
|
||||
// 获取订单类型配置
|
||||
getOrderTypeConfig(type) {
|
||||
return this.orderTypes[type] || { text: "-", type: "primary", buttonType: "" };
|
||||
},
|
||||
getOrder(data) {//获取订单
|
||||
let params = {};
|
||||
if (this.select) {
|
||||
if (this.select === 'id' && this.searchValue) {
|
||||
params['type'] = '200'
|
||||
params['id'] = this.searchValue
|
||||
}
|
||||
if (this.select === 'order_date' && this.value1) {
|
||||
params['start_time'] = data[0]
|
||||
params['end_time'] = data[1]
|
||||
params['type'] = '200'
|
||||
}
|
||||
if (this.select == '0') {
|
||||
params['type'] = '200'
|
||||
params['order_status'] = '0'
|
||||
}
|
||||
if (this.select == '1') {
|
||||
params['type'] = '200'
|
||||
params['order_status'] = '1'
|
||||
}
|
||||
if (this.select == '3') {
|
||||
params['type'] = '200'
|
||||
params['order_status'] = '3'
|
||||
}
|
||||
}
|
||||
getOrderAPI(params).then((res) => {
|
||||
this.all_price_show = false
|
||||
if (res.status == true) {
|
||||
this.tableData = res.data;
|
||||
this.all_price = res.all_price
|
||||
}
|
||||
});
|
||||
},
|
||||
change(e) {//选择时间
|
||||
this.value1 = e
|
||||
this.getOrder(e)
|
||||
},
|
||||
set() {//重置
|
||||
this.value1 = null
|
||||
this.searchValue = null
|
||||
this.select = null
|
||||
this.getOrder()
|
||||
|
||||
// 获取订单状态配置
|
||||
getOrderStatusConfig(status) {
|
||||
const statusConfig = this.orderStatuses.find(s => s.value === status);
|
||||
return statusConfig || { text: this.getOrderStatusText(status), tagType: 'info' };
|
||||
},
|
||||
selectSearch(e) { //下拉搜索事件
|
||||
this.select = e
|
||||
this.getOrder(e)
|
||||
},
|
||||
input(e) {//input事件
|
||||
this.searchValue = e
|
||||
this.getOrder(e)
|
||||
},
|
||||
orderDetails(row) { //查看订单详情
|
||||
this.$router.push({ name: "orderDetil", query: { id: row.id } });
|
||||
},
|
||||
getResult(data) {
|
||||
switch (data) {
|
||||
|
||||
// 获取订单状态文本
|
||||
getOrderStatusText(status) {
|
||||
switch (status) {
|
||||
case "0":
|
||||
return "未支付";
|
||||
case "1":
|
||||
@ -293,36 +354,197 @@ export default {
|
||||
return "已取消";
|
||||
case "4":
|
||||
return "后付费";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
},
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
|
||||
// 处理订单类型筛选
|
||||
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>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.orderManagement {
|
||||
height: calc(100vh - 180px);
|
||||
|
||||
.mobileCaed {
|
||||
height: 100px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.searchSelect {
|
||||
width: 150px;
|
||||
@ -334,13 +556,52 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.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: 5px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.searchSelectIcon {
|
||||
padding: 0 5px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.price {
|
||||
@ -356,40 +617,121 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// PC端优化样式
|
||||
.pcCard {
|
||||
.search {
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.input-with-select {
|
||||
width: 60%;
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// height: 60px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.searchSelect {
|
||||
width: 150px;
|
||||
.search-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-select {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.searchSelectIcon {
|
||||
width: 30px;
|
||||
.search-input {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.date-picker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orderList {
|
||||
margin-top: 10px;
|
||||
// height: calc(100vh - 180px);
|
||||
.filter-status-pc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 8px;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
.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{
|
||||
|
||||
.page {
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-table .el-table__header {
|
||||
|
||||
// 全局样式调整
|
||||
::v-deep .el-table .el-table__header {
|
||||
background-color: #d0cff8;
|
||||
}
|
||||
|
||||
@ -397,4 +739,45 @@ export default {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user