update:更新刷新效果，增加进入模式按钮

2021-10-16 11:08:13 +08:00
parent 31acca95b5
commit 536661b800
10 changed files with 85 additions and 31 deletions
--- a/FrontCode2/sunshine_levy/src/App.vue
+++ b/FrontCode2/sunshine_levy/src/App.vue
@@ -1,10 +1,21 @@
 <template>
  <div id="app">
-    <router-view />
+    <van-pull-refresh
+      v-model="isLoading"
+      loading-text="正在刷新"
+      @refresh="onRefresh"
+    >
+      <router-view />
+    </van-pull-refresh>
    <div class="bottomContent">
      <p>本服务由浙江政务服务网、宁波市住房保障和房屋征收管理中心提供</p>
      <p>服务咨询热线：<b>0574-88086606</b></p>
-      <div class="logout" @click="logout"><span>退出老年模式</span></div>
+      <div v-if="mode === true" class="logout" @click="logout">
+        <span>退出老年模式</span>
+      </div>
+      <div v-else class="logout" @click="toOlderMode">
+        <span>进入老年模式</span>
+      </div>
    </div>
  </div>
 </template>
@@ -16,10 +27,19 @@ export default {
  data() {
    return {
      startValue: "",
-      endValue: ""
+      endValue: "",
+      mode: false,
+      count: 0,
+      isLoading: true
    };
  },
-  created() {},
+  created() {
+    if (sessionStorage.getItem("mode") == "older") {
+      this.mode = true;
+    } else {
+      this.mode = false;
+    }
+  },
  mounted() {
    document.body.ontouchstart = e => {
      this.startValue = e.changedTouches[0].pageY;
@@ -30,18 +50,34 @@ export default {
        this.endValue - this.startValue > 50 &&
        e.changedTouches[0].pageY === e.changedTouches[0].clientY
      ) {
-        this.$children[0].onInit();
      }
    };
  },
  methods: {
    logout() {
-      window.sessionStorage.setItem("mode", "normal");
+      sessionStorage.setItem("mode", "normal");
      $(".container").removeClass("old_container");
-      $(".logout").css("display", "none");
+      // $(".logout").css("display", "none");
+      this.mode = false;
      $(".bottomContent").removeClass("old_bottomContent");
      $("#app").removeClass("old_app2");
      $("#app").removeClass("old_app");
+    },
+    toOlderMode() {
+      sessionStorage.setItem("mode", "older");
+      $(".container").addClass("old_container");
+      // $(".logout").css("display", "none");
+      this.mode = true;
+      $(".bottomContent").addClass("old_bottomContent");
+      $("#app").addClass("old_app2");
+      // $("#app").removeClass("old_app");
+    },
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast("刷新成功");
+        this.isLoading = false;
+        this.$children[0].$children[0].onInit();
+      }, 3000);
    }
  }
 };
@@ -51,7 +87,7 @@ export default {
  font-family: pingfang, SF UI Text, Roboto;
  font-size: 14px;
  min-height: 100%;
-  padding-bottom: 48px;
+  padding-bottom: 128px;
  position: relative;
  box-sizing: border-box;
  background: #f6f7f8;
@@ -70,9 +106,8 @@ export default {
    }
    // 退出老年模式
    .logout {
-      padding: 30px 0 10px;
+      padding: 20px 0 10px;
      span {
-        height: 19px;
        font-size: 20px;
        color: #fefefe;
        background: red;
@@ -81,7 +116,6 @@ export default {
    }
  }
 }
-
 // 老年化
 .old_bottomContent {
  font-size: 18px !important;
@@ -95,5 +129,18 @@ export default {
 }
 .old_app2 {
  padding-bottom: 190px !important;
+  .logout {
+    padding-top: 30px;
+    span {
+      height: 19px;
+      font-size: 20px;
+      color: #fefefe;
+      background: red;
+      padding: 0 10px;
+    }
+  }
+}
+.old_app3 {
+  padding-bottom: 48px !important;
 }
 </style>
--- a/FrontCode2/sunshine_levy/src/main.js
+++ b/FrontCode2/sunshine_levy/src/main.js
@@ -13,12 +13,22 @@ import App from "./App";
 import router from "./router";
 import store from "./store";
 import "@/assets/css/global.css";
-import { Button, NavBar, Cell, CellGroup, Notify } from "vant";
+import {
+  Button,
+  NavBar,
+  Cell,
+  CellGroup,
+  Notify,
+  PullRefresh,
+  Toast
+} from "vant";

 Vue.use(Button)
  .use(NavBar)
  .use(Cell)
  .use(CellGroup);
+Vue.use(PullRefresh);
+Vue.use(Toast);

 Vue.use(ElementUI);

--- a/FrontCode2/sunshine_levy/src/views/index.vue
+++ b/FrontCode2/sunshine_levy/src/views/index.vue
@@ -16,7 +16,8 @@
      </div>
      <div class="baseInfo">
        <img src="@/assets/img/credentials_icon.png" />
-        <span>身份证号码：{{ setIdCard(data.idCard) }}</span>
+        <span>身份证号码：</span>
+        <div>{{ setIdCard(data.idCard) }}</div>
      </div>
      <!-- 三张背景图 -->
      <div class="gridBg ">
@@ -208,7 +209,7 @@ export default {
    return {
      mode: false,
      data: {
-        idCard: "加载中...",
+        idCard: "52212112345678910",
        userName: "加载中...",
        policiesRegulationsLists: {
          totalCount: 0,
@@ -289,6 +290,7 @@ export default {
    this.setLocationAplus();
    SetTicket(this.$route.query.ticket);
    $(".logout").css("display", "none");
+    $("#app").addClass("old_app3");
    if (sessionStorage.getItem("mode") == "older") {
      changeStyle();
      this.mode = true;
@@ -375,6 +377,7 @@ export default {
    // 跳转选择项目
    gotoProject(type) {
      $(".logout").css("display", "block");
+      $("#app").removeClass("old_app3");
      this.$router.push({
        name: "projectSelect",
        params: {
@@ -384,6 +387,7 @@ export default {
    },
    // 直接跳转分户评估结果页面
    toEvaluate(id, type) {
+      $("#app").removeClass("old_app3");
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
@@ -397,6 +401,7 @@ export default {
    },
    // 直接跳转协议结果pdf
    toAgreement(id) {
+      $("#app").removeClass("old_app3");
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
@@ -415,6 +420,7 @@ export default {
    },
    // 政策信息页面跳转
    pageJump(id) {
+      $("#app").removeClass("old_app3");
      $(".bottomContent").removeClass("display");
      $("#app").removeClass("padding");
      $(".logout").css("display", "block");
@@ -534,13 +540,14 @@ export default {
    display: flex;
    margin: 5px 0;
    align-items: center;
+    color: #fff;
    img {
      height: 21px;
      padding-right: 10px;
      padding-left: 31px;
    }
-    span {
-      color: #fff;
+    > span:nth-child(2) {
+      white-space: nowrap;
    }
  }
  .gridBg {
@@ -814,6 +821,11 @@ export default {
    font-size: 22px;
    img {
      height: 30px;
+      padding-left: 15px;
+    }
+    > div:nth-child(3) {
+      overflow: hidden;
+      text-overflow: ellipsis;
    }
  }
  .gridBg {
--- a/FrontCode2/sunshine_levy/src/views/pdf/evaluateResultPdf.vue
+++ b/FrontCode2/sunshine_levy/src/views/pdf/evaluateResultPdf.vue
@@ -35,8 +35,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
--- a/FrontCode2/sunshine_levy/src/views/pdf/pdf.vue
+++ b/FrontCode2/sunshine_levy/src/views/pdf/pdf.vue
@@ -36,8 +36,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
--- a/FrontCode2/sunshine_levy/src/views/policyInfo/policyInfo.vue
+++ b/FrontCode2/sunshine_levy/src/views/policyInfo/policyInfo.vue
@@ -22,8 +22,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
--- a/FrontCode2/sunshine_levy/src/views/project/index.vue
+++ b/FrontCode2/sunshine_levy/src/views/project/index.vue
@@ -93,8 +93,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
@@ -106,7 +104,6 @@ export default {
  methods: {
    // 获取数据
    onInit() {
-      console.log("项目");
      this.type =
        this.$route.params.type || window.sessionStorage.getItem("type");
      if (this.$route.params.type) {
--- a/FrontCode2/sunshine_levy/src/views/report/agreement.vue
+++ b/FrontCode2/sunshine_levy/src/views/report/agreement.vue
@@ -81,8 +81,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
--- a/FrontCode2/sunshine_levy/src/views/report/evaluatePage.vue
+++ b/FrontCode2/sunshine_levy/src/views/report/evaluatePage.vue
@@ -88,8 +88,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },
--- a/FrontCode2/sunshine_levy/src/views/report/evalute.vue
+++ b/FrontCode2/sunshine_levy/src/views/report/evalute.vue
@@ -146,8 +146,6 @@ export default {
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      projectSelectChangeStyle();
-    } else {
-      $(".logout").css("display", "none");
    }
    this.onInit();
  },