结算单添加砍价，积分商品金额

manager/src/views/seller/bill/bill-detail.vue

@@ -15,22 +15,65 @@
 
       <div class="tips-status">
         <span>商品状态</span>
-
+        <span class="theme_color">{{bill.billStatus | unixSellerBillStatus}}</span>
-        <span class="theme_color">{{
-          bill.billStatus | unixSellerBillStatus
-        }}</span>
-
-
         <Button
           v-if="bill.billStatus == 'CHECK'"
           size="mini"
           type="primary"
           @click="pass()"
-          >付款</Button
+          >付款</Button>
-        >
       </div>
 
-      <i-table :columns="columns" :data="data" stripe></i-table>
+      <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>
+        <div class="bill-detail-price">
+          <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.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.siteCouponRefundCommission || 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>
     </Card>
     <Tabs active-key="key1" @on-click="clickTabs">
       <Tab-pane label="入账流水" key="key1">
@@ -125,15 +168,14 @@ export default {
           name: "计算中",
           value: 0,
         },
-
         {
           name: "计算中",
           value: 0,
         },
-        {
+         {
           name: "计算中",
           value: 0,
-        },
+        }
       ],
       id: "", // 账单id 
       bill: {}, // 账单详情
@@ -171,35 +213,6 @@ export default {
             );
           },
         },
-        {
-          title: "砍价商品结算价格",
-          slot: "kanjiaSettlementPrice",
-          render: (h, params) => {
-            if (params.row.kanjiaSettlementPrice) {
-              return h(
-                "div",
-                this.$options.filters.unitPrice(params.row.kanjiaSettlementPrice, "￥")
-              );
-            } else {
-              return h('div','￥0.00')
-            }
-            
-          },
-        },
-        {
-          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",
@@ -373,6 +386,7 @@ export default {
     },
     //订单每页条数变化
     orderChangePageSize(v) {
+      this.orderParam.pageNumber = 1;
       this.orderParam.pageSize = v;
       this.getOrder();
     },
@@ -414,7 +428,7 @@ export default {
       API_Shop.getBuyBillDetail(this.id).then((res) => {
         if (res.success) {
           this.bill = res.result;
-          //初始化表哥
+          //初始化表格
           this.initTable();
           //初始化订单信息
           this.orderParam.startDate = this.bill.startTime;
@@ -444,32 +458,11 @@ export default {
 
       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[6].name = "结算金额";
-      this.data[6].value = filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥");
-
-      this.data[7].name = "结算详细";
-      this.data[7].value =
-        "最终结算金额(" +
-        filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥") +
-        ") = 订单付款总金额(" +
-        filters.unitPrice(bill.orderPrice?bill.orderPrice:0, "¥") +
-        ") - 退单金额(" +
-        filters.unitPrice(bill.refundPrice?bill.refundPrice:0, "¥") +
-        ")" +
-        "- 平台收取佣金(" +
-        filters.unitPrice(bill.commissionPrice?bill.commissionPrice:0, "¥") +
-        ") + 退单产生退还佣金金额(" +
-        filters.unitPrice(bill.refundCommissionPrice?bill.refundCommissionPrice:0, "¥") +
-        ") - 分销返现支出(" +
-        filters.unitPrice(bill.distributionCommission?bill.distributionCommission:0, "¥") +
-        ") + 退单分销返现返还(" +
-        filters.unitPrice(bill.distributionRefundCommission?bill.distributionRefundCommission:0, "¥") +
-        ") - 平台优惠券支出(" +
-        filters.unitPrice(bill.siteCouponCommission?bill.siteCouponCommission:0, "¥") +
-        ") + 退单平台优惠券返还(" +
-        filters.unitPrice(bill.siteCouponRefundCommission?bill.siteCouponRefundCommission:0, "¥") +
-        ")";
     },
     getOrder() {
       API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
@@ -510,7 +503,8 @@ export default {
   }
 }
 .tips-status {
-  padding: 18px;
+  padding: 10px;
+  font-size: 14px;
   > span {
     font-weight: bold;
     margin-right: 8px;
@@ -519,4 +513,30 @@ export default {
     color: $theme_color;
   }
 }
+table{
+  font-size: 14px;
+  margin-left: 20px;
+  tr{
+    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: 10px;
+  }
+  .increase-color{
+    color: green;
+  }
+}
 </style>

seller/src/views/shop/bill/billDetail.vue

@@ -28,7 +28,56 @@
           >对账</Button
         >
       </div>
-      <i-table :columns="columns" :data="data" stripe></i-table>
+      <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>
+        <div class="bill-detail-price">
+          <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.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.siteCouponRefundCommission || 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>
     </Card>
     <Card class="mt_10">
       <Tabs active-key="tab" type="card" @on-click="clickTabs">
@@ -148,7 +197,7 @@ export default {
           value: 0,
         },
         {
-          name: "计算中",
+          name: "计算公式",
           value: 0,
         }
       ],
@@ -573,31 +622,10 @@ export default {
       this.data[5].name = "平台打款时间";
       this.data[5].value = bill.payTime === null ? "未付款" : bill.payTime;
 
-      this.data[6].name = "结算金额";
+      this.data[6].name = "订单付款总金额";
-      this.data[6].value = filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥");
+      this.data[6].value = filters.unitPrice(bill.orderPrice?bill.orderPrice:0, "¥");
-
+      this.data[7].name = "结算金额";
-      this.data[7].name = "结算详细";
+      this.data[7].value = filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥");
-      this.data[7].value =
-        "最终结算金额(" +
-        filters.unitPrice(bill.billPrice, "¥") +
-        ") = 订单付款总金额(" +
-        filters.unitPrice(bill.orderPrice?bill.orderPrice:0, "¥") +
-        ") - 退单金额(" +
-        filters.unitPrice(bill.refundPrice?bill.refundPrice:0, "¥") +
-        ")" +
-        "- 平台收取佣金(" +
-        filters.unitPrice(bill.commissionPrice?bill.commissionPrice:0, "¥") +
-        ") + 退单产生退还佣金金额(" +
-        filters.unitPrice(bill.refundCommissionPrice?bill.refundCommissionPrice:0, "¥") +
-        ") - 分销返现支出(" +
-        filters.unitPrice(bill.distributionCommission?bill.distributionCommission:0, "¥") +
-        ") + 退单分销返现返还(" +
-        filters.unitPrice(bill.distributionRefundCommission?bill.distributionRefundCommission:0, "¥") +
-        ") - 平台优惠券支出(" +
-        filters.unitPrice(bill.siteCouponCommission?bill.siteCouponCommission:0, "¥") +
-        ") + 退单平台优惠券返还(" +
-        filters.unitPrice(bill.siteCouponRefundCommission?bill.siteCouponRefundCommission:0, "¥") +
-        ")";
     },
 
   },
@@ -627,7 +655,8 @@ export default {
   margin-top: 10px;
 }
 .tips-status {
-  padding: 18px;
+  padding: 10px;
+  font-size: 14px;
   > span {
     font-weight: bold;
     margin-right: 8px;
@@ -636,4 +665,34 @@ export default {
     color: $theme_color;
   }
 }
+table{
+  font-size: 14px;
+  margin-left: 20px;
+  tr{
+    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: 10px;
+  }
+  .theme_color{
+    color: $theme_color;
+  }
+  .increase-color{
+    color: green;
+  }
+}
 </style>