cps：订单详情

htmldev/cps/src/views/marketing/make/index.vue

@@ -19,7 +19,6 @@
             class="van-loading__text">下拉刷新</span>
           </div>
         </li>
-        <!--todo 订单状态 commission_status-->
         <li
           v-for="(item, index) in list"
           :key="index"
@@ -34,9 +33,10 @@
               <p class="user">{{ item.user_nickname }}</p>
               <p class="shop">{{ item.order_title }}</p>
             </div>
-            <p class="money">+{{ item.order_commission | fen2Yuan }}</p>
+            <p class="money">￥{{ item.order_commission | fen2Yuan }}</p>
           </div>
-          <p class="date">{{ item.created_at }}</p>
+          <p class="date">佣金状态：{{ ['未结算', '已结算', '已退款'][item.commission_status] }}</p>
+          <p class="date">创建时间：{{ item.created_at }}</p>
         </li>
         <li class="pullup-wrapper">
           <van-loading
@@ -225,7 +225,6 @@ export default {
 
 .list-item {
   width: 335px;
-  min-height: 92px;
   background: #FFFFFF;
   box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
   border-radius: 10px;
@@ -250,7 +249,6 @@ export default {
     border: 2px solid #FFFFFF;
     border-radius: 50%;
     overflow: hidden;
-    background: pink;
 
     img {
       display: block;

htmldev/cps/src/views/marketing/return/index.vue

@@ -25,13 +25,10 @@
           class="list-item">
           <div class="wrap">
             <p class="shop">{{ item.order_title }}</p>
-            <!--todo 订单状态 commission_status-->
-            <p class="money">
-              <span>返</span>
-              <span>{{ item.order_commission | fen2Yuan }}</span>
-            </p>
           </div>
-          <p class="date">{{ item.created_at }}</p>
+          <p class="date">预期收益：<span>￥{{ item.order_commission | fen2Yuan }}</span></p>
+          <p class="date">佣金状态：{{ ['未结算', '已结算', '已退款'][item.commission_status] }}</p>
+          <p class="date">创建时间：{{ item.created_at }}</p>
         </li>
         <li class="pullup-wrapper">
           <van-loading
@@ -220,11 +217,10 @@ export default {
 
 .list-item {
   width: 335px;
-  height: 92px;
   background: #FFFFFF;
   box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
   border-radius: 10px;
-  padding: 16px 0 0 20px;
+  padding: 16px 0 16px 20px;
   margin-bottom: 16px;
 
   .wrap {
@@ -238,31 +234,18 @@ export default {
     line-height: 28px;
   }
 
-  .money {
+  .date {
     display: flex;
     align-items: center;
-
-    span:nth-of-type(1) {
-      margin: 0 4px 0 14px;
-      font-size: 20px;
-      color: #1F314A;
-      line-height: 28px;
-    }
-
-    span:nth-of-type(2) {
-      font-size: 18px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #FA4A4A;
-      line-height: 25px;
-    }
-  }
-
-  .date {
     margin-top: 11px;
     font-size: 16px;
     color: #1F314A;
     line-height: 19px;
+
+    span {
+      font-weight: 600;
+      color: #FA4A4A;
+    }
   }
 }
 </style>

htmldev/cps/src/views/order/child/main.vue

@@ -24,10 +24,32 @@
         class="list-item border-bottom-1px"
         @click="getOrderDetail(item.order_number)">
         <div class="wrap">
-          <p class="label">{{ item.product_name }}：</p>
-          <p class="money">+￥3000,00</p>
+          <p class="label">{{ item.product_name }}</p>
         </div>
-        <p class="date">提现时间：2020-12-23 19:30</p>
+        <p class="date">
+          <span>订单平台类型</span>
+          <span>{{ ['', '淘宝', '拼多多', '京东', '美团', '返不停'][item.order_platform_type] }}</span>
+        </p>
+        <p class="date">
+          <span>订单编号</span>
+          <span>{{ item.order_number }}</span>
+        </p>
+        <p class="date">
+          <span>订单实际支付金额</span>
+          <span>￥{{ item.order_realy_price | fen2Yuan }}</span>
+        </p>
+        <p class="date">
+          <span>佣金</span>
+          <span>￥{{ item.order_commission | fen2Yuan }}</span>
+        </p>
+        <p class="date">
+          <span>订单状态</span>
+          <span>{{ ['未支付', '已支付', '已收获', '已结算', '全部退款或风控', '部分退款', '已取消'][item.order_status] }}</span>
+        </p>
+        <p class="date">
+          <span>创建时间</span>
+          <span>{{ item.created_at }}</span>
+        </p>
       </li>
       <li class="pullup-wrapper">
         <van-loading
@@ -261,10 +283,21 @@ export default {
   }
 
   .date {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     margin-top: 8px;
-    font-size: 12px;
-    color: #999999;
-    line-height: 17px;
+
+    span {
+      width: 50%;
+      font-size: 12px;
+      color: #999999;
+      line-height: 17px;
+
+      &:nth-of-type(2) {
+        text-align: right;
+      }
+    }
   }
 }
 </style>

htmldev/cps/src/views/order/index.vue

@@ -29,6 +29,10 @@
           <span class="label" style="color: #333333;">{{ orderDetail.product_name }}</span>
           <span class="value"></span>
         </p>
+        <p>
+          <span class="label">创建时间：</span>
+          <span class="value">{{ orderDetail.created_at }}</span>
+        </p>
         <p>
           <span class="label">支付时间：</span>
           <span class="value">{{ orderDetail.order_pay_at }}</span>
@@ -48,8 +52,23 @@
           <span class="label">预计收益：</span>
           <span class="value" style="color: #FA4A4A;">￥{{ orderDetail.order_commission | fen2Yuan }}</span>
         </p>
-        <!--TODO 加字段：订单平台类型-->
-        <!--TODO 全部退款、部分退款时展示字段：退款时间、退款金额-->
+        <p>
+          <span class="label">订单平台类型：</span>
+          <span class="value">{{
+              ['', '淘宝', '拼多多', '京东', '美团', '返不停'][orderDetail.order_platform_type]
+            }}</span>
+        </p>
+        <template
+          v-if="[4, 5].findIndex(item => item === orderDetail.order_status) > -1">
+          <p>
+            <span class="label">退款时间：</span>
+            <span class="value">{{ orderDetail.order_refund_at }}</span>
+          </p>
+          <p>
+            <span class="label">退款金额：</span>
+            <span class="value">{{ orderDetail.order_refund_price }}</span>
+          </p>
+        </template>
         <p class="status">{{ ['未支付', '已支付', '已收获', '已结算', '全部退款或风控', '部分退款', '已取消'][orderDetail.order_status] }}</p>
       </div>
     </van-popup>
@@ -107,8 +126,10 @@ export default {
       })
     },
     setOrderDetail (obj) {
-      this.orderDetail = obj
-      this.showDetail = true
+      if (Object.prototype.toString.call(obj) === '[object Object]') {
+        this.orderDetail = obj
+        this.showDetail = true
+      }
     }
   }
 }