feat:提交代码

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/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>