long
2023-03-03 9860e221460a0a4ac1903dad2c97160d0eed0e63
提交 | 用户 | age
36e1de 1 <template>
L 2   <div id="app">
3     <transition name="fade" mode="out-in">
4       <!-- 页面,isRouterAlive 刷新用 -->
5       <router-view v-if="isRouterAlive" />
6     </transition>
7
8     <!-- Toast 提示 -->
9     <transition name="fade">
10       <div v-if="toastShow" class="toast-mask flex flex-center" :class="{'type-toast': toastType=='toast', 'type-loading': toastType=='loading'}">
11         <!-- 提示 -->
12         <div v-if="toastType=='toast'" class="toast" v-html="toastText" />
13         <!-- loading -->
14         <div v-if="toastType=='loading'" class="toast">
15           <div class="ball-rotate"><div /></div>
16         </div>
17       </div>
18     </transition>
19   </div>
20 </template>
21
22 <script>
23
24 // 入口参数
25 // 这里注释入口参数
26
27 import Login from '@/utils/jun_login.js'
28 import wxsign from '@/utils/wxsign.js'
29 import Config from './config'
30 var timer = null
31 export default {
32   name: 'App',
33
34   // 安装组件
35   components: {
36
37   },
38   data() {
39     return {
40       // 刷新用
41       isRouterAlive: true,
42
43       toastText: '',
44       toastShow: false,
45       toastType: 'toast'
46     }
47   },
48
49   // 监听路由
50   watch: {
51     // $route(to, from){
52
53     // }
54   },
55
56   // 子组件injection
57   // -用于共享app methods
58   provide() {
59     return {
60       reload: this.reload, // 刷新
61       toast: this.toast, // toast
62       // 修复input导致ios微信浏览器收起键盘时,不回滚
63       inputBlur: () => {
64         const u = navigator.userAgent
65         const app = navigator.appVersion
66         const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
67         if (isIOS) {
68           setTimeout(() => {
69             const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
70             window.scrollTo(0, Math.max(scrollHeight - 1, 0))
71           }, 200)
72         }
73       },
74       noop() {}
75     }
76   },
77   mounted() {
78     console.log('app amounted')
79
80     // 避免刷新导致code重复使用
81     const code = this.getQueryString('code') // 微信回调code
82     const local_code = this.getLocalStorage('code') // 本地缓存code
83
84     // 以下情况需要重定向到长链
85     // 1. 链接带有code,但code已经用过
86     // 2. 非cover入口
87     // 3. 正式环境
88     // 4. 非规则单页
89     // 4. 非优惠券单页
90     // console.dir(Config.createCodeUrl())
91
92     if (Config.isWxLoginType) {
93       if (code && local_code == code || (!code && !Config.ismock && !Config.istest)) {
94         // 该微信code已使用,重新跳转长链
95         Login.toLongUrl()
96         return
97       } else {
98         this.removeLocalStorage('code')
99       }
100     }
101
102     // 刷新固定首页
103     if (location.hash && location.hash != '#/') {
104       this.$router.replace({ name: 'root' })
105     }
106
107     // 暴露到全局,jun_httpEvent.js 调用
108     window.appLoading = this.loading.bind(this)
109     window.appHideLoading = this.hideLoading.bind(this)
110     window.appToast = this.toast.bind(this)
111
112     // this.$refs.audio.play()
113     if (Config.isWxLoginType) this.wxinit()
114   },
115   methods: {
116     // 微信初始化
117     wxinit() {
118       wxsign.main()
119
120       // 测试用
121       // let time = new Date('2020/10/11 00:00:00').getTime()
122       // if ( Date.now() < time ) {
123       //     alert('该活动未结束')
124       // }
125
126       wx.ready(() => {
127         console.log('ready')
128
129         const shareImg = sessionStorage.getItem('shareImg')
130         const shareTitle = sessionStorage.getItem('shareTitle')
131         const shareDesc = sessionStorage.getItem('shareDesc')
132
133         // 分享链接
134         let url = location.origin + location.pathname + '?cover=1'
135         // 带channelNo
136         const we_session = this.getLocalStorage('we_session')
137         if (we_session && we_session.we_session) {
138           url += '&channelNo=' + we_session.we_session
139         }
140         console.log(url)
141
142         // 分享
143         // wx.updateAppMessageShareData({
144         //     title: shareTitle, // 分享标题
145         //     desc: shareDesc, // 分享描述
146         //     link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
147         //     imgUrl: shareImg, // 分享图标
148         //     success: function () {
149         //         // 设置成功
150         //     }
151         // })
152         // wx.updateTimelineShareData({
153         //     title: shareTitle, // 分享标题
154         //     link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
155         //     imgUrl: shareImg, // 分享图标
156         //     success: function () {
157         //         // 设置成功
158         //     }
159         // })
160
161         wx.onMenuShareTimeline({
162           title: shareTitle, // 分享标题
163           link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
164           imgUrl: shareImg, // 分享图标
165           success: function() {
166             // 用户点击了分享后执行的回调函数
167             // alert(123)
168           }
169         })
170
171         wx.onMenuShareAppMessage({
172           title: shareTitle, // 分享标题
173           desc: shareDesc, // 分享描述
174           link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
175           imgUrl: shareImg, // 分享图标
176           type: 'link', // 分享类型,music、video或link,不填默认为link
177           // dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
178           success: function() {
179             // 用户点击了分享后执行的回调函数
180             // alert(123)
181           }
182         })
183       })
184     },
185
186     // 刷新
187     reload() {
188       this.isRouterAlive = false
189       this.$nextTick(() => {
190         this.isRouterAlive = true
191       })
192     },
193
194     // toast
195     toast(e, type) {
196       type = type || 'toast'
197       this.toastText = e
198       this.toastShow = true
199       this.toastType = type
200
201       if (type == 'toast') {
202         clearTimeout(timer)
203         timer = setTimeout(() => {
204           this.hideToast()
205         }, 2000)
206       }
207     },
208     // 显示loading
209     loading() {
210       this.toast('', 'loading')
211     },
212     // 隐藏toast
213     hideToast() {
214       this.toastShow = false
215     },
216     // toast loading 收起
217     hideLoading() {
218       this.hideToast()
219     }
220   }
221 }
222 </script>
223
224 <style>
225 @import './assets/css/common.css';
226 .toast-mask{
227     position: fixed;
228     z-index: 2000;
229     top: 0;
230     left: 0;
231     right: 0;
232     bottom: 0;
233     transition: all .5s;
234 }
235 .toast-mask.type-toast{
236     pointer-events: none;
237 }
238 .toast{
239     text-align: center;
240     border-radius: 6px;
241     color:#FFF;
242     background: rgba(17, 17, 17, 0.9);
243     line-height: 1.6;
244     padding: 30px;
245     max-width: 400px;
246     font-size: 24px;
247 }
248
249 @keyframes ball-rotate {
250   0% {transform: rotate(0deg) scale(1); }
251
252   50% {transform: rotate(180deg) scale(0.6);}
253
254   100% {transform: rotate(360deg) scale(1);}
255 }
256 .ball-rotate{position: relative;width: 200px;height: 140px;}
257 .ball-rotate > div {
258     background-color: #fff;
259     width: 30px;
260     height: 30px;
261     border-radius: 100%;
262     margin: 4px;
263     animation-fill-mode: both;
264     position: absolute;
265     top: 50%;
266     left: 50%;
267     margin: -16px 0 0 -16px;
268 }
269 .ball-rotate > div:first-child {
270     animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
271 }
272 .ball-rotate > div:before, .ball-rotate > div:after {
273     background-color: #fff;
274     width: 30px;
275     height: 30px;
276     border-radius: 100%;
277     margin: 4px;
278     content: ""!important;
279     position: absolute;
280     opacity: .8;
281 }
282 .ball-rotate > div:before {top: 0px;left: -56px}
283 .ball-rotate > div:after {top: 0px;left: 50px}
284 </style>