Merge branch 'dev' into dev_zlx

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.4",
     "element-ui": "^2.15.5",
     "node-sass": "^6.0.1",
+    "qrcodejs2": "0.0.2",
     "qs": "^6.10.1",
     "vue": "^2.5.2",
     "vue-amap": "^0.5.10",

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/set.vue

@@ -1,34 +1,100 @@
 <template>
-  <div>
-    我是SET页
+  <div class="setting">
+    <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">
+      <el-col :span="24">
+        <component :is="activeName"></component>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import voiceSetting from './settingComponents/voiceSetting.vue';
+import deliverySetting from './settingComponents/deliverySetting.vue';
 export default {
   name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
+      msg: 'Welcome to Your Vue.js App',
+      tab_list: [
+        {name: '自动接单/语音设置', index: 0},
+        {name: '推荐/屏蔽运力', index: 1}
+      ],
+      tab_ac: 0,
+      activeName: 'voiceSetting'
+    }
+  },
+  components: {
+    voiceSetting,
+    deliverySetting
+  },
+  methods: {
+    changeTabs(i) {
+      this.tab_ac = i;
+      this.activeName = i == 0 ? 'voiceSetting' : 'deliverySetting';
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
+<style lang="scss" scoped>
+.setting {
+  .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;
+  }
 }
 </style>

src/components/settingComponents/deliverySetting.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="delivery-content">
+    <div>
+      <el-button type="primary">保存操作</el-button>
+    </div>
+    <div class="recommend">
+      <div class="title">
+        <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
+        <span>推荐运力</span>
+        <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
+      </div>
+    </div>
+    <!-- <div id="qrcode"></div> -->
+  </div>
+</template>
+
+<script>
+  import QRCode from "qrcodejs2"
+  export default {
+    data() {
+      return {
+        form: '',
+        link: 'https://qr.alipay.com/bax06037qiyd8v6h0q7f0009'
+      }
+    },
+    mounted() {
+      // this.$nextTick(()=>{
+      //   this.qrcode();
+      // })
+    },
+    components: {
+      QRCode
+    },
+    methods: {
+      //  生成二维码
+      qrcode() {
+        let that = this;
+        let qrcode = new QRCode('qrcode', {
+          width: 124,
+          height: 124, // 高度
+          text: this.link, // 二维码内容
+          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+          // background: '#f0f',   // 背景色
+          // foreground: '#ff0'    // 前景色
+        })
+      },
+      toPay() {
+        fetch(
+          'http://121.4.100.145:8082/app/pay/getPayCode?amount=10.89&body=测试下单&orderNo=210915133735016908&token=cedebb6e872f539bef8c3f919874e9d7', {
+            methods: 'GET'
+          }).then(res => {
+          return res.json()
+        }).then(result => {
+          console.log(result);
+          if (result.code == 200) {
+            let divForm = document.getElementsByTagName('divform')
+            if (divForm.length) {
+              document.body.removeChild(divForm[0])
+            }
+            const div = document.createElement('divform')
+            div.innerHTML = result.data // res.data就是sb支付宝返回给你的form
+            document.body.appendChild(div)
+            // document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
+            document.forms[0].submit()
+          } else {
+            return this.$message({
+              message: result.msg,
+              type: 'error'
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.delivery-content {
+  .recommend {
+    background-color: #fff;
+    margin-top: 10px;
+    .title {
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      height: 55px;
+      line-height: 55px;
+      box-sizing: border-box;
+      padding: 0 18px;
+      border-bottom: 1px solid #eee;
+      span:nth-child(2) {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #B1B1B1;
+      }
+    }
+  }
+}
+</style>

src/components/settingComponents/voiceSetting.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="voice">
+    <div class="top-set">
+      <div class="t-left">
+        自动接单
+        <span>[时长设置]</span>
+      </div>
+      <div class="t-right">
+        <span>默认下单5分钟后</span>
+        <el-switch />
+      </div>
+    </div>
+    <div class="voice-content">
+      <div class="top-set" style="border-bottom: 1px solid #eee;">
+        <div class="t-left">
+          语音播报
+        </div>
+        <div class="t-right">
+          <span>一键开启</span>
+          <el-switch />
+        </div>
+      </div>
+      <div class="voice-list">
+        <el-row>
+          <el-col :span="8" v-for="(item, index) in voiceList" :key="index">
+            <div class="item">
+              <div class="left">
+                <img src="../../../static/image/voice-icon.png" class="voice-icon" />
+                <span>{{ item.name }}</span>
+              </div>
+              <div class="right">
+                <el-switch />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        voiceList: [
+          { id: 1, name: '新订单提醒', url: '' },
+          { id: 2, name: '配送5分钟无人接单提醒', url: '' },
+          { id: 3, name: '骑手接单提醒', url: '' },
+          { id: 4, name: '骑手取消配送提醒', url: '' },
+          { id: 5, name: '配送超时自动取消提醒', url: '' },
+          { id: 6, name: '配送取消提醒', url: '' },
+          { id: 7, name: '顾客取消订单提醒', url: '' },
+          { id: 8, name: '账户余额不足100元提醒', url: '' },
+          { id: 9, name: '账户余额不足50元提醒', url: '' }
+        ]
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.voice {
+  .top-set {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: #fff;
+    .t-left {
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      span {
+        cursor: pointer;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #175199;
+      }
+    }
+    .t-right {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #B1B1B1;
+    }
+  }
+  .voice-content {
+    margin-top: 10px;
+    .voice-list {
+      background-color: #fff;
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 17px 22px 19px 18px;
+        .left {
+          display: flex;
+          align-items: center;
+          .voice-icon {
+            width: 15px;
+            height: 12px;
+            margin-right: 4px;
+            margin-top: 2px;
+          }
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+}
+</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')
+        },
+        
       ]
     },
     {