You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
460 lines
16 KiB
460 lines
16 KiB
<template>
|
|
<div style="padding: 0 20px">
|
|
<div ref="lxHeader">
|
|
<lx-header icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<slot>
|
|
<div style="display: flex">
|
|
<Input v-model="select.keyword" class="select" style="width: 200px; margin-right: 10px"
|
|
placeholder="关键字搜索" />
|
|
<Button class="select" type="primary" style="margin-right: 10px;" @click="searchOrder">查询</Button>
|
|
<xy-selectors @search="searchOrder">
|
|
<template>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">所属商户</div>
|
|
<div>
|
|
<el-select size="small" :value="select.merchant ? select.merchant.name : ''" placeholder="所属商户"
|
|
@change="e => select.merchant = e">
|
|
<el-option v-for="item in merchants" :key="item.id" :value="item" :label="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
<el-checkbox style="margin-left: 10px;" v-model="select.is_merchant">包含历史服务商家</el-checkbox>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">产品类别</div>
|
|
<div>
|
|
<el-cascader ref="cascader" :value="select.productTypeName" clearable :show-all-levels="false"
|
|
size="small" :options="productTypes" :props="{checkStrictly:true,label:'name',value:'id'}"
|
|
@change="productTypeChange"></el-cascader>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">订单状态</div>
|
|
<div>
|
|
<template v-for="(value,key) of orderStates">
|
|
<el-tag size="small" :effect="select.orderStates.key === key ? 'dark' : 'plain'"
|
|
@click="select.orderStates = {key,value}" style="margin-right: 6px;">{{value}}</el-tag>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">下单日期</div>
|
|
<div>
|
|
<el-date-picker @change="changeCreatedDate" v-model="select.createdDate" type="daterange"
|
|
:picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" align="right">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12"></el-col>
|
|
<el-col :span="12">
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">支付日期</div>
|
|
<div>
|
|
<el-date-picker @change="changePayDate" v-model="select.payDate" type="daterange"
|
|
:picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" align="right">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</template>
|
|
<template v-slot:selected>
|
|
<div style="display: flex;padding: 0 0 10px 20px;">
|
|
<span style="padding-right: 6px">当前搜索条件：</span>
|
|
<div v-if="select.keyword">
|
|
<el-tag effect="light" size="small" closable @close="select.keyword = ''">
|
|
{{select.keyword}}
|
|
</el-tag>,
|
|
</div>
|
|
<div v-if="select.productType">
|
|
<el-tag effect="light" size="small" closable @close="select.productType = ''">
|
|
{{select.productTypeName}}
|
|
</el-tag>,
|
|
</div>
|
|
<div v-if="select.merchant">
|
|
<el-tag effect="light" size="small" closable @close="select.merchant = ''">
|
|
{{select.merchant.name}}
|
|
</el-tag>,
|
|
</div>
|
|
<div v-if="select.orderStates">
|
|
<el-tag effect="light" size="small" closable @close="select.orderStates = ''">
|
|
{{select.orderStates.value}}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</xy-selectors>
|
|
<Button class="select" type="primary" style="margin-right: 10px;" @click="downloadExel">导出</Button>
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
|
|
<xy-table :list="list" :table-item="table" :total="total" @pageSizeChange="e => select.pageSize = e"
|
|
@pageIndexChange="pageChange">
|
|
<template v-slot:btns>
|
|
<el-table-column fixed="right" label="操作" width="400" header-align="center">
|
|
<template slot-scope="scope">
|
|
<actions :row="scope.row" @log="showLog(scope.row)" @refresh="getOrders"></actions>
|
|
<!-- <Button icon="ios-chatbubbles-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>跟进</Button>-->
|
|
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-paper-plane-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>分发</Button>-->
|
|
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-close" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>取消</Button>-->
|
|
<!-- <Button v-show="scope.row.state_name == '已发布'" icon="ios-redo" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>收回</Button>-->
|
|
<!-- <Button icon="ios-clipboard-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost @click="selectId = scope.row.id,isShowLog = true">日志</Button>-->
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</xy-table>
|
|
|
|
<orderLog :id="selectId" :is-show.sync="isShowLog" @refresh="getOrders"></orderLog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getList,
|
|
index as getTypes
|
|
} from "@/api/order"
|
|
import {
|
|
parseTime
|
|
} from "@/utils"
|
|
import {
|
|
download
|
|
} from '@/utils/downloadRequest'
|
|
|
|
import orderLog from '@/views/order/component/orderLog'
|
|
import actions from '@/views/order/component/actions'
|
|
export default {
|
|
components: {
|
|
orderLog,
|
|
actions
|
|
},
|
|
data() {
|
|
return {
|
|
selectId: null,
|
|
isShowLog: false,
|
|
|
|
merchants: [],
|
|
orderItemStates: [],
|
|
orderStates: [],
|
|
productTypes: [],
|
|
select: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
merchant: '',
|
|
keyword: '',
|
|
productType: '',
|
|
orderStates: '',
|
|
productTypeName: "",
|
|
is_merchant: false,
|
|
createdDate: [],
|
|
paidDate: [],
|
|
start_created: "",
|
|
end_created: "",
|
|
start_paid: "",
|
|
end_paid: "",
|
|
},
|
|
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]);
|
|
}
|
|
}]
|
|
},
|
|
|
|
total: 0,
|
|
list: [],
|
|
table: [{
|
|
prop: "order.serial",
|
|
label: "订单编号",
|
|
width: 150,
|
|
align: 'center',
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
prop: "order_name",
|
|
label: "订单名称",
|
|
width: 220,
|
|
align: 'left'
|
|
},
|
|
{
|
|
prop: 'bookable_name',
|
|
label: "订购类型",
|
|
width: 80
|
|
},
|
|
{
|
|
prop: "order_total",
|
|
label: "金额",
|
|
width: 80,
|
|
align: 'right'
|
|
},
|
|
{
|
|
prop: "created_at",
|
|
label: "下单时间",
|
|
width: 180,
|
|
formatter: (cell, data, value, index) => {
|
|
return parseTime(new Date(value))
|
|
}
|
|
},
|
|
{
|
|
prop: "paid_at",
|
|
label: "支付时间",
|
|
width: 180,
|
|
formatter: (cell, data, value, index) => {
|
|
if (value)
|
|
return parseTime(new Date(value))
|
|
}
|
|
},
|
|
{
|
|
prop: "updated_at",
|
|
label: "更新时间",
|
|
width: 180,
|
|
formatter: (cell, data, value, index) => {
|
|
return parseTime(new Date(value))
|
|
}
|
|
},
|
|
{
|
|
prop: "memberPromotion.name",
|
|
label: "推广渠道",
|
|
width: 110
|
|
},
|
|
{
|
|
label: "客户服务地址",
|
|
width: 220,
|
|
align:"left",
|
|
customFn: (row) => {
|
|
return ( <div style = {
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
cursor:'pointer',
|
|
color:"blue"
|
|
}
|
|
} > {row.order.member_address?row.order.member_address:"修改服务地址"}</div > )
|
|
}
|
|
},
|
|
{
|
|
label: "用户信息",
|
|
Fprop: 'member',
|
|
multiHd: [{
|
|
prop: "name",
|
|
label: "姓名",
|
|
width: 110
|
|
},
|
|
{
|
|
prop: "wechat_nickname",
|
|
label: "微信昵称",
|
|
width: 110
|
|
},
|
|
{
|
|
label: "头像",
|
|
width: 80,
|
|
customFn: (row) => {
|
|
return ( < div style = {
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}
|
|
} > <el-avatar src = {
|
|
row.member?.avatar
|
|
} > </el-avatar></div > )
|
|
}
|
|
},
|
|
|
|
{
|
|
prop: "phone",
|
|
label: "联系电话",
|
|
width: 120
|
|
},
|
|
{
|
|
prop: "area",
|
|
label: "区域",
|
|
width: 110
|
|
},
|
|
{
|
|
prop: "due_date",
|
|
label: "预产期",
|
|
width: 120
|
|
}
|
|
],
|
|
},
|
|
{
|
|
label: '订单明细',
|
|
multiHd: [{
|
|
prop: "product_type.name",
|
|
label: "产品类型",
|
|
width: 100
|
|
},
|
|
{
|
|
prop: "merchant.name",
|
|
label: "服务商家",
|
|
align: "left",
|
|
width: 220
|
|
},
|
|
{
|
|
label: "历史商家",
|
|
width: 220,
|
|
align: "left",
|
|
customFn: (row) => {
|
|
return row.assign_merchant.map(item => {
|
|
return ( < div > {
|
|
item.name
|
|
} < /div>)
|
|
})
|
|
}
|
|
},
|
|
|
|
{
|
|
prop: "state_name",
|
|
label: "状态",
|
|
width: 80
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
prop: "order.remark",
|
|
label: "备注"
|
|
}
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
changePayDate(e) {
|
|
this.select.start_paid = e[0];
|
|
this.select.end_paid = e[1];
|
|
},
|
|
changeCreatedDate(e) {
|
|
this.select.start_created = e[0];
|
|
this.select.end_created = e[1];
|
|
},
|
|
productTypeChange(e) {
|
|
this.select.productType = this.$refs['cascader'].getCheckedNodes()[0].data.id;
|
|
this.select.productTypeName = this.$refs['cascader'].getCheckedNodes()[0].data.name;
|
|
},
|
|
searchOrder(){
|
|
|
|
this.select.page = 1
|
|
this.getOrders()
|
|
},
|
|
pageChange(e) {
|
|
this.select.page = e
|
|
this.getOrders()
|
|
},
|
|
|
|
async getTypes() {
|
|
const res = await getTypes()
|
|
this.merchants = res.merchants
|
|
this.orderItemStates = res.order_item_states
|
|
this.orderStates = res.order_states
|
|
this.productTypes = res.product_types
|
|
},
|
|
|
|
async getOrders() {
|
|
let is_merchant = this.select.is_merchant
|
|
|
|
this.select.is_merchant= is_merchant ? 1 : 0;
|
|
const res = await getList({
|
|
page_size: this.select.pageSize,
|
|
product_type_id: this.select.productType,
|
|
merchant_id: this.select.merchant.id,
|
|
order_state: this.select.orderStates.key,
|
|
...this.select
|
|
})
|
|
this.select.is_merchant=is_merchant;
|
|
this.total = res.total
|
|
this.list = res.rows
|
|
},
|
|
|
|
showLog(row) {
|
|
this.selectId = row.id
|
|
this.isShowLog = true
|
|
},
|
|
|
|
downloadExel() {
|
|
download(
|
|
'/api/admin/order/get-list',
|
|
'get', {
|
|
order_state: this.select.orderStates.key,
|
|
keyword: this.select.keyword,
|
|
product_type_id: this.select.productType,
|
|
merchant_id: this.select.merchant.id,
|
|
is_export: 1
|
|
},
|
|
'订单列表.xlsx')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTypes()
|
|
this.getOrders()
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-content-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
&-label {
|
|
|
|
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
$primaryColor: #bf617c;
|
|
|
|
::v-deep .ivu-alert-success {
|
|
color: #fff;
|
|
border-color: $primaryColor !important;
|
|
background: rgba(213, 120, 145, 0.8) !important;
|
|
|
|
margin: auto 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
::v-deep .ivu-icon-ios-close:before {
|
|
//color: #fff;
|
|
}
|
|
</style>
|