Merge remote-tracking branch 'origin/dev_zlx' into dev_fy

src/common/sider.vue

@@ -68,7 +68,7 @@
             path: '/shopInfo',
             name: 'shopInfo',
             title: '商户信息',
-            icon: '/static/image/order-icon.png',
+            icon: '/static/image/shop-icon.png',
             children: [
               {
                 path: '/shopInfo/shopInfos',
@@ -86,7 +86,7 @@
             path: '/setUp/set',
             name: 'setUp',
             title: '设置',
-            icon: '/static/image/order-icon.png'
+            icon: '/static/image/setting-icon.png'
           }
         ]
       }

src/components/Home.vue

@@ -1,35 +1,43 @@
 <template>
   <div class="mainContent">
     <el-row class="order_tab">
-        <el-col :span="15">
-          <div class="tab_list">
-            <div class="tab_item" @click="change_tab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
-              <div class="point" v-show="item.num">{{item.num}}</div>
-              <span>{{item.name}}</span>
-              <div class="tab_line"></div>
-            </div>
+      <el-col :span="15">
+        <div class="tab_list">
+          <div class="tab_item" @click="change_tab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}"
+            v-for="(item,i) in tab_list" :key="i">
+            <div class="point" v-show="item.num">{{item.num}}</div>
+            <span>{{item.name}}</span>
+            <div class="tab_line"></div>
           </div>
-        </el-col>
-        <el-col :span="9">
-          <div class="header_serch">
-            <div class="search_inp">
-              <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
-              <div class="btn"><i class="el-icon-search"></i></div>
-            </div>
-            <div class="Manual">手动发单</div>
+        </div>
+      </el-col>
+      <el-col :span="9">
+        <div class="header_serch">
+          <div class="search_inp">
+            <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
+            <div class="btn"><i class="el-icon-search"></i></div>
           </div>
-        </el-col>
+          <div class="Manual">手动发单</div>
+        </div>
+      </el-col>
     </el-row>
-     
+
     <el-row class="order_list">
       <el-col :span="18">
         <order-list :list='orderList' :tabNum='tab_ac'></order-list>
+        <div style="text-align: center;">
+          <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="400" background>
+          </el-pagination>
+        </div>
       </el-col>
       <el-col :span="6" v-if="orderList.length&&clickBool">
         <div class="order_detail" v-if="needTrack">
           <div class="detail_title">
-            <div class="detail_txt" @click="orderDetailStutus=0" :class="{'detail_txt_ac':orderDetailStutus==0?true:false}">订单跟踪</div>
-            <div class="detail_txt" @click="orderDetailStutus=1" :class="{'detail_txt_ac':orderDetailStutus==1?true:false}">订单详情</div>
+            <div class="detail_txt" @click="orderDetailStutus=0"
+              :class="{'detail_txt_ac':orderDetailStutus==0?true:false}">订单跟踪</div>
+            <div class="detail_txt" @click="orderDetailStutus=1"
+              :class="{'detail_txt_ac':orderDetailStutus==1?true:false}">订单详情</div>
           </div>
           <order-detail :tabNum='tab_ac' v-if="orderDetailStutus==1"></order-detail>
           <order-track :tabNum='tab_ac' v-if="orderDetailStutus==0"></order-track>
@@ -53,32 +61,62 @@
   import orderMap from './orderComponents/orderAMap.vue';
   import OrderList from './orderComponents/orderList.vue';
   import orderTrack from './orderComponents/orderTrack.vue'
-  import { getOrderList,getOrderMarker } from '../api/order.js';
+  import {
+    getOrderList,
+    getOrderMarker
+  } from '../api/order.js';
   export default {
     data() {
       return {
-        orderList:[],
-        tab_list:[
-          {name:'新订单',num:6,status:0},
-          {name:'预约单',num:0,status:10},
-          {name:'待接单',num:0,status:1},
-          {name:'取货中',num:0,status:2},
-          {name:'配送中',num:0,status:3},
-          {name:'异常单',num:0,status:-2},
-          {name:'已取消',num:0,status:-1}
+        orderList: [],
+        tab_list: [{
+            name: '新订单',
+            num: 6,
+            status: 0
+          },
+          {
+            name: '预约单',
+            num: 0,
+            status: 10
+          },
+          {
+            name: '待接单',
+            num: 0,
+            status: 1
+          },
+          {
+            name: '取货中',
+            num: 0,
+            status: 2
+          },
+          {
+            name: '配送中',
+            num: 0,
+            status: 3
+          },
+          {
+            name: '异常单',
+            num: 0,
+            status: -2
+          },
+          {
+            name: '已取消',
+            num: 0,
+            status: -1
+          }
         ],
-        tab_ac:0,
-        orderDetailStutus:1,
-        params:{
+        tab_ac: 0,
+        orderDetailStutus: 1,
+        params: {
           status: 0,
           searchType: 0,
-          searchKey:'',
+          searchKey: '',
           pageNum: 1,
           pageSize: 10
         },
-        needTrack:false,
-        markerNum:'',
-        clickBool:false
+        needTrack: false,
+        markerNum: '',
+        clickBool: false
       }
     },
     components: {
@@ -91,10 +129,10 @@
     mounted() {
       this.getOrder();
       this.getMarker();
-      console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00",2.5))
+      console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00", 2.5))
     },
     methods: {
-      getMarker(){
+      getMarker() {
         getOrderMarker().then(res => {
           this.markerNum = res.data;
           this.tab_list[0].num = res.data.toBeBillNum;
@@ -110,10 +148,10 @@
       sendOrder() {
         this.$refs.sendOrderPopup.init();
       },
-      change_tab(i,status){
-        if(i==2||i==3||i==4||i==5||i==6){
+      change_tab(i, status) {
+        if (i == 2 || i == 3 || i == 4 || i == 5 || i == 6) {
           this.needTrack = true;
-        }else{
+        } else {
           this.needTrack = false;
         }
         this.tab_ac = i;
@@ -128,18 +166,21 @@
         var hour = minute * 60;
         var day = hour * 24;
         getOrderList(this.params).then(res => {
-          res.data.data.forEach(element => {
-            element.takeTimeTxt = this.$tool.timeago((new Date(element.takeTime)).getTime());
-            if(_this.tab_ac == 1){
-              if(element.exceptTime){
-                element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime,element.delayTime);
-              }else{
-                element.timeTxt = '';
+          if (res.code == 200) {
+            res.data.data.forEach(element => {
+              element.takeTimeTxt = this.$tool.timeago((new Date(element.takeTime)).getTime());
+              if (_this.tab_ac == 1) {
+                if (element.exceptTime) {
+                  element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime, element.delayTime);
+                } else {
+                  element.timeTxt = '';
+                }
+
               }
-              
-            }
-            this.orderList.push(element)
-          });
+              this.orderList.push(element)
+            });
+            console.log('---------', this.orderList)
+          }
         })
       },
     }
@@ -147,214 +188,247 @@
 </script>
 
 <style lang="scss" scoped="scoped">
-  /deep/ .el-input__inner{
-    padding-right: 50px;
-    height: 44px;
-  }
-  .mainContent{
-    width: 100%;
-   .order_tab{
+  // /deep/ .el-input__inner {
+  //   padding-right: 50px;
+  //   height: 44px;
+  // }
+
+  .mainContent {
     width: 100%;
-    height: 74px;
-    background: #FFF;
-    .tab_list{
+
+    .order_tab {
       width: 100%;
       height: 74px;
-      padding-top: 20px;
-      padding-left: 36px;
-      box-sizing: border-box;
-      display: flex;
-      .tab_item{
-        width: 58px;
-        margin-right: 56px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #B1B1B1;
-        position: relative;
-        text-align: center;
-        cursor: pointer;
-        .tab_line{
-          width: 58px;
-          height: 6px;
-          background: #FFF;
-          border-radius: 3px;
-          margin-top: 15px;
-        }
+      background: #FFF;
 
-        .point{
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          background: #F74141;
-          font-size: 12px;
-          font-weight: 400;
-          color: #FFFFFF;
-          position: absolute;
-          top: -5px;
-          right: -10px;
+      .tab_list {
+        width: 100%;
+        height: 74px;
+        padding-top: 20px;
+        padding-left: 36px;
+        box-sizing: border-box;
+        display: flex;
+
+        .tab_item {
+          width: 58px;
+          margin-right: 56px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #B1B1B1;
+          position: relative;
           text-align: center;
-          line-height: 16px;
+          cursor: pointer;
+
+          .tab_line {
+            width: 58px;
+            height: 6px;
+            background: #FFF;
+            border-radius: 3px;
+            margin-top: 15px;
+          }
+
+          .point {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #F74141;
+            font-size: 12px;
+            font-weight: 400;
+            color: #FFFFFF;
+            position: absolute;
+            top: -5px;
+            right: -10px;
+            text-align: center;
+            line-height: 16px;
+          }
         }
-      }
-      .tab_item_ac{
-        color: #FC7200;
-        .tab_line{
-          background: #FC7200;
+
+        .tab_item_ac {
+          color: #FC7200;
+
+          .tab_line {
+            background: #FC7200;
+          }
         }
       }
-    }
-    .header_serch{
-      width: 100%;
-      height: 74px;
-      padding-right: 25px;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      .Manual{
-        width: 118px;
-        height: 44px;
-        background: #FC7200;
-        border-radius: 6px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #FFFFFF;
-        text-align: center;
-        line-height: 44px;
-        margin-left: 18px;
-      }
-      .search_inp{
-        width: 380px;
-        height: 44px;
+
+      .header_serch {
+        width: 100%;
+        height: 74px;
+        padding-right: 25px;
+        box-sizing: border-box;
         display: flex;
         align-items: center;
-        position: relative;
-        .inp{
-          width: 380px;
+        justify-content: flex-end;
+
+        .Manual {
+          width: 118px;
           height: 44px;
-          border: none;
+          background: #FC7200;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #FFFFFF;
+          text-align: center;
+          line-height: 44px;
+          margin-left: 18px;
         }
-        .btn{
-          margin-left: 15px;
-          font-size: 22px;
-          position: absolute;
-          right: 15px;
+
+        .search_inp {
+          width: 380px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          position: relative;
+
+          .inp {
+            width: 380px;
+            height: 44px;
+            border: none;
+          }
+
+          .btn {
+            margin-left: 15px;
+            font-size: 22px;
+            position: absolute;
+            right: 15px;
+          }
         }
       }
     }
-   }
-   .order_list{
-     width: 100%;
-     margin-top: 10px;
-     .order_detail{
+
+    .order_list {
       width: 100%;
-      border-left: 10px solid #F1F2F5;
-      background: #fff;
-      box-sizing: border-box;
-      border-left: 10px solid #F1F2F5;
-      .detail_title{
-        width: 100%;
-        height: 44px;
-        background: #FAFAFA;
-        padding-left: 16px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        font-size: 12px;
-        font-weight: 600;
-        display: flex;
-        align-items: flex-end;
-        .detail_txt{
-          color: #B1B1B1;
-          padding-bottom: 13px;
-          border-bottom:  2px solid #FAFAFA;
-          margin-right: 28px;
-          cursor: pointer;
-        }
-        .detail_txt_ac{
-          color: #00152A;
-          border-color: #00152A;
-        }
-      }
-      .detail_cont{
+      margin-top: 10px;
+
+      .order_detail {
         width: 100%;
-        padding: 16px;
+        border-left: 10px solid #F1F2F5;
+        background: #fff;
         box-sizing: border-box;
-        .detail_title2{
+        border-left: 10px solid #F1F2F5;
+
+        .detail_title {
           width: 100%;
+          height: 44px;
+          background: #FAFAFA;
+          padding-left: 16px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
           font-size: 12px;
           font-weight: 600;
-          color: #777777;
-          margin-bottom: 15px;
+          display: flex;
+          align-items: flex-end;
+
+          .detail_txt {
+            color: #B1B1B1;
+            padding-bottom: 13px;
+            border-bottom: 2px solid #FAFAFA;
+            margin-right: 28px;
+            cursor: pointer;
+          }
+
+          .detail_txt_ac {
+            color: #00152A;
+            border-color: #00152A;
+          }
         }
-        .shop_detail{
+
+        .detail_cont {
           width: 100%;
-          display: flex;
-          margin-bottom: 10px;
-          img{
-            width: 47px;
-            height: 47px;
-            border-radius: 4px 4px 4px 4px;
-            margin-right: 12px;
+          padding: 16px;
+          box-sizing: border-box;
+
+          .detail_title2 {
+            width: 100%;
+            font-size: 12px;
+            font-weight: 600;
+            color: #777777;
+            margin-bottom: 15px;
           }
-          .info{
-            flex-grow: 1;
+
+          .shop_detail {
+            width: 100%;
             display: flex;
-            justify-content: space-between;
-            .shop_title{
-              width: 70%;
+            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: 500;
+              font-weight: 400;
               color: #333333;
-              line-height: 18px;
+              line-height: 20px;
             }
-            .shop_num{
-              color: #B1B1B1;
+
+            .cont2 {
+              color: #FC7200;
             }
           }
-        }
-        .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;
+
+          .info3 {
+            margin-top: 10px;
           }
-          .cont2{
-            color: #FC7200;
+
+          .info4 {
+            display: flex;
+            justify-content: space-between;
           }
-        }
-        .info3{
-          margin-top: 10px;
-        }
-        .info4{
-          display: flex;
-          justify-content: space-between;
-        }
-        .btns{
-          margin-top: 30px;
-          .btn{
-            background: #FC7200;
-            border-color: #FC7200;
-            color: #FFF;
+
+          .btns {
+            margin-top: 30px;
+
+            .btn {
+              background: #FC7200;
+              border-color: #FC7200;
+              color: #FFF;
+            }
           }
         }
       }
-     }
-   }
+    }
   }
 </style>

src/components/accountCompoents/coupon.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="coupon">
+    <div class="list">
+      <div class="item">
+        <div class="top-content">
+          <div class="money">
+            <span class="samll-size">￥</span>
+            <span class="big-size">1</span>
+          </div>
+          <div class="man-jian">满8减1</div>
+          <div class="time">2021.09.01-2021-09-30</div>
+        </div>
+        <div class="bottom">
+          <div class="lei-xing">
+            类型：<span>满减券</span>
+          </div>
+          <div class="lei-xing">
+            数量：<span>20张</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .coupon {
+    height: calc(100vh - 274px);
+    background-color: #fff;
+    .list {
+      display: flex;
+      .item {
+        margin-right: 20px;
+        .top-content {
+          width: 244px;
+          height: 166px;
+          background: url(../../../static/image/coupon-bg.png) no-repeat;
+          background-size: cover;
+          text-align: center;
+          box-sizing: border-box;
+          padding: 30px;
+          .money {
+            font-family: PingFang SC;
+            font-weight: 600;
+            color: #FFFFFF;
+            .samll-size {
+              font-size: 22px;
+            }
+            .big-size {
+              font-size: 40px;
+            }
+          }
+          .man-jian {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+          }
+          .time {
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #28888A;
+            margin-top: 30px;
+          }
+        }
+        .bottom {
+          padding: 10px;
+          .lei-xing {
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            margin-bottom: 4px;
+            span {
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/orderComponents/sendOrderPopup.vue

@@ -1,95 +1,156 @@
 <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>
+    <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>
-            <div class="juhe-title">聚合配送</div>
-            <div class="quan-wang">
-              <span>全网运力推单</span>
+          <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="right-content">
-          <div class="right-title">
-            预估&nbsp;<span>7.8~10.8</span>&nbsp;元
+        <!-- 自选运力 -->
+        <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="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 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>
-                <div class="item-title">闪送</div>
-                <div class="item-miters">预估3.5km</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" /> -->
+                  <img src="../../../static/image/select_yes@2x.png" />
+                </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" /> -->
-                <img src="../../../static/image/select_yes@2x.png" />
-              </div>
+          </div>
+        </div>
+        <!-- 选择优惠券 -->
+        <div>
+          <div class="choose-coupon">
+            <div></div>
+            <div class="coupon-box">
+              <!-- <img src="../../../static/image/coupon-icon.png" class="coupon-icon" /> -->
+              <el-select v-model="coupon" placeholder="请选择使用优惠券">
+                <el-option v-for="item in couponList" :key="item.id" :label="item.label" :value="item.id">
+                  <span style="float: left">{{ item.label }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.value">x{{ item.value }}</span>
+                </el-option>
+              </el-select>
+              <!-- <span>选择优惠券</span>
+            <img src="../../../static/image/arrow-down.png" class="arrow-down" /> -->
             </div>
           </div>
+          <!-- 预留优惠券列表 -->
+          <div class="coupon-list"></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 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 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>
+    </el-dialog>
+    <!-- 支付二维码弹出层 -->
+    <el-dialog width="1000px" :show-close="false" destroy-on-close :visible.sync="payModal">
+      <div class="pay-modal">
+        <div class="pay-top">微信支付</div>
+      </div>
+      <div class="code-content">
+        <div class="code-top">
+          <div class="code-left">
+            <div class="l-title">支付金额</div>
+            <div class="l-price">预估￥8.80，优惠券抵扣￥2.00</div>
+          </div>
+          <div class="code-right">￥6.80</div>
         </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 class="code-bottom">
+          <img src="../../../static/image/alipay.png" class="code-img" />
+          <div class="des">请使用手机打开微信扫描二维码完成支付</div>
+          <div class="guo-qi">
+            <span>点击刷新</span>
+            重新获取二维码
           </div>
         </div>
       </div>
-    </div>
-  </el-dialog>
+    </el-dialog>
+  </div>
 </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' },
+        payModal: false, // 支付二维码弹出层
+        coupon: '',
+        couponList: [{
+          id: -1,
+          label: '不使用优惠券'
+        }, {
+          id: 1,
+          value: 1,
+          label: '满减券'
+        }, {
+          id: 2,
+          value: 10,
+          label: '立减券'
+        }, {
+          id: 3,
+          value: 15,
+          label: '折扣券'
+        }],
+        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'
+          },
         ]
       }
     },
@@ -105,12 +166,87 @@
   /deep/ .el-dialog__header {
     padding: 0;
   }
+
   /deep/ .el-dialog__body {
-    padding: 22px !important;
+    padding: 0px !important;
+  }
+  .pay-modal {
+    // border-radius: 16px;
+    overflow: hidden;
+    .pay-top {
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FFFFFF;
+      background: url(../../../static/image/pay-bg.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .code-content {
+    width: 640px;
+    margin: 40px auto 0;
+    padding-bottom: 100px;
+    box-sizing: border-box;
+    .code-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 20px;
+      .code-left {
+        .l-title {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #0D1E40;
+        }
+        .l-price {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #9EA7B7;
+        }
+      }
+      .code-right {
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #F74141;
+      }
+    }
+    .code-bottom {
+      text-align: center;
+      padding-top: 30px;
+      .code-img {
+        width: 260px;
+        height: 260px;
+      }
+      .des {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #0D1E40;
+        margin: 10px 0 20px 0;
+      }
+      .guo-qi {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #9EA7B7;
+        span {
+          color: #175199;
+          cursor: pointer;
+        }
+      }
+    }
   }
   .send-content {
     border-radius: 10px;
+    padding: 22px;
   }
+
   .top-juhe {
     display: flex;
     justify-content: space-between;
@@ -119,30 +255,37 @@
     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;
@@ -153,17 +296,20 @@
         }
       }
     }
+
     .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;
@@ -172,6 +318,7 @@
         color: #FC7200;
       }
     }
+
     .choose-icon {
       width: 32px;
       height: 32px;
@@ -180,18 +327,22 @@
       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;
@@ -199,6 +350,7 @@
         color: #92959B;
       }
     }
+
     .delivery-list {
       &-item {
         /*height: 76px;*/
@@ -207,24 +359,29 @@
         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;
@@ -233,18 +390,22 @@
             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;
@@ -252,11 +413,13 @@
             font-weight: 400;
             color: #9EA7B7;
           }
+
           .item-choose {
             margin-left: 26px;
             font-size: 0;
             width: 26px;
             height: 26px;
+
             img {
               width: 100%;
               height: 100%;
@@ -265,10 +428,12 @@
         }
       }
     }
+
     .pay-list {
       display: flex;
       align-items: center;
       padding-top: 10px;
+
       .pay-item {
         flex: 1;
         display: flex;
@@ -279,21 +444,26 @@
         border: 1px solid #eee;
         border-radius: 8px;
         cursor: pointer;
+
         &.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;
@@ -301,18 +471,22 @@
       }
     }
   }
+
   .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;
@@ -322,6 +496,7 @@
         margin-right: 6px;
         cursor: pointer;
       }
+
       .arrow-down {
         width: 10px;
         height: 6px;

src/components/settingComponents/deliverySetting.vue

@@ -9,6 +9,23 @@
         <span>推荐运力</span>
         <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
       </div>
+      <div class="delivery-list">
+        <div class="item" v-for="count in 12" :key="count">
+          <img src="../../../static/image/delivery-icon.png" class="icon" />
+        </div>
+      </div>
+    </div>
+    <div class="recommend">
+      <div class="title">
+        <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
+        <span>屏蔽运力</span>
+        <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
+      </div>
+      <div class="delivery-list">
+        <div class="item item-opcity" v-for="count in 12" :key="count">
+          <img src="../../../static/image/delivery-icon.png" class="icon" />
+        </div>
+      </div>
     </div>
     <!-- <div id="qrcode"></div> -->
   </div>
@@ -96,6 +113,27 @@
         color: #B1B1B1;
       }
     }
+    .delivery-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 30px 18px 0;
+      .item {
+        font-size: 0;
+        width: 166px;
+        height: 50px;
+        border-radius: 25px;
+        overflow: hidden;
+        margin-right: 50px;
+        margin-bottom: 30px;
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .item-opcity {
+        opacity: 0.4;
+      }
+    }
   }
 }
 </style>

src/components/shopAccount.vue

@@ -19,11 +19,13 @@
 </template>
 
 <script>
-  import wallet from './accountCompoents/wallet.vue'
+  import wallet from './accountCompoents/wallet.vue';
+  import coupon from './accountCompoents/coupon.vue';
   export default {
     name: 'HelloWorld',
     components: {
-     wallet
+     wallet,
+     coupon
     },
 
     data() {

src/components/shopCompoents/shopList.vue

@@ -28,7 +28,7 @@
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
           <el-button size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
-          <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button>
+          <!-- <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button> -->
         </template>
       </el-table-column>
     </el-table>