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