hookehuyr

fix 处理首页位置问题

...@@ -3,7 +3,8 @@ export default [{ ...@@ -3,7 +3,8 @@ export default [{
3 name: '首页', 3 name: '首页',
4 component: () => import('./views/client/index.vue'), 4 component: () => import('./views/client/index.vue'),
5 meta: { 5 meta: {
6 - title: '童声无界' 6 + title: '童声无界',
7 + name: 'index'
7 }, 8 },
8 children: [] 9 children: []
9 }, { 10 }, {
...@@ -11,7 +12,8 @@ export default [{ ...@@ -11,7 +12,8 @@ export default [{
11 name: '客户端入口页', 12 name: '客户端入口页',
12 component: () => import('./views/client/index.vue'), 13 component: () => import('./views/client/index.vue'),
13 meta: { 14 meta: {
14 - title: '童声无界' 15 + title: '童声无界',
16 + name: 'index'
15 }, 17 },
16 children: [] 18 children: []
17 }, { 19 }, {
......
...@@ -22,6 +22,8 @@ ...@@ -22,6 +22,8 @@
22 </template> 22 </template>
23 23
24 <script setup> 24 <script setup>
25 +import { mainStore } from '@/store'
26 +
25 import Cookies from 'js-cookie' 27 import Cookies from 'js-cookie'
26 import 'animate.css'; 28 import 'animate.css';
27 import icon_subscribed from '@images/icon-dingyue01@2x.png' 29 import icon_subscribed from '@images/icon-dingyue01@2x.png'
...@@ -31,12 +33,30 @@ import MyButton from '@/components/MyButton/index.vue' ...@@ -31,12 +33,30 @@ import MyButton from '@/components/MyButton/index.vue'
31 import $ from 'jquery'; 33 import $ from 'jquery';
32 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 34 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
33 import { Toast } from 'vant'; 35 import { Toast } from 'vant';
34 -import { nextTick, onMounted, reactive, ref } from 'vue' 36 +import { nextTick, onMounted, reactive, ref, watch } from 'vue'
35 import axios from '@/utils/axios'; 37 import axios from '@/utils/axios';
36 38
39 +
40 +// 滚动条判断
41 +function hasScrollbar() {
42 + return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
43 +}
44 +
45 +onMounted(() => {
46 + // TODO: 临时处理位置不对问题
47 + // 因为微信第一次进入默认全屏,之后产生的导航栏会影响位置
48 + if (hasScrollbar()) {
49 + location.reload()
50 + }
51 +})
52 +
37 const $route = useRoute(); 53 const $route = useRoute();
38 const $router = useRouter(); 54 const $router = useRouter();
39 55
56 +// TAG: keepAlive 缓存页面
57 +const store = mainStore();
58 +store.keepThisPage($route.meta.name);
59 +
40 // 自定义按钮颜色样式 60 // 自定义按钮颜色样式
41 const styleObject1 = reactive({ 61 const styleObject1 = reactive({
42 backgroundColor: '#FFFFFF', 62 backgroundColor: '#FFFFFF',
...@@ -62,7 +82,7 @@ const goSchool = () => { // 跳转选择幼儿园页面 ...@@ -62,7 +82,7 @@ const goSchool = () => { // 跳转选择幼儿园页面
62 Cookies.set('userType', 'client'); // 客户标识 82 Cookies.set('userType', 'client'); // 客户标识
63 } 83 }
64 84
65 -onMounted (() => { 85 +onMounted(() => {
66 // 背景颜色全屏 86 // 背景颜色全屏
67 $('.client-index-page').height($(document).height()); 87 $('.client-index-page').height($(document).height());
68 }) 88 })
...@@ -82,21 +102,21 @@ const cancelAuth = () => { ...@@ -82,21 +102,21 @@ const cancelAuth = () => {
82 type: 'cancel' 102 type: 'cancel'
83 } 103 }
84 }) 104 })
85 - .then(res => { 105 + .then(res => {
86 - if (res.data.code === 1) { 106 + if (res.data.code === 1) {
87 - Toast.success('操作成功') 107 + Toast.success('操作成功')
88 - } else { 108 + } else {
89 - console.warn(res); 109 + console.warn(res);
90 - if (!res.data.show) return false; 110 + if (!res.data.show) return false;
91 - Toast({ 111 + Toast({
92 - icon: 'close', 112 + icon: 'close',
93 - message: res.data.msg 113 + message: res.data.msg
94 - }); 114 + });
95 - } 115 + }
96 - }) 116 + })
97 - .catch(err => { 117 + .catch(err => {
98 - console.error(err); 118 + console.error(err);
99 - }) 119 + })
100 } 120 }
101 </script> 121 </script>
102 122
...@@ -105,49 +125,56 @@ import mixin from 'common/mixin' ...@@ -105,49 +125,56 @@ import mixin from 'common/mixin'
105 import { mainStore } from '@/store' 125 import { mainStore } from '@/store'
106 import { storeToRefs } from 'pinia' 126 import { storeToRefs } from 'pinia'
107 export default { 127 export default {
128 + name: 'index',
108 mixins: [mixin.init], 129 mixins: [mixin.init],
109 - data () { 130 + data() {
110 return { 131 return {
111 } 132 }
112 }, 133 },
113 - mounted () { 134 + mounted() {
114 }, 135 },
115 methods: { 136 methods: {
116 - 137 +
117 } 138 }
118 } 139 }
119 </script> 140 </script>
120 141
121 <style lang="less" scoped> 142 <style lang="less" scoped>
122 - .client-index-page { 143 +.client-index-page {
123 - // 背景图 宽度100% 高度控制 144 + // 背景图 宽度100% 高度控制
124 - background-image: url('@images/yindao@2x.png'); 145 + background-image: url('@images/yindao@2x.png');
125 - background-repeat: no-repeat; 146 + background-repeat: no-repeat;
126 - width: 100%; 147 + width: 100%;
127 - background-size: 100% 85%; 148 + background-size: 100% 85%;
128 - position: relative; 149 + position: relative;
150 +}
151 +
152 +.entry-wrapper {
153 + position: absolute;
154 + bottom: 1rem;
155 + width: 100%;
156 +
157 + .text {
158 + color: #B8B8B8;
159 + margin: 1rem;
160 + margin-bottom: 0;
129 } 161 }
130 - 162 +
131 - .entry-wrapper { 163 + .control {
132 - position: absolute; 164 + margin: 1rem;
133 - bottom: 0; 165 + margin-top: 0.5rem;
134 - width: 100%; 166 + overflow: auto;
135 - .text { 167 +
136 - color: #B8B8B8; 168 + .plain {
137 - margin: 1rem; 169 + width: 28%;
138 - margin-bottom: 0; 170 + float: left;
171 + margin-right: 3%;
139 } 172 }
140 - .control { 173 +
141 - margin: 1rem; 174 + .primary {
142 - margin-top: 0.5rem; 175 + width: 69%;
143 - overflow: auto; 176 + float: left;
144 - .plain {
145 - width: 28%; float: left;
146 - margin-right: 3%;
147 - }
148 - .primary {
149 - width: 69%; float: left;
150 - }
151 } 177 }
152 } 178 }
179 +}
153 </style> 180 </style>
......