iOS底部适配优化

src/views/deviceOutside/index.vue

@@ -25,7 +25,7 @@
       </van-tabs>
     </div>
     <!--        主体内容-->
-    <div class="container" style="margin-top: 144px">
+    <div class="container content" style="margin-top: 144px" @touchmove="handleTouch">
       <van-list
         class="myList"
         v-model="loading"
@@ -348,11 +348,6 @@
         </div>
         <van-empty v-if="list.length == 0" />
       </van-list>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
     </div>
     <van-popup v-model="showPicker" position="bottom" class="textsize">
       <van-row
@@ -741,8 +736,22 @@ export default {
       this.otherShow = false;
     }
     this.getMonth();
+    let node = document.getElementsByClassName('deviceOutside')[0];
+    node.addEventListener(
+      'touchmove',
+      (e) => {
+        if (e._isScroller) return;
+        e.preventDefault();
+      },
+      {
+        passive: false,
+      }
+    );
   },
   methods: {
+    handleTouch(e) {
+      e._isScroller = true;
+    },
     setStroeNameStyle(item) {
       // 家装或工装 approvalStatus:是否结案 0：未结案，1：已结案
       if (
@@ -2295,6 +2304,20 @@ export default {
   font-size: 16px;
   font-weight: 600;
 }
+.deviceOutside {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .content {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .tabBar {
+    height: 50px;
+  }
+}
 </style>
 <style lang="scss">
 .van-tabs__nav--card .van-tab.van-tab--active {

src/views/deviceWithin/index.vue

@@ -44,12 +44,8 @@
         <van-icon class="CalendarIcon" :name="timeico" @click="show = true" />
       </div>
     </div>
-    <div class="lineGrey" v-if="mapShows"></div>
-    <div class="lineGrey" v-if="mapShows"></div>
-    <div class="lineGrey" v-if="mapShows"></div>
-    <div class="lineGrey" v-if="mapShows"></div>
     <!--        主体内容-->
-    <div class="container" style="margin-top: 144px">
+    <div class="container content" style="margin-top: 190px">
       <div class="cellcontent" v-for="(item, index) in list" :key="index">
         <van-cell>
           <div class="card">
@@ -193,15 +189,6 @@
                     超
                   </div>
                 </el-popover>
-                <!--              <el-popover-->
-                <!--                  placement="bottom"-->
-                <!--                  width="200"-->
-                <!--                  popper-class="zpover zpover2"-->
-                <!--                  trigger="click"-->
-                <!--                  content="本月未被拜访的信息">-->
-                <!--                <div v-if="item.storeLabels.noVisit" class="visitStoreIco" style="background-color: #fff" slot="reference">-->
-                <!--                  <van-icon :name="visitTimess" size="26" /></div>-->
-                <!--              </el-popover>-->
                 <el-popover
                   placement="bottom"
                   popper-class="zpover zpover1 zpover1sb"
@@ -343,14 +330,7 @@
       <p style="text-align: center; color: #888a8e" v-if="list.length > 0">--已经到底了--</p>
       <br />
       <van-empty description="暂无数据" v-if="list.length == 0" />
-      <!--</van-list>-->
     </div>
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
     <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
       <van-datetime-picker
         v-model="currentDate"
@@ -1670,6 +1650,18 @@ export default {
   font-weight: 600;
 }
 .deviceWithin {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .content {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .tabBar {
+    height: 50px;
+  }
   .TCFXListItem {
     display: inline-block;
     border: 1px solid #ccc;

src/views/home/index.vue

@@ -1,27 +1,28 @@
 <template>
   <div class="homePage" ref="homePage">
-    <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft" />
-    <van-tabs
-      class="myTab"
-      type="card"
-      v-model="tabVal"
-      color="#0057ba"
-      @click="onClickTabs"
-      v-if="isGZorJZ">
-      <van-tab title="提示类" name="-1" v-if="isGZorJZ == 'false'">
-        <hintTabPage :tabVal="tabVal" ref="hintTabPage"></hintTabPage
-      ></van-tab>
-      <van-tab title="A类指标" name="0"
-        ><ABtarget :tabVal="tabVal" ref="Atarget"></ABtarget
-      ></van-tab>
-      <van-tab title="B类指标" name="1"
-        ><ABtarget :tabVal="tabVal" ref="Btarget"></ABtarget
-      ></van-tab>
-    </van-tabs>
-    <div class="bottomBtn">
-      <bottomBtn :tabVal="tabVal"></bottomBtn>
-    </div>
-    <!-- <van-dialog v-model="shows" @confirm="titleconfirm">
+    <div class="content">
+      <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft" />
+      <van-tabs
+        class="myTab"
+        type="card"
+        v-model="tabVal"
+        color="#0057ba"
+        @click="onClickTabs"
+        v-if="isGZorJZ">
+        <van-tab title="提示类" name="-1" v-if="isGZorJZ == 'false'">
+          <hintTabPage :tabVal="tabVal" ref="hintTabPage"></hintTabPage
+        ></van-tab>
+        <van-tab title="A类指标" name="0"
+          ><ABtarget :tabVal="tabVal" ref="Atarget"></ABtarget
+        ></van-tab>
+        <van-tab title="B类指标" name="1"
+          ><ABtarget :tabVal="tabVal" ref="Btarget"></ABtarget
+        ></van-tab>
+      </van-tabs>
+      <div class="bottomBtn">
+        <bottomBtn :tabVal="tabVal"></bottomBtn>
+      </div>
+      <!-- <van-dialog v-model="shows" @confirm="titleconfirm">
       <div class="tipTitleBox" style="padding: 10px">
         <p class="p">系统提示</p>
         <p>各位好，因五一假期，汇报提交时间有调整。</p>
@@ -36,6 +37,7 @@
         <p style="text-align: right">祝大家假期愉快！</p>
       </div>
     </van-dialog> -->
+    </div>
     <tab-bar></tab-bar>
   </div>
 </template>
@@ -152,9 +154,18 @@ export default {
     width: 100%;
     height: 100%;
     .homePage {
-      width: 100%;
       height: 100%;
-      /* overflow-y: auto; */
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      .content {
+        flex: 1;
+        overflow-y: auto;
+      }
+      .tabBar {
+        height: 50px;
+      }
     }
   }
 }

src/views/week/index.vue

@@ -1,183 +1,185 @@
 <template>
-  <div>
+  <div class="userPage">
     <div class="navBarTOP">
       <van-nav-bar class="navBar" title="我的" />
     </div>
-    <div class="lineGrey"></div>
-    <div class="lineGrey"></div>
-    <div class="lineGrey"></div>
-    <div class="lineGrey"></div>
-    <div style="height: 8px"></div>
-    <div class="myHeader">
-      <van-row>
-        <van-col span="7">
-          <van-image round width="8rem" height="8rem" :src="avatar" @click="login" />
-        </van-col>
-        <van-col span="17">
-          <div class="avatarContent">
-            <p class="nickName">{{ nickName }}</p>
-            <p>
-              <span class="postName">{{ postName }}</span>
-            </p>
-          </div>
-        </van-col>
-      </van-row>
-    </div>
-    <!--        主体内容-->
-    <div class="container">
-      <!--      门店及拜访-->
-      <van-cell-group inset class="mtb10">
-        <van-cell :title="addBTN" is-link @click="onSelect('B')" v-if="addShow">
-          <template #icon>
-            <van-icon :name="addShop" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell title="新增专卖店/金牌店" is-link @click="onSelect('A')" v-if="addShow1">
-          <template #icon>
-            <van-icon :name="addShop" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell :title="title" is-link to="/storemanagementlist">
-          <template #icon>
-            <van-icon :name="storeselect" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell title="历史拜访" is-link to="/historAllVisit">
-          <template #icon>
-            <van-icon :name="history" class="zicon" />
-          </template>
-        </van-cell>
-      </van-cell-group>
-      <!--      客资类-->
-      <van-cell-group inset class="mtb10">
-        <van-cell title="客资&投诉任务" to="/clew" v-if="customerClueButton">
-          <template #icon>
-            <van-icon :name="history" class="zicon" />
-          </template>
-          <template #title>
-            <span>客资&投诉任务</span>
-            &nbsp;<van-tag type="danger" v-if="customerClueNum > 0">{{ customerClueNum }}</van-tag>
-          </template>
-          <template #right-icon>
-            <van-icon name="arrow" size="16" />
-          </template>
-        </van-cell>
-        <van-cell title="待分配客资" to="/assignAwait" v-if="isAssignFlag">
-          <template #icon>
-            <van-icon :name="history" class="zicon" />
-          </template>
-          <template #title>
-            <span>待分配客资</span>
-            &nbsp;<van-tag type="danger" v-if="notAllocationNum > 0">{{
-              notAllocationNum
-            }}</van-tag>
-          </template>
-          <template #right-icon>
-            <van-icon name="arrow" size="16" />
-          </template>
-        </van-cell>
-      </van-cell-group>
-      <!--      汇报类-->
-      <van-cell-group inset class="mtb10">
-        <van-cell
-          title="我的历史汇报"
-          v-if="historyButton"
-          is-link
-          to="/myHistoricalDaily"
-          class="MYTile">
-          <template #title>
-            <span class="custom-title">我的历史汇报&nbsp;&nbsp;</span>
-          </template>
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-          <template #right-icon>
-            <van-tag type="danger" v-if="existReject">退回待处理</van-tag>
-            <van-icon name="arrow" />
-          </template>
-        </van-cell>
-        <van-cell v-if="showDaily || isDiy == 'true'" is-link to="/subordinateHistoricalDaily">
-          下属业务员历史日报
-          <span
-            style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
-            v-if="thisWeekRemarkNum != null"
-            >{{ thisWeekRemarkNum }}/5</span
-          >
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell
-          title="下属部主管历史周报"
-          v-if="showWeekly || isDiy == 'true'"
-          is-link
-          to="/subordinateHistoricalWeekly">
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell
-          title="下属大区主管历史半月报"
-          v-if="showDouble || isDiy == 'true'"
-          is-link
-          to="/doubleWeeklyHistorical">
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-        </van-cell>
-        <van-cell
-          title="下属汇报率审批率统计"
-          v-if="showDaily || showWeekly || showDouble || isDiy == 'true'"
-          is-link
-          to="/reportingRate">
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-        </van-cell>
-      </van-cell-group>
-      <!--      物料类-->
-      <van-cell-group inset class="mtb10">
-        <van-cell title="我的物料库存" is-link to="/myInventory" class="MYTile">
-          <template #title>
-            <span class="custom-title">我的物料库存&nbsp;&nbsp;</span>
-          </template>
-          <template #icon>
-            <van-icon :name="daily" class="zicon" />
-          </template>
-        </van-cell>
-      </van-cell-group>
-      <!--      <p style="margin: -8px 16px 8px;color: #888;" v-if="list">主管任务</p>-->
-      <van-cell-group inset>
-        <div style="border-radius: 6px; overflow: hidden">
+    <div class="content">
+      <div class="myHeader">
+        <van-row>
+          <van-col span="7">
+            <van-image round width="8rem" height="8rem" :src="avatar" @click="login" />
+          </van-col>
+          <van-col span="17">
+            <div class="avatarContent">
+              <p class="nickName">{{ nickName }}</p>
+              <p>
+                <span class="postName">{{ postName }}</span>
+              </p>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <!--        主体内容-->
+      <div class="container">
+        <!--      门店及拜访-->
+        <van-cell-group inset class="mtb10">
+          <van-cell :title="addBTN" is-link @click="onSelect('B')" v-if="addShow">
+            <template #icon>
+              <van-icon :name="addShop" class="zicon" />
+            </template>
+          </van-cell>
+          <van-cell title="新增专卖店/金牌店" is-link @click="onSelect('A')" v-if="addShow1">
+            <template #icon>
+              <van-icon :name="addShop" class="zicon" />
+            </template>
+          </van-cell>
+          <van-cell :title="title" is-link to="/storemanagementlist">
+            <template #icon>
+              <van-icon :name="storeselect" class="zicon" />
+            </template>
+          </van-cell>
+          <van-cell title="历史拜访" is-link to="/historAllVisit">
+            <template #icon>
+              <van-icon :name="history" class="zicon" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <!--      客资类-->
+        <van-cell-group inset class="mtb10">
+          <van-cell title="客资&投诉任务" to="/clew" v-if="customerClueButton">
+            <template #icon>
+              <van-icon :name="history" class="zicon" />
+            </template>
+            <template #title>
+              <span>客资&投诉任务</span>
+              &nbsp;<van-tag type="danger" v-if="customerClueNum > 0">{{
+                customerClueNum
+              }}</van-tag>
+            </template>
+            <template #right-icon>
+              <van-icon name="arrow" size="16" />
+            </template>
+          </van-cell>
+          <van-cell title="待分配客资" to="/assignAwait" v-if="isAssignFlag">
+            <template #icon>
+              <van-icon :name="history" class="zicon" />
+            </template>
+            <template #title>
+              <span>待分配客资</span>
+              &nbsp;<van-tag type="danger" v-if="notAllocationNum > 0">{{
+                notAllocationNum
+              }}</van-tag>
+            </template>
+            <template #right-icon>
+              <van-icon name="arrow" size="16" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <!--      汇报类-->
+        <van-cell-group inset class="mtb10">
           <van-cell
+            title="我的历史汇报"
+            v-if="historyButton"
             is-link
-            v-for="(item, index) in list"
-            :key="index"
-            :to="'/VisitSummaryAdd?summaryId=' + item.summaryId + '&title=' + item.summaryTaskName">
+            to="/myHistoricalDaily"
+            class="MYTile">
             <template #title>
-              <span class="custom-title">{{ item.summaryTaskName }}</span>
+              <span class="custom-title">我的历史汇报&nbsp;&nbsp;</span>
             </template>
             <template #icon>
               <van-icon :name="daily" class="zicon" />
             </template>
+            <template #right-icon>
+              <van-tag type="danger" v-if="existReject">退回待处理</van-tag>
+              <van-icon name="arrow" />
+            </template>
           </van-cell>
-          <van-cell title="主管任务查询" is-link to="/VisitSummary" v-if="summaryTaskButton">
+          <van-cell v-if="showDaily || isDiy == 'true'" is-link to="/subordinateHistoricalDaily">
+            下属业务员历史日报
+            <span
+              style="font-weight: 600; font-size: 16px; color: red; margin-left: 15px"
+              v-if="thisWeekRemarkNum != null"
+              >{{ thisWeekRemarkNum }}/5</span
+            >
             <template #icon>
-              <van-icon :name="history" class="zicon" />
+              <van-icon :name="daily" class="zicon" />
             </template>
           </van-cell>
-          <van-cell title="家装推广会历史提报查询" is-link to="/VisitSummaryMy" v-if="jzTaskButton">
+          <van-cell
+            title="下属部主管历史周报"
+            v-if="showWeekly || isDiy == 'true'"
+            is-link
+            to="/subordinateHistoricalWeekly">
             <template #icon>
-              <van-icon :name="history" class="zicon" />
+              <van-icon :name="daily" class="zicon" />
+            </template>
+          </van-cell>
+          <van-cell
+            title="下属大区主管历史半月报"
+            v-if="showDouble || isDiy == 'true'"
+            is-link
+            to="/doubleWeeklyHistorical">
+            <template #icon>
+              <van-icon :name="daily" class="zicon" />
             </template>
           </van-cell>
-        </div>
-      </van-cell-group>
-      <br /><br />
-      <br /><br />
-      <br /><br />
-      <tab-bar tabBarActive="MyList"></tab-bar>
+          <van-cell
+            title="下属汇报率审批率统计"
+            v-if="showDaily || showWeekly || showDouble || isDiy == 'true'"
+            is-link
+            to="/reportingRate">
+            <template #icon>
+              <van-icon :name="daily" class="zicon" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <!--      物料类-->
+        <van-cell-group inset class="mtb10">
+          <van-cell title="我的物料库存" is-link to="/myInventory" class="MYTile">
+            <template #title>
+              <span class="custom-title">我的物料库存&nbsp;&nbsp;</span>
+            </template>
+            <template #icon>
+              <van-icon :name="daily" class="zicon" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <!--      <p style="margin: -8px 16px 8px;color: #888;" v-if="list">主管任务</p>-->
+        <van-cell-group inset>
+          <div style="border-radius: 6px; overflow: hidden">
+            <van-cell
+              is-link
+              v-for="(item, index) in list"
+              :key="index"
+              :to="
+                '/VisitSummaryAdd?summaryId=' + item.summaryId + '&title=' + item.summaryTaskName
+              ">
+              <template #title>
+                <span class="custom-title">{{ item.summaryTaskName }}</span>
+              </template>
+              <template #icon>
+                <van-icon :name="daily" class="zicon" />
+              </template>
+            </van-cell>
+            <van-cell title="主管任务查询" is-link to="/VisitSummary" v-if="summaryTaskButton">
+              <template #icon>
+                <van-icon :name="history" class="zicon" />
+              </template>
+            </van-cell>
+            <van-cell
+              title="家装推广会历史提报查询"
+              is-link
+              to="/VisitSummaryMy"
+              v-if="jzTaskButton">
+              <template #icon>
+                <van-icon :name="history" class="zicon" />
+              </template>
+            </van-cell>
+          </div>
+        </van-cell-group>
+      </div>
     </div>
+    <tab-bar tabBarActive="MyList"></tab-bar>
   </div>
 </template>
 
@@ -361,7 +363,22 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
+.userPage {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .content {
+    flex: 1;
+    margin-top: 46px;
+    overflow-y: auto;
+  }
+  .tabBar {
+    height: 50px;
+  }
+}
 .myHeader {
   background-color: #1c84c6;
   padding: 24px 30px;