feat:提交代码，订单追踪样式

src/components/Home.vue

@@ -31,11 +31,11 @@
             <span class="name">礼颂至品（娄葑店）</span>
             <div class="sign_time">17:30前送达</div>
             <div class="sign_txt">立即送达</div>
-            <el-button size='small' class="btn">默认按钮</el-button>
+            <el-button size='small' class="btn" @click.stop="sendOrder">默认按钮</el-button>
           </div>
           <div class="order_item_cont">
             <div class="itme_l">
-              <div class="content">王女士<span>18015468888-1157</span></div> 
+              <div class="content">王女士<span>18015468888-1157</span></div>
               <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i  class="el-icon-location"></i>1.3km</span></div>
             </div>
             <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
@@ -45,7 +45,7 @@
       <el-col :span="6">
         <div class="order_detail">
           <div class="detail_title">订单详情</div>
-          <div class="detail_cont">
+          <div class="detail_cont" v-if="false">
             <div class="detail_title2">商品详情</div>
             <div class="shop_detail" v-for="(item,i) in 2" :key="i">
               <img src="" alt="" srcset="">
@@ -110,7 +110,7 @@
               <el-button size='small' class="btn">发起配送</el-button>
             </div>
           </div>
-          
+
         </div>
       </el-col>
     </el-row>
@@ -139,6 +139,9 @@
       sendOrderPopup
     },
     methods: {
+      sendOrder() {
+        this.$refs.sendOrderPopup.init();
+      },
       deleteItem(index) {
         this.$refs.sendOrderPopup.init();
       },
@@ -188,7 +191,7 @@
           border-radius: 3px;
           margin-top: 15px;
         }
-        
+
         .point{
           width: 16px;
           height: 16px;
@@ -304,7 +307,7 @@
             margin-left: 15px;
           }
           .sign_txt{
-            width: 64px; 
+            width: 64px;
             height: 20px;
             border: 1px solid #009CFF;
             background: #F2FAFF;
@@ -355,7 +358,7 @@
      }
      .order_detail{
       width: 100%;
-      
+
       background: #fff;
       .detail_title{
         width: 346px;
@@ -447,7 +450,7 @@
           }
         }
       }
-      
+
      }
    }
   }

src/components/orderComponents/orderTrack.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="order-detail">
+    <!-- 取货中 -->
+    <div class="picking-up">
+      <div class="top">
+        <img src="../../../static/image/time-icon.png" class="time-icon" />
+        <span class="top-tlt">骑手预计</span>
+        <span class="top-tlt-l">5分钟到店取件</span>
+      </div>
+      <!-- 配送信息 ( 待接单无配送信息 ) -->
+      <div class="send-info">
+        <div class="send-tlt">配送信息</div>
+        <div class="label">
+          <div class="label-tlt">接单平台：</div>
+          <div class="label-right">
+            <img src="../../../static/image/juhe-icon.png" class="send-logo" />
+            <span>闪送</span>
+          </div>
+        </div>
+        <div class="label">
+          <div class="label-tlt">骑手信息：</div>
+          <div class="label-right">
+            <span>张某某（18855558888)</span>
+          </div>
+        </div>
+        <div class="label">
+          <div class="label-tlt">闪送客服：</div>
+          <div class="label-right">
+            <span>400-612-6688</span>
+          </div>
+        </div>
+        <div class="label">
+          <div class="label-tlt">接单时间：</div>
+          <div class="label-right">
+            <span>2021/09/01  17:00:00</span>
+          </div>
+        </div>
+        <div class="label">
+          <div class="label-tlt">闪送订单号：</div>
+          <div class="label-right">
+            <span>TDH2021081218578724</span>
+          </div>
+        </div>
+      </div>
+      <!-- 发单信息 -->
+      <div class="send-info" style="margin-top: 30px;padding-bottom: 10px;border-bottom: 1px dashed #999;">
+        <div class="send-tlt">发单信息</div>
+        <div class="label">
+          <div class="label-tlt">下单金额：</div>
+          <div class="label-right">
+            <span>¥10.00</span>
+          </div>
+        </div>
+        <div class="label">
+          <div class="label-tlt">发单时间：</div>
+          <div class="label-right">
+            <span>2021/09/01  17:00:00</span>
+          </div>
+        </div>
+      </div>
+      <!-- 收件地址信息、配送进度 -->
+      <div class="address-box">
+        <div class="address-info">
+          <img src="../../../static/image/address-shou.png" class="address-icon" />
+          <div class="address-content">【苏州市工业园区】娄葑街道通园路80号（56文创园）C栋1楼 18015468888-1157</div>
+        </div>
+        <!-- 进度列表 -->
+        <div class="process">
+          <div class="p-item">
+            <div class="p-left">
+              <img src="../../../static/image/black-point.png" class="black-point" />
+              <img v-if="false" src="../../../static/image/transp-point.png" class="black-point" />
+            </div>
+            <div class="p-right">
+              <div class="p-top">
+                <span>骑手接单</span>
+                <span style="font-weight: normal;">17:00:08</span>
+              </div>
+              <div class="p-bottom">
+                闪送骑手
+                <span class="has-driver">张某某（18855558888) </span>
+                已接单
+              </div>
+              <div class="p-bottom" v-if="false">
+                <span>20分钟内无骑手接单将自动取消订单</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 按钮列表 -->
+      <div class="button-list clearfix">
+        <div class="btn-item add-tip">补打发票</div>
+        <div class="btn-item cancel" style="margin-right: 6px;">取消订单</div>
+      </div>
+      <!-- 待接单按钮组 -->
+      <div class="button-list clearfix" v-if="false">
+        <div class="btn-item add-tip">加小费</div>
+        <div class="btn-item cancel" style="margin-right: 6px;">补打发票</div>
+        <div class="btn-item cancel" style="margin-right: 6px;">取消订单</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .clearfix:after {
+    content: "";
+    font-size: 0;
+    height: 0;
+    display: block;
+    clear: both;
+  }
+  .order-detail {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 18px;
+    .picking-up {
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        .time-icon {
+          width: 15px;
+          height: 16px;
+        }
+        .top-tlt {
+          margin: 0 6px;
+          font-size: 14px;
+          color: #00152A;
+        }
+        .top-tlt-l {
+          font-size: 14px;
+          color: #009CFF;
+        }
+      }
+      .send-info {
+        .send-tlt {
+          font-size: 12px;
+          font-weight: bold;
+          color: #777777;
+          margin-bottom: 15px;
+        }
+        .label {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 4px;
+          .label-tlt {
+            font-size: 14px;
+            font-weight: 400;
+            color: #B1B1B1;
+          }
+          .label-right {
+            display: flex;
+            align-items: center;
+            .send-logo {
+              width: 16px;
+              height: 16px;
+              margin-right: 4px;
+            }
+            span {
+              font-size: 14px;
+              font-weight: 400;
+              color: #333333;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+      .address-box {
+        padding-top: 20px;
+        .address-info {
+          display: flex;
+          .address-icon {
+            width: 21px;
+            height: 22px;
+            margin-right: 11px;
+          }
+          .address-content {
+            word-break: break-all;
+            font-size: 14px;
+            font-weight: 600;
+            color: #00152A;
+            line-height: 20px;
+          }
+        }
+        .process {
+          padding-top: 30px;
+          .p-item {
+            display: flex;
+            padding-bottom: 30px;
+            .p-left {
+              margin-left: 6px;
+              margin-right: 14px;
+              .black-point {
+                width: 9px;
+                height: 10px;
+              }
+            }
+            .p-right {
+              flex: 1;
+              .p-top {
+                display: flex;
+                justify-content: space-between;
+                font-size: 14px;
+                font-weight: 600;
+                color: #00152A;
+                margin-bottom: 6px;
+              }
+              .p-bottom {
+                font-size: 12px;
+                font-weight: 400;
+                color: #B1B1B1;
+                .has-driver {
+                  color: #009CFF;
+                }
+              }
+            }
+          }
+        }
+      }
+      .button-list {
+        padding-bottom: 15px;
+        .btn-item {
+          float: right;
+          width: 74px;
+          height: 30px;
+          line-height: 30px;
+          box-sizing: border-box;
+          text-align: center;
+          border-radius: 4px;
+          font-size: 12px;
+          cursor: pointer;
+        }
+        .add-tip {
+          background-color: #FC7200;
+          color: #fff;
+        }
+        .cancel {
+          color: #888888;
+          border: 1px solid #eee;
+        }
+      }
+    }
+  }
+</style>

src/components/orderComponents/sendOrderPopup.vue

@@ -44,7 +44,8 @@
                 <div class="item-coupon">优惠合计2元</div>
               </div>
               <div class="item-choose">
-                <img src="../../../static/image/item-choose-icon.png" />
+                <!-- <img src="../../../static/image/item-choose-icon.png" /> -->
+                <img src="../../../static/image/select_yes@2x.png" />
               </div>
             </div>
           </div>
@@ -277,6 +278,7 @@
         height: 67px;
         border: 1px solid #eee;
         border-radius: 8px;
+        cursor: pointer;
         &.pay-active {
           border-color: #FC7200;
         }