Merge branch 'test' of https://e.coding.net/g-cphe0354/yinshoukeguanliduan/management into test

.env.production

@@ -3,10 +3,10 @@ ENV = 'production'
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
 # 测试
-VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 
 # 生产
-# VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
 
 # 预发布接口
 # VUE_APP_BASE_API  = 'https://pre-cashieradmin.sxczgkj.cn'

src/api/home.js

@@ -1,17 +1,17 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 /**
  * 汇总数据
  * @returns
  */
 export function summaryGet() {
-    return request({
+  return request({
-        url: '/api/summary',
+    url: "/api/summary",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId')
+      shopId: localStorage.getItem("shopId")
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -19,13 +19,13 @@ export function summaryGet() {
  * @returns
  */
 export function summaryTodayGet() {
-    return request({
+  return request({
-        url: '/api/summary/today',
+    url: "/api/summary/today",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId')
+      shopId: localStorage.getItem("shopId")
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -33,14 +33,14 @@ export function summaryTodayGet() {
  * @returns
  */
 export function summaryDateGet(day) {
-    return request({
+  return request({
-        url: '/api/summary/date',
+    url: "/api/summary/date",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            day: day
+      day: day
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -48,14 +48,14 @@ export function summaryDateGet(day) {
  * @returns
  */
 export function dateAmount(day) {
-    return request({
+  return request({
-        url: '/api/summary/dateAmount',
+    url: "/api/summary/dateAmount",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            day: day
+      day: day
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -63,16 +63,16 @@ export function dateAmount(day) {
  * @returns
  */
 export function dateProduct(day, page, size) {
-    return request({
+  return request({
-        url: '/api/summary/dateProduct',
+    url: "/api/summary/dateProduct",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            day: day,
+      day: day,
-            page: page,
+      page: page,
-            size: size
+      size: size
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -80,14 +80,14 @@ export function dateProduct(day, page, size) {
  * @returns
  */
 export function datePayType(day) {
-    return request({
+  return request({
-        url: '/api/summary/datePayType',
+    url: "/api/summary/datePayType",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            day: day
+      day: day
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -95,15 +95,15 @@ export function datePayType(day) {
  * @returns
  */
 export function daydownload(data) {
-    return request({
+  return request({
-        url: '/api/summary/day/download',
+    url: "/api/summary/day/download",
-        method: 'post',
+    method: "post",
-        data: {
+    data: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            ...data
+      ...data
-        },
+    },
-        responseType: 'blob'
+    responseType: "blob"
-    })
+  });
 }
 
 /**
@@ -111,14 +111,14 @@ export function daydownload(data) {
  * @returns
  */
 export function daycount(params) {
-    return request({
+  return request({
-        url: '/api/summary/day/count',
+    url: "/api/summary/day/count",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            ...params
+      ...params
-        }
+    }
-    })
+  });
 }
 
 /**
@@ -126,13 +126,27 @@ export function daycount(params) {
  * @returns
  */
 export function summaryday(params) {
-    return request({
+  return request({
-        url: '/api/summary/day',
+    url: "/api/summary/day",
-        method: 'get',
+    method: "get",
-        params: {
+    params: {
-            shopId: localStorage.getItem('shopId'),
+      shopId: localStorage.getItem("shopId"),
-            ...params
+      ...params
-        }
+    }
-    })
+  });
 }
 
+/**
+ * 营业板块
+ * @returns
+ */
+export function summarytrade(data) {
+  return request({
+    url: "/api/summary/trade",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}

src/assets/styles/element-variables.scss

@@ -6,7 +6,7 @@
 /* theme color */
 $--color-primary: #1890ff;
 $--color-success: #13ce66;
-$--color-warning: #FFBA00;
+$--color-warning: #ffba00;
 $--color-danger: #ff4949;
 // $--color-info: #1E1E1E;
 
@@ -17,10 +17,10 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid#dfe6ec;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
 

src/assets/styles/index.css

@@ -139,7 +139,7 @@
   height: 100%;
   position: fixed;
   font-size: 0;
-  top: 0;
+  top: 60px;
   bottom: 0;
   left: 0;
   z-index: 1001;

src/assets/styles/sidebar.scss

@@ -14,7 +14,7 @@
     height: 100%;
     position: fixed;
     font-size: 0;
-    top: 0;
+    top: 60px;
     bottom: 0;
     left: 0;
     z-index: 1001;

src/assets/styles/variables.scss

@@ -9,15 +9,15 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // sidebar
-$menuText: #bfcbd9;
+$menuText: #999;
 $menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText: #555; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #333;
+$menuBg: #fff;
-$menuHover: #444;
+$menuHover: rgba(121, 145, 188, 0.18);
 
-$subMenuBg: #444;
+$subMenuBg: #fff;
-$subMenuHover: #555;
+$subMenuHover: rgba(121, 145, 188, 0.18);
 
 $sideBarWidth: 205px;
 

src/layout/components/AppMain.vue

@@ -38,7 +38,7 @@ export default {
 }
 
 .fixed-header+.app-main {
-  padding-top: 50px;
+  padding-top: 140px;
 }
 
 .hasTagsView {
@@ -48,7 +48,7 @@ export default {
   }
 
   .fixed-header+.app-main {
-    padding-top: 84px;
+    padding-top: 140px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -16,18 +16,18 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template> -->
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
+      <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
         <div class="avatar-wrapper">
           <img :src="logo || Avatar" class="user-avatar">
-          <!-- <i class="el-icon-caret-bottom" /> -->
+          <i class="el-icon-caret-bottom" />
           <span class="shop_name">{{ shopName }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
-          <!-- <span style="display:block;" @click="show = true">
+          <span style="display:block;" @click="show = true">
             <el-dropdown-item>
               布局设置
             </el-dropdown-item>
-          </span> -->
+          </span>
           <router-link to="/shop/shop/shop_configuration">
             <el-dropdown-item>
               个人中心
@@ -44,7 +44,7 @@
             </el-dropdown-item>
           </span>
         </el-dropdown-menu>
-      </el-dropdown>
+      </el-dropdown> -->
     </div>
     <el-dialog title="修改密码" modal-append-to-body append-to-body :visible.sync="dialogVisible" width="400px">
       <el-form ref="form" :model="form" :rules="rules">

src/layout/components/Sidebar/Logo.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <div v-if="collapse" key="collapse" class="sidebar-logo-link">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+        <h1 v-else class="sidebar-title">{{ shopName }} </h1>
-      </router-link>
+        <i class="el-icon-arrow-down icon"></i>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+      </div>
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+      <div v-else key="expand" class="sidebar-logo-link">
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
-      </router-link>
+        <h1 class="sidebar-title">{{ shopName }} </h1>
+        <i class="el-icon-arrow-down icon"></i>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-import Logo from '@/assets/images/logo.png'
+import Avatar from '@/assets/images/avatar.png'
 export default {
   name: 'SidebarLogo',
   props: {
@@ -25,8 +27,9 @@ export default {
   },
   data() {
     return {
-      title: '收银机管理端',
+      shopName: localStorage.getItem('shopName'),
-      logo: Logo
+      Avatar,
+      logo: localStorage.getItem('logo'),
     }
   }
 }
@@ -53,23 +56,25 @@ export default {
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      font-size: 14px;
+      margin-left: 6px;
+    }
 
     & .sidebar-logo {
-      width: 32px;
+      width: 36px;
-      height: 32px;
+      height: 36px;
-      vertical-align: middle;
+      border-radius: 50%;
       margin-right: 6px;
     }
 
     & .sidebar-title {
-      display: inline-block;
+      color: #333;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
       font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
     }
   }
 

src/layout/index.vue

@@ -1,19 +1,104 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div class="top_container">
-    <sidebar class="sidebar-container" />
+      <div class="content">
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
+        <div class="logo">
-      <div :class="{'fixed-header':fixedHeader}">
+          <img class="img" src="@/assets/images/default_logo.png" />
-        <navbar />
+        </div>
-        <tags-view v-if="needTagsView" />
+        <div class="right-menu">
+          <template v-if="device !== 'mobile'">
+            <!-- <search id="header-search" class="right-menu-item" />
+          <el-tooltip content="项目文档" effect="dark" placement="bottom">
+            <Doc class="right-menu-item hover-effect" />
+          </el-tooltip>
+          <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
+            <screenfull id="screenfull" class="right-menu-item hover-effect" />
+          </el-tooltip>
+          <el-tooltip content="布局设置" effect="dark" placement="bottom">
+            <size-select id="size-select" class="right-menu-item hover-effect" />
+          </el-tooltip> -->
+
+            <i class="left_icon el-icon-search" />
+            <i class="left_icon el-icon-warning-outline" />
+            <i class="left_icon el-icon-bell" />
+          </template>
+          <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
+            <div class="avatar-wrapper">
+              <img :src="logo || Avatar" class="user-avatar">
+              <span class="shop_name">{{ shopName }}</span>
+              <i class="el-icon-caret-bottom" />
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <!-- <span style="display:block;" @click="show = true">
+              <el-dropdown-item>
+                布局设置
+              </el-dropdown-item>
+            </span> -->
+              <router-link to="/shop/shop/shop_configuration">
+                <el-dropdown-item>
+                  店铺配置
+                </el-dropdown-item>
+              </router-link>
+              <span @click="dialogVisible = true">
+                <el-dropdown-item>
+                  修改密码
+                </el-dropdown-item>
+              </span>
+              <span style="display:block;" @click="open">
+                <el-dropdown-item divided>
+                  退出登录
+                </el-dropdown-item>
+              </span>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
-      <app-main />
+      <el-dialog title="修改密码" modal-append-to-body append-to-body :visible.sync="dialogVisible" width="400px">
-      <right-panel v-if="showSettings">
+        <el-form ref="form" :model="form" :rules="rules">
-        <settings />
+          <el-form-item label="旧密码" prop="oldPass">
-      </right-panel>
+            <el-input :type="ip1Type" v-model="form.oldPass" placeholder="请输入旧密码">
+              <i slot="suffix"
+                :class="`el-input__icon ${ip1Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
+                @click.stop="changeInputType('ip1Type')"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="新密码" prop="newPass">
+            <el-input :type="ip2Type" v-model="form.newPass" placeholder="请输入新密码">
+              <i slot="suffix"
+                :class="`el-input__icon ${ip2Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
+                @click.stop="changeInputType('ip2Type')"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="确认新密码" prop="rnewPass">
+            <el-input :type="ip3Type" v-model="form.rnewPass" placeholder="请再次输入新密码">
+              <i slot="suffix"
+                :class="`el-input__icon ${ip3Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
+                @click.stop="changeInputType('ip3Type')"></i>
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" :loading="formLoading" @click="submitHandle">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div>
+      <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+      <sidebar class="sidebar-container" />
+      <div :class="{ hasTagsView: needTagsView }" class="main-container">
+        <div :class="{ 'fixed-header': fixedHeader }">
+          <navbar />
+          <tags-view v-if="needTagsView" />
+        </div>
+        <app-main />
+        <right-panel v-if="showSettings">
+          <settings />
+        </right-panel>
+      </div>
+      <!--  防止刷新后主题丢失  -->
+      <Theme v-show="false" ref="theme" />
     </div>
-    <!--  防止刷新后主题丢失  -->
-    <Theme v-show="false" ref="theme" />
   </div>
 </template>
 
@@ -21,9 +106,10 @@
 import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Theme from '@/components/ThemePicker'
 import Cookies from 'js-cookie'
+import Avatar from '@/assets/images/avatar.png'
 export default {
   name: 'Layout',
   components: {
@@ -36,6 +122,64 @@ export default {
     Theme
   },
   mixins: [ResizeMixin],
+  data() {
+    const validateNewPass = (rule, value, callback) => {
+      if (!this.form.newPass) {
+        callback(new Error(' '))
+      } else if (this.form.newPass === this.form.oldPass) {
+        callback(new Error('请输入与旧密码不同的新密码'))
+      } else {
+        callback()
+      }
+    }
+    const validateRnewPass = (rule, value, callback) => {
+      if (!this.form.rnewPass) {
+        callback(new Error(' '))
+      } else if (this.form.rnewPass !== this.form.newPass) {
+        callback(new Error('两次密码输入不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      dialogVisible: false,
+      Avatar: Avatar,
+      logo: localStorage.getItem('logo'),
+      shopName: localStorage.getItem('shopName'),
+      ip1Type: 'password',
+      ip2Type: 'password',
+      ip3Type: 'password',
+      formLoading: false,
+      form: {
+        oldPass: '',
+        newPass: '',
+        rnewPass: ''
+      },
+      rules: {
+        oldPass: [
+          {
+            required: true,
+            message: ' ',
+            trigger: 'blur'
+          }
+        ],
+        newPass: [
+          {
+            required: true,
+            validator: validateNewPass,
+            trigger: 'blur'
+          }
+        ],
+        rnewPass: [
+          {
+            required: true,
+            validator: validateRnewPass,
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
   computed: {
     ...mapState({
       sidebar: state => state.app.sidebar,
@@ -44,6 +188,12 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    ...mapGetters([
+      'sidebar',
+      'device',
+      'user',
+      'baseApi'
+    ]),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
@@ -65,52 +215,178 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    // 提交修改密码
+    submitHandle() {
+      this.$refs.form.validate(async vaild => {
+        if (vaild) {
+          try {
+            this.formLoading = true
+            const res = await updatePass({
+              loginType: localStorage.getItem('loginType'),
+              oldPass: encrypt(this.form.oldPass),
+              newPass: this.form.newPass
+            })
+            this.$notify.success('修改成功，请重新登陆')
+            setTimeout(() => {
+              this.logout()
+            }, 1000)
+          } catch (error) {
+            this.formLoading = false
+            console.log(error);
+          }
+        }
+      })
+    },
+    open() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        localStorage.setItem('logoutHandle', true)
+        this.logout()
+      })
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "~@/assets/styles/variables.scss";
+$top-c-h: 60px;
 
-  .app-wrapper {
+.top_container {
-    @include clearfix;
+  height: $top-c-h;
-    position: relative;
+  width: 100%;
-    height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  background-color: #F5F5F5;
+
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
+    height: $top-c-h - 10px;
+    background-color: #fff;
+    padding: 0 20px;
 
-    &.mobile.openSidebar {
+    .logo {
-      position: fixed;
+      .img {
-      top: 0;
+        display: block;
+        width: 123px;
+        height: auto
+      }
+    }
+
+    .right-menu {
+      display: flex;
+      align-items: center;
+
+      .left_icon {
+        font-size: 18px;
+        margin-right: 30px;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      .right-menu-item {
+        display: inline-block;
+        padding: 0 8px;
+        height: 100%;
+        font-size: 18px;
+        color: #5a5e66;
+        vertical-align: text-bottom;
+
+        &.hover-effect {
+          cursor: pointer;
+          transition: background .3s;
+
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
+        }
+      }
+
+      .avatar-container {
+        display: flex;
+        align-items: center;
+
+        .avatar-wrapper {
+          position: relative;
+          display: flex;
+          align-items: center;
+
+          .user-avatar {
+            cursor: pointer;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+          }
+
+          .el-icon-caret-bottom {
+            font-size: 12px;
+            margin-left: 6px;
+          }
+
+          .shop_name {
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+      }
     }
   }
+}
 
-  .drawer-bg {
+.app-wrapper {
-    background: #000;
+  @include clearfix;
-    opacity: 0.3;
+  position: relative;
-    width: 100%;
+  height: 100%;
-    top: 0;
+  width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
-    padding: 0;
   }
+}
 
-  .hideSidebar .fixed-header {
+.drawer-bg {
-    width: calc(100% - 54px)
+  background: #000;
-  }
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .mobile .fixed-header {
+.fixed-header {
-    width: 100%;
+  position: fixed;
-  }
+  top: $top-c-h;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+  padding: 0;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px)
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

src/utils/index.js

@@ -423,7 +423,7 @@ export function isPcBowser() {
  * decimal你保留的几位,默认保留小数后两位
  * isInt 是否保留0
  */
-export function formatDecimal(num, decimal = 2, isInt = false) {
+export function formatDecimal(num = 0, decimal = 2, isInt = false) {
   num = num.toFixed(3).toString();
   const index = num.indexOf(".");
   if (index !== -1) {

src/views/home/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="padding-bottom: 100px;">
-    <div class="card_wrap">
+    <!-- <div class="card_wrap">
       <div class="card">
         <div class="header">
           <div class="card_title">总销售额</div>
@@ -44,30 +44,143 @@
           <i class="icon el-icon-caret-top"></i>
         </div>
       </div>
+    </div> -->
+    <div class="h_card_wrap">
+      <div class="status_wrap">
+        <div class="left">
+          <div class="dot"></div>
+          <span>营业</span>
+        </div>
+        <div class="time_wrap">
+          <el-radio-group v-model="timeValue" @change="timeChange">
+            <el-radio-button label="0">今天</el-radio-button>
+            <el-radio-button label="-1">昨天</el-radio-button>
+            <el-radio-button label="-7">最近7天</el-radio-button>
+            <el-radio-button label="-30">最近30天</el-radio-button>
+            <el-radio-button label="week">本周</el-radio-button>
+            <el-radio-button label="month">本月</el-radio-button>
+            <el-radio-button label="custom">自定义</el-radio-button>
+          </el-radio-group>
+          <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
+            v-if="timeValue == 'custom'" @change="summarytrade">
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="content" v-loading="tradeLoading">
+        <div class="top">
+          <div class="item earnings">
+            <div class="num_wrap">
+              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
+              <div class="tips">营业实收（元）<el-icon class="el-icon-question" /></div>
+            </div>
+            <div class="line_wrap">
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>销售金额（元）</div>
+                  <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div>
+                </div>
+                <div class="line_gropress">
+                  <div class="gropress l"
+                    :style="{ width: `${tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
+                  <div class="gropress r"
+                    :style="{ width: `${tradeSale.refundAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>充值金额（元）</div>
+                  <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div>
+                </div>
+                <div class="line_gropress">
+                  <div class="gropress l" :style="{ width: `${tradeSale.inAmount / tradeSale.totalVipAmount * 100}%` }">
+                  </div>
+                  <div class="gropress r"
+                    :style="{ width: `${tradeSale.outAmount / tradeSale.totalVipAmount * 100}%` }"></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item data">
+            <div class="data_item">
+              <div class="num_wrap">
+                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
+                <div class="tips">会员消费（元）<el-icon class="el-icon-question" /></div>
+              </div>
+            </div>
+            <div class="data_item_right">
+              <div class="t"><span>新增会员数</span> <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span></div>
+              <div class="t"><span>会员消费笔数</span> <span class="n">{{ tradeVip.useNum || 0 }}</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="btm">
+          <div class="item item1">
+            <div class="title">客单价</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item2">
+            <div class="title">翻台率 <el-icon class="icon el-icon-question" /> </div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
+              <div class="t">{{ tradeCount.turnoverRate }}</div>
+            </div>
+          </div>
+          <div class="item item3">
+            <div class="title">优惠金额</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item4">
+            <div class="title">优惠笔数 </div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
+              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 销售额 -->
-    <div class="chart_wrap">
+    <div class="chart_wrap" style="display: flex;">
       <div class="item">
         <div class="header">
           <div class="tab_wrap">
-            <div class="item active">销售额</div>
+            <div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">销售趋势</div>
+            <div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">支付占比</div>
           </div>
-          <el-radio-group v-model="saleActive" @change="dateAmount">
+          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
             <el-radio-button label="7">近7天</el-radio-button>
             <el-radio-button label="30">30天</el-radio-button>
           </el-radio-group>
         </div>
-        <div
+        <div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 400px;" v-show="lineChartType == 0">
-          class="chart"
+        </div>
-          ref="saleChart"
+        <div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 400px;"
-          v-loading="saleLoading"
+          v-show="lineChartType == 1">
-          style="height: 400px;"
+        </div>
-        ></div>
       </div>
-    </div>
-    <div class="chart_wrap" style="display: flex;">
       <!-- 商品销售排行 -->
-      <div class="item">
+      <div class="item" style="margin-left: 20px;">
         <div class="header">
           <div class="tab_wrap">
             <div class="item active">商品销售排行</div>
@@ -97,28 +210,18 @@
         <div class="table">
           <el-table :data="saleTable" v-loading="saleTableLoading">
             <el-table-column label="排名" prop="productId"></el-table-column>
-            <el-table-column
+            <el-table-column label="商品名称" prop="productName"></el-table-column>
-              label="商品名称"
-              prop="productName"
-            ></el-table-column>
             <el-table-column label="数量" prop="productNum"></el-table-column>
             <el-table-column label="金额" prop="amount"></el-table-column>
           </el-table>
-          <div
+          <div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
-            class="head-container"
+            <el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
-            style="padding-top: 20px;display: flex;justify-content: flex-end;"
+              @current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
-          >
-            <el-pagination
-              :total="saleTableTotal"
-              :page-size="saleTableSize"
-              :current-page="saleTablePage"
-              @current-change="paginationChange"
-              layout="total, prev, pager, next, jumper"
-            ></el-pagination>
           </div>
         </div>
       </div>
-      <!-- 支付类型占比 -->
+    </div>
+    <!-- <div class="chart_wrap" style="display: flex;">
       <div class="item" style="margin-left: 20px;">
         <div class="header">
           <div class="tab_wrap">
@@ -129,13 +232,9 @@
             <el-radio-button label="30">30天</el-radio-button>
           </el-radio-group>
         </div>
-        <div
+        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
-          style="height: 400px;margin-top: 30px;"
-          ref="payChart"
-          v-loading="payChartLoading"
-        ></div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -146,14 +245,17 @@ import {
   dateProduct,
   dateAmount,
   datePayType,
-  summaryDateGet
+  summaryDateGet,
+  summarytrade
 } from "@/api/home";
+import dayjs from 'dayjs'
 import echarts from "echarts";
-import { debounce } from "@/utils";
+import { debounce, formatDecimal } from "@/utils";
 export default {
   name: "home",
   data() {
     return {
+      formatDecimal,
       topData: "",
       saleTab: "sale",
       saleActive: "7",
@@ -176,15 +278,24 @@ export default {
       saleTableSize: 5,
       __resizeHandler: null,
       productCountChart: null,
-      productSumChart: null
+      productSumChart: null,
+      lineChartType: 0,
+      timeValue: "0",
+      query: {
+        createdAt: '',
+      },
+      tradeLoading: false,
+      tradeSale: '',
+      tradeVip: '',
+      tradeCount: '',
     };
   },
   mounted() {
-    this.summaryGet();
+    // this.summaryGet();
     this.dateAmount();
     this.dateProduct();
-    this.datePayType();
     this.summaryDateGet();
+    this.timeChange('0')
 
     this.__resizeHandler = debounce(() => {
       if (this.saleChart) {
@@ -207,9 +318,110 @@ export default {
       }
     }, 100);
     window.addEventListener("resize", this.__resizeHandler);
-    this.initCardUserChart();
+    // this.initCardUserChart();
   },
   methods: {
+    // 切换时间
+    timeChange(e) {
+      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+      switch (e) {
+        case "":
+          // 全部
+          this.query.createdAt = [];
+          break;
+        case "0":
+          // 今天
+          this.query.createdAt = [
+            dayjs().format(format[0]),
+            dayjs().format(format[1])
+          ];
+          break;
+        case "-1":
+          // 昨天
+          this.query.createdAt = [
+            dayjs()
+              .add(-1, "d")
+              .format(format[0]),
+            dayjs()
+              .add(-1, "d")
+              .format(format[1])
+          ];
+          break;
+        case "-7":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs()
+              .add(-7, "d")
+              .format(format[0]),
+            dayjs().format(format[1])
+          ];
+          break;
+        case "-30":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs()
+              .add(-30, "d")
+              .format(format[0]),
+            dayjs().format(format[1])
+          ];
+          break;
+        case "week":
+          // 本周
+          this.query.createdAt = [
+            dayjs()
+              .startOf("week")
+              .format(format[0]),
+            dayjs()
+              .endOf("week")
+              .format(format[1])
+          ];
+          break;
+        case "month":
+          // 本周
+          this.query.createdAt = [
+            dayjs()
+              .startOf("month")
+              .format(format[0]),
+            dayjs()
+              .endOf("month")
+              .format(format[1])
+          ];
+          break;
+        case "custom":
+          // 自定义
+          this.query.createdAt = [];
+          break;
+        default:
+          break;
+      }
+      if (e != 'custom') {
+        this.summarytrade()
+      }
+    },
+    // 获取营业板块数据
+    async summarytrade() {
+      try {
+        this.tradeLoading = true
+        const res = await summarytrade({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1]
+        })
+        this.tradeLoading = false
+        this.tradeSale = res.sale
+        this.tradeVip = res.vip
+        this.tradeCount = res.count
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    lineChartTypeChange(i) {
+      this.lineChartType = i
+      if (i == 0) {
+        this.dateAmount()
+      } else {
+        this.datePayType();
+      }
+    },
     // 初始化支付笔数柱状图
     initCardPayChart(time = [], data = []) {
       this.cardPayChart = echarts.init(this.$refs.cardPayChart);
@@ -537,7 +749,7 @@ export default {
     async datePayType() {
       try {
         this.payChartLoading = true;
-        const res = await datePayType(this.payChartDay);
+        const res = await datePayType(this.saleActive);
         const data = res.countPayType.map(item => {
           return {
             value: item.count,
@@ -752,6 +964,232 @@ export default {
   background-color: #f5f5f5;
 }
 
+.h_card_wrap {
+
+  .status_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 10px;
+      }
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    margin-top: 15px;
+    padding: 20px;
+
+    .top {
+      display: flex;
+
+      .item {
+        flex: 1;
+
+        &.earnings {
+          display: flex;
+        }
+
+        &.data {
+          margin-left: 40px;
+          background: url('../../assets/images/data_home_bg1.png') no-repeat center center / cover;
+          display: flex;
+          align-items: center;
+        }
+
+        .data_item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .data_item_right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          .t {
+            width: 200px;
+            color: #333;
+            display: flex;
+            justify-content: space-between;
+
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+          }
+
+          .n {
+            color: #1890ff;
+            margin-left: 20px;
+          }
+        }
+
+        .num_wrap {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .num {
+            font-size: 30px;
+            color: #1890ff;
+          }
+
+          .tips {
+            font-size: 12px;
+            margin-top: 10px;
+          }
+        }
+
+        .line_wrap {
+          flex: 1;
+          padding-left: 20px;
+
+          .line_item {
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+
+            .line_item_top {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+
+              .t {
+                color: #999;
+              }
+            }
+
+            .line_gropress {
+              display: flex;
+              margin-top: 6px;
+              background-color: #F6F6F6;
+
+              .gropress {
+                height: 5px;
+
+                &.l {
+                  background-color: #1890ff;
+                }
+
+                &.r {
+                  background-color: #FF3F3F;
+                }
+              }
+            }
+
+            .line_btm {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 5px;
+
+              .icon {
+                color: #A2A2A2;
+                position: relative;
+                left: -5px;
+                font-size: 12px;
+              }
+
+              .info {
+                font-size: 12px;
+
+                .l_t {
+                  color: #1890ff;
+                }
+
+                .l_r {
+                  color: #FF3F3F;
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .btm {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+
+      .item {
+        width: 200px;
+        height: 83px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 18px;
+
+        &.item1 {
+          background-image: url('../../assets/images/data_home_item1.png');
+        }
+
+        &.item2 {
+          background-image: url('../../assets/images/data_home_item2.png');
+        }
+
+        &.item3 {
+          background-image: url('../../assets/images/data_home_item3.png');
+        }
+
+        &.item4 {
+          background-image: url('../../assets/images/data_home_item4.png');
+        }
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #333;
+
+          .icon {
+            font-size: 12px;
+            color: #999;
+            margin-left: 6px;
+          }
+        }
+
+        .icon_wrap {
+          display: flex;
+          align-items: center;
+          margin-top: 10px;
+
+          .img {
+            width: 36px;
+            height: 36px;
+          }
+
+          .t {
+            font-size: 24px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
 .card_wrap {
   display: flex;
   flex-wrap: wrap;
@@ -868,10 +1306,11 @@ export default {
           align-items: center;
           justify-content: center;
           font-size: 14px;
-          color: $color;
+          margin-right: 20px;
 
           &.active {
             position: relative;
+            color: $color;
 
             &::after {
               content: "";

src/views/home/home_old.vue

@@ -0,0 +1,899 @@
+<template>
+  <div class="app-container" style="padding-bottom: 100px;">
+    <div class="card_wrap">
+      <div class="card">
+        <div class="header">
+          <div class="card_title">总销售额</div>
+          <el-tooltip effect="dark" content="订单支付金额" placement="top">
+            <i class="icon el-icon-warning-outline"></i>
+          </el-tooltip>
+        </div>
+        <div class="number">{{ topData.totalSales || 0 }}</div>
+        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
+        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">支付笔数</div>
+        </div>
+        <div class="number">{{ topData.paymentsNumber }}</div>
+        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">访问量</div>
+        </div>
+        <div class="number">{{ topData.totalVisits }}</div>
+        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          <div class="dot"></div>
+          今日访问 {{ topData.totalVisitsToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">用户数</div>
+        </div>
+        <div class="number">{{ topData.totalUser }}</div>
+        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日新增 {{ topData.userToday || 0 }}
+          <i class="icon el-icon-caret-top"></i>
+        </div>
+      </div>
+    </div>
+    <!-- 销售额 -->
+    <div class="chart_wrap">
+      <div class="item">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">销售额</div>
+          </div>
+          <el-radio-group v-model="saleActive" @change="dateAmount">
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div
+          class="chart"
+          ref="saleChart"
+          v-loading="saleLoading"
+          style="height: 400px;"
+        ></div>
+      </div>
+    </div>
+    <div class="chart_wrap" style="display: flex;">
+      <!-- 商品销售排行 -->
+      <div class="item">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">商品销售排行</div>
+          </div>
+          <el-radio-group v-model="saleTableActive" @change="rankChange">
+            <el-radio-button label="1">今天</el-radio-button>
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="sale_data">
+          <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售数量</div>
+            </div>
+            <div class="number">{{ productCount }}</div>
+            <div class="product_chart_wrap" ref="productCountChart"></div>
+          </div>
+          <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售金额</div>
+            </div>
+            <div class="number">￥{{ productSum }}</div>
+            <div class="product_chart_wrap" ref="productSumChart"></div>
+          </div>
+        </div>
+        <div class="table">
+          <el-table :data="saleTable" v-loading="saleTableLoading">
+            <el-table-column label="排名" prop="productId"></el-table-column>
+            <el-table-column
+              label="商品名称"
+              prop="productName"
+            ></el-table-column>
+            <el-table-column label="数量" prop="productNum"></el-table-column>
+            <el-table-column label="金额" prop="amount"></el-table-column>
+          </el-table>
+          <div
+            class="head-container"
+            style="padding-top: 20px;display: flex;justify-content: flex-end;"
+          >
+            <el-pagination
+              :total="saleTableTotal"
+              :page-size="saleTableSize"
+              :current-page="saleTablePage"
+              @current-change="paginationChange"
+              layout="total, prev, pager, next, jumper"
+            ></el-pagination>
+          </div>
+        </div>
+      </div>
+      <!-- 支付类型占比 -->
+      <div class="item" style="margin-left: 20px;">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">支付占比类型</div>
+          </div>
+          <el-radio-group v-model="payChartDay" @change="datePayType">
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div
+          style="height: 400px;margin-top: 30px;"
+          ref="payChart"
+          v-loading="payChartLoading"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  summaryGet,
+  summaryTodayGet,
+  dateProduct,
+  dateAmount,
+  datePayType,
+  summaryDateGet
+} from "@/api/home";
+import echarts from "echarts";
+import { debounce } from "@/utils";
+export default {
+  name: "home",
+  data() {
+    return {
+      topData: "",
+      saleTab: "sale",
+      saleActive: "7",
+      cardPayChart: null,
+      cardCountChart: null,
+      cardUserChart: null,
+      saleLoading: false,
+      saleChart: null,
+      payChartDay: "7",
+      payChartLoading: false,
+      payChart: null,
+      chartType: 1,
+      productCount: 0,
+      productSum: 0,
+      saleTableActive: "1",
+      saleTable: [],
+      saleTableLoading: false,
+      saleTablePage: 1,
+      saleTableTotal: 0,
+      saleTableSize: 5,
+      __resizeHandler: null,
+      productCountChart: null,
+      productSumChart: null
+    };
+  },
+  mounted() {
+    this.summaryGet();
+    this.dateAmount();
+    this.dateProduct();
+    this.datePayType();
+    this.summaryDateGet();
+
+    this.__resizeHandler = debounce(() => {
+      if (this.saleChart) {
+        this.saleChart.resize();
+      }
+      if (this.payChart) {
+        this.payChart.resize();
+      }
+      if (this.cardPayChart) {
+        this.cardPayChart.resize();
+      }
+      if (this.cardUserChart) {
+        this.cardUserChart.resize();
+      }
+      if (this.productCountChart) {
+        this.productCountChart.resize();
+      }
+      if (this.productSumChart) {
+        this.productSumChart.resize();
+      }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
+    this.initCardUserChart();
+  },
+  methods: {
+    // 初始化支付笔数柱状图
+    initCardPayChart(time = [], data = []) {
+      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
+      this.cardPayChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%"
+          }
+        ]
+      });
+    },
+    // 初始化访问量柱状图
+    initCardCountChart(time = [], data = []) {
+      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
+      this.cardCountChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%"
+          }
+        ]
+      });
+    },
+    // 初始化用户数折线图
+    initCardUserChart(time = [], data = []) {
+      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
+      this.cardUserChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 0,
+          y: 10,
+          x2: 0,
+          y2: 2
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: "line",
+            symbol: "none"
+          }
+        ]
+      });
+    },
+    // 初始化销售额图标
+    initSaleChart(time, data) {
+      this.saleChart = null;
+      this.saleChart = echarts.init(this.$refs.saleChart);
+      this.saleChart.setOption({
+        title: {
+          text: "销售趋势",
+          x: "center"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#999"
+              }
+            },
+            axisLabel: {
+              rotate: time.length <= 7 ? 0 : 45,
+              interval: 0,
+              textStyle: {
+                fontSize: "9"
+              }
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#999"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#ececec"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: time.length <= 7 ? "50%" : "30%"
+          }
+        ]
+      });
+    },
+    // 初始化销售额图表
+    initPayChart(data) {
+      this.payChart = echarts.init(this.$refs.payChart);
+      this.payChart.setOption({
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          top: "5%",
+          left: "center"
+        },
+        color: [
+          "#409eff",
+          "#91cc75",
+          "#fac858",
+          "#ee6666",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc"
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center"
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: data
+          }
+        ]
+      });
+    },
+    // 获取销售额柱状图数据
+    async dateAmount() {
+      try {
+        this.saleLoading = true;
+        const res = await dateAmount(this.saleActive);
+        const data = res.total.map(item => item.amount);
+        const time = res.total.map(item => item.tradeDay);
+        this.initSaleChart(time, data);
+        setTimeout(() => {
+          this.saleLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    paginationChange(e) {
+      this.saleTablePage = e;
+      this.dateProduct();
+    },
+    // 获取销售额排行表格数据
+    async dateProduct() {
+      try {
+        this.saleTableLoading = true;
+        const res = await dateProduct(
+          this.saleTableActive,
+          this.saleTablePage,
+          this.saleTableSize
+        );
+        this.saleTable = res.totalProduct;
+        this.saleTableTotal = res.total;
+        this.productCount = res.productCount;
+        this.productSum = res.productSum;
+        setTimeout(() => {
+          this.saleTableLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 支付类型占比 饼图
+    async datePayType() {
+      try {
+        this.payChartLoading = true;
+        const res = await datePayType(this.payChartDay);
+        const data = res.countPayType.map(item => {
+          return {
+            value: item.count,
+            name: item.payType
+          };
+        });
+        setTimeout(() => {
+          this.payChartLoading = false;
+        }, 300);
+        this.initPayChart(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 汇总数据
+    async summaryGet() {
+      try {
+        const res1 = await summaryGet();
+        const res2 = await summaryTodayGet();
+        this.topData = {
+          ...res1,
+          ...res2
+        };
+        let payTime = res1.countDateList.map(item => item.tradeDay);
+        let payData = res1.countDateList.map(item => item.count);
+
+        let countTime = res1.visitsCountList.map(item => item.tradeDay);
+        let countData = res1.visitsCountList.map(item => item.count);
+
+        this.initCardPayChart(payTime, payData);
+        this.initCardCountChart(countTime, countData);
+        console.log(this.topData);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    rankChange() {
+      this.dateProduct();
+      this.summaryDateGet();
+    },
+    // 初始化销售图标
+    initProduceChart(p1, p2) {
+      this.productCountChart = echarts.init(this.$refs.productCountChart);
+      this.productSumChart = echarts.init(this.$refs.productSumChart);
+
+      this.productCountChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [
+          {
+            boundaryGap: false,
+            type: "category",
+            data: p1[0],
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: p1[1],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#409eff" // 渐变颜色
+                },
+                {
+                  offset: 1,
+                  color: "#409eff" // 渐变颜色
+                }
+              ])
+            }
+          }
+        ]
+      });
+
+      this.productSumChart.setOption({
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0
+        },
+        xAxis: [
+          {
+            boundaryGap: false,
+            type: "category",
+            data: p2[0],
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false // 不显示网格线
+            }
+          }
+        ],
+        series: [
+          {
+            data: p2[1],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#409eff" // 渐变颜色
+                },
+                {
+                  offset: 1,
+                  color: "#409eff" // 渐变颜色
+                }
+              ])
+            }
+          }
+        ]
+      });
+    },
+    // 日期汇总数据
+    async summaryDateGet() {
+      try {
+        const res = await summaryDateGet(this.saleTableActive);
+        let p1 = [
+          res.numList.map(item => item.tradeDay),
+          res.numList.map(item => item.count)
+        ];
+        let p2 = [
+          res.amountList.map(item => item.tradeDay),
+          res.amountList.map(item => item.count)
+        ];
+        this.initProduceChart(p1, p2);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+.card_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .card {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+    padding: 0 20px;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      color: #999;
+      padding-top: 20px;
+
+      .card_title {
+        font-size: 14px;
+        flex: 1;
+      }
+    }
+
+    .number {
+      padding: 20px 0 10px 0;
+      font-size: 24px;
+      height: 60px;
+    }
+
+    .row {
+      height: 50px;
+      color: #555;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #ececec;
+      }
+
+      .icon {
+        color: rgb(255, 85, 85);
+        margin-left: 4px;
+      }
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+.chart_wrap {
+  margin-top: 20px;
+
+  .sale_data {
+    display: flex;
+
+    .card {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 2px;
+      padding: 0 20px;
+
+      .sale_data_header {
+        display: flex;
+        justify-content: space-between;
+        color: #999;
+        padding-top: 20px;
+
+        .card_title {
+          font-size: 14px;
+          flex: 1;
+        }
+      }
+
+      .number {
+        padding-top: 10px;
+        font-size: 24px;
+        height: 60px;
+      }
+
+      .product_chart_wrap {
+        height: 50px;
+      }
+    }
+  }
+
+  .item {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #ececec;
+      padding: 0 20px;
+
+      .tab_wrap {
+        display: flex;
+        $color: #1890ff;
+
+        .item {
+          padding: 0 10px;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          color: $color;
+
+          &.active {
+            position: relative;
+
+            &::after {
+              content: "";
+              width: 100%;
+              border-bottom: 2px solid $color;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .chart {
+      padding: 20px 0;
+      height: 300px;
+    }
+
+    .table {
+      padding: 20px;
+    }
+  }
+}
+</style>

src/views/shop/components/collectMoneyCode.vue

@@ -0,0 +1,49 @@
+<template>
+    <div v-loading="pageLoading">
+        <el-form :model="form" label-position="top">
+            <el-form-item label="门店收款码">
+                <el-image :src="form.paymentQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+                    style="width: 227px;height: 227px;"></el-image>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码</el-button>
+                <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码样式</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { tbShopInfo, tbShopInfoPut } from "@/api/user";
+export default {
+    data() {
+        return {
+            pageLoading: false,
+            form: {
+                paymentQrcode: ''
+            }
+        }
+    },
+    mounted() {
+        this.tbShopInfo();
+    },
+    methods: {
+        // 下载图片
+        downloadImgHandle(url) {
+            if (url) window.open(url, '_blank')
+        },
+        // 获取店铺详情
+        async tbShopInfo() {
+            try {
+                this.pageLoading = true
+                const shopId = localStorage.getItem("shopId");
+                const res = await tbShopInfo(shopId);
+                this.pageLoading = false
+                this.form.paymentQrcode = res.paymentQrcode;
+            } catch (error) {
+                console.log(error);
+            }
+        },
+    }
+}
+</script>

src/views/shop/components/shopInfo.vue

@@ -29,6 +29,10 @@
             uploadIndex = 3;
             "></el-image>
         </el-form-item>
+        <el-form-item label="店铺小程序码">
+          <el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+            style="width: 80px;height: 80px;" @click="downloadImgHandle(form.smallQrcode)"></el-image>
+        </el-form-item>
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
         </el-form-item>
@@ -69,10 +73,16 @@
           }" format="HH:mm" value-format="HH:mm">
           </el-time-picker>
           <el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
-            selectableRange:'00:00:00 - 23:59:59',
+            selectableRange: '00:00:00 - 23:59:59',
           }" format="HH:mm" value-format="HH:mm">
           </el-time-picker>
         </el-form-item>
+        <el-form-item label="桌位费/位/元">
+          <el-input-number v-model="form.tableFee" :min="0" />
+          <!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
+          <el-switch v-model="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
+          </el-switch>
+        </el-form-item>
         <el-form-item label="是否开启8折活动">
           <el-switch v-model="form.isOpenYhq" active-value="true" inactive-value="false"></el-switch>
           <!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
@@ -251,6 +261,10 @@ export default {
     this.tbShopInfo();
   },
   methods: {
+    // 下载图片
+    downloadImgHandle(url) {
+      if (url) window.open(url, '_blank')
+    },
     onSearchResult(res) {
       this.locationSearchList = res;
       this.amapOptions.center = [res[0].lng, res[0].lat];

src/views/shop/components/shopMode.vue

@@ -0,0 +1,69 @@
+<template>
+    <div v-loading="pageLoading">
+        <el-form :model="form" label-position="top">
+            <el-form-item label="经营模式「单选」">
+                <el-radio-group v-model="form.registerType">
+                    <el-radio label="munchies">快餐版（先支付后下单）</el-radio>
+                    <el-radio label="restaurant">餐饮版（先下单后支付）</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="就餐模式「多选」">
+                <el-checkbox-group v-model="form.eatModel">
+                    <el-checkbox label="dine-in">堂食自取</el-checkbox>
+                    <el-checkbox label="take-out">允许打包</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { tbShopInfo, tbShopInfoPut } from "@/api/user";
+export default {
+    data() {
+        return {
+            pageLoading: false,
+            loading: false,
+            form: {
+                id: localStorage.getItem("shopId"),
+                registerType: 'munchies',
+                eatModel: ['dine-in']
+            }
+        }
+    },
+    mounted() {
+        this.tbShopInfo();
+    },
+    methods: {
+        // 提交修改
+        async submitHandle() {
+            try {
+                this.loading = true
+                const res = await tbShopInfoPut(this.form)
+                this.loading = false
+                this.$message.success('修改成功')
+                this.tbShopInfo()
+            } catch (error) {
+                this.loading = false
+                console.log(error);
+            }
+        },
+        // 获取店铺详情
+        async tbShopInfo() {
+            try {
+                this.pageLoading = true
+                const shopId = localStorage.getItem("shopId");
+                const res = await tbShopInfo(shopId);
+                this.form.registerType = res.registerType;
+                this.form.eatModel = res.eatModel;
+                this.pageLoading = false
+            } catch (error) {
+                console.log(error);
+            }
+        },
+    }
+}
+</script>

src/views/shop/shop_configuration.vue

@@ -2,13 +2,14 @@
     <div class="app-container">
         <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="店铺信息" name="1"></el-tab-pane>
+            <el-tab-pane label="经营模式" name="8"></el-tab-pane>
             <el-tab-pane label="基础配置" name="2"></el-tab-pane>
             <!-- <el-tab-pane label="通知配置" name="3"></el-tab-pane> -->
             <el-tab-pane label="安全设置" name="4"></el-tab-pane>
             <el-tab-pane label="店铺装修" name="5"></el-tab-pane>
-            <el-tab-pane label="跳转小程序" name="6" v-if="shopId==1"></el-tab-pane>
+            <el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
             <el-tab-pane label="通知中心" name="7"></el-tab-pane>
-            
+            <el-tab-pane label="店铺收款码" name="9"></el-tab-pane>
         </el-tabs>
         <shopInfo v-if="activeName == 1" />
         <shopSetting v-if="activeName == 2" />
@@ -17,7 +18,8 @@
         <extend v-if="activeName == 5" />
         <goxcx v-if="activeName == 6" />
         <notifications v-if="activeName == 7" />
-        
+        <ShopMode v-if="activeName == 8" />
+        <CollectMoneyCode v-if="activeName == 9" />
     </div>
 </template>
 
@@ -29,16 +31,24 @@ import securitySetting from './components/securitySetting'
 import extend from './components/extend'
 import goxcx from './components/goxcx'
 import notifications from './notifications/index.vue'
+import ShopMode from './components/shopMode.vue'
+import CollectMoneyCode from './components/collectMoneyCode.vue'
 export default {
     components: {
         shopInfo,
         shopSetting,
-        notice,securitySetting,extend,goxcx,notifications
+        notice,
+        securitySetting,
+        extend,
+        goxcx,
+        notifications,
+        ShopMode,
+        CollectMoneyCode
     },
     data() {
         return {
             activeName: '1',
-            shopId:localStorage.getItem('shopId')
+            shopId: localStorage.getItem('shopId')
         }
     }
 }

src/views/table/components/downloadTableCode.vue

@@ -2,7 +2,7 @@
     <el-dialog title="下载桌码" width="400px" :visible.sync="dialogVisible" @open="reset">
         <el-form ref="form" :model="form" label-position="left">
             <el-form-item label="下载数量">
-                <el-input-number v-model="form.number" :min="1" :max="total * 2"></el-input-number>
+                <el-input-number v-model="form.number" :min="1" :max="500"></el-input-number>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">