财务汇总,经销商余额汇总,钱包管理,对账管理页面布局完成

src/views/finance/account_list.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="app-container">
+    <div v-if="showReconciliation">
+      <!-- 筛选条件 -->
+      <div>
+        <el-form
+          ref="searchForm"
+          :model="searchForm"
+          label-width="100px"
+          size="small"
+          label-position="left"
+        >
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="钱包" prop="">
+                <el-select class="selectStyle" placeholder="请选择">
+                  <el-option> </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="单据号" prop="">
+                <el-input placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="12">
+              <el-form-item label="日期时间" prop="">
+                <el-date-picker
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :lg="24">
+              <el-form-item label="" class="fr">
+                <el-button size="small">清空</el-button>
+                <el-button size="small" type="primary">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 按钮 -->
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button type="primary" size="small" @click="reconciliationFn"
+            >一键对账</el-button
+          >
+        </div>
+      </div>
+      <!-- 列表 -->
+      <div class="mymain-container">
+        <div class="table">
+          <el-table
+            v-loading="listLoading"
+            :data="dataList"
+            element-loading-text="Loading"
+            border
+            fit
+            highlight-current-row
+            stripe
+          >
+            <el-table-column
+              align="center"
+              label="序号"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="月份"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="对账状态"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="客户编码"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="客户名称"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="部门"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="现金钱包类型"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据类型"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据号"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据日期"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="首付款金额"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="发货金额"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="备注"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+          </el-table>
+        </div>
+        <!-- 分页 -->
+        <div class="fr">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <AccountListDetail v-else />
+  </div>
+</template>
+
+<script>
+import AccountListDetail from "./components/account_list-detail";
+export default {
+  components: {
+    AccountListDetail,
+  },
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      listLoading: false, // 列表加载loading
+      showReconciliation: true,
+    };
+  },
+  methods: {
+    //一键对账
+    reconciliationFn() {
+      this.showReconciliation = false;
+    },
+    seeFN() {
+      this.showDetail = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selectStyle {
+  width: 100%;
+}
+</style>

src/views/finance/balance_sum.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="app-container">
+    <div v-if="showDetail">
+      <!-- 筛选条件 -->
+      <div>
+        <el-form
+          ref="searchForm"
+          :model="searchForm"
+          label-width="100px"
+          size="small"
+          label-position="left"
+        >
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="经销商名称" prop="">
+                <el-input placeholder="请输入经销商名称"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="经销商编码" prop="">
+                <el-input placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :lg="24">
+              <el-form-item label="" class="fr">
+                <el-button size="small">清空</el-button>
+                <el-button size="small" type="primary">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 按钮 -->
+      <div class="btn-group clearfix">
+        <div class="fr">
+          <el-button type="primary" size="small">导出</el-button>
+          <el-button type="primary" size="small" @click="seeFN"
+            >查看明细</el-button
+          >
+        </div>
+      </div>
+      <!-- 列表 -->
+      <div class="mymain-container">
+        <div class="table">
+          <el-table
+            v-loading="listLoading"
+            :data="dataList"
+            element-loading-text="Loading"
+            border
+            fit
+            highlight-current-row
+            stripe
+          >
+            <el-table-column
+              align="center"
+              label="经销商编码"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="经销商名称"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="起初金额"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="总金额"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="普通钱包"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="特殊钱包"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="返利钱包"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="更新时间"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="操作"
+              min-width="160"
+              show-overflow-tooltip
+            >
+              <template slot-scope=""> </template>
+              <el-button type="text" class="textColor" slot="reference">
+                查看明细
+              </el-button>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- 分页 -->
+        <div class="fr">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <BalanceSumDetail v-else />
+  </div>
+</template>
+
+<script>
+import BalanceSumDetail from "./components/balance_sum-detail";
+export default {
+  components: {
+    BalanceSumDetail,
+  },
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      listLoading: false, // 列表加载loading
+      showDetail: true,
+    };
+  },
+  methods: {
+    seeFN() {
+      this.showDetail = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/finance/components/account_list-detail.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <div class="sty">
+      <el-page-header @back="goBack" content="对账历史记录"> </el-page-header>
+    </div>
+    <el-divider></el-divider>
+    <!-- 筛选条件 -->
+    <div>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="100px"
+        size="small"
+        label-position="left"
+      >
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="钱包" prop="">
+              <el-select class="selectStyle" placeholder="请选择">
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="单据号" prop="">
+              <el-input placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="开始时间" prop="">
+              <el-input placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="结束时间" prop="">
+              <el-input placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="24" :lg="24">
+            <el-form-item label="" class="fr">
+              <el-button size="small">清空</el-button>
+              <el-button size="small" type="primary">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 按钮 -->
+    <div class="btn-group clearfix">
+      <div class="fr">
+        <el-button type="primary" size="small" @click="reconciliationFn"
+          >导出</el-button
+        >
+      </div>
+    </div>
+    <!-- 列表 -->
+    <div class="mymain-container">
+      <div class="table">
+        <el-table
+          v-loading="listLoading"
+          :data="dataList"
+          element-loading-text="Loading"
+          border
+          fit
+          highlight-current-row
+          stripe
+        >
+          <el-table-column
+            align="center"
+            label="序号"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="月份"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="对账状态"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="客户编码"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="客户名称"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="部门"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="现金钱包类型"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="单据类型"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="单据号"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="单据日期"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="首付款金额"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="发货金额"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="备注"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="fr">
+        <el-pagination
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      listLoading: false, // 列表加载loading
+    };
+  },
+  methods: {
+    goBack() {
+      this.$parent.showReconciliation = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selectStyle {
+  width: 100%;
+}
+</style>

src/views/finance/components/balance_sum-detail.vue

@@ -0,0 +1,378 @@
+<template>
+  <div>
+    <div class="sty">
+      <el-page-header @back="goBack" content="明细"> </el-page-header>
+    </div>
+    <el-divider></el-divider>
+    <!-- 筛选条件 -->
+    <div>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="100px"
+        size="small"
+        label-position="left"
+      >
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="钱包" prop="">
+              <el-select class="selectStyle" placeholder="请选择">
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="单据号" prop="">
+              <el-input placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="12">
+            <el-form-item label="日期时间" prop="">
+              <el-date-picker
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+
+          <el-col :xs="24" :sm="24" :lg="24">
+            <el-form-item label="" class="fr">
+              <el-button size="small">清空</el-button>
+              <el-button size="small" type="primary">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-radio-group v-model="category" size="">
+      <el-radio-button label="家用空调"></el-radio-button>
+      <el-radio-button label="商用空调"></el-radio-button>
+      <el-radio-button label="生活电器"></el-radio-button>
+    </el-radio-group>
+    <h1></h1>
+    <div>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :xs="24" :sm="12" :lg="4"
+          ><div class="moneyStyle color1">
+            <span>普通钱包</span>
+            <strong>￥12.367万</strong>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :lg="4"
+          ><div class="moneyStyle color2">
+            <span>特殊钱包</span> <strong>￥12.367万</strong>
+          </div></el-col
+        >
+        <el-col :xs="24" :sm="12" :lg="4">
+          <div class="moneyStyle color3">
+            <span>折扣钱包</span> <strong>￥12.367万</strong>
+          </div></el-col
+        >
+        <el-col :xs="24" :sm="12" :lg="4">
+          <div class="moneyStyle color4">
+            <span>返利钱包</span> <strong>￥12.367万</strong>
+          </div></el-col
+        >
+      </el-row>
+    </div>
+    <el-divider></el-divider>
+    <el-radio-group v-model="bill" size="">
+      <el-radio-button label="贷款台账"></el-radio-button>
+      <el-radio-button label="返利台账"></el-radio-button>
+    </el-radio-group>
+    <div v-show="bill == '贷款台账'">
+      <!-- 列表 -->
+      <div class="mymain-container">
+        <div class="table">
+          <el-table
+            v-loading="listLoading"
+            :data="dataList"
+            element-loading-text="Loading"
+            border
+            fit
+            highlight-current-row
+            stripe
+          >
+            <el-table-column
+              label="序号"
+              align="center"
+              min-width="100"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据日期"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据类型"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据号"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="钱包"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="摘要"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="预付货款"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="订单占款"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="支付货款"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="押金"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="工程保证金"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="其他暂扣款"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="账户余额"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+          </el-table>
+        </div>
+        <!-- 分页 -->
+        <div class="fr">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <div v-show="bill == '返利台账'">
+      <!-- 列表 -->
+      <div class="mymain-container">
+        <div class="table">
+          <el-table
+            v-loading="listLoading"
+            :data="dataList"
+            element-loading-text="Loading"
+            border
+            fit
+            highlight-current-row
+            stripe
+          >
+            <el-table-column
+              label="序号"
+              align="center"
+              min-width="100"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="客户编码"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="客户名称"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据日期"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="审核日期"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据类型"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单据号"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="返利品类"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="摘要"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="收入"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="支出"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="暂扣返利"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="结存"
+              prop=""
+              min-width="160"
+              show-overflow-tooltip
+            ></el-table-column>
+          </el-table>
+        </div>
+        <!-- 分页 -->
+        <div class="fr">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      listLoading: false, // 列表加载loading
+      category: "家用空调",
+      bill: "贷款台账",
+    };
+  },
+  methods: {
+    goBack() {
+      this.$parent.showDetail = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.moneyStyle {
+  height: 130px;
+  border-radius: 20px;
+  padding: 20px 0 0 20px;
+  color: #fff;
+  span {
+    display: block;
+    font-size: 20px;
+  }
+  strong {
+    margin-top: 16px;
+    display: block;
+    font-size: 36px;
+  }
+}
+.selectStyle {
+  width: 100%;
+}
+.color1 {
+  background-color: #6c83d0;
+}
+.color2 {
+  background-color: #dfc062;
+}
+.color3 {
+  background-color: #dfc062;
+}
+.color4 {
+  background-color: #6bcfd7;
+}
+</style>

src/views/finance/components/wallet-detail.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="sty">
+      <el-page-header @back="goBack" content="返利明细"> </el-page-header>
+    </div>
+    <el-divider></el-divider>
+    <!-- 列表 -->
+    <div class="mymain-container">
+      <div class="table">
+        <el-table
+          v-loading="listLoading"
+          :data="dataList"
+          element-loading-text="Loading"
+          border
+          fit
+          highlight-current-row
+          stripe
+        >
+          <el-table-column
+            align="center"
+            label="返利钱包"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="钱包余额"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="更新时间"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="变动金额"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBack() {
+      this.$parent.showRebate = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/finance/credit_list.vue

@@ -21,14 +21,15 @@
                 <el-input placeholder="请输入"></el-input>
               </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="开始时间" prop="">
-                <el-input placeholder="请输入"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="结束时间" prop="">
-                <el-input placeholder="请输入"></el-input>
+            <el-col :xs="24" :sm="12" :lg="12">
+              <el-form-item label="日期时间" prop="">
+                <el-date-picker
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
               </el-form-item>
             </el-col>
 
@@ -114,7 +115,7 @@
               label="操作"
               min-width="160"
               show-overflow-tooltip
-            >
+            >    
               <template slot-scope="">
                 <el-button type="text" class="textColor" slot="reference"
                   >编辑</el-button

src/views/finance/finance_sum.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选条件 -->
+    <div>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="100px"
+        size="small"
+        label-position="left"
+      >
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="选择品类" prop="">
+              <el-select class="selectStyle" placeholder="请选择">
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :xs="24" :sm="12" :lg="18">
+            <el-form-item label="" class="fr">
+              <el-button size="small">清空</el-button>
+              <el-button size="small" type="primary">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 列表 -->
+    <div class="mymain-container">
+      <div class="table">
+        <el-table
+          v-loading="listLoading"
+          :data="dataList"
+          element-loading-text="Loading"
+          border
+          fit
+          highlight-current-row
+          stripe
+        >
+          <el-table-column
+            align="center"
+            label="钱包类型"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="经销商名称"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            label="更新时间"
+            prop=""
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="fr">
+        <el-pagination
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      listLoading: false, // 列表加载loading
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selectStyle {
+  width: 100%;
+}
+</style>

src/views/finance/wallet.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="app-container">
+    <div v-if="showRebate">
+      <!-- 筛选条件 -->
+      <div>
+        <el-form
+          ref="searchForm"
+          :model="searchForm"
+          label-width="100px"
+          size="small"
+          label-position="left"
+        >
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="钱包" prop="">
+                <el-select class="selectStyle" placeholder="请选择">
+                  <el-option> </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="单据号" prop="">
+                <el-input placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="12">
+              <el-form-item label="日期时间" prop="">
+                <el-date-picker
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="24" :lg="24">
+              <el-form-item label="" class="fr">
+                <el-button size="small">清空</el-button>
+                <el-button size="small" type="primary">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <el-radio-group v-model="category" size="">
+        <el-radio-button label="家用空调"></el-radio-button>
+        <el-radio-button label="商用空调"></el-radio-button>
+        <el-radio-button label="生活电器"></el-radio-button>
+      </el-radio-group>
+      <h1></h1>
+      <div>
+        <el-row type="flex" class="row-bg" justify="space-around">
+          <el-col :xs="24" :sm="12" :lg="4"
+            ><div class="moneyStyle color1">
+              <span>普通钱包</span>
+              <strong>￥12.367万</strong>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="4"
+            ><div class="moneyStyle color2">
+              <span>特殊钱包</span> <strong>￥12.367万</strong>
+            </div></el-col
+          >
+          <el-col :xs="24" :sm="12" :lg="4">
+            <div class="moneyStyle color3">
+              <span>折扣钱包</span> <strong>￥12.367万</strong>
+            </div></el-col
+          >
+          <el-col :xs="24" :sm="12" :lg="4">
+            <div @click="rebateFn" class="moneyStyle color4">
+              <span>返利钱包</span> <strong>￥12.367万</strong>
+            </div></el-col
+          >
+        </el-row>
+      </div>
+      <el-divider></el-divider>
+      <el-radio-group v-model="bill" size="">
+        <el-radio-button label="贷款台账"></el-radio-button>
+        <el-radio-button label="返利台账"></el-radio-button>
+      </el-radio-group>
+      <div v-show="bill == '贷款台账'">
+        <!-- 列表 -->
+        <div class="mymain-container">
+          <div class="table">
+            <el-table
+              v-loading="listLoading"
+              :data="dataList"
+              element-loading-text="Loading"
+              border
+              fit
+              highlight-current-row
+              stripe
+            >
+              <el-table-column
+                label="序号"
+                align="center"
+                min-width="100"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据日期"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据类型"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据号"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="钱包"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="摘要"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="预付货款"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="订单占款"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="支付货款"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="押金"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="工程保证金"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="其他暂扣款"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="账户余额"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页 -->
+          <div class="fr">
+            <el-pagination
+              :current-page="currentPage"
+              :page-sizes="[10, 20, 30, 50]"
+              :page-size="10"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="listTotal"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+      <div v-show="bill == '返利台账'">
+        <!-- 列表 -->
+        <div class="mymain-container">
+          <div class="table">
+            <el-table
+              v-loading="listLoading"
+              :data="dataList"
+              element-loading-text="Loading"
+              border
+              fit
+              highlight-current-row
+              stripe
+            >
+              <el-table-column
+                label="序号"
+                align="center"
+                min-width="100"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="客户编码"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="客户名称"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据日期"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="审核日期"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据类型"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="单据号"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="返利品类"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="摘要"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="收入"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="支出"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="暂扣返利"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="结存"
+                prop=""
+                min-width="160"
+                show-overflow-tooltip
+              ></el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页 -->
+          <div class="fr">
+            <el-pagination
+              :current-page="currentPage"
+              :page-sizes="[10, 20, 30, 50]"
+              :page-size="10"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="listTotal"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <WalletDetail v-else />
+  </div>
+</template>
+
+<script>
+import WalletDetail from "./components/wallet-detail.vue";
+export default {
+  components: {
+    WalletDetail,
+  },
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: [], // 列表数据
+      searchForm: {}, //搜索表单
+      showRebate: true,
+      category: "家用空调",
+      bill: "贷款台账",
+    };
+  },
+  methods: {
+    //返利钱包
+    rebateFn() {
+      this.showRebate = false;
+    },
+    goBack() {
+      this.$parent.showDetail = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.moneyStyle {
+  height: 130px;
+  border-radius: 20px;
+  padding: 20px 0 0 20px;
+  color: #fff;
+  span {
+    display: block;
+    font-size: 20px;
+  }
+  strong {
+    margin-top: 16px;
+    display: block;
+    font-size: 36px;
+  }
+}
+.selectStyle {
+  width: 100%;
+}
+.color1 {
+  background-color: #6c83d0;
+}
+.color2 {
+  background-color: #dfc062;
+}
+.color3 {
+  background-color: #dfc062;
+}
+.color4 {
+  background-color: #6bcfd7;
+}
+</style>