zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

运营后台-订单列表，订单状态展示优化

master
pikachu1995@126.com 2023-07-05 11:11:39 +08:00
parent 3c83179579
commit 8dbd5429f0
1 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
manager/src/views/order/order/orderList.vue
View File

@ -53,23 +53,23 @@
style="width: 160px" style="width: 160px"
></DatePicker> ></DatePicker>
</Form-item> </Form-item>
<Form-item label="订单状态" prop="orderStatus"> <!-- <Form-item label="订单状态" prop="orderStatus">-->
<Select <!-- <Select-->
v-model="searchForm.orderStatus" <!-- v-model="searchForm.orderStatus"-->
placeholder="请选择" <!-- placeholder="请选择"-->
clearable <!-- clearable-->
style="width: 160px" <!-- style="width: 160px"-->
> <!-- >-->
<Option value="UNPAID">未付款</Option> <!-- <Option value="UNPAID">未付款</Option>-->
<Option value="PAID">已付款</Option> <!-- <Option value="PAID">已付款</Option>-->
<Option value="UNDELIVERED">待发货</Option> <!-- <Option value="UNDELIVERED">待发货</Option>-->
<Option value="DELIVERED">已发货</Option> <!-- <Option value="DELIVERED">已发货</Option>-->
<Option value="COMPLETED">已完成</Option> <!-- <Option value="COMPLETED">已完成</Option>-->
<Option value="TAKE">待核验</Option> <!-- <Option value="TAKE">待核验</Option>-->
<Option value="CANCELLED">已取消</Option> <!-- <Option value="CANCELLED">已取消</Option>-->
<Option value="STAY_PICKED_UP">待自提</Option> <!-- <Option value="STAY_PICKED_UP">待自提</Option>-->
</Select> <!-- </Select>-->
</Form-item> <!-- </Form-item>-->
<Button <Button
@click="handleSearch" @click="handleSearch"
type="primary" type="primary"
@ -90,6 +90,12 @@
</download-excel> </download-excel>
</div> </div>
<div class="order-tab">
<div v-for="(item,index) in order_status" :key="index" :class="{'current': current_status === item.value}" @click="orderStatusClick(item)">
{{item.title}}
</div>
</div>
<Table <Table
:loading="loading" :loading="loading"
border border
@ -317,6 +323,19 @@ export default {
], ],
data: [], // 表单数据 data: [], // 表单数据
total: 0, // 表单数据总数 total: 0, // 表单数据总数
order_status: [
{title: '全部', value: ''},
{title: '未付款', value: 'UNPAID'},
{title: '已付款', value: 'PAID'},
{title: '待发货', value: 'UNDELIVERED'},
{title: '已发货', value: 'DELIVERED'},
{title: '待核验', value: 'TAKE'},
{title: '待自提', value: 'STAY_PICKED_UP'},
{title: '已完成', value: 'COMPLETED'},
{title: '已取消', value: 'CANCELLED'},
],
current_status: ''
}; };
}, },
methods: { methods: {
@ -386,6 +405,12 @@ export default {
this.$Message.warning("导出订单失败，请重试"); this.$Message.warning("导出订单失败，请重试");
} }
}, },
// 订单筛选
orderStatusClick(item) {
this.current_status = item.value;
this.searchForm.orderStatus = item.value;
this.getDataList();
},
}, },
mounted() { mounted() {
this.init(); this.init();
@ -399,4 +424,23 @@ export default {
.export-excel-wrapper { .export-excel-wrapper {
display: inline; display: inline;
} }
.order-tab {
width: 950px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f0f0f0;
padding: 0 10px;
margin-bottom: 10px;
div {
text-align: center;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
}
.current {
background-color: #ffffff;
}
}
</style> </style>