From fb20cb32dad600f6582ef3c7f54d8cab454a45b3 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Wed, 24 Jan 2024 09:46:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=93=E7=AE=97=E5=8D=95=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E8=B0=83=E4=BC=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/src/api/shops.js                      |   6 +
 manager/src/libs/axios.js                     |  14 +-
 manager/src/views/seller/bill/bill-detail.vue | 923 ++++++++++--------
 seller/src/api/shops.js                       |   4 +
 seller/src/views/shop/bill/billDetail.vue     | 919 ++++++++---------
 5 files changed, 1037 insertions(+), 829 deletions(-)

diff --git a/manager/src/api/shops.js b/manager/src/api/shops.js
index 93d3493e..36cba3c3 100644
--- a/manager/src/api/shops.js
+++ b/manager/src/api/shops.js
@@ -81,3 +81,9 @@ export const getShopList = () => {
 export const getShopByMemberId = (id) => {
   return getRequest(`/store/store/${id}/member`)
 }
+
+//根据id获取店铺信息
+export const downloadBill = (id) => {
+  return getRequest(`/order/bill/downLoad/${id}`, {}, 'blob')
+}
+
diff --git a/manager/src/libs/axios.js b/manager/src/libs/axios.js
index e49d796c..79e7e5ff 100644
--- a/manager/src/libs/axios.js
+++ b/manager/src/libs/axios.js
@@ -171,18 +171,24 @@ function getTokenDebounce() {
   };
 }
 
-export const getRequest = (url, params) => {
+export const getRequest = (url, params, resBlob) => {
   let accessToken = getStore("accessToken");
-  return service({
+  let data = {
     method: "get",
     url: `${url}`,
     params: params,
     headers: {
       accessToken: accessToken
-    }
-  });
+    },
+    responseType: "blob"
+  };
+  if (resBlob != "blob") {
+    delete data.responseType;
+  }
+  return service(data);
 };
 
+
 export const postRequest = (url, params, headers) => {
   let accessToken = getStore("accessToken");
   return service({
diff --git a/manager/src/views/seller/bill/bill-detail.vue b/manager/src/views/seller/bill/bill-detail.vue
index b3743bcf..802e14a6 100644
--- a/manager/src/views/seller/bill/bill-detail.vue
+++ b/manager/src/views/seller/bill/bill-detail.vue
@@ -1,161 +1,252 @@
 <template>
   <div>
     <Card>
-      <p slot="title">商家信息</p>
+      <p slot="title">结算单详情</p>
       <div class="flex flex_align_item">
-        <p>店铺名称：{{ bill.storeName }}</p>
-        <p>银行开户名：{{ bill.bankAccountName }}</p>
-        <p>银行账号：{{ bill.bankAccountNumber }}</p>
-        <p>开户行支行名称：{{ bill.bankName }}</p>
-        <p>支行联行号：{{ bill.bankCode }}</p>
-      </div>
-    </Card>
-    <Card class="mt_10 mb_10">
-      <p slot="title">账单详细</p>
-
-      <div class="tips-status">
-        <span>账单状态 ：</span>
-        <span class="theme_color">{{
-          bill.billStatus | unixSellerBillStatus
-        }}</span>
-        <Button
-          v-if="bill.billStatus == 'CHECK'"
-          size="mini"
-          type="primary"
-          @click="pass()"
-          >付款</Button
-        >
-      </div>
-
-      <table>
-        <tbody>
-          <tr v-for="(item, index) in data" :key="index">
-            <td>{{ item.name }}：</td>
-            <td>{{ item.value }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <div>
-        <h3 class="ml_10" style="padding:10px;">结算详细</h3>
-        <div class="bill-detail-price">
-
-          <span>
-            <p>积分结算金额</p>
-            <p class="increase-color">
-              +{{ bill.pointSettlementPrice || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-          <span>
-            <p>平台优惠券补贴</p>
-            <p class="increase-color">
-              +{{ bill.siteCouponCommission || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-
-          <span>
-            <p>砍价商品结算金额</p>
-            <p class="increase-color">
-              +{{ bill.kanjiaSettlementPrice || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-          <span>
-            <p>退单分销返现返还</p>
-            <p class="increase-color">
-              +{{ bill.distributionRefundCommission || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-          <span>
-            <p>退单产生退还佣金金额</p>
-            <p class="increase-color">
-              +{{ bill.refundCommissionPrice || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-           <span>
-            <p>退单金额</p>
-            <p class="theme_color">
-              -{{ bill.refundPrice || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-
-          <span>
-            <p>平台收取佣金</p>
-            <p class="theme_color">
-              -{{ bill.commissionPrice || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-          <span>
-            <p>分销返现支出</p>
-            <p class="theme_color">
-              -{{ bill.distributionCommission || 0 | unitPrice("￥") }}
-            </p>
-          </span>
-          <span>
-            <p>退单平台优惠券补贴返还</p>
-            <p class="theme_color">
-              -{{ bill.siteCouponRefundCommission || 0 | unitPrice("￥") }}
-            </p>
-          </span>
+        <div class="procedure">
+          <div class="procedure_item" v-for="(item, index) in billStatusStep">
+            <div class="icon" :class="item.className">
+              <Icon type="md-checkmark" size="14" v-if="item.className==='' || bill.billStatus === 'COMPLETE'" />
+              <span v-else>{{index + 1}}</span>
+            </div>
+            <div class="text">{{item.title}}</div>
+          </div>
+        </div>
+        <div>
+          <Button v-if="bill.billStatus == 'CHECK'" type="success" @click="pass()" style="margin-left: 10px;">付款</Button>
+          <Button type="info" @click="download()" style="margin-left: 10px;">下载账单</Button>
         </div>
       </div>
     </Card>
-    <Tabs active-key="key1" @on-click="clickTabs">
-      <Tab-pane label="入账流水" key="key1">
-        <Card>
-          <Table
-            :loading="loading"
-            border
-            :columns="orderColumns"
-            :data="order"
-            ref="table"
-          ></Table>
+    <Card class="mt_10">
+      <p slot="title">账单详细</p>
+      <table>
+        <tbody>
+        <tr v-for="(item,index) in data" :key="index">
+          <td>{{ item.name }}</td>
+          <td>{{ item.value }}</td>
+        </tr>
+        </tbody>
+      </table>
+      <div>
+        <h3 class="ml_10">结算详细</h3>
+        <Table :columns="billColumns" :data="billData"></Table>
+        <div class="bill-detail-price">
+          <div class="flex bill-item">
+          </div>
+        </div>
+      </div>
+    </Card>
+    <Card class="mt_10">
+      <Tabs active-key="tab" type="card">
+        <Tab-pane label="结算单流水" name="order">
+          <Table :loading="loading" border :columns="orderColumns" :data="orderData" ref="table"></Table>
           <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="orderParam.pageNumber"
-              :total="orderTotal"
-              :page-size="orderParam.pageSize"
-              @on-change="orderChangePage"
-              @on-page-size-change="orderChangePageSize"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+            <Page :current="orderParam.pageNumber" :total="orderTotal" :page-size="orderParam.pageSize"
+                  @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" size="small" show-total
+                  show-elevator></Page>
           </Row>
-        </Card>
-      </Tab-pane>
-      <Tab-pane label="退款流水" key="key2">
-        <Card>
-          <Table
-            :loading="loading"
-            border
-            :columns="refundColumns"
-            :data="refund"
-            ref="table"
-          ></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page
-              :current="refundParam.pageNumber"
-              :total="refundTotal"
-              :page-size="refundParam.pageSize"
-              @on-change="getRefund()"
-              @on-page-size-change="getRefund()"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
-          </Row>
-        </Card>
-      </Tab-pane>
-    </Tabs>
+        </Tab-pane>
+      </Tabs>
+    </Card>
   </div>
 </template>
 <script>
 import * as filters from "@/utils/filters";
 import * as API_Shop from "@/api/shops";
+
 export default {
   name: "bill-detail",
   data() {
     return {
       loading: false,
+      billColumns: [
+        {
+          title: '结算金额',
+          key: 'billPrice',
+          align: 'center',
+          width: 200,
+          fixed: 'left',
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.billPrice, "￥")
+            );
+          },
+        },
+        {
+          title: '收入',
+          key: 'pay',
+          align: 'center',
+          children: [
+            {
+              title: '用户实付',
+              key: 'orderPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.orderPrice, "￥")
+                );
+              },
+            }, {
+              title: '平台优惠券补贴',
+              key: 'siteCouponCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
+                );
+              },
+            }, {
+              title: '积分商品补贴',
+              key: 'pointSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.pointSettlementPrice, "￥")
+                );
+              },
+            }, {
+              title: '砍价商品补贴',
+              key: 'kanjiaSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.kanjiaSettlementPrice, "￥")
+                );
+              },
+            }, {
+              title: '分销佣金',
+              key: 'distributionCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {
+                  props: {
+                    value: (0 - params.row.distributionCommission),
+                    color: this.$mainColor
+                  }
+                });
+              },
+            }, {
+              title: '平台服务费',
+              key: 'commissionPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {
+                  props: {
+                    value: (0 - params.row.commissionPrice),
+                    color: this.$mainColor
+                  }
+                });
+              },
+            },
+          ]
+        },
+        {
+          title: '退款',
+          key: 'refund',
+          align: 'center',
+          children: [
+            {
+              title: '退款金额',
+              key: 'refundPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0 - params.row.refundPrice), color: this.$mainColor}});
+              },
+            }, {
+              title: '退单返还平台优惠券补贴',
+              key: 'siteCouponRefundCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {
+                  props: {
+                    value: (0 - params.row.siteCouponRefundCommission),
+                    color: this.$mainColor
+                  }
+                });
+              },
+            }, {
+              title: '退单返还积分商品补贴',
+              key: 'pointRefundSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {
+                  props: {
+                    value: (0 - params.row.pointRefundSettlementPrice),
+                    color: this.$mainColor
+                  }
+                });
+              },
+            }, {
+              title: '退单返还砍价商品补贴',
+              key: 'kanjiaRefundSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {
+                  props: {
+                    value: (0 - params.row.kanjiaRefundSettlementPrice),
+                    color: this.$mainColor
+                  }
+                });
+              },
+            }, {
+              title: '退单返还分销佣金',
+              key: 'distributionRefundCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.distributionRefundCommission, "￥")
+                );
+              },
+            }, {
+              title: '退单返还平台服务费',
+              key: 'refundCommissionPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.refundCommissionPrice, "￥")
+                );
+              },
+            },
+          ]
+        },
+      ],
+      billData: [
+        {
+          billPrice: 0,
+          orderPrice: 0,
+          siteCouponCommission: 0,
+          pointSettlementPrice: 0,
+          kanjiaSettlementPrice: 0,
+          distributionCommission: 0,
+          commissionPrice: 0,
+          refundPrice: 0,
+          siteCouponRefundCommission: 0,
+          pointRefundSettlementPrice: 0,
+          kanjiaRefundSettlementPrice: 0,
+          distributionRefundCommission: 0,
+          refundCommissionPrice: 0
+        },
+      ],
       columns: [
         // 表头
         {
@@ -202,10 +293,14 @@ export default {
           name: "计算中",
           value: 0,
         },
+        {
+          name: "计算中",
+          value: 0,
+        },
       ],
       id: "", // 账单id
       bill: {}, // 账单详情
-      order: [], // 订单列表
+      orderData: [], // 订单列表
       orderParam: {
         // 请求参数
         pageNumber: 1, // 当前页数
@@ -217,198 +312,184 @@ export default {
         endDate: null,
       },
       orderColumns: [
-        // 订单表头
         {
-          title: "入账时间",
-          key: "createTime",
-          minWidth: 120,
-          tooltip: true,
+          title: '结算信息',
+          key: 'pay',
+          align: 'center',
+          children: [
+            {
+              title: "时间",
+              key: "createTime",
+            },
+            {
+              title: "订单编号",
+              key: "orderSn",
+              width: 250,
+            },
+            {
+              title: "子订单号",
+              key: "orderItemSn",
+              width: 250,
+            },
+            {
+              title: "类型",
+              key: "flowType",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", [
+                    h("tag", {props: {color: "blue"}}, "收款"),
+                  ]);
+                } else {
+                  return h("div", [
+                    h("tag", {props: {color: "magenta"}}, "退款"),
+                  ]);
+                }
+              }
+            },
+            {
+              title: "结算金额",
+              key: "billPrice",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", this.$options.filters.unitPrice(params.row.billPrice, "￥")
+                  );
+                } else {
+                  return h("priceColorScheme", {props: {value: (0 - params.row.finalPrice), color: this.$mainColor}});
+                }
+              },
+            },
+          ]
         },
         {
-          title: "订单编号",
-          key: "orderSn",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "订单金额",
-          key: "finalPrice",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.finalPrice,color:this.$mainColor}} );
+          title: '收入',
+          key: 'pay',
+          align: 'center',
+          children: [{
+            title: "补贴",
+            key: "billPrice",
+            render: (h, params) => {
+              if (params.row.pointSettlementPrice == 0) {
+                return h("div", "-");
+              } else if (params.row.flowType == "PAY") {
+                return h("div", this.$options.filters.unitPrice((params.row.pointSettlementPrice + params.row.kanjiaSettlementPrice + params.row.siteCouponCommission), "￥")
+                );
+              } else {
+                return h("priceColorScheme", {props: {value: (0 - (params.row.pointSettlementPrice + params.row.kanjiaSettlementPrice + params.row.siteCouponCommission))}});
+              }
+            },
           },
+            {
+              title: "用户实付",
+              key: "billPrice",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
+                  );
+                } else {
+                  return h("priceColorScheme", {props: {value: (0 - params.row.siteCouponCommission)}});
+                }
+              },
+            },
+            {
+              title: "合计",
+              key: "billPrice",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", this.$options.filters.unitPrice(params.row.finalPrice, "￥")
+                  );
+                } else {
+                  return h("priceColorScheme", {props: {value: (0 - params.row.billPrice)}});
+                }
+              },
+            },
+          ]
+        },
+        {
+          title: '支出',
+          key: 'pay',
+          align: 'center',
+          children: [{
+            title: "平台服务费",
+            key: "billPrice",
+            render: (h, params) => {
+              if (params.row.commissionPrice == 0) {
+                return h("div", "-");
+              } else if (params.row.flowType == "PAY") {
+                return h("div", this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
+                );
+              } else {
+                return h("priceColorScheme", {props: {value: (0 - params.row.commissionPrice)}});
+              }
+            },
+          },
+            {
+              title: "分销佣金",
+              key: "distributionRebate",
+              render: (h, params) => {
+                if (params.row.distributionRebate == 0) {
+                  return h("div", "-");
+                } else if (params.row.flowType == "PAY") {
+                  return h("div", this.$options.filters.unitPrice(params.row.distributionRebate, "￥")
+                  );
+                } else {
+                  return h("priceColorScheme", {props: {value: (0 - params.row.distributionRebate)}});
+                }
+              },
+            },
+            {
+              title: "合计",
+              key: "billPrice",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", this.$options.filters.unitPrice((params.row.commissionPrice + params.row.distributionRebate), "￥")
+                  );
+                } else {
+                  return h("priceColorScheme", {props: {value: (0 - (params.row.commissionPrice + params.row.distributionRebate))}});
+                }
+              },
+            }]
+        }
 
-        },
-        {
-          title: "平台分佣",
-          key: "commissionPrice",
-          width: 120,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "平台优惠券",
-          key: "siteCouponPrice",
-          render: (h, params) => {
-            if (params.row.siteCouponPrice == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.siteCouponPrice,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-        {
-          title: "平台优惠券补贴金额",
-          key: "siteCouponCommission",
-          render: (h, params) => {
-            if (params.row.siteCouponCommission == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.siteCouponCommission,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-        {
-          title: "分销金额",
-          key: "distributionRebate",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.distributionRebate == null) {
-              return h("div", "-");
-            } else {
-              return h("priceColorScheme", {props:{value:params.row.distributionRebate,color:this.$mainColor}} );
-            }
-          },
-        },
-        {
-          title: "应结金额",
-          key: "billPrice",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-          },
-        },
-      ],
-      refund: [], // 退款单
-      refundParam: {
-        // 请求参数
-        flowTypeEnum: "PAY",
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "id", // 默认排序字段
-        order: "desc", // 默认排序方式
-        flowType: "REFUND",
-        startDate: null,
-        endDate: null,
-      },
-      refundColumns: [
-        // 退款单表头
-        {
-          title: "退款时间",
-          key: "createTime",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "退款流水编号",
-          key: "sn",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "订单编号",
-          key: "orderSn",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "售后编号",
-          key: "refundSn",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "退款金额",
-          key: "finalPrice",
-          width: 120,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPfinalPricerice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "退还佣金",
-          key: "commissionPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
-            );
-          },
-        },
-
-        {
-          title: "退还平台优惠券",
-          key: "siteCouponCommission",
-          minWidth: 110,
-        },
-        {
-          title: "退还分销",
-          key: "distributionRebate",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.distributionRebate == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.distributionRebate,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-
-        {
-          title: "合计金额",
-          key: "billPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.billPrice == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(params.row.billPrice, "￥")
-              );
-            }
-          },
-        },
       ],
       orderTotal: 0, // 订单总数
       refundTotal: 0, // 退款单总数
+      // 结算单状态枚举模拟数据
+      billStatusList: [
+        { status: 'OUT', value: '已出账', title: '生成账单' },
+        { status: 'CHECK', value: '已对账', title: '商家对账' },
+        { status: 'PAY', value: '已付款', title: '平台付款' },
+        { status: 'COMPLETE', value: '已完成', title: '结算完成' },
+      ],
+      // 结算单状态步骤
+      billStatusStep: []
     };
   },
   methods: {
+    // 结算单状态
+    getBillStatusStep() {
+      this.billStatusStep = [];
+      let current = '', myCur = false, myIdx = 0;
+      this.billStatusList.map((item, index) => {
+        if (item.status === this.bill.billStatus) {
+          myCur = true; myIdx = index; current = '';
+        } else {
+          if (!myCur) {
+            current = '';
+          } else {
+            if (myIdx+1 === index) {
+              current = 'current';
+            } else {
+              current = 'future';
+            }
+          }
+        }
+        let temp = { ...item, className: current };
+        this.billStatusStep.push (temp);
+      });
+      if (this.bill.billStatus === 'COMPLETE') {
+        this.billStatusStep[this.billStatusStep.length-1].className = 'current';
+      }
+    },
     //订单页数发生变化
     orderChangePage(v) {
       this.orderParam.pageNumber = v;
@@ -420,33 +501,49 @@ export default {
       this.orderParam.pageSize = v;
       this.getOrder();
     },
-    //退款单页数发生变化
-    refundOrderChangePage(v) {
-      this.refundParam.pageNumber = v;
-      this.getRefund();
-    },
-    //退款单每页条数变化
-    refundOrderChangePageSize(v) {
-      this.refundParam.pageSize = v;
-      tthis.getRefund();
-    },
-    clickTabs(index) {
-      this.orderParam.pageNumber = 1
-      if (index == 1) {
-        this.orderParam.flowType = "REFUND";
-        this.getRefund();
-      } else {
-        this.orderParam.flowType = "PAY";
-        this.getOrder();
-      }
-    },
-
+    //平台审核通过（审核通过及付款)
     pass() {
-      API_Shop.pay(this.id).then((res) => {
-        if (res.success) {
-          this.$Message.success(res.message);
-          this.init();
+      this.$Modal.confirm({
+        title: "结算单付款",
+        // 记得确认修改此处
+        content: "确定结算单已付款?",
+        loading: true,
+        onOk: () => {
+          API_Shop.pay(this.id).then((res) => {
+            if (res.success) {
+              this.$Message.success(res.message);
+              this.init();
+            }
+          });
+        },
+      });
+
+
+    },
+    //下载账单
+    download() {
+      API_Shop.downloadBill(this.id).then((res) => {
+        const blob = new Blob([res], {
+          type: "application/vnd.ms-excel;charset=utf-8",
+        });
+        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+        //IE10以上支持blob但是依然不支持download
+        if ("download" in document.createElement("a")) {
+          //支持a标签download的浏览器
+          const link = document.createElement("a"); //创建a标签
+          link.download = "结算单-"+this.id+".xls"; //a标签添加属性
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          document.body.appendChild(link);
+          link.click(); //执行下载
+          URL.revokeObjectURL(link.href); //释放url
+          document.body.removeChild(link); //释放标签
+        } else {
+          navigator.msSaveBlob(blob, fileName);
         }
+      })
+        .catch((err) => {
+          console.log(err);
       });
     },
 
@@ -463,62 +560,65 @@ export default {
           //初始化订单信息
           this.orderParam.startDate = this.bill.startTime;
           this.orderParam.endDate = this.bill.endTime;
-          this.refundParam.startDate = this.bill.startTime;
-          this.refundParam.endDate = this.bill.endTime;
           this.getOrder();
+          // 结算单状态步骤
+          this.getBillStatusStep();
         }
       });
     },
+    // 账单详细
     initTable() {
       let bill = this.bill;
-      this.data[0].name = "结算单号";
-      this.data[0].value = bill.sn;
 
-      this.data[1].name = "起止日期";
-      this.data[1].value = bill.startTime + "~" + bill.endTime;
+      this.data[0].name = "结算单状态";
+      this.data[0].value = filters.unixSellerBillStatus(bill.billStatus);
 
-      this.data[2].name = "出帐日期";
-      this.data[2].value = bill.createTime;
+      this.data[1].name = "结算单号";
+      this.data[1].value = bill.sn;
 
-      this.data[3].name = "当前状态";
-      this.data[3].value = filters.unixSellerBillStatus(bill.billStatus);
+      this.data[2].name = "店铺名称";
+      this.data[2].value = bill.storeName;
 
-      this.data[4].name = "当前店铺";
-      this.data[4].value = bill.storeName;
+      this.data[3].name = "起止日期";
+      this.data[3].value = bill.startTime + "~" + bill.endTime;
 
-      this.data[5].name = "平台打款时间";
-      this.data[5].value = bill.payTime === null ? "未付款" : bill.payTime;
-      this.data[6].name = "订单付款总金额";
-      this.data[6].value = filters.unitPrice(
-        bill.orderPrice ? bill.orderPrice : 0,
-        "¥"
-      );
-      this.data[7].name = "结算金额";
-      this.data[7].value = filters.unitPrice(
-        bill.billPrice ? bill.billPrice : 0,
-        "¥"
-      );
+      this.data[4].name = "银行开户名";
+      this.data[4].value = bill.bankAccountName;
+
+      this.data[5].name = "银行账号";
+      this.data[5].value = bill.bankAccountNumber;
+
+      this.data[6].name = "开户行支行名称";
+      this.data[6].value = bill.bankName;
+
+      this.data[7].name = "支行联行号";
+      this.data[7].value = bill.bankCode;
+
+      this.data[8].name = "支付时间";
+      this.data[8].value = bill.payTime === null ? "未付款" : bill.payTime;
+
+      this.billData[0].billPrice = this.bill.billPrice;
+      this.billData[0].orderPrice = this.bill.orderPrice;
+      this.billData[0].siteCouponCommission = this.bill.siteCouponCommission;
+      this.billData[0].pointSettlementPrice = this.bill.pointSettlementPrice;
+      this.billData[0].kanjiaSettlementPrice = this.bill.kanjiaSettlementPrice;
+      this.billData[0].distributionCommission = this.bill.distributionCommission;
+      this.billData[0].commissionPrice = this.bill.commissionPrice;
+      this.billData[0].refundPrice = this.bill.refundPrice;
+      this.billData[0].siteCouponRefundCommission = this.bill.siteCouponRefundCommission;
+      this.billData[0].pointRefundSettlementPrice = this.bill.pointRefundSettlementPrice;
+      this.billData[0].kanjiaRefundSettlementPrice = this.bill.kanjiaRefundSettlementPrice;
+      this.billData[0].distributionRefundCommission = this.bill.distributionRefundCommission;
+      this.billData[0].refundCommissionPrice = this.bill.refundCommissionPrice;
     },
     getOrder() {
       API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
         if (res.result) {
-          this.order = res.result.records;
+          this.orderData = res.result.records;
           this.orderTotal = res.result.total;
         }
       });
-      this.orderTotal = this.order.length;
-    },
-    getRefund() {
-      API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
-        this.loading = false;
-        if (res.result) {
-          this.refund = res.result.records;
-          this.refundTotal = res.result.total;
-
-          this.$set(this, "refund", res.result.records);
-        }
-      });
-      this.refundTotal = this.refund.length;
+      this.orderTotal = this.orderData.length;
     },
   },
   mounted() {
@@ -531,52 +631,99 @@ export default {
 .flex {
   justify-content: space-between;
   flex-wrap: wrap;
+
   > p {
     width: 50%;
     margin: 15px 0;
   }
 }
+
 .tips-status {
   padding: 10px;
   font-size: 14px;
+
   > span {
     font-weight: bold;
     margin-right: 8px;
   }
+
   > span:nth-of-type(2) {
     color: $theme_color;
   }
 }
+
 table {
   font-size: 14px;
   margin-left: 40px;
+
   tr {
     font-size: 12px;
     height: 40px;
     padding: 10px;
+
     td:nth-child(1) {
       width: 120px;
     }
   }
 }
+
 .bill-detail-price {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding: 10px;
+
   > span {
     font-size: 14px;
     text-align: center;
     width: 200px;
     margin-bottom: 20px;
   }
+
   .increase-color {
     color: green;
-    margin-top:5px
-  }
-  .theme_color {
-    margin-top:5px
+    margin-top: 5px
   }
 
+  .theme_color {
+    margin-top: 5px
+  }
+}
+
+.procedure {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 12px 0 12px 20px;
+  .procedure_item {
+    width: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      width: 24px;
+      height: 24px;
+      text-align: center;
+      line-height: 24px;
+      border-radius: 50%;
+      margin-right: 14px;
+      font-weight: normal;
+      background-color: #e6f7ff;
+      color: #1890ff;
+    }
+    .current {
+      background-color: #2d8cf0;
+      color: #ffffff;
+    }
+    .future {
+      background-color: #f7f7f7;
+      color: #515a6e;
+    }
+    .text {
+
+    }
+  }
 }
 </style>
diff --git a/seller/src/api/shops.js b/seller/src/api/shops.js
index f7f4f412..c5c2f695 100644
--- a/seller/src/api/shops.js
+++ b/seller/src/api/shops.js
@@ -26,6 +26,10 @@ export const getSellerFlow = (id, params) => {
 export const reconciliation = (id, params) => {
   return putRequest(`/order/bill/check/${id}/`, params)
 }
+//根据id获取店铺信息
+export const downloadBill = (id) => {
+  return getRequest(`/order/bill/downLoad/${id}`, {}, 'blob')
+}
 
 // 获取商家分销订单流水分页
 export const getDistributionFlow = (id, params) => {
diff --git a/seller/src/views/shop/bill/billDetail.vue b/seller/src/views/shop/bill/billDetail.vue
index 04317332..9b92d307 100644
--- a/seller/src/views/shop/bill/billDetail.vue
+++ b/seller/src/views/shop/bill/billDetail.vue
@@ -1,102 +1,54 @@
 <template>
   <div class="bill-detail">
+
     <Card>
-      <p slot="title">商家信息</p>
+      <p slot="title">结算单详情</p>
       <div class="flex flex_align_item">
-        <p>店铺名称：{{ bill.storeName }}</p>
-        <p>银行开户名：{{ bill.bankAccountName }}</p>
-        <p>银行账号：{{ bill.bankAccountNumber }}</p>
-        <p>开户行支行名称：{{ bill.bankName }}</p>
-        <p>支行联行号：{{ bill.bankCode }}</p>
+        <div class="procedure">
+          <div class="procedure_item" v-for="(item, index) in billStatusStep">
+            <div class="icon" :class="item.className">
+              <Icon type="md-checkmark" size="14" v-if="item.className==='' || bill.billStatus === 'COMPLETE'" />
+              <span v-else>{{index + 1}}</span>
+            </div>
+            <div class="text">{{item.title}}</div>
+          </div>
+        </div>
+        <div>
+          <Button type="info" @click="download()" style="margin-left: 10px;">下载账单</Button>
+          <Button v-if="bill.billStatus == 'OUT'" @click="reconciliation()" type="success" style="margin-left: 10px;">对账</Button>
+        </div>
+
       </div>
+
     </Card>
+
     <Card class="mt_10">
       <p slot="title">账单详细</p>
-
-      <div class="tips-status">
-        <span>账单状态</span>
-
-        <span class="theme_color">{{
-          bill.billStatus | unixSellerBillStatus
-        }}</span>
-
-        <Button v-if="bill.billStatus == 'OUT'" size="mini" @click="reconciliation()" type="primary">对账</Button>
-      </div>
       <table>
         <tbody>
-          <tr v-for="(item,index) in data" :key="index">
-            <td>{{item.name}}</td>
-            <td>{{item.value}}</td>
-          </tr>
+        <tr v-for="(item,index) in data" :key="index">
+          <td>{{ item.name }}</td>
+          <td>{{ item.value }}</td>
+        </tr>
         </tbody>
       </table>
       <div>
         <h3 class="ml_10">结算详细</h3>
+        <Table :columns="billColumns" :data="billData"></Table>
         <div class="bill-detail-price">
           <div class="flex bill-item">
-            <span>
-              <p>退单金额</p>
-              <p class="theme_color">-{{bill.refundPrice || 0 | unitPrice('￥')}}</p>
-            </span>
-            <span>
-              <p>平台收取佣金</p>
-              <p class="theme_color">-{{bill.commissionPrice || 0 | unitPrice('￥')}}</p>
-            </span>
-            <span>
-              <p>分销返现支出</p>
-              <p class="theme_color">-{{bill.distributionCommission || 0  | unitPrice('￥')}}</p>
-            </span>
-            <span>
-              <p>退单平台优惠券补贴返还</p>
-              <p class="theme_color">-{{bill.siteCouponRefundCommission || 0  | unitPrice('￥')}}</p>
-            </span>
-             </div>
-            <div class="flex bill-item">
-            <span>
-              <p>平台优惠券补贴</p>
-              <p class="increase-color">+{{bill.siteCouponCommission || 0  | unitPrice('￥')}}</p>
-            </span>
-              <span>
-        		    <p>退单产生退还佣金金额</p>
-        		    <p class="increase-color">+{{bill.refundCommissionPrice || 0  | unitPrice('￥')}}</p>
-        		  </span>
-        		  <span>
-        		    <p>退单分销返现返还</p>
-        		    <p class="increase-color">+{{bill.distributionRefundCommission || 0  | unitPrice('￥')}}</p>
-        		  </span>
-            <span>
-              <p>积分结算金额</p>
-              <p class="increase-color">+{{bill.pointSettlementPrice || 0  | unitPrice('￥')}}</p>
-            </span>
-            <span>
-              <p>砍价商品结算金额</p>
-              <p class="increase-color">+{{bill.kanjiaSettlementPrice || 0  | unitPrice('￥')}}</p>
-            </span>
-            </div>
           </div>
         </div>
+      </div>
     </Card>
     <Card class="mt_10">
-      <Tabs active-key="tab" type="card" @on-click="clickTabs">
-        <Tab-pane label="订单列表" name="order">
+      <Tabs active-key="tab" type="card">
+        <Tab-pane label="结算单流水" name="order">
           <Table :loading="loading" border :columns="orderColumns" :data="orderData" ref="table"></Table>
           <Row type="flex" justify="end" class="mt_10">
-            <Page :current="orderParam.pageNumber" :total="orderTotal" :page-size="orderParam.pageSize" @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" size="small" show-total
-              show-elevator></Page>
-          </Row>
-        </Tab-pane>
-        <Tab-pane label="退单列表" name="refund">
-          <Table :loading="loading" border :columns="refundColumns" :data="refundData" ref="table"></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page :current="refundParam.pageNumber" :total="refundTotal" :page-size="refundParam.pageSize" @on-change="refundChangePage" @on-page-size-change="refundChangePageSize" size="small"
-              show-total show-elevator></Page>
-          </Row>
-        </Tab-pane>
-        <Tab-pane label="分销费用列表" name="distribution">
-          <Table :loading="loading" border :columns="distributionColumns" :data="distributionData" ref="table"></Table>
-          <Row type="flex" justify="end" class="mt_10">
-            <Page :current="distributionParam.pageNumber" :total="distributionTotal" :page-size="distributionParam.pageSize" @on-change="distributionChangePage"
-              @on-page-size-change="distributionChangePageSize" size="small" show-total show-elevator></Page>
+            <Page :current="orderParam.pageNumber" :total="orderTotal" :page-size="orderParam.pageSize"
+                  @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" size="small" show-total
+                  show-elevator></Page>
           </Row>
         </Tab-pane>
       </Tabs>
@@ -106,11 +58,174 @@
 <script>
 import * as filters from "@/utils/filters";
 import * as API_Shop from "@/api/shops";
+
 export default {
   name: "bill-detail",
   data() {
     return {
       loading: true,
+      billColumns: [
+        {
+          title: '结算金额',
+          key: 'billPrice',
+          align: 'center',
+          width: 200,
+          fixed: 'left',
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.billPrice, "￥")
+            );
+          },
+        },
+        {
+          title: '收入',
+          key: 'pay',
+          align: 'center',
+          children: [
+            {
+              title: '用户实付',
+              key: 'orderPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.orderPrice, "￥")
+                );
+              },
+            }, {
+              title: '平台优惠券补贴',
+              key: 'siteCouponCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
+                );
+              },
+            }, {
+              title: '积分商品补贴',
+              key: 'pointSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.pointSettlementPrice, "￥")
+                );
+              },
+            }, {
+              title: '砍价商品补贴',
+              key: 'kanjiaSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.kanjiaSettlementPrice, "￥")
+                );
+              },
+            }, {
+              title: '分销佣金',
+              key: 'distributionCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.distributionCommission), color: this.$mainColor}});
+              },
+            }, {
+              title: '平台服务费',
+              key: 'commissionPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.commissionPrice), color: this.$mainColor}});
+              },
+            },
+          ]
+        },
+        {
+          title: '退款',
+          key: 'refund',
+          align: 'center',
+          children: [
+            {
+              title: '退款金额',
+              key: 'refundPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.refundPrice), color: this.$mainColor}});
+              },
+            }, {
+              title: '退单返还平台优惠券补贴',
+              key: 'siteCouponRefundCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.siteCouponRefundCommission), color: this.$mainColor}});
+              },
+            }, {
+              title: '退单返还积分商品补贴',
+              key: 'pointRefundSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.pointRefundSettlementPrice), color: this.$mainColor}});
+              },
+            }, {
+              title: '退单返还砍价商品补贴',
+              key: 'kanjiaRefundSettlementPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h("priceColorScheme", {props: {value: (0-params.row.kanjiaRefundSettlementPrice), color: this.$mainColor}});
+              },
+            }, {
+              title: '退单返还分销佣金',
+              key: 'distributionRefundCommission',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.distributionRefundCommission, "￥")
+                );
+              },
+            }, {
+              title: '退单返还平台服务费',
+              key: 'refundCommissionPrice',
+              align: 'center',
+              width: 200,
+              render: (h, params) => {
+                return h(
+                  "div",
+                  this.$options.filters.unitPrice(params.row.refundCommissionPrice, "￥")
+                );
+              },
+            },
+          ]
+        },
+      ],
+      billData: [
+        {
+          billPrice: 0,
+          orderPrice: 0,
+          siteCouponCommission: 0,
+          pointSettlementPrice: 0,
+          kanjiaSettlementPrice: 0,
+          distributionCommission: 0,
+          commissionPrice: 0,
+          refundPrice: 0,
+          siteCouponRefundCommission: 0,
+          pointRefundSettlementPrice: 0,
+          kanjiaRefundSettlementPrice: 0,
+          distributionRefundCommission: 0,
+          refundCommissionPrice: 0
+        },
+      ],
       columns: [
         {
           title: "项目",
@@ -165,308 +280,171 @@ export default {
         pageSize: 10, // 页面大小
         sort: "id", // 默认排序字段
         order: "desc", // 默认排序方式
-        flowType: "PAY",
+
       },
       orderColumns: [
         {
-          title: "入账时间",
-          key: "createTime",
+          title: '结算信息',
+          key: 'pay',
+          align: 'center',
+          children: [
+            {
+              title: "时间",
+              key: "createTime",
+            },
+            {
+              title: "订单编号",
+              key: "orderSn",
+              width: 250,
+            },
+            {
+              title: "子订单号",
+              key: "orderItemSn",
+              width: 250,
+            },
+            {
+              title: "类型",
+              key: "flowType",
+              render: (h, params) => {
+                if (params.row.flowType == "PAY") {
+                  return h("div", [
+                    h("tag", {props: {color: "blue"}}, "收款"),
+                  ]);
+                }else{
+                  return h("div", [
+                    h("tag", {props: {color: "magenta"}}, "退款"),
+                  ]);
+                }
+              }
+            },
+            {
+              title: "结算金额",
+              key: "billPrice",
+              render: (h, params) => {
+                if(params.row.flowType == "PAY"){
+                  return h("div", this.$options.filters.unitPrice(params.row.billPrice, "￥")
+                  );
+                }else{
+                  return h("priceColorScheme", {props: {value: (0-params.row.finalPrice), color: this.$mainColor}});
+                }
+              },
+            },
+          ]
         },
         {
-          title: "订单编号",
-          key: "orderSn",
-        },
-        {
-          title: "订单金额",
-          key: "finalPrice",
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.finalPrice,color:this.$mainColor}} );
+          title: '收入',
+          key: 'pay',
+          align: 'center',
+          children: [{
+            title: "补贴",
+            key: "billPrice",
+            render: (h, params) => {
+              if (params.row.pointSettlementPrice == 0) {
+                return h("div", "-");
+              }else if(params.row.flowType == "PAY"){
+                return h("div", this.$options.filters.unitPrice((params.row.pointSettlementPrice+params.row.kanjiaSettlementPrice+params.row.siteCouponCommission) , "￥")
+                );
+              }else{
+                return h("priceColorScheme", {props: {value: (0-(params.row.pointSettlementPrice+params.row.kanjiaSettlementPrice+params.row.siteCouponCommission))}});
+              }
+            },
           },
+            {
+              title: "用户实付",
+              key: "billPrice",
+              render: (h, params) => {
+                if(params.row.flowType == "PAY"){
+                  return h("div", this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
+                  );
+                }else{
+                  return h("priceColorScheme", {props: {value: (0-params.row.siteCouponCommission)}});
+                }
+              },
+            },
+            {
+              title: "合计",
+              key: "billPrice",
+              render: (h, params) => {
+                if(params.row.flowType == "PAY"){
+                  return h("div", this.$options.filters.unitPrice(params.row.finalPrice, "￥")
+                  );
+                }else{
+                  return h("priceColorScheme", {props: {value: (0-params.row.billPrice)}});
+                }
+              },
+            },
+          ]
         },
         {
-          title: "砍价商品结算价格",
-          key: "kanjiaSettlementPrice",
-          render: (h, params) => {
-            if (params.row.kanjiaSettlementPrice) {
-              return h("priceColorScheme", {props:{value:params.row.kanjiaSettlementPrice,color:this.$mainColor}} );
-            } else {
-              return h("div", "￥0.00");
-            }
+          title: '支出',
+          key: 'pay',
+          align: 'center',
+          children: [{
+            title: "平台服务费",
+            key: "billPrice",
+            render: (h, params) => {
+              if (params.row.commissionPrice == 0) {
+                return h("div", "-");
+              }else if(params.row.flowType == "PAY"){
+                return h("div", this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
+                );
+              }else{
+                return h("priceColorScheme", {props: {value: (0-params.row.commissionPrice)}});
+              }
+            },
           },
-        },
-        {
-          title: "积分商品结算价格",
-          key: "pointSettlementPrice",
-          render: (h, params) => {
-            if (params.row.pointSettlementPrice) {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.pointSettlementPrice,
-                  "￥"
-                )
-              );
-            } else {
-              return h("div", "￥0.00");
-            }
-          },
-        },
-        {
-          title: "平台分佣",
-          key: "commissionPrice",
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "平台优惠券",
-          key: "siteCouponPrice",
-          render: (h, params) => {
-            if (params.row.siteCouponPrice == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.siteCouponPrice,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-		{
-		  title: "平台优惠券补贴金额",
-		  key: "siteCouponCommission",
-		  render: (h, params) => {
-		    if(params.row.siteCouponCommission == null){
-		      return h(
-		        "div",
-		        "-"
-		      );
-		    }else{
-		      return h(
-		        "div",
-		        this.$options.filters.unitPrice(params.row.siteCouponCommission, "￥")
-		      );
-		    }
+            {
+              title: "分销佣金",
+              key: "distributionRebate",
+              render: (h, params) => {
+                if (params.row.distributionRebate == 0) {
+                  return h("div", "-");
+                } else if(params.row.flowType == "PAY"){
+                  return h("div", this.$options.filters.unitPrice(params.row.distributionRebate, "￥")
+                  );
+                }else{
+                  return h("priceColorScheme", {props: {value: (0-params.row.distributionRebate)}});
+                }
+
+                // if (params.row.distributionRebate == null) {
+                //   return h("div", "-");
+                // } else {
+                //   return h(
+                //     "div",
+                //     this.$options.filters.unitPrice(
+                //       params.row.distributionRebate,
+                //       "￥"
+                //     )
+                //   );
+                // }
+              },
+            },
+            {
+              title: "合计",
+              key: "billPrice",
+              render: (h, params) => {
+                if(params.row.flowType == "PAY"){
+                  return h("div", this.$options.filters.unitPrice((params.row.commissionPrice+params.row.distributionRebate), "￥")
+                  );
+                }else{
+                  return h("priceColorScheme", {props: {value: (0-(params.row.commissionPrice+params.row.distributionRebate))}});
+                }
+              },
+            }]
+        }
 
-		  },
-		},
-        {
-          title: "分销金额",
-          key: "distributionRebate",
-          render: (h, params) => {
-            if (params.row.distributionRebate == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.distributionRebate,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-        {
-          title: "应结金额",
-          key: "billPrice",
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.billPrice, "￥")
-            );
-          },
-        },
       ],
       orderData: [], // 订单列表
       orderTotal: 0, // 订单数量
-      //退单部分
-      refundParam: {
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "id", // 默认排序字段
-        order: "desc", // 默认排序方式
-        flowType: "REFUND",
-      },
-      refundColumns: [
-        {
-          title: "退款时间",
-          key: "createTime",
-          minWidth: 120,
-        },
-        {
-          title: "退款流水编号",
-          key: "sn",
-          minWidth: 120,
-          tooltip: true
-        },
-        {
-          title: "订单编号",
-          key: "orderSn",
-          minWidth: 120,
-          tooltip: true
-        },
-        {
-          title: "售后编号",
-          key: "refundSn",
-          minWidth: 120,
-          tooltip: true
-        },
-        {
-          title: "退款金额",
-          key: "finalPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "退还佣金",
-          key: "commissionPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.commissionPrice) {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.commissionPrice,
-                  "￥"
-                )
-              );
-            } else {
-              return h("div", this.$options.filters.unitPrice(0, "￥"));
-            }
-          },
-        },
-
-        {
-          title: "退还平台优惠券",
-          key: "siteCouponCommission",
-          minWidth: 140,
-        },
-        {
-          title: "退还分销",
-          key: "distributionRebate",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.distributionRebate == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  params.row.distributionRebate,
-                  "￥"
-                )
-              );
-            }
-          },
-        },
-
-        {
-          title: "合计金额",
-          key: "billPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.billPrice == null) {
-              return h("div", "-");
-            } else {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(params.row.billPrice, "￥")
-              );
-            }
-          },
-        },
+      // 结算单状态枚举模拟数据
+      billStatusList: [
+        { status: 'OUT', value: '已出账', title: '生成账单' },
+        { status: 'CHECK', value: '已对账', title: '商家对账' },
+        { status: 'PAY', value: '已付款', title: '平台付款' },
+        { status: 'COMPLETE', value: '已完成', title: '结算完成' },
       ],
-      refundData: [], // 退单数据
-      refundTotal: 0, // 退单数量
-      //分销佣金部分
-      distributionParam: {
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "id", // 默认排序字段
-        order: "desc", // 默认排序方式
-      },
-      distributionColumns: [
-        {
-          title: "订单编号",
-          key: "sn",
-          minWidth: 120,
-        },
-        {
-          title: "交易金额",
-          key: "finalPrice",
-          minWidth: 120,
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          tooltip: true,
-        },
-        {
-          title: "规格",
-          key: "finalPrice",
-          minWidth: 120,
-          render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.finalPrice, "￥")
-            );
-          },
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-        },
-
-        {
-          title: "佣金",
-          key: "distributionRebate",
-          minWidth: 120,
-          render: (h, params) => {
-            if (params.row.flowType === "退款") {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(
-                  "-" + params.row.distributionRebate,
-                  "￥"
-                )
-              );
-            } else {
-              if (params.row.distributionRebate) {
-                return h(
-                  "div",
-                  this.$options.filters.unitPrice(
-                    params.row.distributionRebate,
-                    "￥"
-                  )
-                );
-              } else {
-                return h("div", this.$options.filters.unitPrice(0, "￥"));
-              }
-            }
-          },
-        },
-        {
-          title: "时间",
-          key: "createTime",
-          minWidth: 120,
-        },
-      ],
-      distributionData: [], // 分销数据
-      distributionTotal: 0, // 分销总数
+      // 结算单状态步骤
+      billStatusStep: []
     };
   },
   watch: {
@@ -476,15 +454,29 @@ export default {
     },
   },
   methods: {
-    clickTabs(v) {
-      if (v == "order") {
-        this.orderParam.flowType = "PAY";
-        this.getOrderList();
-      } else if (v === "refund") {
-        this.orderParam.flowType = "REFUND";
-        this.getRefundList();
-      } else {
-        this.getDistributionList();
+    // 结算单状态
+    getBillStatusStep() {
+      this.billStatusStep = [];
+      let current = '', myCur = false, myIdx = 0;
+      this.billStatusList.map((item, index) => {
+        if (item.status === this.bill.billStatus) {
+          myCur = true; myIdx = index; current = '';
+        } else {
+          if (!myCur) {
+            current = '';
+          } else {
+            if (myIdx+1 === index) {
+              current = 'current';
+            } else {
+              current = 'future';
+            }
+          }
+        }
+        let temp = { ...item, className: current };
+        this.billStatusStep.push (temp);
+      });
+      if (this.bill.billStatus === 'COMPLETE') {
+        this.billStatusStep[this.billStatusStep.length-1].className = 'current';
       }
     },
     //核对结算单
@@ -528,44 +520,6 @@ export default {
         }
       });
     },
-    //退单部分
-    refundChangePage(v) {
-      this.refundParam.pageNumber = v;
-      this.getRefundList();
-    },
-    refundChangePageSize(v) {
-      this.refundParam.pageSize = v;
-      this.getRefundList();
-    },
-    getRefundList() {
-      API_Shop.getSellerFlow(this.id, this.refundParam).then((res) => {
-        this.loading = false;
-        if (res.result) {
-          this.refundData = res.result.records;
-          this.refundTotal = res.result.total;
-        }
-      });
-    },
-    //分销费用列表
-    distributionChangePage(v) {
-      this.distributionParam.pageNumber = v;
-      this.getDistributionList();
-    },
-    distributionChangePageSize(v) {
-      this.distributionParam.pageSize = v;
-      this.getDistributionList();
-    },
-    getDistributionList() {
-      API_Shop.getDistributionFlow(this.id, this.distributionParam).then(
-        (res) => {
-          this.loading = false;
-          if (res.result) {
-            this.distributionData = res.result.records;
-            this.distributionTotal = res.result.total;
-          }
-        }
-      );
-    },
     //获取结算单详细
     getBill() {
       API_Shop.getBillDetail(this.id).then((res) => {
@@ -575,40 +529,78 @@ export default {
           this.initTable();
           //初始化订单信息
           this.getOrderList();
+          // 结算单状态步骤
+          this.getBillStatusStep();
         }
       });
     },
     // 账单详细
     initTable() {
       let bill = this.bill;
-      this.data[0].name = "结算单号";
-      this.data[0].value = bill.sn;
 
-      this.data[1].name = "起止日期";
-      this.data[1].value = bill.startTime + "~" + bill.endTime;
+      this.data[0].name = "结算单状态";
+      this.data[0].value = filters.unixSellerBillStatus(bill.billStatus);
 
-      this.data[2].name = "出帐日期";
-      this.data[2].value = bill.createTime;
+      this.data[1].name = "结算单号";
+      this.data[1].value = bill.sn;
 
-      this.data[3].name = "当前状态";
-      this.data[3].value = filters.unixSellerBillStatus(bill.billStatus);
+      this.data[2].name = "店铺名称";
+      this.data[2].value = bill.storeName;
 
-      this.data[4].name = "当前店铺";
-      this.data[4].value = bill.storeName;
+      this.data[3].name = "起止日期";
+      this.data[3].value = bill.startTime + "~" + bill.endTime;
 
-      this.data[5].name = "平台打款时间";
-      this.data[5].value = bill.payTime === null ? "未付款" : bill.payTime;
+      this.data[4].name = "银行开户名";
+      this.data[4].value = bill.bankAccountName;
 
-      this.data[6].name = "订单付款总金额";
-      this.data[6].value = filters.unitPrice(
-        bill.orderPrice ? bill.orderPrice : 0,
-        "¥"
-      );
-      this.data[7].name = "结算金额";
-      this.data[7].value = filters.unitPrice(
-        bill.billPrice ? bill.billPrice : 0,
-        "¥"
-      );
+      this.data[5].name = "银行账号";
+      this.data[5].value = bill.bankAccountNumber;
+
+      this.data[6].name = "开户行支行名称";
+      this.data[6].value = bill.bankName;
+
+      this.data[7].name = "支行联行号";
+      this.data[7].value = bill.bankCode;
+
+      this.billData[0].billPrice = this.bill.billPrice;
+      this.billData[0].orderPrice = this.bill.orderPrice;
+      this.billData[0].siteCouponCommission = this.bill.siteCouponCommission;
+      this.billData[0].pointSettlementPrice = this.bill.pointSettlementPrice;
+      this.billData[0].kanjiaSettlementPrice = this.bill.kanjiaSettlementPrice;
+      this.billData[0].distributionCommission = this.bill.distributionCommission;
+      this.billData[0].commissionPrice = this.bill.commissionPrice;
+      this.billData[0].refundPrice = this.bill.refundPrice;
+      this.billData[0].siteCouponRefundCommission = this.bill.siteCouponRefundCommission;
+      this.billData[0].pointRefundSettlementPrice = this.bill.pointRefundSettlementPrice;
+      this.billData[0].kanjiaRefundSettlementPrice = this.bill.kanjiaRefundSettlementPrice;
+      this.billData[0].distributionRefundCommission = this.bill.distributionRefundCommission;
+      this.billData[0].refundCommissionPrice = this.bill.refundCommissionPrice;
+    },
+    //下载账单
+    download() {
+      API_Shop.downloadBill(this.id).then((res) => {
+        const blob = new Blob([res], {
+          type: "application/vnd.ms-excel;charset=utf-8",
+        });
+        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+        //IE10以上支持blob但是依然不支持download
+        if ("download" in document.createElement("a")) {
+          //支持a标签download的浏览器
+          const link = document.createElement("a"); //创建a标签
+          link.download = "结算单-"+this.id+".xls"; //a标签添加属性
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          document.body.appendChild(link);
+          link.click(); //执行下载
+          URL.revokeObjectURL(link.href); //释放url
+          document.body.removeChild(link); //释放标签
+        } else {
+          navigator.msSaveBlob(blob, fileName);
+        }
+      })
+        .catch((err) => {
+          console.log(err);
+        });
     },
   },
   mounted() {
@@ -621,6 +613,8 @@ export default {
     }
     next();
   },
+
+
 };
 </script>
 
@@ -628,58 +622,109 @@ export default {
 .flex {
   justify-content: space-between;
   flex-wrap: wrap;
+
   > p {
     width: 50%;
     margin: 15px 0;
   }
 }
+
 .page {
   margin-top: 10px;
 }
+
 .tips-status {
   padding: 10px;
   font-size: 14px;
+
   > span {
     font-weight: bold;
     margin-right: 8px;
   }
+
   > span:nth-of-type(2) {
     color: $theme_color;
   }
 }
+
 table {
   font-size: 14px;
   margin-left: 20px;
+
   tr {
     height: 40px;
     padding: 10px;
+
     td:nth-child(1) {
       width: 120px;
     }
   }
 }
+
 .bill-detail-price {
   width: 1200px;
   margin: 10px 0;
   padding: 10px;
+
   /deep/ span {
     font-size: 14px;
     text-align: center;
     width: 200px;
     margin-bottom: 10px;
   }
+
   .theme_color {
     color: $theme_color;
   }
+
   .increase-color {
     color: green;
   }
-  div{
 
-  margin: 20px 0;
+  div {
+
+    margin: 20px 0;
   }
 }
-.bill-item{
+
+.bill-item {
   justify-content: flex-start;
 }
+
+.procedure {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 12px 0 12px 20px;
+  .procedure_item {
+    width: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      width: 24px;
+      height: 24px;
+      text-align: center;
+      line-height: 24px;
+      border-radius: 50%;
+      margin-right: 14px;
+      font-weight: normal;
+      background-color: #e6f7ff;
+      color: #1890ff;
+    }
+    .current {
+      background-color: #2d8cf0;
+      color: #ffffff;
+    }
+    .future {
+      background-color: #f7f7f7;
+      color: #515a6e;
+    }
+    .text {
+
+    }
+  }
+}
 </style>