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

src/views/home/hintTabPage/index.vue

@@ -5,22 +5,62 @@
         <!-- 拜访（实时） -->
         <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="itemHeader" @click.stop>
+              <span class="itemTitle">{{ visitCollapse.title }}</span>
+              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                 <div
                   class="popoverConten"
                   v-for="(item, index) in visitCollapse.tipsPopoverlabel"
                   :key="index">
                   {{ item.label }}:{{ item.prop }}
                 </div>
-                <template #reference>
+                <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
-                </template>
-              </van-popover>
+                </div>
+              </el-popover>
+            </div>
+          </template>
+          <visitPage :contentData="visitCollapse.contentData"></visitPage>
+        </van-collapse-item>
+        <!-- 建店 -->
+        <van-collapse-item :name="createStore.name">
+          <template #title>
+            <div class="itemHeader" @click.stop>
+              <span class="itemTitle">{{ createStore.title }}</span>
+              <el-popover placement="right" trigger="click" popper-class="hintPopover">
+                <div
+                  class="popoverConten"
+                  v-for="(item, index) in createStore.tipsPopoverlabel"
+                  :key="index">
+                  {{ item.label }}:{{ item.prop }}
+                </div>
+                <div slot="reference" class="hintIconBox">
+                  <img class="hintIcon" :src="hintIcon" />
+                </div>
+              </el-popover>
             </div>
           </template>
-          <visitPage :visitContentData="visitCollapse.visitContentData"></visitPage>
+          <visitPage :contentData="createStore.contentData"></visitPage>
+        </van-collapse-item>
+        <!-- 日报、周报、半月报 -->
+        <van-collapse-item name="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 createStore.tipsPopoverlabel"
+                  :key="index">
+                  {{ item.label }}:{{ item.prop }}
+                </div>
+                <div slot="reference" class="hintIconBox">
+                  <img class="hintIcon" :src="hintIcon" />
+                </div>
+              </el-popover>
+            </div>
+          </template>
+          <visitPage :contentData="createStore.contentData"></visitPage>
         </van-collapse-item>
       </van-collapse>
     </div>
@@ -34,7 +74,7 @@ export default {
   data() {
     return {
       hintIcon: hintIcon,
-      activeNames: [1],
+      activeNames: [1, 2],
       visitCollapse: {
         name: 1,
         title: '拜访（实时）',
@@ -54,7 +94,7 @@ export default {
           },
         ],
         tipsPopoverValue: null,
-        visitContentData: [
+        contentData: [
           {
             title: '可控店',
             bagColor: '#eb6877',
@@ -131,6 +171,119 @@ export default {
           },
         ],
       },
+      createStore: {
+        name: 2,
+        title: '建店',
+        showPopover: false,
+        tipsPopoverlabel: [
+          {
+            label: '未完工',
+            prop: '',
+          },
+          {
+            label: '为结案',
+            prop: '',
+          },
+        ],
+        tipsPopoverValue: null,
+        contentData: [
+          {
+            title: '可控店',
+            bagColor: '#eb6877',
+            visitDetail: [
+              {
+                leftTable: '本月累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+              },
+              {
+                leftTable: '今年累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '45天未结案：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '金牌店',
+            bagColor: '#f1b789',
+            visitDetail: [
+              {
+                leftTable: '本月累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '7天未完工：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+              {
+                leftTable: '今年累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '30天未结案：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '同A店',
+            bagColor: '#88abda',
+            visitDetail: [
+              {
+                leftTable: '本月累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+              },
+              {
+                leftTable: '今年累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '30天未结案：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+          {
+            title: '同B店',
+            bagColor: '#8f82bc',
+            visitDetail: [
+              {
+                leftTable: '本月累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+              },
+              {
+                leftTable: '今年累计：',
+                leftValue: '',
+                leftUnit: '%',
+                leftIsClick: false,
+                rightTable: '30天未结案：',
+                rightValue: '',
+                rightUnit: '家',
+                rightIsClick: true,
+              },
+            ],
+          },
+        ],
+      },
+      report: {
+        title: '日报',
+      },
     };
   },
 };
@@ -139,10 +292,11 @@ export default {
 .hintTabPage {
   padding: 10px;
   .itemTab {
-    background: #fff;
+    /* background: #fff; */
     padding: 10px;
     margin-bottom: 10px;
-    .itemTitle {
+    border-radius: 5px;
+    .itemHeader {
       width: 150px;
       color: #0057ba;
       font-weight: 500;
@@ -150,17 +304,22 @@ export default {
       padding: 10px 0;
       display: flex;
       align-items: center;
-      .hintIcon {
-        width: 16px;
-        height: 16px;
+      .itemTitle {
+        margin-right: 10px;
+      }
+      .hintIconBox {
+        display: flex;
+        .hintIcon {
+          width: 16px;
+          height: 16px;
+        }
       }
       .van-popover__wrapper {
         display: flex;
       }
     }
-
-    .van-cell {
-      padding: 0 16px !important;
+    .van-collapse-item {
+      margin-bottom: 15px;
     }
   }
 }
@@ -170,10 +329,19 @@ export default {
   .itemTab {
     .van-cell {
       padding: 0 16px;
+      align-items: center;
     }
     .van-collapse-item__content {
       padding: 0 16px;
     }
   }
 }
+.hintPopover {
+  background: #deedff;
+  .popper__arrow {
+    &::after {
+      border-right-color: #deedff !important;
+    }
+  }
+}
 </style>

src/views/home/hintTabPage/visitPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="visitPage">
-    <div class="storeType" v-for="(item, index) in visitContentData" :key="index">
+    <div class="storeType" v-for="(item, index) in contentData" :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">
@@ -17,19 +17,22 @@
         </div>
       </div>
     </div>
+    <div class="mask" v-if="maskShow"><van-loading type="spinner" color="#1989fa" /></div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    visitContentData: {
+    contentData: {
       type: Array,
       default: [],
     },
   },
   data() {
-    return {};
+    return {
+      maskShow: true,
+    };
   },
   activated() {
     this.getData();
@@ -47,6 +50,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .visitPage {
+  position: relative;
   .storeType {
     display: flex;
     padding: 8px 0;
@@ -73,5 +77,15 @@ export default {
       }
     }
   }
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

src/views/home/index.vue

@@ -1420,6 +1420,9 @@ export default {
       isGetABFlag: false, //切换tab不重复请求A/B类
     };
   },
+  created() {
+    this.getReportInfo();
+  },
   activated() {
     this.isGetABFlag = false;
     this.num = 0;
@@ -1437,7 +1440,6 @@ export default {
         if (!this.isGetABFlag) {
           // A/B类
           this.userTodayPlanNum();
-          this.getReportInfo();
           this.isGetABFlag = true;
         }
       }