Showing
2 changed files
with
78 additions
and
49 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment