Merge branch 'dev' of http://git.ydd100.cn/zhaolianxi/liebao-web into dev

src/common/sider.vue

@@ -68,14 +68,17 @@
             path: '/shopInfo',
             name: 'shopInfo',
             title: '商户信息',
-            title: '商家信息',
             icon: '/static/image/order-icon.png',
             children: [
               {
                 path: '/shopInfo/shopInfos',
                 name: 'shopInfos',
-                title: '门店管理',
                 title: '订单列表',
+              },
+              {
+                path: '/shopInfo/shopAccount',
+                name: 'shopInfos',
+                title: '我的账户',
               }
             ]
           },

src/components/accountCompoents/wallet.vue

@@ -0,0 +1,145 @@
+<template>
+    <div>
+        <el-col :span="24">
+            <div class="balance">
+                <div class="balance_name">账户余额（元）</div>
+                <div class="balance_price">0.00</div>
+                <div class="balance_line"></div>
+                <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
+            </div>
+        </el-col>
+        <el-col :span="18">
+            <div class="recharge_title">充值金额</div>
+            <div class="recharge_list">
+                <div class="item item_ac">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">5000元</div>
+                <div class="item">其他金额</div>
+            </div>
+            <div class="recharge_title">支付方式</div>
+            <div class="recharge_list">
+                <div class="item"><img src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付</div>
+                <div class="item"><img src="../../../static/image/we-chat.png" alt="" srcset="">微信支付</div>
+            </div>
+            <el-button class="recharge_color">去充值</el-button>
+            <div class="agreement">充值即同意 <span>《充值协议》</span> </div>
+        </el-col>
+    </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      products: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+
+    methods: {
+      
+    }
+  }
+</script>
+
+<style lang="scss">
+  .balance{
+          width: 100%;
+          height: 200px;
+          border-radius: 5px;
+          background: linear-gradient(to right,#5664E2,#13B2C1);
+          padding-left: 42px;
+          box-sizing: border-box;
+          margin-bottom: 42px;
+          .balance_name{
+            font-size: 14px;
+            font-weight: 400;
+            color: #FFFFFF;
+            padding-top: 36px;
+          }
+          .balance_price{
+            font-size: 60px;
+            font-weight: bold;
+            color: #FFFFFF;
+          }
+          .balance_line{
+              width: 100%;
+              height: 1px;
+              background: rgba($color: #FFFFFF, $alpha: 0.1);
+              margin-top: 10px;
+          }
+          .balance_sign{
+            font-size: 12px;
+            font-weight: 400;
+            color: #FFFFFF;
+            opacity: 0.6;
+            line-height: 60px;
+            display: flex;
+            align-items: center;
+            img{
+                width: 13px;
+                height: 13px;
+                margin-right: 4px;
+            }
+          }
+      }
+        .recharge_title{
+            font-size: 16px;
+            font-weight: 500;
+            color: #333333;
+        }
+        .recharge_color{
+            background: #FC7200;
+            color: #FFF;
+        }
+        .agreement{
+            font-size: 12px;
+            font-weight: 400;
+            color: #808080;
+            span{
+                color: #3662A1;
+            }
+        }
+        .recharge_list{
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 24px;
+            margin-bottom: 40px;
+            .item{
+                width: 210px;
+                height: 67px;
+                border: 1px solid #E3E3E3;
+                color: #222222;
+                font-size: 14px;
+                font-weight: 600;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 3px;
+                margin-right: 15px;
+                margin-bottom: 15px;
+                img{
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 6px;
+                }
+            }
+            .item_ac{
+                border-color: #FC7200;
+                color: #FC7200;
+            }
+        }
+</style>

src/components/shopAccount.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="15">
+        <div class="tab_list">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tab_ac==i?true:false}"
+               v-for="(item,i) in tab_list" :key="i">
+            <span>{{item.name}}</span>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row class="content">
+       <component :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import wallet from './accountCompoents/wallet.vue'
+  export default {
+    name: 'HelloWorld',
+    components: {
+     wallet
+    },
+
+    data() {
+      return {
+        activeName: 'wallet',
+        tab_list: [
+          {name: '我的钱包', index: 0},
+          {name: '优惠券', index: 1},
+          {name: '充值明细', index: 2},
+          {name: '消费明细', index: 3}
+        ],
+        tab_ac: 0,
+      }
+    },
+    methods: {
+      changeTabs(i) {
+        this.tab_ac = i;
+        switch(i) {
+          case 0:
+            this.activeName = 'wallet';
+          break;
+          case 1:
+            this.activeName = 'coupon';
+          break;
+          case 2:
+            this.activeName = 'recharge';
+          break;
+          case 3:
+            this.activeName = 'consumption';
+          break;
+        }
+      }
+    },
+    mounted() {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+  .shopInfo {
+    .order_tab {
+      width: 100%;
+      height: 74px;
+      background: #FFF;
+
+      .tab_list {
+        width: 100%;
+        height: 74px;
+        padding-top: 20px;
+        padding-left: 36px;
+        box-sizing: border-box;
+        display: flex;
+
+        .tab_item {
+          min-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: 15px auto 0;
+          }
+        }
+
+        .tab_item_ac {
+          color: #FC7200;
+
+          .tab_line {
+            background: #FC7200;
+          }
+        }
+      }
+    }
+
+    .content {
+      width: 100%;
+      margin-top: 10px;
+      padding: 20px;
+      box-sizing: border-box;
+      background: #FFF;
+      
+    }
+  }
+</style>

src/components/shopCompoents/bindPrinter.vue

@@ -3,6 +3,71 @@
     <div class="store-list">
       <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
     </div>
+     <div class="take-out-list">
+      <div class="item">
+        <div class="item-top">
+          <div class="name">美团外卖</div>
+          <div class="top-right">
+            <span>开启后自动接单</span>
+            <el-switch />
+          </div>
+        </div>
+        <div class="item-bottom">
+          <div class="left">
+            <div class="l-l">
+              <img src="../../../static/image/alipay.png" class="l-l-img" />
+            </div>
+            <div class="take-out-name">
+              <div class="take-out-name-bot">
+                <span class="status1">· 打印机离线</span>
+                <span class="status2">· 打印机离线</span>
+                <span class="status3">· 打印机离线</span>
+              </div>
+              <div>打印机名称：飞鹅打印机</div>
+              <div>打印机编号：VXN2020080765184</div>
+              <div class="take-out-name-bot">打印机KEY：1234</div>
+              <div>客户联：X1</div>
+              <div>商家联：X1</div>
+              <div>厨房联：X1</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-button size="small">编&nbsp;辑</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="take-out-list">
+      <div class="item">
+        <div class="item-top">
+          <div class="name">添加打印机</div>
+        </div>
+        <div class="item-bottom">
+          <div class="left">
+            <div class="l-l">
+              <img src="../../../static/image/printer.png" class="l-l-img" />
+            </div>
+            <div class="take-out-name">
+              <div class="take-out-name-bot">
+                <span class="status1">请添加打印机</span>
+              </div>
+              <div>打印机名称：-</div>
+              <div>打印机编号：-</div>
+              <div class="take-out-name-bot">打印机KEY：-</div>
+              <div>客户联：-</div>
+              <div>商家联：-</div>
+              <div>厨房联：-</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-button type="primary" size="small" class="right-btn">添加打印机</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
   </div>
 </template>
 
@@ -64,5 +129,81 @@
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
   }
-
+  .take-out-list {
+    margin-bottom: 10px;
+    .item {
+      background-color: #fff;
+      .item-top {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 20px 18px;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+        .name {
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #333333;
+        }
+        .top-right {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #B1B1B1;
+            margin-right: 12px;
+          }
+        }
+      }
+      .item-bottom {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25px 18px;
+        align-items: center;
+        .left {
+          display: flex;
+          align-items: center;
+          .l-l {
+            width: 220px;
+            height: 220px;
+            font-size: 0;
+            .l-l-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .take-out-name {
+            font-size: 13px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 26px;
+            margin-left: 30px;
+            .take-out-name-bot{
+              margin-bottom: 10px;
+              .status1{
+                color: #B1B1B1;
+              }
+              .status2{
+                color: #F74141;
+              }
+              .status3{
+                color: #18B71C;
+              }
+            }
+          }
+        }
+        .right {
+          .right-btn {
+            background-color: #FC7200;
+            border: none;
+          }
+        }
+      }
+    }
+  }
 </style>

src/router/index.js

@@ -44,7 +44,14 @@ const router = new Router({
           name: 'shopInfos',
           title: '门店管理',
           component: () => import('../components/shopInfo.vue')
-        }
+        },
+        {
+          path: '/shopInfo/shopAccount',
+          name: 'shopAccount',
+          title: '我的账户',
+          component: () => import('../components/shopAccount.vue')
+        },
+        
       ]
     },
     {