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

src/App.vue

@@ -5,10 +5,11 @@
 </template>
 <script>
 import watermark from 'watermark-dom';
-
+import { loginLog } from '@/api/index';
 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
@@ -40,5 +41,28 @@ export default {
       }
     }, 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);
+    },
+  },
 };
 </script>

src/views/home/hintTabPage.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="hintTabPage">
-    <div class="itemTab">
-      <van-collapse v-model="activeNames">
-        <van-collapse-item name="1">
-          <template #title>
-            <div class="itemTitle">
-              拜访（实时）<img class="hintIcon" :src="require('@/assets/hintIcon.png')" />
-            </div>
-          </template>
-        </van-collapse-item>
-      </van-collapse>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      activeNames: ['1'],
-    };
-  },
-};
-</script>
-<style lang="scss" scoped>
-.hintTabPage {
-  padding: 10px;
-  .itemTab {
-    background: #fff;
-    padding: 10px;
-    margin-bottom: 10px;
-    .itemTitle {
-      color: #0057ba;
-      font-weight: 500;
-      font-size: 16px;
-      padding: 10px 0;
-      display: flex;
-      align-items: center;
-      .hintIcon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-}
-</style>

src/views/home/hintTabPage/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="hintTabPage">
+    <div class="itemTab">
+      <van-collapse v-model="activeNames">
+        <!-- 拜访（实时） -->
+        <van-collapse-item :name="visitCollapse.name">
+          <template #title>
+            <div class="itemTitle" @click.stop>
+              {{ visitCollapse.title }}
+              <van-popover v-model="visitCollapse.showPopover" trigger="click">
+                <div
+                  class="popoverConten"
+                  v-for="(item, index) in visitCollapse.tipsPopoverlabel"
+                  :key="index">
+                  {{ item.label }}:{{ item.prop }}
+                </div>
+                <template #reference>
+                  <img class="hintIcon" :src="hintIcon" />
+                </template>
+              </van-popover>
+            </div>
+          </template>
+          <visitPage :visitContentData="visitCollapse.visitContentData"></visitPage>
+        </van-collapse-item>
+      </van-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import hintIcon from '@/assets/hintIcon.png';
+import visitPage from './visitPage.vue';
+export default {
+  components: { visitPage },
+  data() {
+    return {
+      hintIcon: hintIcon,
+      activeNames: [1],
+      visitCollapse: {
+        name: 1,
+        title: '拜访（实时）',
+        showPopover: false,
+        tipsPopoverlabel: [
+          {
+            label: '本月拜访率',
+            prop: '',
+          },
+          {
+            label: '进2个月拜访率',
+            prop: '',
+          },
+          {
+            label: '进3个月拜访率',
+            prop: '',
+          },
+        ],
+        tipsPopoverValue: null,
+        visitContentData: [
+          {
+            title: '可控店',
+            bagColor: '#eb6877',
+            visitDetail: [
+              {
+                leftTable: '本月拜访率：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '未拜访：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+              {
+                leftTable: '本月拜访率：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '未拜访：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '金牌店',
+            bagColor: '#f1b789',
+            visitDetail: [
+              {
+                leftTable: '本月拜访率：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '未拜访：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '同A店',
+            bagColor: '#88abda',
+            visitDetail: [
+              {
+                leftTable: '进2个月拜访率：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '未拜访：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '同B店',
+            bagColor: '#8f82bc',
+            visitDetail: [
+              {
+                leftTable: '进3个月拜访率：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '未拜访：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.hintTabPage {
+  padding: 10px;
+  .itemTab {
+    background: #fff;
+    padding: 10px;
+    margin-bottom: 10px;
+    .itemTitle {
+      width: 150px;
+      color: #0057ba;
+      font-weight: 500;
+      font-size: 16px;
+      padding: 10px 0;
+      display: flex;
+      align-items: center;
+      .hintIcon {
+        width: 16px;
+        height: 16px;
+      }
+      .van-popover__wrapper {
+        display: flex;
+      }
+    }
+
+    .van-cell {
+      padding: 0 16px !important;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.hintTabPage {
+  .itemTab {
+    .van-cell {
+      padding: 0 16px;
+    }
+    .van-collapse-item__content {
+      padding: 0 16px;
+    }
+  }
+}
+</style>

src/views/home/hintTabPage/visitPage.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="visitPage">
+    <div class="storeType" v-for="(item, index) in visitContentData" :key="index">
+      <div class="title" :style="{ background: item.bagColor }">{{ item.title }}</div>
+      <div class="itemContent">
+        <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>
+          <div class="itemRight">
+            <div class="label">{{ list.rightTable }}</div>
+            <div class="label" :style="labelStyle(list)">
+              {{ list.rightValue }}{{ list.rightUnit }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visitContentData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    labelStyle(list) {
+      return {
+        'text-decoration': list.rightIsClick ? 'underline' : 'none',
+        color: list.rightIsClick ? '#0057ba' : '#666666',
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.visitPage {
+  .storeType {
+    display: flex;
+    padding: 8px 0;
+    .title {
+      color: #fff;
+      height: 21px;
+      margin-right: 10px;
+      width: 50px;
+      text-align: center;
+      line-height: 21px;
+      border-radius: 2px;
+    }
+    .itemContent {
+      /* display: flex; */
+      color: #666666;
+      .temList {
+        display: flex;
+        .itemLeft {
+          display: flex;
+        }
+        .itemRight {
+          display: flex;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <div class="hid">
     <div class="navBarTOP">
       <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft" />
-      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba">
+      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @click="onClickTabs">
         <van-tab title="提示类" name="-1"></van-tab>
         <van-tab title="A类指标" name="0"></van-tab>
         <van-tab title="B类指标" name="1"></van-tab>
@@ -1295,7 +1295,7 @@
       /></a>
     </template>
     <br /><br /><br /><br />
-    <van-dialog v-model="shows" @confirm="titleconfirm">
+    <!-- <van-dialog v-model="shows" @confirm="titleconfirm">
       <div class="tipTitleBox" style="padding: 10px">
         <p class="p">系统提示</p>
         <p>各位好，因五一假期，汇报提交时间有调整。</p>
@@ -1309,7 +1309,7 @@
         <br />
         <p style="text-align: right">祝大家假期愉快！</p>
       </div>
-    </van-dialog>
+    </van-dialog> -->
     <br />
     <br />
     <br />
@@ -1325,7 +1325,7 @@ import times from '@/assets/Icon/times.png';
 import bfindex from '@/assets/bfindex.png';
 import storeindex from '@/assets/storeindex.png';
 import oderindex from '@/assets/oderindex.png';
-import hintTabPage from './hintTabPage.vue';
+import hintTabPage from './hintTabPage/index.vue';
 import {
   userTodayPlanNum,
   loginLog,
@@ -1343,7 +1343,7 @@ export default {
   components: { tabBar, hintTabPage },
   data() {
     return {
-      shows: true,
+      // shows: true,
       show: true,
       num: 0,
       timeimg: times,
@@ -1417,34 +1417,31 @@ export default {
       JZQuota: false,
       GZdata: false,
       tabVal: '-1',
+      isGetABFlag: false, //切换tab不重复请求A/B类
     };
   },
-  created() {
+  activated() {
+    this.isGetABFlag = false;
     this.num = 0;
-    this.loginLogFn();
-    this.getReportInfo();
+    this.tabVal = '-1';
+    this.onClickTabs(this.tabVal);
     this.timeFn();
-    this.userTodayPlanNum();
-    if (
-      localStorage.getItem('shows') == 'false' ||
-      new Date('2023/05/04 23:59:59').getTime() < new Date().getTime()
-    ) {
-      this.shows = false;
-    } else {
-      this.shows = true;
-    }
   },
-  watch: {
-    $route(to, from) {
-      if (to.path == '/home') {
-        this.num = 0;
-        this.userTodayPlanNum();
-        this.loginLogFn();
-        this.getReportInfo();
+  methods: {
+    // tabChange
+    onClickTabs(val) {
+      // 提示类
+      if (val == '-1') {
+      } else {
+        // 切换tab不重复请求A/B类
+        if (!this.isGetABFlag) {
+          // A/B类
+          this.userTodayPlanNum();
+          this.getReportInfo();
+          this.isGetABFlag = true;
+        }
       }
     },
-  },
-  methods: {
     storeJoinVisit(val) {
       joinInPlan({ storeId: val.storeId }).then((res) => {
         if (res.code == 200) {
@@ -1459,10 +1456,6 @@ export default {
         this.applyNumber = res.data;
       });
     },
-    titleconfirm() {
-      this.shows = false;
-      localStorage.setItem('shows', false);
-    },
     timeFn() {
       var t = 5;
       var that = this;
@@ -1570,27 +1563,6 @@ export default {
         }
       });
     },
-    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);
-    },
     onClickLeft() {
       this.$router.go(-1);
       // window.location.href = process.env.VUE_APP_SSB_LINK + "/homeIndex"