feat 代码优化

src/common/sider.vue

@@ -131,21 +131,11 @@ export default {
               name: "waimai",
               title: "外卖设置",
             },
-            {
-              path: "/set/system",
-              name: "system",
-              title: "系统设置",
-            },
-            // {
-            //   path: "/setUp/addressManagement",
-            //   name: "addressManagement",
-            //   title: "常用地址",
-            // },
             // {
-            //   path: "/setUp/pictureManagement",
-            //   name: "pictureManagement",
-            //   title: "同步设置",
-            // },
+            //   path: "/set/system",
+            //   name: "system",
+            //   title: "系统设置",
+            // }
           ],
         },
         {

src/components/shopAccount.vue

@@ -1,132 +1,132 @@
-<template>
-  <div class="shopInfo">
-    <el-row class="order_tab">
-      <el-col :span="15">
-        <div class="tabList">
-          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
-            <el-dropdown v-else @command="chooseCoupon">
-              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
-                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <div class="tab_line"></div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row class="content">
-      <component v-if="renderComponent" :is="activeName"></component>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import recharge from "./accountCompoents/recharge.vue";
-import consumption from "./accountCompoents/consumption.vue";
-export default {
-  name: "walletDetail",
-  components: {
-    recharge,
-    consumption,
-  },
-  data() {
-    return {
-      activeName: "recharge",
-      tabList: [
-        { name: "充值明细", index: 0, activeName: "recharge" },
-        { name: "消费明细", index: 1, activeName: "consumption" },
-      ],
-      tabNum: 0,
-      renderComponent: true,
-    };
-  },
-  created() {
-    this.changeTabs(0);
-  },
-  methods: {
-    chooseCoupon(e) {
-      this.tabNum = 1;
-      this.activeName = e;
-    },
-    forceRerender() {
-      // 从 DOM 中删除 my-component 组件
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    },
-    changeTabs(i) {
-      if (i === this.tabNum) {
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = i;
-      this.activeName = this.tabList[i].activeName;
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.shopInfo {
-  .order_tab {
-    width: 100%;
-    height: 74px;
-    background: #fff;
-
-    .tabList {
-      width: 100%;
-      height: 74px;
-      padding-top: 20px;
-      padding-left: 36px;
-      box-sizing: border-box;
-      display: flex;
-
-      .tab_item {
-        min-width: 58px;
-        margin-right: 56px;
-        .item {
-          font-size: 16px;
-          font-weight: 500;
-          color: #b1b1b1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
-        }
-        .active-item {
-          color: #fc7200;
-        }
-        .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>
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <el-col :span="15">
+        <div class="tabList">
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import recharge from "./recharge.vue";
+import consumption from "./consumption.vue";
+export default {
+  name: "walletDetail",
+  components: {
+    recharge,
+    consumption,
+  },
+  data() {
+    return {
+      activeName: "recharge",
+      tabList: [
+        { name: "充值明细", index: 0, activeName: "recharge" },
+        { name: "消费明细", index: 1, activeName: "consumption" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    this.changeTabs(0);
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 1;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active-item {
+          color: #fc7200;
+        }
+        .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/orderComponents/sendOrderPopup.vue

@@ -6,7 +6,7 @@
           <div class="left-content">
             <div class="juhe-icon">
               <!-- <img src="../../../static/image/juhe-icon.png" /> -->
-              <img  style="width:40px;height:40px;" src="../../../static/image/juhe-icon.png" alt="">
+              <img style="width:40px;height:40px;" src="../../../static/image/juhe-icon.png" alt="">
             </div>
             <div>
               <div class="juhe-title">聚合配送</div>

src/components/shopInfo.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="shopInfo">
-    <el-row class="order_tab">
-      <el-col :span="24">
-        <div class="tabList">
-          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
-            <el-dropdown v-else @command="choosePrint">
-              <span class="el-dropdown-link item">
-                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <div class="tab_line"></div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row class="content">
-      <el-col style="height: 100%;" :span="24">
-        <component v-if="renderComponent" :is="activeName"></component>
-      </el-col>
-    </el-row>
-    <merchant-add ref="merchantAdd" :products="productList"></merchant-add>
-  </div>
-</template>
-
-<script>
-import merchantAdd from "./merchantAdd.vue";
-import shopList from "./shopCompoents/shopList";
-import storeList from "./shopCompoents/bindTakeOut.vue";
-import deliveryList from "./shopCompoents/bindDelivery.vue";
-import printerList from "./shopCompoents/bindPrinter.vue";
-import usbPrinter from "./shopCompoents/bindUsbPrint.vue";
-import bus from "../common/bus.js";
-import { getProductList } from "../api/shop.js";
-export default {
-  name: "HelloWorld",
-  components: {
-    merchantAdd,
-    shopList,
-    storeList,
-    deliveryList,
-    printerList,
-    usbPrinter,
-  },
-
-  data() {
-    return {
-      activeName: "shopList",
-      tabList: [
-        { name: "门店列表", activeName: "shopList" },
-        { name: "绑定外卖平台", activeName: "storeList" },
-        { name: "绑定配送平台", activeName: "deliveryList" },
-        {
-          name: "绑定打印机",
-          activeName: "printerList",
-          children: [
-            { name: "云打印机", command: "printerList" },
-            { name: "USB打印机", command: "usbPrinter" },
-          ],
-        },
-      ],
-      tabNum: 0,
-      renderComponent: true,
-      productList: [],
-      memberType: this.$store.state.userInfo.memberType,
-    };
-  },
-  watch: {
-    "$store.state.userInfo": {
-      handler(newVal, oldVal) {
-        this.memberType = newVal.memberType;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.getProductList();
-    bus.$on("goPrinter", () => {
-      this.changeTabs(3);
-    });
-    let i = this.$route.params.tabNum;
-    if (i) {
-      this.changeTabs(Number(i));
-    }
-  },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      if (from.name) {
-        vm.$nextTick(() => {
-          vm.changeTabs(0);
-        });
-      }
-    });
-  },
-  mounted() {},
-  methods: {
-    choosePrint(e) {
-      console.log("object", e);
-      if (this.memberType === 1) {
-        this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
-          confirmButtonText: "成为商户",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        })
-          .then(() => {
-            this.$refs.merchantAdd.init(0);
-          })
-          .catch(() => {});
-      }
-      if (this.tabNum === 3) {
-        this.activeName = e;
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = 3;
-      this.activeName = e;
-    },
-    forceRerender() {
-      // 从 DOM 中删除 my-component 组件
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    },
-    changeTabs(i) {
-      if (this.memberType === 1) {
-        this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
-          confirmButtonText: "成为商户",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        })
-          .then(() => {
-            this.$refs.merchantAdd.init(0);
-          })
-          .catch(() => {});
-      }
-      if (i === this.tabNum) {
-        this.forceRerender();
-        return;
-      }
-      this.tabNum = i;
-      this.activeName = this.tabList[i].activeName;
-    },
-    getProductList() {
-      getProductList().then((res) => {
-        if (res.code === 200) {
-          this.productList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.shopInfo {
-  height: 100%;
-  .order_tab {
-    width: 100%;
-    height: 74px;
-    background: #fff;
-
-    .tabList {
-      width: 100%;
-      height: 74px;
-      padding-top: 20px;
-      padding-left: 36px;
-      box-sizing: border-box;
-      display: flex;
-
-      .tab_item {
-        min-width: 58px;
-        margin-right: 56px;
-        .item {
-          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%;
-    height: calc(100% - 84px);
-    margin-top: 10px;
-  }
-}
-</style>

src/components/waimai.vue

@@ -64,7 +64,9 @@ export default {
     };
   },
   created() {
-    this.changeTabs(0);
+    let index = this.$route.params.tabNum ?? 0;
+    console.log(this.$route);
+    this.changeTabs(index);
   },
   methods: {
     chooseCoupon(e) {

src/router/index.js

@@ -77,7 +77,7 @@ const router = new Router({
           path: '/account/walletDetail',
           name: 'walletDetail',
           title: '收支明细',
-          component: () => import('../components/shopAccount.vue')
+          component: () => import('../components/accountCompoents/shopAccount.vue')
         },
         {
           path: '/account/coupon',

src/views/home.vue

@@ -2,12 +2,16 @@
   <el-container>
     <sidebar></sidebar>
     <el-container>
-      <el-header style="text-align: right;height: 80px;line-height: 80px;">
+      <el-header>
         <span @click="showMerchant" v-if="$store.state.userInfo.memberType === 1" class="header-button">成为商户</span>
-        <span @click="$router.push({
-          path: '/shopInfo/shopAccount'
-        })" class="header-button">充值中心</span>
-        <span @click="goPrinter" class="header-button">打印设置</span>
+        <div class="account" @click="goAccount">
+          <img src="../../static/image/head-account.png" alt="">
+          <div class="num">￥{{$store.state.userInfo.amount}}</div>
+        </div>
+        <div class="print" @click="goPrinter">
+          <img src="../../static/image/head-print.png" alt="">
+          <div class="num con">打印设置</div>
+        </div>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
             <span style="cursor: pointer;">{{ userInfo.nickname }}</span>
@@ -65,6 +69,11 @@ export default {
   },
 
   methods: {
+    goAccount() {
+      this.$router.push({
+        name: "wallet",
+      });
+    },
     showMerchant() {
       this.$refs.merchantAdd.init(0);
     },
@@ -82,14 +91,11 @@ export default {
     },
     goPrinter() {
       this.$router.push({
-        path: "/shopInfo/shopInfos",
+        name: "waimai",
         params: {
-          tabNum: 3,
+          tabNum: 2,
         },
       });
-      if (this.$route.name === "shopInfos") {
-        bus.$emit("goPrinter");
-      }
     },
     loginOut() {
       this.$confirm("此操作将退出当前登录用户, 是否继续?", "提示", {
@@ -110,7 +116,10 @@ export default {
 </script>
 
 <style lang="scss" scoped="scoped">
-.el-header {
+/deep/.el-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   position: relative;
   width: 100%;
   height: 80px;
@@ -137,15 +146,27 @@ export default {
   margin-right: 40px;
 }
 
-.header-button {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  color: #777777;
+.account,
+.print {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
   cursor: pointer;
-  margin-right: 40px;
+  img {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+  .num {
+    line-height: 25px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fc7200;
+  }
+  .con {
+    color: #333333;
+  }
 }
-
 .home-content {
   display: flex;