解决冲突

src/components/Home.vue

@@ -32,10 +32,11 @@
             <div class="sign_time">17:30前送达</div>
             <div class="sign_txt">立即送达</div>
             <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</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>
@@ -46,7 +47,71 @@
         <div class="order_detail">
           <div class="detail_title">订单详情</div>
           <order-detail :tabNum='tab_ac'></order-detail>
-          
+          <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="">
+              <div class="info">
+                <div class="shop_title">6英寸可可奥利奥、抹茶奶油蛋糕2选1</div>
+                <div class="shop_num">x1</div>
+              </div>
+            </div>
+            <div class="detail_ine"></div>
+            <div class="info2">
+              <div class="title">用户备注：</div>
+              <div class="cont">蜡烛需要20岁，要个王冠的帽子，顾客需要餐具。</div>
+            </div>
+             <div class="info2 info3">
+              <div class="title">发单备注：</div>
+              <div class="cont">切勿挤压堆放，一定要联系上收件人取货！</div>
+            </div>
+            <div class="detail_ine"></div>
+            <div class="detail_title2">发票信息</div>
+            <div class="info2 info4">
+              <div class="title">发票抬头：</div>
+              <div class="cont">苏州盈点点信息科技有限公司</div>
+            </div>
+             <div class="info2 info4">
+              <div class="title">税号：</div>
+              <div class="cont">91320452MA1M15M85F</div>
+            </div>
+            <div class="detail_ine"></div>
+            <div class="detail_title2">顾客信息</div>
+            <div class="info2 info4">
+              <div class="title">姓名：</div>
+              <div class="cont">苏州盈点点信息科技有限公司</div>
+            </div>
+             <div class="info2 info4">
+              <div class="title">隐私号：</div>
+              <div class="cont">91320452MA1M15M85F</div>
+            </div>
+            <div class="detail_ine"></div>
+            <div class="detail_title2">订单金额</div>
+            <div class="info2 info4">
+              <div class="title">商品金额：</div>
+              <div class="cont">¥310.00</div>
+            </div>
+            <div class="detail_ine"></div>
+            <div class="detail_title2">订单信息</div>
+            <div class="info2 info4">
+              <div class="title">送达时间：</div>
+              <div class="cont cont2">立即送达</div>
+            </div>
+            <div class="info2 info4">
+              <div class="title">创建时间：</div>
+              <div class="cont">2021/09/01  15:16:08</div>
+            </div>
+            <div class="info2 info4">
+              <div class="title">订单编号：</div>
+              <div class="cont">210812134713235749</div>
+            </div>
+            <div class="btns">
+              <el-button size='small'>修改订单</el-button>
+              <el-button size='small'>忽略订单</el-button>
+              <el-button size='small'>补打发票</el-button>
+              <el-button size='small' class="btn">发起配送</el-button>
+            </div>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -78,6 +143,9 @@ import OrderDetail from './orderComponents/orderDetail.vue';
         OrderDetail
     },
     methods: {
+      sendOrder() {
+        this.$refs.sendOrderPopup.init();
+      },
       deleteItem(index) {
         this.$refs.sendOrderPopup.init();
       },
@@ -127,7 +195,7 @@ import OrderDetail from './orderComponents/orderDetail.vue';
           border-radius: 3px;
           margin-top: 15px;
         }
-        
+
         .point{
           width: 16px;
           height: 16px;
@@ -243,7 +311,7 @@ import OrderDetail from './orderComponents/orderDetail.vue';
             margin-left: 15px;
           }
           .sign_txt{
-            width: 64px; 
+            width: 64px;
             height: 20px;
             border: 1px solid #009CFF;
             background: #F2FAFF;
@@ -294,7 +362,11 @@ import OrderDetail from './orderComponents/orderDetail.vue';
      }
      .order_detail{
       width: 100%;
+<<<<<<< HEAD
       border-left: 10px solid #F1F2F5;
+=======
+
+>>>>>>> dev_zlx
       background: #fff;
       box-sizing: border-box;
       .detail_title{
@@ -309,8 +381,90 @@ import OrderDetail from './orderComponents/orderDetail.vue';
         font-weight: 600;
         color: #B1B1B1;
       }
+<<<<<<< HEAD
       
       
+=======
+      .detail_cont{
+        width: 100%;
+        padding: 16px;
+        box-sizing: border-box;
+        .detail_title2{
+          width: 100%;
+          font-size: 12px;
+          font-weight: 600;
+          color: #777777;
+          margin-bottom: 15px;
+        }
+        .shop_detail{
+          width: 100%;
+          display: flex;
+          margin-bottom: 10px;
+          img{
+            width: 47px;
+            height: 47px;
+            border-radius: 4px 4px 4px 4px;
+            margin-right: 12px;
+          }
+          .info{
+            flex-grow: 1;
+            display: flex;
+            justify-content: space-between;
+            .shop_title{
+              width: 70%;
+              font-size: 14px;
+              font-weight: 500;
+              color: #333333;
+              line-height: 18px;
+            }
+            .shop_num{
+              color: #B1B1B1;
+            }
+          }
+        }
+        .detail_ine{
+          width: 100%;
+          height: 1px;
+          border-top: 2px dotted #F0F0F0;
+          margin: 16px 0;
+        }
+        .info2{
+          width: 100%;
+          display: flex;
+          .title{
+            font-size: 14px;
+            font-weight: 400;
+            width: 80px;
+            color: #B1B1B1;
+          }
+          .cont{
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+          }
+          .cont2{
+            color: #FC7200;
+          }
+        }
+        .info3{
+          margin-top: 10px;
+        }
+        .info4{
+          display: flex;
+          justify-content: space-between;
+        }
+        .btns{
+          margin-top: 30px;
+          .btn{
+            background: #FC7200;
+            border-color: #FC7200;
+            color: #FFF;
+          }
+        }
+      }
+
+>>>>>>> dev_zlx
      }
    }
   }

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;
         }