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

This commit is contained in:
2021-10-16 11:08:13 +08:00
parent 31acca95b5
commit 536661b800
10 changed files with 85 additions and 31 deletions

View File

@@ -1,10 +1,21 @@
<template> <template>
<div id="app"> <div id="app">
<van-pull-refresh
v-model="isLoading"
loading-text="正在刷新"
@refresh="onRefresh"
>
<router-view /> <router-view />
</van-pull-refresh>
<div class="bottomContent"> <div class="bottomContent">
<p>本服务由浙江政务服务网宁波市住房保障和房屋征收管理中心提供</p> <p>本服务由浙江政务服务网宁波市住房保障和房屋征收管理中心提供</p>
<p>服务咨询热线<b>0574-88086606</b></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>
</div> </div>
</template> </template>
@@ -16,10 +27,19 @@ export default {
data() { data() {
return { return {
startValue: "", startValue: "",
endValue: "" endValue: "",
mode: false,
count: 0,
isLoading: true
}; };
}, },
created() {}, created() {
if (sessionStorage.getItem("mode") == "older") {
this.mode = true;
} else {
this.mode = false;
}
},
mounted() { mounted() {
document.body.ontouchstart = e => { document.body.ontouchstart = e => {
this.startValue = e.changedTouches[0].pageY; this.startValue = e.changedTouches[0].pageY;
@@ -30,18 +50,34 @@ export default {
this.endValue - this.startValue > 50 && this.endValue - this.startValue > 50 &&
e.changedTouches[0].pageY === e.changedTouches[0].clientY e.changedTouches[0].pageY === e.changedTouches[0].clientY
) { ) {
this.$children[0].onInit();
} }
}; };
}, },
methods: { methods: {
logout() { logout() {
window.sessionStorage.setItem("mode", "normal"); sessionStorage.setItem("mode", "normal");
$(".container").removeClass("old_container"); $(".container").removeClass("old_container");
$(".logout").css("display", "none"); // $(".logout").css("display", "none");
this.mode = false;
$(".bottomContent").removeClass("old_bottomContent"); $(".bottomContent").removeClass("old_bottomContent");
$("#app").removeClass("old_app2"); $("#app").removeClass("old_app2");
$("#app").removeClass("old_app"); $("#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-family: pingfang, SF UI Text, Roboto;
font-size: 14px; font-size: 14px;
min-height: 100%; min-height: 100%;
padding-bottom: 48px; padding-bottom: 128px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
background: #f6f7f8; background: #f6f7f8;
@@ -70,9 +106,8 @@ export default {
} }
// 退出老年模式 // 退出老年模式
.logout { .logout {
padding: 30px 0 10px; padding: 20px 0 10px;
span { span {
height: 19px;
font-size: 20px; font-size: 20px;
color: #fefefe; color: #fefefe;
background: red; background: red;
@@ -81,7 +116,6 @@ export default {
} }
} }
} }
// 老年化 // 老年化
.old_bottomContent { .old_bottomContent {
font-size: 18px !important; font-size: 18px !important;
@@ -95,5 +129,18 @@ export default {
} }
.old_app2 { .old_app2 {
padding-bottom: 190px !important; 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> </style>

View File

@@ -13,12 +13,22 @@ import App from "./App";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import "@/assets/css/global.css"; 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) Vue.use(Button)
.use(NavBar) .use(NavBar)
.use(Cell) .use(Cell)
.use(CellGroup); .use(CellGroup);
Vue.use(PullRefresh);
Vue.use(Toast);
Vue.use(ElementUI); Vue.use(ElementUI);

View File

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

View File

@@ -35,8 +35,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },

View File

@@ -36,8 +36,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },

View File

@@ -22,8 +22,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },

View File

@@ -93,8 +93,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },
@@ -106,7 +104,6 @@ export default {
methods: { methods: {
// 获取数据 // 获取数据
onInit() { onInit() {
console.log("项目");
this.type = this.type =
this.$route.params.type || window.sessionStorage.getItem("type"); this.$route.params.type || window.sessionStorage.getItem("type");
if (this.$route.params.type) { if (this.$route.params.type) {

View File

@@ -81,8 +81,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },

View File

@@ -88,8 +88,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },

View File

@@ -146,8 +146,6 @@ export default {
created() { created() {
if (sessionStorage.getItem("mode") == "older") { if (sessionStorage.getItem("mode") == "older") {
projectSelectChangeStyle(); projectSelectChangeStyle();
} else {
$(".logout").css("display", "none");
} }
this.onInit(); this.onInit();
}, },