管理后台-点单列表：点单详情

htmldev/manage/src/views/business/oms/detail/index.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="detail-container">
+  <div class="detail-container"
+       v-loading="tableLoading">
     <el-card shadow="never" style="margin-top: 10px">
       <div class="operate-container">
         <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
-        <span class="color-danger">当前订单状态：</span>
+        <span class="color-danger">当前订单状态：{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][order.order_status] }}</span>
         <div class="operate-button-container">
-          <el-button size="mini" @click="$router.go(-1)">返回</el-button>
-          <el-button size="mini" type="primary" @click="showMarkOrderDialog">退款</el-button>
+          <el-button size="mini"
+                     @click="$router.go(-1)">返回
+          </el-button>
+          <el-button size="mini"
+                     type="primary"
+                     @click="showMarkOrderDialog"
+                     v-if="order.order_status === 1">退款
+          </el-button>
         </div>
       </div>
       <div style="margin-top: 20px">
@@ -14,18 +21,31 @@
       </div>
       <div class="table-layout">
         <el-row>
-          <el-col :span="5" class="table-cell-title">订单ID</el-col>
-          <el-col :span="4" class="table-cell-title">桌号</el-col>
-          <el-col :span="5" class="table-cell-title">下单用户</el-col>
-          <el-col :span="5" class="table-cell-title">下单手机号</el-col>
-          <el-col :span="5" class="table-cell-title">下单时间</el-col>
+          <el-col :span="3" class="table-cell-title">订单ID</el-col>
+          <el-col :span="7" class="table-cell-title">下单时间</el-col>
+          <el-col :span="7" class="table-cell-title">支付方式</el-col>
+          <el-col :span="7" class="table-cell-title">支付时间</el-col>
         </el-row>
         <el-row>
-          <el-col :span="5" class="table-cell"></el-col>
-          <el-col :span="4" class="table-cell"></el-col>
-          <el-col :span="5" class="table-cell"></el-col>
-          <el-col :span="5" class="table-cell"></el-col>
-          <el-col :span="5" class="table-cell"></el-col>
+          <el-col :span="3" class="table-cell">{{ $route.query.id }}</el-col>
+          <el-col :span="7" class="table-cell">{{ order.created_at }}</el-col>
+          <el-col :span="7" class="table-cell">{{ ['', '微信', '支付宝'][order.order_pay_type] }}</el-col>
+          <el-col :span="7" class="table-cell">{{ order.order_pay_time }}</el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <span class="font-small">用户信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="8" class="table-cell-title">桌号</el-col>
+          <el-col :span="8" class="table-cell-title">下单用户</el-col>
+          <el-col :span="8" class="table-cell-title">下单手机号</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="table-cell">{{ order.place_number }}</el-col>
+          <el-col :span="8" class="table-cell">{{ order.user_name }}</el-col>
+          <el-col :span="8" class="table-cell">{{ order.user_phone }}</el-col>
         </el-row>
       </div>
       <div style="margin-top: 20px">
@@ -33,48 +53,42 @@
       </div>
       <el-table
         ref="orderItemTable"
-        :data="order.orderItemList"
-        style="width: 100%;margin-top: 20px" border>
-        <el-table-column label="商品图片" width="120" align="center">
+        :data="order.products"
+        style="width: 100%;margin-top: 20px"
+        border>
+        <el-table-column label="商品图片"
+                         width="120"
+                         align="center">
           <template slot-scope="scope">
-            <img :src="scope.row.productPic"
+            <img :src="scope.row.product_img_url"
                  alt=""
                  style="height: 80px">
           </template>
         </el-table-column>
-        <el-table-column label="商品名称" align="center"></el-table-column>
-        <el-table-column label="商品规格" width="120" align="center"></el-table-column>
-        <el-table-column label="规格" width="120" align="center"></el-table-column>
-        <el-table-column label="数量" width="120" align="center"></el-table-column>
-        <el-table-column label="价格" width="120" align="center"></el-table-column>
-        <el-table-column label="小计" width="120" align="center"></el-table-column>
+        <el-table-column label="商品名称" prop="product_name"></el-table-column>
+        <el-table-column label="商品规格" prop="product_sku"></el-table-column>
+        <el-table-column label="规格" prop="product_attach"></el-table-column>
+        <el-table-column label="数量" prop="product_num"></el-table-column>
+        <el-table-column label="价格" prop="product_unit_price"></el-table-column>
+        <el-table-column label="小计" prop="product_price"></el-table-column>
       </el-table>
-      <div style="float: right;margin: 20px">
-        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
-      </div>
       <div style="margin-top: 60px">
         <span class="font-small">费用信息</span>
       </div>
       <div class="table-layout">
         <el-row>
-          <el-col :span="8" class="table-cell-title">优惠券</el-col>
-          <el-col :span="8" class="table-cell-title">积分抵扣</el-col>
-          <el-col :span="8" class="table-cell-title">活动优惠</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8" class="table-cell"></el-col>
-          <el-col :span="8" class="table-cell"></el-col>
-          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="4" class="table-cell-title">合计</el-col>
+          <el-col :span="5" class="table-cell-title">退款金额</el-col>
+          <el-col :span="5" class="table-cell-title">优惠券</el-col>
+          <el-col :span="5" class="table-cell-title">预付款金额</el-col>
+          <el-col :span="5" class="table-cell-title">实付金额</el-col>
         </el-row>
         <el-row>
-          <el-col :span="8" class="table-cell-title">折扣金额</el-col>
-          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
-          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8" class="table-cell"></el-col>
-          <el-col :span="8" class="table-cell"></el-col>
-          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="4" class="table-cell">￥{{ order.order_price | fen2Yuan }}</el-col>
+          <el-col :span="5" class="table-cell">-￥{{ order.order_refund_price }}</el-col>
+          <el-col :span="5" class="table-cell">-￥{{ order.order_coupon_price }}</el-col>
+          <el-col :span="5" class="table-cell">￥{{ order.order_prepare_price }}</el-col>
+          <el-col :span="5" class="table-cell">￥{{ order.order_pay_price | fen2Yuan }}</el-col>
         </el-row>
       </div>
     </el-card>
@@ -84,7 +98,9 @@
       <el-form :model="markInfo"
                label-width="150px">
         <el-form-item label="备注：">
-          <el-input v-model="markInfo.note" type="textarea" rows="3">
+          <el-input v-model="markInfo.note"
+                    type="textarea"
+                    rows="3">
           </el-input>
         </el-form-item>
       </el-form>
@@ -103,18 +119,34 @@ export default {
       id: null,
       order: {},
       markOrderDialogVisible: false,
-      markInfo: { note: null }
+      markInfo: { note: null },
+      tableLoading: true
     }
   },
   methods: {
+    // todo 退款接口
     handleMarkOrder () {},
-    showMarkOrderDialog () {}
+    showMarkOrderDialog () {
+      this.markOrderDialogVisible = true
+    },
+    // 获取订单详情
+    async fetchOrderDetail () {
+      const { code, data } = await this.$fetch('/v1/user/order/detail', {
+        id: this.$route.query.id
+      }, 'get')
+      this.tableLoading = false
+      if (code === 200) {
+        this.order = data
+      }
+    }
+  },
+  created () {
+    this.fetchOrderDetail()
   }
 }
 </script>
 <style scoped>
 .detail-container {
-  width: 80%;
   padding: 20px 20px 20px 20px;
   margin: 20px auto;
 }

htmldev/manage/src/views/business/oms/list/index.vue

@@ -28,7 +28,7 @@
               class="marginT-10 order-table"
               border
               :max-height="vheight">
-      <el-table-column label="订单ID" prop="order_number"></el-table-column>
+      <el-table-column label="订单ID" prop="id"></el-table-column>
       <el-table-column label="桌号" prop="place_number"></el-table-column>
       <el-table-column label="点单用户" prop="order_user_name"></el-table-column>
       <el-table-column label="手机号" prop="order_user_phone"></el-table-column>
@@ -39,12 +39,11 @@
           <p>{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][scope.row.order_status] }}</p>
         </template>
       </el-table-column>
-      <!--TODO 支付单号-->
-      <el-table-column label="用户支付订单编号"></el-table-column>
+      <el-table-column label="用户支付订单编号" prop="order_official_number"></el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button type="text"
-                     @click="$router.push({name: 'BusinessOMSDetail', query: {orderNum: scope.row.order_number}})">订单详情
+                     @click="$router.push({name: 'BusinessOMSDetail', query: {id: scope.row.id}})">订单详情
           </el-button>
         </template>
       </el-table-column>