增加订单列表/订单详情页面

src/views/system/order/components/orderDetail.vue

+<template>
+  <div class="orderDetail">
+    <el-card class="box-card">
+      <el-steps :active="1" align-center>
+        <el-step title="买家下单付款"></el-step>
+        <el-step title="商家发货"></el-step>
+        <el-step title="订单完成"></el-step>
+      </el-steps>
+    </el-card>
+    <el-card class="box-card" style="margin-top: 20px;">
+      <div class="orderList">
+        <div class="orderItem">
+          <div class="orderTitle">
+            <img class="icon" src="@/assets/image/order/icon1.png" alt="">
+            <span>订单信息</span>
+          </div>
+          <div>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">订单编号</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+            </el-row>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">下单时间</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+            </el-row>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">商品数量</el-col>
+              <el-col :span="6" class="text-l">5</el-col>
+            </el-row>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">商品总价</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+            </el-row>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">运费</el-col>
+              <el-col :span="6" class="text-l">6元</el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="orderItem">
+          <div class="orderTitle" style="justify-content: space-between; width: 75%;">
+            <div style="display: flex; align-items: center;">
+              <img class="icon" src="@/assets/image/order/icon2.png" alt="">
+              <span>买家信息</span>
+            </div>
+            <el-button size="mini" type="primary">修改收货信息</el-button>
+          </div>
+          <div>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">订单编号</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+              <el-col :span="3" class="text-r">下单时间</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+            </el-row>
+            <el-row class="row-title">
+              <el-col :span="3" class="text-r">商品数量</el-col>
+              <el-col :span="6" class="text-l">5</el-col>
+              <el-col :span="3" class="text-r">商品总价</el-col>
+              <el-col :span="6" class="text-l">0</el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="orderItem">
+          <div class="orderTitle" style="justify-content: space-between;">
+            <div style="display: flex; align-items: center;">
+              <img class="icon" src="@/assets/image/order/icon3.png" alt="">
+              <span>商品信息</span>
+            </div>
+            <div>
+              <el-button size="mini" type="primary">去发货</el-button>
+              <el-button size="mini">补单发货</el-button>
+            </div>
+          </div>
+          <el-table :data="[]" style="border: 1px solid #eee;">
+            <el-table-column type="selection" width="55" />
+            <el-table-column label="订单号" prop="order_sn"/>
+            <el-table-column label="商品名称" prop="order_sn"/>
+            <el-table-column label="商品规格" prop="order_sn"/>
+            <el-table-column label="单价" prop="order_sn"/>
+            <el-table-column label="数量" prop="Quantity"/>
+            <el-table-column label="商品状态" prop="Money"/>
+            <el-table-column label="快递公司" prop="Shipname"/>
+            <el-table-column label="快递单号" prop="Tel"/>
+            <el-table-column label="操作" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text">去发货</el-button>
+                <el-button size="mini" type="text">查看物流</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="orderItem">
+          <div class="orderTitle">
+            <img class="icon" src="@/assets/image/order/icon4.png" alt="">
+            <span>操作历史</span>
+          </div>
+          <el-table :data="[]" style="border: 1px solid #eee; width: 75%;">
+            <el-table-column label="操作时间" prop="order_sn" width="300"/>
+            <el-table-column label="操作人" prop="order_sn" width="300"/>
+            <el-table-column label="操作内容" prop="order_sn"/>
+          </el-table>
+        </div>
+        <div class="orderItem">
+          <div class="orderTitle">
+            <div style="display: flex; align-items: center;  width: 70%;">
+              <img class="icon" src="@/assets/image/order/icon5.png" alt="">
+              <span>订单备注</span>
+            </div>
+            <el-button size="mini" type="primary">添加备注</el-button>
+          </div>
+          <div style="width: 75%;">
+            <el-input
+              type="textarea"
+              :rows="5"
+              placeholder="请输入内容"
+              v-model="textarea">
+            </el-input>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+  /deep/.el-step__head.is-success {
+    color: #3AA0FF;
+    border-color: #3AA0FF;
+  }
+  /deep/.el-step__title.is-success {
+    color: #3AA0FF;
+  }
+  /deep/.el-col {
+    border: 1px solid #eee;
+    padding: 10px;
+  }
+  
+  .text-r {
+    text-align: right;
+    background: #F7F8FA;
+  }
+  .text-l {
+    text-align: left;
+  }
+  .orderItem {
+    margin-bottom: 20px;
+  }
+  .orderTitle {
+    font-size: 16px;
+    font-weight: bold;
+    color: #000;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    height: 20px;
+    margin-right: 10px;
+  }
+  .row-title {
+    font-size: 14px;
+    color: #333;
+  }
+</style>
\ No newline at end of file