运营后台-售后列表,售后状态展示优化

master
pikachu1995@126.com 2023-07-05 11:42:25 +08:00
parent 8dbd5429f0
commit 44558d9072
3 changed files with 109 additions and 32 deletions

View File

@ -27,23 +27,6 @@
style="width: 200px"
/>
</Form-item>
<Form-item label="售后状态">
<Select
v-model="searchForm.serviceStatus"
placeholder="全部"
clearable
style="width: 200px"
>
<Option value="APPLY">申请售后</Option>
<Option value="PASS">通过售后</Option>
<Option value="REFUSE">拒绝售后</Option>
<Option value="BUYER_RETURN">买家退货待卖家收货</Option>
<Option value="SELLER_CONFIRM">卖家确认收货</Option>
<Option value="SELLER_TERMINATION">卖家终止售后</Option>
<Option value="BUYER_CANCEL">买家取消售后</Option>
<Option value="COMPLETE">完成售后</Option>
</Select>
</Form-item>
<Form-item label="申请时间">
<DatePicker
v-model="selectDate"
@ -93,6 +76,13 @@
>
</Form>
</Row>
<div class="order-tab">
<div v-for="(item,index) in serviceStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="serviceStatusClick(item)">
{{item.title}}
</div>
</div>
<Table
:loading="loading"
border
@ -305,6 +295,18 @@ export default {
],
data: [], //
total: 0, //
serviceStatus: [
{title: '全部', value: ''},
{title: '申请售后', value: 'APPLY'},
{title: '通过售后', value: 'PASS'},
{title: '拒绝售后', value: 'REFUSE'},
{title: '待收货', value: 'BUYER_RETURN'},
{title: '确认收货', value: 'SELLER_CONFIRM'},
{title: '完成售后', value: 'COMPLETE'},
{title: '卖家终止售后', value: 'SELLER_TERMINATION'},
{title: '买家取消售后', value: 'BUYER_CANCEL'}
],
currentStatus: ''
};
},
methods: {
@ -349,7 +351,7 @@ export default {
this.total = this.data.length;
this.loading = false;
},
//
//
detail(v) {
let sn = v.sn;
this.$router.push({
@ -357,9 +359,39 @@ export default {
query: { sn: sn },
});
},
//
serviceStatusClick(item) {
this.currentStatus = item.value;
this.searchForm.serviceStatus = item.value;
this.getDataList();
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.order-tab {
width: 950px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f0f0f0;
padding: 0 10px;
margin: 10px 20px 10px 0;
div {
text-align: center;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
}
.current {
background-color: #ffffff;
}
}
</style>

View File

@ -9,16 +9,16 @@
<Form-item label="会员名称" prop="buyerName">
<Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 200px" />
</Form-item>
<Form-item label="订单状态" prop="orderStatus">
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
<Option value="NEW">新订单</Option>
<Option value="CONFIRM">已确认</Option>
<Option value="TAKE">待核验</Option>
<Option value="COMPLETE">已完成</Option>
<Option value="WAIT_PINTUAN">待成团</Option>
<Option value="CANCELLED">已取消</Option>
</Select>
</Form-item>
<!-- <Form-item label="订单状态" prop="orderStatus">-->
<!-- <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">-->
<!-- <Option value="NEW">新订单</Option>-->
<!-- <Option value="CONFIRM">已确认</Option>-->
<!-- <Option value="TAKE">待核验</Option>-->
<!-- <Option value="COMPLETE">已完成</Option>-->
<!-- <Option value="WAIT_PINTUAN">待成团</Option>-->
<!-- <Option value="CANCELLED">已取消</Option>-->
<!-- </Select>-->
<!-- </Form-item>-->
<Form-item label="下单时间">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
@on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
@ -27,6 +27,13 @@
</Form>
</Row>
<div class="order-tab">
<div v-for="(item,index) in orderStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="orderStatusClick(item)">
{{item.title}}
</div>
</div>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
@on-sort-change="changeSort"></Table>
<Row type="flex" justify="end" class="mt_10">
@ -178,6 +185,15 @@ export default {
],
data: [], //
total: 0, //
orderStatus: [
{title: '全部', value: ''},
{title: '未付款', value: 'UNPAID'},
{title: '已付款', value: 'PAID'},
{title: '待核验', value: 'TAKE'},
{title: '已完成', value: 'COMPLETED'},
{title: '已取消', value: 'CANCELLED'},
],
currentStatus: ''
};
},
methods: {
@ -259,9 +275,38 @@ export default {
});
},
//
orderStatusClick(item) {
this.currentStatus = item.value;
this.searchForm.orderStatus = item.value;
this.getDataList();
},
},
mounted () {
this.init();
},
};
</script>
<style lang="scss" scoped>
.order-tab {
margin: 10px 20px 10px 0;
width: 950px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f0f0f0;
padding: 0 10px;
div {
text-align: center;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
}
.current {
background-color: #ffffff;
}
}
</style>

View File

@ -91,7 +91,7 @@
</div>
<div class="order-tab">
<div v-for="(item,index) in order_status" :key="index" :class="{'current': current_status === item.value}" @click="orderStatusClick(item)">
<div v-for="(item,index) in orderStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="orderStatusClick(item)">
{{item.title}}
</div>
</div>
@ -323,7 +323,7 @@ export default {
],
data: [], //
total: 0, //
order_status: [
orderStatus: [
{title: '全部', value: ''},
{title: '未付款', value: 'UNPAID'},
{title: '已付款', value: 'PAID'},
@ -335,7 +335,7 @@ export default {
{title: '已取消', value: 'CANCELLED'},
],
current_status: ''
currentStatus: ''
};
},
methods: {
@ -407,7 +407,7 @@ export default {
},
//
orderStatusClick(item) {
this.current_status = item.value;
this.currentStatus = item.value;
this.searchForm.orderStatus = item.value;
this.getDataList();
},