订单详情数据绑定

src/views/order/detail.vue

@@ -18,18 +18,14 @@
             <el-tag :type="row.status*1===6?'info':''" size="small">{{ statusObj[order.status] }}</el-tag>
           </template>
         </el-col>
+        <el-col :span="6">买家: {{ order.bpOrderUserinfo.name }}</el-col>
+      </el-row>
+      <el-row :gutter="24" class="box-row">
         <el-col :span="6">收款状态:
           <el-tag v-if="order.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
           <el-tag v-if="order.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
           <el-tag v-if="order.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
         </el-col>
-      </el-row>
-      <el-row :gutter="24" class="box-row">
-        <el-col :span="6">付款状态:
-          <el-tag v-if="order.payStatus*1===1" type="danger" size="small">待付款</el-tag>
-          <el-tag v-if="order.payStatus*1===2" type="warning" size="small">部分付款</el-tag>
-          <el-tag v-if="order.payStatus*1===3" type="success" size="small">已付款</el-tag>
-        </el-col>
         <el-col :span="6">退款状态:
           <el-tag v-if="order.refundType*1===1" type="warning" size="small">部分退</el-tag>
           <el-tag v-if="order.refundType*1===2" type="danger" size="small">全部退</el-tag>
@@ -40,7 +36,19 @@
           <el-tag v-if="order.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
           <el-tag v-if="order.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
         </el-col>
-        <el-col :span="6">买家: {{ order.bpOrderUserinfo.name }}</el-col>
+        <el-col :span="6">
+          <el-dropdown class="dropdown">
+            <el-button type="primary" round>
+              功能<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>备注</el-dropdown-item>
+              <el-dropdown-item>发货记录</el-dropdown-item>
+              <el-dropdown-item>收退款记录</el-dropdown-item>
+              <el-dropdown-item>退款（退货）记录</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
       </el-row>
     </el-card>
 
@@ -78,32 +86,40 @@
       </el-row>
     </el-card>
 
-    <el-card class="box-card grey">
+    <el-card class="box-card">
       <div v-for="shopOrder in order.newShopOrders" :key="shopOrder.shopOrderID" class="order-item">
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="6">子订单号(ID): {{ shopOrder.shopOrderNo + '(' + shopOrder.shopOrderID + ')' }}</el-col>
-          <el-col :span="6">下单时间: {{ shopOrder.orderTime }}</el-col>
-          <el-col :span="6">子订单金额: {{ shopOrder.needPayAmount }}</el-col>
-          <el-col :span="6">发货状态:
+        <el-row :gutter="22" class="box-row">
+          <el-col :span="7">子订单号(ID): {{ shopOrder.shopOrderNo + '(' + shopOrder.shopOrderID + ')' }}</el-col>
+          <el-col :span="5">下单时间: {{ shopOrder.orderTime }}</el-col>
+          <el-col :span="5">子订单金额: {{ shopOrder.needPayAmount }}</el-col>
+          <el-col :span="5">发货状态:
             <el-tag v-if="shopOrder.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
             <el-tag v-if="shopOrder.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
             <el-tag v-if="shopOrder.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
           </el-col>
         </el-row>
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="24">留言: {{ shopOrder.note }}</el-col>
+        <el-row :gutter="22" class="box-row">
+          <el-col :span="22">留言: {{ shopOrder.note ? shopOrder.note : '无' }}</el-col>
         </el-row>
-        <el-row :gutter="24" class="box-row">
-          <el-col :span="24">供应商: {{ shopOrder.shopName }}</el-col>
+        <el-row :gutter="22" class="box-row">
+          <el-col :span="22">供应商: {{ shopOrder.shopName }}</el-col>
         </el-row>
-        <el-row v-for="op in shopOrder.newOrderProducts" :key="op.orderProductID" :gutter="24" class="box-row">
-          <el-col :span="2">
+        <el-row v-for="op in shopOrder.newOrderProducts" :key="op.orderProductID" :gutter="22" class="product-row">
+          <el-col :span="3">
             <img :src="op.productImage" width="60" alt="">
           </el-col>
           <el-col :span="7">{{ op.name }}</el-col>
-          <el-col :span="5" />
-          <el-col :span="5" />
-          <el-col :span="5" />
+          <el-col :span="4">
+            <div class="op-item">{{ op.productID*1!==999 ? ('数量(赠品数): x'+op.num+'('+op.presentNum+')') : ('数量: x'+op.num) }}</div>
+            <div v-if="op.productID*1!==999" class="op-item">规格: {{ op.unit }}</div>
+          </el-col>
+          <el-col v-if="op.productID*1!==999" :span="4">
+            <div class="op-item">单价: ¥{{ op.price | toThousandFilter }}</div>
+            <div class="op-item">总额: ¥{{ op.totalFee | toThousandFilter }}</div>
+          </el-col>
+          <el-col v-if="op.productID*1!==999" :span="4">
+            <div v-if="order.sendOutStatus*1 === 2 || order.sendOutStatus*1 === 3" class="op-item">已发/已收: {{ ((op.num ? op.num : 0) - (op.notOutStore ? op.notOutStore : 0)) + '/' + op.receivedNum }}</div>
+          </el-col>
         </el-row>
       </div>
     </el-card>
@@ -120,6 +136,7 @@ export default {
       receiptAmount: 0,
       returnValue: 0,
       returnedPurchaseFee: 0,
+      bpClauses: null,
       statusObj: {
         '0': '待确认',
         '4': '交易完成',
@@ -151,6 +168,7 @@ export default {
       this.listLoading = true
       getDetail({ id: this.orderID }).then(response => {
         this.order = response.data.order
+        this.bpClauses = response.data.bpClauses
         this.receiptAmount = response.data.receiptAmount
         this.returnValue = response.data.returnValue
         this.returnedPurchaseFee = response.data.returnedPurchaseFee
@@ -171,11 +189,23 @@ export default {
   .box-row{
     padding: 10px 0;
   }
-  .box-card.grey{
-    background:#F2F6FC;
+  .box-row .dropdown{
+    margin-top: -10px;
   }
   .order-item{
     border-bottom: 1px solid #DCDFE6;
+    background:#F2F6FC;
+    margin-bottom: 20px;
+    padding: 5px 15px 0;
+    border-radius: 5px;
+  }
+  .product-row{
+    padding: 10px 0;
+    background: #EBEEF5;
+    border-top: 1px dashed #DCDFE6;
+  }
+  .op-item{
+    padding: 5px 0;
   }
 </style>
 

src/views/order/list.vue

@@ -116,7 +116,6 @@
               功能<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>编辑经理折扣</el-dropdown-item>
               <el-dropdown-item>备注</el-dropdown-item>
               <el-dropdown-item>发货记录</el-dropdown-item>
               <el-dropdown-item>收退款记录</el-dropdown-item>