解决冲突

src/components/Home.vue

@@ -20,10 +20,13 @@
           </div>
         </el-col>
     </el-row>
-  </div>
+    <!-- 发起配送 -->
+    <send-order-popup ref="sendOrderPopup"></send-order-popup>
+</div>
 </template>
 
 <script>
+  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
   export default {
     data() {
       return {
@@ -40,8 +43,21 @@
         input:''
       }
     },
+    components: {
+      sendOrderPopup
+    },
     methods: {
-     
+      deleteItem(index) {
+        this.$refs.sendOrderPopup.init();
+      },
+      saveRule(t, i) {
+        let obj = {
+          id: i + 2,
+          rule: t,
+          content: ''
+        }
+        this.ruleList.push( obj )
+      }
     }
   }
 </script>

src/components/orderComponents/sendOrderPopup.vue

@@ -0,0 +1,329 @@
+<template>
+  <el-dialog width="700px" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
+    <div class="send-content">
+      <div class="top-juhe active">
+        <div class="left-content">
+          <div class="juhe-icon">
+            <img src="../../../static/image/juhe-icon.png" />
+          </div>
+          <div>
+            <div class="juhe-title">聚合配送</div>
+            <div class="quan-wang">
+              <span>全网运力推单</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-content">
+          <div class="right-title">
+            预估&nbsp;<span>7.8~10.8</span>&nbsp;元
+          </div>
+          <div class="youhui">优惠合计2元</div>
+        </div>
+        <img src="../../../static/image/choose-icon.png" class="choose-icon" />
+      </div>
+      <!-- 自选运力 -->
+      <div class="choose-self">
+        <div class="self-top">
+          <img src="../../../static/image/choose-self-icon.png" class="choose-self-icon" />
+          <span>自选运力</span>
+        </div>
+        <div class="delivery-list">
+          <div class="delivery-list-item">
+            <div class="item-left">
+              <div class="item-logo">
+                <img src="../../../static/image/juhe-icon.png" />
+              </div>
+              <div>
+                <div class="item-title">闪送</div>
+                <div class="item-miters">预估3.5km</div>
+              </div>
+            </div>
+            <div class="item-right">
+              <div>
+                <div class="item-price">预估&nbsp;<span>8.8</span>&nbsp;元</div>
+                <div class="item-coupon">优惠合计2元</div>
+              </div>
+              <div class="item-choose">
+                <img src="../../../static/image/item-choose-icon.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 选择优惠券 -->
+      <div>
+        <div class="choose-coupon">
+          <div></div>
+          <div class="coupon-box">
+            <img src="../../../static/image/coupon-icon.png" class="coupon-icon" />
+            <span>选择优惠券</span>
+            <img src="../../../static/image/arrow-down.png" class="arrow-down" />
+          </div>
+        </div>
+        <!-- 预留优惠券列表 -->
+        <div class="coupon-list"></div>
+      </div>
+      <!-- 支付方式 -->
+      <div class="choose-self" style="border: none;">
+        <div class="self-top">
+          <img src="../../../static/image/choose-self-icon.png" class="choose-self-icon" />
+          <span>支付方式</span>
+        </div>
+        <div class="pay-list">
+          <div class="pay-item" :class=" index ===0 ? 'pay-active' : '' " v-for="(item, index) in payList" :key="index">
+            <img :src="item.icon" class="pay-icon" />
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogTableVisible: false,
+        payList: [
+          { id: 1, name: '支付宝支付', icon: '../../../static/image/alipay.png' },
+          { id: 2, name: '微信支付', icon: '../../../static/image/we-chat.png' },
+          { id: 3, name: '余额支付', icon: '../../../static/image/yu-e.png' },
+        ]
+      }
+    },
+    methods: {
+      init() {
+        this.dialogTableVisible = true;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-dialog__header {
+    padding: 0;
+  }
+  /deep/ .el-dialog__body {
+    padding: 22px !important;
+  }
+  .send-content {
+    border-radius: 10px;
+  }
+  .top-juhe {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    position: relative;
+    border: 1px solid #999;
+    border-radius: 8px;
+    overflow: hidden;
+    &.active {
+      border-color: #FC7200;
+    }
+    .left-content {
+      display: flex;
+      .juhe-icon {
+        align-self: center;
+        font-size: 0;
+        width: 41px;
+        height: 40px;
+        margin-right: 12px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .juhe-title {
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0D1E40;
+      }
+      .quan-wang {
+        margin-top: 8px;
+        span {
+          display: inline-block;
+          padding: 0px 4px;
+          border: 1px solid #FC7200;
+          border-radius: 2px;
+          color: #FC7200;
+          font-size: 14px;
+        }
+      }
+    }
+    .right-content {
+      .right-title {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0D1E40;
+        span {
+          font-size: 22px;
+          color: #FC7200;
+        }
+      }
+      .youhui {
+        text-align: right;
+        font-size: 12px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FC7200;
+      }
+    }
+    .choose-icon {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  .choose-self {
+    padding-top: 25px;
+    border-bottom: 1px solid #eee;
+    .self-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 11px;
+      .choose-self-icon {
+        width: 4px;
+        height: 15px;
+        margin-right: 10px;
+      }
+      span {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #92959B;
+      }
+    }
+    .delivery-list {
+      &-item {
+        /*height: 76px;*/
+        padding: 18px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .item-left {
+          display: flex;
+          .item-logo {
+            font-size: 0;
+            width: 40px;
+            height: 40px;
+            margin-right: 15px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .item-title {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #0D1E40;
+          }
+          .item-miters {
+            margin-top: 4px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #9EA7B7;
+          }
+        }
+        .item-right {
+          display: flex;
+          align-items: center;
+          .item-price {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #0D1E40;
+            span {
+              font-size: 22px;
+            }
+          }
+          .item-coupon {
+            text-align: right;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #9EA7B7;
+          }
+          .item-choose {
+            margin-left: 26px;
+            font-size: 0;
+            width: 26px;
+            height: 26px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+    .pay-list {
+      display: flex;
+      align-items: center;
+      padding-top: 10px;
+      .pay-item {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+        height: 67px;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        &.pay-active {
+          border-color: #FC7200;
+        }
+        &:nth-child(2) {
+          margin: 0 13px;
+        }
+        span {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #222222;
+        }
+        .pay-icon {
+          margin-right: 6px;
+        }
+        .pay-icon:nth-child(1) {
+          width: 25px;
+          height: 24px;
+        }
+      }
+    }
+  }
+  .choose-coupon {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    .coupon-box {
+      display: flex;
+      align-items: center;
+      .coupon-icon {
+        width: 14px;
+        height: 14px;
+      }
+      span {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #B1B1B1;
+        margin-left: 2px;
+        margin-right: 6px;
+        cursor: pointer;
+      }
+      .arrow-down {
+        width: 10px;
+        height: 6px;
+      }
+    }
+  }
+</style>