feat:提交代码

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/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() {