267 lines
8.6 KiB
Vue
267 lines
8.6 KiB
Vue
<template>
|
||
<div class="search">
|
||
<Card>
|
||
<Row v-show="openSearch" @keydown.enter.native="handleSearch">
|
||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||
<Form-item label="订单编号" prop="orderSn">
|
||
<Input
|
||
type="text"
|
||
v-model="searchForm.orderSn"
|
||
placeholder="请输入订单编号"
|
||
clearable
|
||
style="width: 200px"
|
||
/>
|
||
</Form-item>
|
||
<Form-item label="分销商" prop="distributionName">
|
||
<Input
|
||
type="text"
|
||
v-model="searchForm.distributionName"
|
||
placeholder="请输入分销商名称"
|
||
clearable
|
||
style="width: 200px"
|
||
/>
|
||
</Form-item>
|
||
<Form-item label="店铺名称">
|
||
<Select v-model="searchForm.shopId" placeholder="请选择" @on-query-change="searchChange" filterable
|
||
clearable style="width: 150px">
|
||
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
|
||
</Select>
|
||
</Form-item>
|
||
<Form-item label="订单时间">
|
||
<DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
|
||
style="width: 210px"></DatePicker>
|
||
</Form-item>
|
||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||
</Form>
|
||
</Row>
|
||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
|
||
<template slot-scope="{row}" slot="goodsMsg">
|
||
<div class="goods-msg">
|
||
<img :src="row.image" width="60" height="60" alt="">
|
||
<div>
|
||
<div class="div-zoom">
|
||
<a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||
</div>
|
||
<div style="color:#999;font-size:10px">数量：x{{row.num}}</div>
|
||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||
<div slot="content">
|
||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
|
||
</div>
|
||
<img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
|
||
</Poptip>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template slot-scope="{row}" slot="distributionOrderStatus">
|
||
<Tag :color="filterStatusColor(row.distributionOrderStatus)">{{filterStatus(row.distributionOrderStatus)}}</Tag>
|
||
</template>
|
||
</Table>
|
||
<Row type="flex" justify="end" class="page">
|
||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
|
||
@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
|
||
size="small" show-total show-elevator show-sizer></Page>
|
||
</Row>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getDistributionOrder
|
||
} from "@/api/distribution";
|
||
import {orderStatusList} from './dataJson'
|
||
import {getShopListData} from '@/api/shops'
|
||
|
||
export default {
|
||
name: "distributionOrder",
|
||
components: {},
|
||
data() {
|
||
return {
|
||
timeRange: [], // 范围时间
|
||
orderStatusList, // 订单状态列表
|
||
shopList: [], // 店铺列表
|
||
distributionId: this.$route.query.id, // 分销id
|
||
openSearch: true, // 显示搜索
|
||
openTip: true, // 显示提示
|
||
loading: true, // 表单加载状态
|
||
searchForm: { // 搜索框初始化对象
|
||
pageNumber: 1, // 当前页数
|
||
pageSize: 10, // 页面大小
|
||
},
|
||
columns: [
|
||
{
|
||
title: "订单编号",
|
||
key: "orderSn",
|
||
minWidth: 100,
|
||
tooltip: true
|
||
},
|
||
{
|
||
title: '商品信息',
|
||
slot: 'goodsMsg',
|
||
minWidth: 120
|
||
},
|
||
{
|
||
title: "退款金额",
|
||
key: "returnMoney",
|
||
sortable: false,
|
||
render: (h, params) => {
|
||
if(params.row.sellBackRebate == null){
|
||
return h("div", this.$options.filters.unitPrice(0, '￥'));
|
||
}else{
|
||
return h("div", this.$options.filters.unitPrice(params.row.sellBackRebate, '￥'));
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: "分销商",
|
||
key: "distributionName",
|
||
tooltip: true
|
||
},
|
||
{
|
||
title: "店铺名称",
|
||
key: "storeName",
|
||
tooltip: true
|
||
},
|
||
{
|
||
title: "状态",
|
||
slot: "distributionOrderStatus",
|
||
width: 120,
|
||
|
||
},
|
||
{
|
||
title: "佣金金额",
|
||
key: "rebateGrade",
|
||
width: 120,
|
||
sortable: false,
|
||
render: (h, params) => {
|
||
if(params.row.rebate == null){
|
||
return h("div", this.$options.filters.unitPrice(0, '￥'));
|
||
}else{
|
||
return h("div", this.$options.filters.unitPrice(params.row.rebate, '￥'));
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
key: "createTime",
|
||
width: 180,
|
||
sortable: false,
|
||
}
|
||
],
|
||
data: [], // 表单数据
|
||
total: 0 // 表单数据总数
|
||
};
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getDataList();
|
||
this.getShopList()
|
||
},
|
||
changePage(v) {
|
||
this.searchForm.pageNumber = v;
|
||
this.getDataList();
|
||
},
|
||
changePageSize(v) {
|
||
this.searchForm.pageSize = v;
|
||
this.getDataList();
|
||
},
|
||
handleSearch() {
|
||
this.searchForm.pageNumber = 1;
|
||
this.searchForm.pageSize = 10;
|
||
this.getDataList();
|
||
},
|
||
|
||
getDataList() {
|
||
this.searchForm.distributionId = this.distributionId;
|
||
this.loading = true;
|
||
if (this.timeRange && this.timeRange[0]) {
|
||
let startTime = this.timeRange[0]
|
||
let endTime = this.timeRange[1]
|
||
this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
|
||
this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
|
||
}
|
||
console.log(this.searchForm)
|
||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||
getDistributionOrder(this.searchForm).then(res => {
|
||
this.loading = false;
|
||
if (res.success) {
|
||
this.data = res.result.records;
|
||
|
||
this.total = res.result.total;
|
||
}
|
||
});
|
||
this.total = this.data.length;
|
||
this.loading = false;
|
||
},
|
||
getShopList(val) { // 获取店铺列表
|
||
const params = {
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
storeName: ''
|
||
}
|
||
if (val) {
|
||
params.storeName = val;
|
||
} else {
|
||
params.storeName = ''
|
||
}
|
||
|
||
getShopListData(params).then(res => {
|
||
this.shopList = res.result.records
|
||
})
|
||
},
|
||
searchChange(val) { // 店铺搜索，键盘点击回调
|
||
this.getShopList(val)
|
||
},
|
||
filterStatus (status) { // 过滤订单状态
|
||
const arr = [
|
||
{status: 'WAIT_BILL', title: '待结算'},
|
||
{status: 'WAIT_CASH', title: '待提现'},
|
||
{status: 'COMPLETE_CASH', title: '提现完成'},
|
||
{status: 'CANCEL', title: '订单取消'},
|
||
{status: 'REFUND', title: '退款'},
|
||
]
|
||
for (let i=0;i<arr.length;i++) {
|
||
if (arr[i].status === status) {
|
||
return arr[i].title;
|
||
}
|
||
}
|
||
},
|
||
filterStatusColor (status) { // 状态tag标签颜色
|
||
const arr = [
|
||
{status: 'WAIT_BILL', color: 'magenta'},
|
||
{status: 'WAIT_CASH', color: 'warning'},
|
||
{status: 'COMPLETE_CASH', color: 'success'},
|
||
{status: 'CANCEL', color: 'default'},
|
||
{status: 'REFUND', color: 'error'},
|
||
]
|
||
for (let i=0;i<arr.length;i++) {
|
||
if (arr[i].status === status) {
|
||
return arr[i].color;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
watch: {
|
||
$route(e) { // 监听路由，参数变化调取接口
|
||
this.distributionId = e.query.id ? e.query.id : undefined;
|
||
this.getDataList();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" >
|
||
@import "@/styles/table-common.scss";
|
||
.goods-msg {
|
||
display: flex;
|
||
align-items: center;
|
||
>div{
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
|