fe / yoho-shop-manage · Commits

Go to a project

Authored by lzhy
Commit 35a6ed815a8d952807f1ba35995ae5b15e2ddb96 1 parent 0594d0eb

一件代发

Inline Side-by-side
Showing 1 changed file with 231 additions and 0 deletions
<template>
<layout-body>
<layout-filter ref="filter" :model="query">
<filter-item label="订单号">
<Input v-model.trim="query.orderCode" :maxlength="11" />
</filter-item>
<filter-item label="SKN">
<Input v-model.trim="query.productSkn" :maxlength="9" />
</filter-item>
<filter-item label="SKU">
<Input v-model.trim="query.productSku" :maxlength="9" />
</filter-item>
<filter-item label="收货人">
<Input v-model.trim="query.userName" />
</filter-item>
<filter-item label="买家昵称">
<Input v-model.trim="query.nickName" />
</filter-item>
<filter-item label="商品名称">
<Input v-model.trim="query.prodName" />
</filter-item>
<filter-item label="订单状态">
<Select v-model.trim="query.orderStatusStr" clearable>
<Option v-for="option in orderStatusArr" :key="option.id" :value="option.id">
{{ option.name }}
</Option>
</Select>
</filter-item>
<filter-item>
<Button type="primary" @click="search">筛选</Button>
<Button @click="reset">清空条件</Button>
<Button type="primary" @click="exportExcel">导出</Button>
</filter-item>
</layout-filter>
<layout-list>
<list-tabs @change-tabs="onChangeTabs"></list-tabs>
<data-table :table-cols="tableCols" :table-data="tableData"></data-table>
<Page :total="pageData.total" :current="pageData.current" :page-size="20" show-total @on-change="pageChange">
</Page>
</layout-list>
</layout-body>
</template>
<script>
import { ListTabs, DataTable } from './components';
import OrderService from 'services/order/order-service';
import _ from 'lodash';
export default {
components: { ListTabs, DataTable },
data() {
return {
query: {
orderCode: '',
productSkn: '',
productSku: '',
prodName: '',
nickName: '',
userName: '',
orderStatus: '',
pageSize: 20,
pageNo: 1,
orderStatusStr: '',
queryType: 1,
},
orderStatusArr: [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 3, name: 'c' },
],
pageData: {
total: 100,
current: 1,
},
tableData: [
{
orderCode: '11111',
parentOrderCode: '1111-22222',
createTime: '2020-04-08 12:39:39',
buyerNickeName: '小乌贼',
receiver: '收货人',
paymentStatus: '支付状态',
orderStatus: '订单状态',
realAmount: '实收金额',
orderGoods: [
{
imageUrl: 'fdsafdsa', //商品图片
prodcutName: 'Converse RENEW工装大衣', //商品名称
prodcutCode: '10019501-A01',
sizeName: 'M', // 尺码名称
colorName: '黑', // 颜色名称
price: '¥120.00', //单价
buyNums: '2', //购买数量
productSkn: '34556778', // 商品skn
productSku: '34556778', // 商品sku
},
{
imageUrl: 'fdsafdsa', //商品图片
prodcutName: 'Converse RENEW工装大衣', //商品名称
prodcutCode: '10019501-A01',
sizeName: 'M', // 尺码名称
colorName: '黑', // 颜色名称
price: '¥120.00', //单价
buyNums: '2', //购买数量
productSkn: '34556778', // 商品skn
productSku: '34556778', // 商品sku
},
{
imageUrl: 'fdsafdsa', //商品图片
prodcutName: 'Converse RENEW工装大衣', //商品名称
prodcutCode: '10019501-A01',
sizeName: 'M', // 尺码名称
colorName: '黑', // 颜色名称
price: '¥120.00', //单价
buyNums: '2', //购买数量
productSkn: '34556778', // 商品skn
productSku: '34556778', // 商品sku
},
],
},
{
orderCode: '2222222',
parentOrderCode: '1111-22222',
createTime: '2020-04-08 12:39:39',
buyerNickeName: '小乌贼',
receiver: '收货人',
paymentStatus: '支付状态',
orderStatus: '订单状态',
realAmount: '实收金额',
orderGoods: [
{
imageUrl: 'fdsafdsa', //商品图片
prodcutName: 'Converse RENEW工装大衣', //商品名称
prodcutCode: '10019501-A01',
sizeName: 'M', // 尺码名称
colorName: '黑', // 颜色名称
price: '¥120.00', //单价
buyNums: '2', //购买数量
productSkn: '34556778', // 商品skn
productSku: '34556778', // 商品sku
},
],
},
],
tableCols: [
{ title: '图片', width: '8%' },
{ title: '商品信息', width: '20%' },
{ title: '单价', width: '8%' },
{ title: '数量', width: '5%' },
{ title: 'SKN', width: '5%' },
{ title: 'SKU', width: '5%' },
{ title: '买家昵称', width: '5%' },
{ title: '收货人', width: '5%' },
{ title: '支付状态', width: '5%' },
{ title: '实收金额', width: '5%' },
{ title: '订单状态', width: '5%' },
{ title: '操作', width: '10%' },
],
};
},
created() {
this.orderService = new OrderService();
},
methods: {
onChangeTabs(type) {
this.query.queryType = +type;
this.reset();
},
search() {
this.orderService.orderList(this.query).then(ret => {
this.tableData = _.get(ret, 'data.records', []);
this.pageData.total = _.get(ret, 'data.totalCount', 0);
this.pageData.pageNo = _.get(ret, 'data.pageNo', 1);
});
},
pageChange(page) {
this.pageData.current = page;
this.query.pageNo = page;
this.search();
},
reset() {
this.query.orderCode = '';
this.query.productSkn = '';
this.query.productSku = '';
this.query.prodName = '';
this.query.nickName = '';
this.query.userName = '';
this.query.orderStatus = 0;
this.query.pageSize = 20;
this.query.pageNo = 1;
this.query.orderStatusStr = '';
this.search();
},
exportExcel() {},
},
};
</script>
<style lang="scss">
table.order-table {
width: 100%;
height: auto;
thead {
background: #000000;
th {
padding: 8px 0;
border: 1px solid #cccccc;
color: #ffffff;
text-align: center;
}
}
tbody {
tr {
height: 35px;
td {
border: 1px solid #cccccc;
border-top: none;
border-right: none;
text-align: center;
padding: 5px;
span {
margin-left: 10px;
margin-right: 20px;
}
}
td:last-child {
border-right: 1px solid #cccccc;
}
}
}
}
</style>
... ...