消费流水记录

src/router/index.js

@@ -9,6 +9,7 @@ const micro = r => require.ensure([], () => r(require('../view/common/Micro.vue'
 const newAdList = r => require.ensure([], () => r(require('../view/operation/newAdList.vue')), 'newAdList');
 const userManage = r => require.ensure([], () => r(require('../view/userManage/index.vue')), 'userManage');
 const dayConsumeAnalysis = r => require.ensure([], () => r(require('../view/statementManage/dayConsumeAnalysis.vue')), 'dayConsumeAnalysis');
+const expenditure = r => require.ensure([], () => r(require('../view/statementManage/expenditure.vue')), 'expenditure');
 
 // const loanHomePage = r => require.ensure([], () => r(require('../view/operation/LoanHomePage.vue')), 'loanHomePage');
 const templateManage = r => require.ensure([], () => r(require('../view/sendManagement/templateManage.vue')), 'templateManage');
@@ -75,6 +76,10 @@ const routes = [
       requireAuth: true,
     },
     children: [
+      {
+        path: 'expenditure',
+        component: expenditure,
+      },
       {
         path: 'dayConsumeAnalysis',
         component: dayConsumeAnalysis,

src/view/statementManage/constData.js

@@ -45,3 +45,98 @@ export const dayColumns = [
     align: 'center',
   },
 ];
+
+export const expenditureColumns = [
+  {
+    key: 'date',
+    title: '下单时间',
+    align: 'center',
+  },
+  {
+    key: 'mainBillNo',
+    title: '主订单号',
+    align: 'center',
+  },
+  {
+    key: 'secondBillNo',
+    title: '子订单号',
+    align: 'center',
+  },
+  {
+    key: 'skuNo',
+    title: '商品sku编号',
+    align: 'center',
+  },
+  {
+    key: 'userId',
+    title: '下单用户id',
+    align: 'center',
+  },
+  {
+    key: 'userName',
+    title: '收货人姓名',
+    align: 'center',
+  },
+  {
+    key: 'phone',
+    title: '收货人手机号',
+    align: 'center',
+  },
+  {
+    key: 'address',
+    title: '收货地址',
+    align: 'center',
+  },
+  {
+    key: 'billStatus',
+    title: '订单状态',
+    align: 'center',
+  },
+  {
+    key: 'count',
+    title: '购买数量',
+    align: 'center',
+  },
+  {
+    key: 'mainAccount',
+    title: '主订单金额',
+    align: 'center',
+  },
+  {
+    key: 'refundTime',
+    title: '退款时间',
+    align: 'center',
+  },
+  {
+    key: 'refundPrice',
+    title: '退款金额',
+    align: 'center',
+  },
+  {
+    key: 'firstCategory',
+    title: '商品一级类目',
+    align: 'center',
+  },
+  {
+    key: 'secondCategory',
+    title: '商品二级类目',
+    align: 'center',
+  },
+  {
+    key: 'threeCategory',
+    title: '商品三级类目',
+    align: 'center',
+  },
+  {
+    key: 'brand',
+    title: '品牌',
+    align: 'center',
+  },
+  {
+    key: 'goodsName',
+    title: '商品名称',
+    align: 'center',
+    // width: 120,
+    // minWidth: '100px',
+  },
+];

src/view/statementManage/expenditure.vue

+<template>
+  <div>
+    <Form ref="form" :label-width="90" inline :model="form" style="margin-top:20px;">
+      <FormItem label="日期选择" prop="date">
+        <DatePicker type="datetime" :value="form.date" placeholder="请选择" style="width: 200px" @on-change="changeDate" />
+      </FormItem>
+      <FormItem label="主订单号:" prop="mainBillNo">
+        <Input v-model="form.mainBillNo" placeholder="请输入主订单号" clearable style="width: 180px" />
+      </FormItem>
+      <FormItem label="子订单号:" prop="secondBillNo">
+        <Input v-model="form.secondBillNo" placeholder="请输入子订单号" clearable style="width: 180px" />
+      </FormItem>
+      <FormItem label="商品sku编号:" prop="skuNo">
+        <Input v-model="form.skuNo" placeholder="请输入商品sku" clearable style="width: 180px" />
+      </FormItem>
+      <FormItem label="下单用户id:" prop="userId">
+        <Input v-model="form.userId" placeholder="请输入商品sku" clearable style="width: 180px" />
+      </FormItem>
+      <FormItem label="收货人姓名:" prop="userName">
+        <Input v-model="form.userName" placeholder="请输入用户姓名" clearable style="width: 180px" />
+      </FormItem>
+      <FormItem>
+        <Button type="primary" @click="getList()">查询</Button>
+        <Button type="" @click="reset()">重置</Button>
+      </FormItem>
+    </Form>
+    <Table :columns="expenditureColumns" :data="dataList" class="dataTable" />
+    <Page style="margin:20px" :total="count" :current="form.pageNo" :page-size="form.pageSize" size="small" show-total show-elevator @on-change="changePage" />
+  </div>
+</template>
+<script>
+// import sendMessageApi from '../../services/apis/appUrl.service';
+import { expenditureColumns } from './constData.js';
+export default {
+  data() {
+    return {
+      form: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      count: 0,
+      expenditureColumns,
+      dataList: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    changeDate(date) {
+      this.form.date = date || '';
+    },
+    reset() {
+      this.$refs['form'].resetFields();
+      this.form.date = '';
+      this.getList(); // 接口好了以后调用
+    },
+    getList(page = 1) {
+      //   const reg = /^[0-9]+.?[0-9]*$/;
+      //   if (this.form.inviterId !== '' && !reg.test(this.form.inviterId)) {
+      //     this.$Notice.error({
+      //       title: '请输入数字类型的userId',
+      //     });
+      //     returnhis;
+      //   }
+      this.form.pageNo = page;
+      console.log('this.form', this.form);
+      this.dataList = [
+        {
+          date: 123,
+          mainBillNo: 'GMV',
+          secondBillNo: 987,
+          skuNo: 1,
+          userId: 1000,
+          userName: 100,
+          phone: 10000,
+          address: 1,
+          billStatus: 345,
+          count: 345,
+          mainAccount: 1000,
+          refundTime: '2012-09-22',
+          refundPrice: 200,
+          firstCategory: '一级类目',
+          secondCategory: '二级类目',
+          threeCategory: '三级类目',
+          brand: '品牌',
+          goodsName: '商品名称',
+        },
+      ];
+      //   sendMessageApi.inviteList(this.form).then(res => {
+      //     this.dataList = res.dataList || [];
+      //     this.count = res.totalCount;
+      //   });
+    },
+    changePage(page) {
+      this.getList(page);
+    },
+  },
+};
+</script>
+<style>
+.dataTable {
+  clear: both;
+}
+</style>