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"
></DatePicker>
</Form-item>
<Form-item label="订单状态" prop="orderStatus">
<Select
v-model="searchForm.orderStatus"
placeholder="请选择"
clearable
style="width: 160px"
>
<Option value="UNPAID">未付款</Option>
<Option value="PAID">已付款</Option>
<Option value="UNDELIVERED">待发货</Option>
<Option value="DELIVERED">已发货</Option>
<Option value="COMPLETED">已完成</Option>
<Option value="TAKE">待核验</Option>
<Option value="CANCELLED">已取消</Option>
<Option value="STAY_PICKED_UP">待自提</Option>
</Select>
</Form-item>
<!-- <Form-item label="订单状态" prop="orderStatus">-->
<!-- <Select-->
<!-- v-model="searchForm.orderStatus"-->
<!-- placeholder="请选择"-->
<!-- clearable-->
<!-- style="width: 160px"-->
<!-- >-->
<!-- <Option value="UNPAID">未付款</Option>-->
<!-- <Option value="PAID">已付款</Option>-->
<!-- <Option value="UNDELIVERED">待发货</Option>-->
<!-- <Option value="DELIVERED">已发货</Option>-->
<!-- <Option value="COMPLETED">已完成</Option>-->
<!-- <Option value="TAKE">待核验</Option>-->
<!-- <Option value="CANCELLED">已取消</Option>-->
<!-- <Option value="STAY_PICKED_UP">待自提</Option>-->
<!-- </Select>-->
<!-- </Form-item>-->
<Button
@click="handleSearch"
type="primary"
@ -90,6 +90,12 @@
</download-excel>
</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
:loading="loading"
border
@ -317,6 +323,19 @@ export default {
],
data: [], // 表单数据
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: {
@ -386,6 +405,12 @@ export default {
this.$Message.warning("导出订单失败，请重试");
}
},
// 订单筛选
orderStatusClick(item) {
this.current_status = item.value;
this.searchForm.orderStatus = item.value;
this.getDataList();
},
},
mounted() {
this.init();
@ -399,4 +424,23 @@ export default {
.export-excel-wrapper {
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>