首页增加提示类tab,B类指标页优化,我的-增加业务员日常工作统计

package.json

@@ -24,6 +24,7 @@
     "vue-baidu-map": "^0.21.22",
     "vue-jsonp": "^2.0.0",
     "vue-router": "^3.5.3",
+    "vuex": "^3.6.0",
     "watermark-dom": "^2.3.0",
     "weixin-js-sdk": "^1.6.5"
   },

src/App.vue

@@ -5,11 +5,10 @@
 </template>
 <script>
 import watermark from 'watermark-dom';
-import { loginLog } from '@/api/index';
+import store from './store';
 export default {
   name: 'App',
   created() {
-    this.loginLogFn();
     // 当前设备：PC/mobile
     let isDevice = window.navigator.userAgent.match(
       /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
@@ -38,31 +37,11 @@ export default {
           watermark_y_space: 60,
           watermark_alpha: 0.1,
         });
+        // 获取移动端获取用户信息接口
+        store.dispatch('getUserInfo').then(() => {});
       }
     }, 1000);
   },
-  methods: {
-    loginLogFn() {
-      var appVersion = navigator.appVersion;
-      var Logapp = appVersion.split('(')[1].split(';');
-      var arrLog = '';
-      if (Logapp[0] == 'Linux') {
-        arrLog = {
-          browser: navigator.appCodeName,
-          os: Logapp[1],
-          phoneBrand: Logapp[2].split('/')[1],
-          phoneModel: Logapp[2].split('/')[0],
-        };
-      } else {
-        arrLog = {
-          browser: navigator.appCodeName,
-          os: Logapp[0],
-          phoneBrand: '',
-          phoneModel: '',
-        };
-      }
-      loginLog(arrLog);
-    },
-  },
+  methods: {},
 };
 </script>

src/store/getters.js

@@ -0,0 +1,4 @@
+const getters = {
+  userInfo: (state) => state.user.userInfo,
+};
+export default getters;

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import user from './modules/user';
+import getters from './getters';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    user,
+  },
+  getters,
+});
+
+export default store;

src/store/modules/user.js

@@ -0,0 +1,31 @@
+import { getMobileUserInfo } from '@/api/index';
+
+const user = {
+  state: {
+    userInfo: null,
+  },
+
+  mutations: {
+    SET_USER_INFO: (state, userInfo) => {
+      state.userInfo = userInfo;
+    },
+  },
+
+  actions: {
+    // 获取用户信息
+    getUserInfo({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getMobileUserInfo()
+          .then((res) => {
+            commit('SET_USER_INFO', res.data);
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+  },
+};
+
+export default user;

src/views/home/hintTabPage/hintDetail.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="hintDetail">
+    <div class="header">
+      <van-nav-bar class="navBar" title="门店拜访" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="tab">
+      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
+        <van-tab
+          :title="item.title"
+          :name="item.name"
+          v-for="(item, index) in tabsItem"
+          :key="index"></van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tabVal: 0,
+      tabsItem: [
+        {
+          title: '未拜访',
+          name: '0',
+        },
+        {
+          title: '建店',
+          name: '1',
+        },
+        {
+          title: '色卡',
+          name: '0',
+        },
+      ],
+    };
+  },
+  methods: {
+    tabChange(val) {},
+    onClickLeft() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

src/views/home/hintTabPage/index.vue

@@ -12,7 +12,7 @@
                   class="popoverConten"
                   v-for="(item, index) in visitCollapse.tipsPopoverlabel"
                   :key="index">
-                  {{ item.label }}:{{ item.prop }}
+                  {{ item }}
                 </div>
                 <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
@@ -20,7 +20,10 @@
               </el-popover>
             </div>
           </template>
-          <visitPage :contentData="visitCollapse.contentData"></visitPage>
+          <visitPage
+            :contentData="visitCollapse.contentData"
+            :maskShow="visitCollapse.collapseLosding"
+            :resData="visitCollapse.resData"></visitPage>
         </van-collapse-item>
         <!-- 建店 -->
         <van-collapse-item :name="createStore.name">
@@ -40,19 +43,18 @@
               </el-popover>
             </div>
           </template>
-          <visitPage :contentData="createStore.contentData"></visitPage>
+          <!-- <visitPage
+            :contentData="createStore.contentData"
+            :maskShow="createStore.collapseLosding"></visitPage> -->
         </van-collapse-item>
         <!-- 日报、周报、半月报 -->
-        <van-collapse-item name="3">
+        <van-collapse-item name="3" v-if="empLevel != 4">
           <template #title>
             <div class="itemHeader" @click.stop>
               <span class="itemTitle">{{ report.title }}</span>
               <el-popover placement="right" trigger="click" popper-class="hintPopover">
-                <div
-                  class="popoverConten"
-                  v-for="(item, index) in report.tipsPopoverlabel"
-                  :key="index">
-                  {{ item.label }}:{{ item.prop }}
+                <div class="popoverConten">
+                  {{ report.reportData.tip }}
                 </div>
                 <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
@@ -63,34 +65,29 @@
           <div class="reportContent">
             <div class="reportItem">
               <div class="label">填写率：</div>
-              <div class="value">本月{{}}%</div>
-              <div class="itemDetail">下属详情</div>
+              <div class="value">本月{{ report.reportData.fillingRate }}</div>
+              <div class="itemDetail" v-if="empLevel != 3" @click="reportClick('fillingRate')">
+                下属详情
+              </div>
             </div>
-            <div class="reportItem">
+            <div class="reportItem" v-show="empLevel != 3">
               <div class="label">审批率：</div>
-              <div class="value">本月{{}}%</div>
-              <div class="itemDetail">下属详情</div>
+              <div class="value">本月{{ report.reportData.approvalRate }}</div>
             </div>
-            <div class="">本周点评业务员</div>
-            <div class="reportItem">
+            <div class="" v-show="empLevel == 1">本周点评业务员</div>
+            <div class="reportItem" v-show="empLevel == 1">
               <div class="label">日报数(目标数)：</div>
-              <div class="value">{{}}</div>
-              <div class="itemDetail">下属详情</div>
+              <div class="value">{{ report.reportData.commentNum }}个(5个)</div>
+              <div class="itemDetail" @click="reportClick('commentNum')">进入点评</div>
             </div>
           </div>
         </van-collapse-item>
         <!-- 色卡 -->
-        <van-collapse-item name="4">
+        <van-collapse-item name="4" v-if="empLevel == 2 || empLevel == 3">
           <template #title>
             <div class="itemHeader" @click.stop>
               <span class="itemTitle">{{ report.title }}</span>
               <el-popover placement="right" trigger="click" popper-class="hintPopover">
-                <div
-                  class="popoverConten"
-                  v-for="(item, index) in report.tipsPopoverlabel"
-                  :key="index">
-                  {{ item.label }}:{{ item.prop }}
-                </div>
                 <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
                 </div>
@@ -103,55 +100,41 @@
   </div>
 </template>
 <script>
+import { getReportTarget } from '@/api/index';
 import hintIcon from '@/assets/hintIcon.png';
 import visitPage from './visitPage.vue';
+import { mapState } from 'vuex';
 export default {
   components: { visitPage },
+  computed: {
+    ...mapState({
+      userInfo: (state) => state.user.userInfo,
+    }),
+  },
   data() {
     return {
+      empLevel: 1, //员工级别，1大区主管2销售部主管3业务员4其他 ***其他级别4，不显示日报、周报、半月报和色卡
       hintIcon: hintIcon,
-      activeNames: [1, 2],
+      activeNames: ['1', '2', '3', '4', '5'],
       visitCollapse: {
-        name: 1,
+        name: '1',
         title: '拜访（实时）',
-        showPopover: false,
-        tipsPopoverlabel: [
-          {
-            label: '本月拜访率',
-            prop: '',
-          },
-          {
-            label: '进2个月拜访率',
-            prop: '',
-          },
-          {
-            label: '进3个月拜访率',
-            prop: '',
-          },
-        ],
+        collapseLosding: true,
+        tipsPopoverlabel: [],
         tipsPopoverValue: null,
         contentData: [
           {
             title: '可控店',
+            titleProp: 'keKong',
             bagColor: '#eb6877',
             visitDetail: [
               {
                 leftTable: '本月拜访率：',
-                leftValue: '',
+                leftProp: 'visitRateThisMonth',
                 leftUnit: '%',
                 leftIsClick: false,
                 rightTable: '未拜访：',
-                rightValue: '',
-                rightUnit: '家',
-                rightIsClick: true,
-              },
-              {
-                leftTable: '本月拜访率：',
-                leftValue: '',
-                leftUnit: '%',
-                leftIsClick: false,
-                rightTable: '未拜访：',
-                rightValue: '',
+                rightProp: 'notVisited',
                 rightUnit: '家',
                 rightIsClick: true,
               },
@@ -159,15 +142,16 @@ export default {
           },
           {
             title: '金牌店',
+            titleProp: 'jinPai',
             bagColor: '#f1b789',
             visitDetail: [
               {
                 leftTable: '本月拜访率：',
-                leftValue: '',
+                leftProp: 'visitRateThisMonth',
                 leftUnit: '%',
                 leftIsClick: false,
                 rightTable: '未拜访：',
-                rightValue: '',
+                rightProp: 'notVisited',
                 rightUnit: '家',
                 rightIsClick: true,
               },
@@ -175,15 +159,16 @@ export default {
           },
           {
             title: '同A店',
+            titleProp: 'tongA',
             bagColor: '#88abda',
             visitDetail: [
               {
                 leftTable: '进2个月拜访率：',
-                leftValue: '',
+                leftProp: 'visitRateInThePastTwoMonths',
                 leftUnit: '%',
                 leftIsClick: false,
                 rightTable: '未拜访：',
-                rightValue: '',
+                rightProp: 'notVisited',
                 rightUnit: '家',
                 rightIsClick: true,
               },
@@ -191,15 +176,16 @@ export default {
           },
           {
             title: '同B店',
+            titleProp: 'tongB',
             bagColor: '#8f82bc',
             visitDetail: [
               {
                 leftTable: '进3个月拜访率：',
-                leftValue: '',
+                leftProp: 'visitRateInThePastThreeMonths',
                 leftUnit: '%',
                 leftIsClick: false,
                 rightTable: '未拜访：',
-                rightValue: '',
+                rightProp: 'notVisited',
                 rightUnit: '家',
                 rightIsClick: true,
               },
@@ -208,9 +194,9 @@ export default {
         ],
       },
       createStore: {
-        name: 2,
+        name: '2',
         title: '建店',
-        showPopover: false,
+        collapseLosding: true,
         tipsPopoverlabel: [
           {
             label: '未完工',
@@ -316,29 +302,115 @@ export default {
             ],
           },
         ],
+        resData: {},
       },
       report: {
-        title: '日报',
-        tipsPopoverlabel: [
-          {
-            label: '下述指标',
-            prop: '本人填写/审批情况',
-          },
-        ],
+        title: '',
+        reportData: {},
       },
       pantone: [
+        // 业务员
         {
-          title: '1988',
+          firstRowLLabel: '已领用',
+          firstRowLProp: 'firstRowLProp',
+          firstRowRLabel: '已发放门店',
+          firstRowRProp: 'firstRowRProp',
+          secondRowLLabel: '门店未签收',
+          secondRowLProp: 'secondRowLProp',
+          secondRowRLabel: '门店未签收',
+          secondRowRProp: 'secondRowRProp',
+        },
+        // 销售部主管
+        {
+          firstRowLLabel: '直发销售部数',
+          firstRowLProp: 'firstRowLProp',
+          firstRowRLabel: '业务员已领用',
+          firstRowRProp: 'firstRowRProp',
+          secondRowLLabel: '业务员已发放',
+          secondRowLProp: 'secondRowLProp',
+          secondRowRLabel: '门店未签收',
+          secondRowRProp: 'secondRowRProp',
         },
       ],
+      pantoneData: null,
     };
   },
   created() {
+    // this.empLevel = this.userInfo.empLevel || 2;
+    // 获取拜访数据
+    this.getVisitCollapseData();
     // 获取汇报数据 日报、周报、半月报
     this.getReportData();
+    // 获取色卡数据
+    this.getPantoneData();
   },
   methods: {
-    getReportData() {},
+    getVisitCollapseData() {
+      let resData = {
+        reminderContent: [
+          '1.本月拜访率：2024-10-01~2024-10-31',
+          '2.近2月拜访率：2024-08-01~2024-10-31',
+          '3.近3月拜访率：2024-07-01~2024-10-31',
+        ],
+        jinPai: {
+          notVisited: 2007,
+          visitRateThisMonth: '0.5%',
+        },
+        tongB: {
+          notVisited: 838,
+          visitRateInThePastThreeMonths: '6.2%',
+        },
+        tongA: {
+          visitRateInThePastTwoMonths: '8.8%',
+          notVisited: 384,
+        },
+        keKong: {
+          notVisited: 73,
+          visitRateThisMonth: '27.0%',
+        },
+      };
+      this.visitCollapse.collapseLosding = false;
+      this.visitCollapse.tipsPopoverlabel = resData.reminderContent;
+      this.visitCollapse.resData = resData;
+    },
+    getReportData() {
+      if (this.empLevel == 1) {
+        this.report.title = '半月报';
+      } else if (this.empLevel == 2) {
+        this.report.title = '周报';
+      } else if (this.empLevel == 3) {
+        this.report.title = '日报';
+      }
+      let resData = {
+        commentNum: '',
+        empLevel: '2',
+        tip: '下述指标:本人填写/审批情况',
+        approvalRate: '0.00%',
+        fillingRate: '0.00%',
+      };
+      this.report.reportData = resData || {};
+      // getReportTarget().then((res) => {
+      //   this.report.reportData = res.data || {};
+      //   if (this.empLevel == 1) {
+      //     this.report.title = '半月报';
+      //   } else if (this.empLevel == 2) {
+      //     this.report.title = '周报';
+      //   } else if (this.empLevel == 3) {
+      //     this.report.title = '日报';
+      //   }
+      // });
+    },
+    getPantoneData() {},
+    // 汇报下属详情-点击
+    reportClick(type) {
+      if (type == 'fillingRate') {
+        // 下属汇报率审批率统计
+        this.$router.push({ path: 'reportingRate' });
+      } else if (type == 'commentNum') {
+        // 下属业务员历史日报
+        this.$router.push({ path: 'subordinateHistoricalDaily' });
+      }
+    },
   },
 };
 </script>

src/views/home/hintTabPage/visitPage.vue

@@ -6,12 +6,12 @@
         <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind">
           <div class="itemLeft">
             <div class="label">{{ list.leftTable }}</div>
-            <div class="label">{{ list.leftValue }}{{ list.leftUnit }}</div>
+            <div class="label">{{ resData[item.titleProp][list.leftProp] }}{{ list.leftUnit }}</div>
           </div>
           <div class="itemRight">
             <div class="label">{{ list.rightTable }}</div>
-            <div class="label" :style="labelStyle(list)">
-              {{ list.rightValue }}{{ list.rightUnit }}
+            <div class="label" :style="labelStyle(list)" @click="onClick">
+              {{ resData[item.titleProp][list.rightProp] }}{{ list.rightUnit }}
             </div>
           </div>
         </div>
@@ -28,14 +28,17 @@ export default {
       type: Array,
       default: [],
     },
+    maskShow: {
+      type: Boolean,
+      default: false,
+    },
+    resData: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
-    return {
-      maskShow: true,
-    };
-  },
-  activated() {
-    this.getData();
+    return {};
   },
   methods: {
     labelStyle(list) {
@@ -44,7 +47,8 @@ export default {
         color: list.rightIsClick ? '#0057ba' : '#666666',
       };
     },
-    getData() {},
+    // 跳转详情
+    onClick() {},
   },
 };
 </script>
@@ -66,12 +70,16 @@ export default {
     .itemContent {
       /* display: flex; */
       color: #666666;
+      flex: 1;
       .temList {
         display: flex;
+        justify-content: space-between;
         .itemLeft {
           display: flex;
+          flex: 1;
         }
         .itemRight {
+          width: 120px;
           display: flex;
         }
       }