<template>
|
<div id="app">
|
<transition name="fade" mode="out-in">
|
<!-- 页面，isRouterAlive 刷新用 -->
|
<router-view v-if="isRouterAlive"/>
|
</transition>
|
|
<!-- Toast 提示 -->
|
<transition name="fade">
|
<div class="toast-mask flex flex-center" :class="{'type-toast': toastType=='toast', 'type-loading': toastType=='loading'}" v-if="toastShow">
|
<!-- 提示 -->
|
<div class="toast" v-html="toastText" v-if="toastType=='toast'"></div>
|
<!-- loading -->
|
<div class="toast" v-if="toastType=='loading'">
|
<div class="ball-rotate"><div></div></div>
|
</div>
|
</div>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
|
// 入口参数
|
// 这里注释入口参数
|
|
import Login from '@/utils/jun_login.js'
|
import wxsign from '@/utils/wxsign.js'
|
import Config from './config'
|
|
export default {
|
name: 'App',
|
|
// 安装组件
|
components: {
|
|
},
|
|
// 监听路由
|
watch: {
|
// $route(to, from){
|
|
// }
|
},
|
|
// 子组件injection
|
// -用于共享app methods
|
provide(){
|
return {
|
reload: this.reload, // 刷新
|
toast: this.toast, // toast
|
// 修复input导致ios微信浏览器收起键盘时，不回滚
|
inputBlur: ()=>{
|
let u = navigator.userAgent,
|
app = navigator.appVersion;
|
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
if(isIOS){
|
setTimeout(() => {
|
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
|
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
|
}, 200)
|
}
|
},
|
noop(){},
|
}
|
},
|
data () {
|
return {
|
// 刷新用
|
isRouterAlive: true,
|
|
toastText: '',
|
toastShow: false,
|
toastType: 'toast',
|
}
|
},
|
mounted () {
|
console.log('app amounted')
|
|
// 避免刷新导致code重复使用
|
let code = this.getQueryString('code') // 微信回调code
|
let cover = this.getQueryString('cover') // 是否封面入口
|
let local_code = this.getLocalStorage('code') // 本地缓存code
|
let isRule = this.getQueryString('rule')==1 // 规则
|
let isCoupon = this.getQueryString('coupon')==1 // 优惠券
|
|
// 以下情况需要重定向到长链
|
// 1. 链接带有code，但code已经用过
|
// 2. 非cover入口
|
// 3. 正式环境
|
// 4. 非规则单页
|
// 4. 非优惠券单页
|
// console.dir(Config.createCodeUrl())
|
|
if(Config.isWxLoginType){
|
if (code && local_code == code || (!isCoupon && !isRule && !cover && !code && !Config.ismock && !Config.istest)) {
|
// 该微信code已使用，重新跳转长链
|
Login.toLongUrl()
|
return
|
} else {
|
this.removeLocalStorage('code')
|
}
|
}
|
|
// 刷新固定首页
|
if (location.hash && location.hash!='#/') {
|
this.$router.replace({name: 'root'})
|
}
|
|
// 暴露到全局，jun_httpEvent.js 调用
|
window.appLoading = this.loading.bind(this)
|
window.appHideLoading = this.hideLoading.bind(this)
|
window.appToast = this.toast.bind(this)
|
|
// this.$refs.audio.play()
|
if(Config.isWxLoginType) this.wxinit()
|
},
|
methods: {
|
// 微信初始化
|
wxinit () {
|
wxsign.main()
|
|
// 测试用
|
// let time = new Date('2020/10/11 00:00:00').getTime()
|
// if ( Date.now() < time ) {
|
// alert('该活动未结束')
|
// }
|
|
wx.ready(()=>{
|
console.log('ready')
|
|
let shareImg = sessionStorage.getItem('shareImg');
|
let shareTitle = sessionStorage.getItem('shareTitle');
|
let shareDesc = sessionStorage.getItem('shareDesc');
|
|
// 分享链接
|
let url = location.origin + location.pathname + '?cover=1'
|
// 带channelNo
|
let we_session = this.getLocalStorage('we_session')
|
if (we_session && we_session.we_session) {
|
url += '&channelNo=' + we_session.we_session
|
}
|
console.log(url)
|
|
// 分享
|
// wx.updateAppMessageShareData({
|
// title: shareTitle, // 分享标题
|
// desc: shareDesc, // 分享描述
|
// link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
// imgUrl: shareImg, // 分享图标
|
// success: function () {
|
// // 设置成功
|
// }
|
// })
|
// wx.updateTimelineShareData({
|
// title: shareTitle, // 分享标题
|
// link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
// imgUrl: shareImg, // 分享图标
|
// success: function () {
|
// // 设置成功
|
// }
|
// })
|
|
wx.onMenuShareTimeline({
|
title: shareTitle, // 分享标题
|
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
imgUrl: shareImg, // 分享图标
|
success: function () {
|
// 用户点击了分享后执行的回调函数
|
// alert(123)
|
}
|
})
|
|
wx.onMenuShareAppMessage({
|
title: shareTitle, // 分享标题
|
desc: shareDesc, // 分享描述
|
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
imgUrl: shareImg, // 分享图标
|
type: 'link', // 分享类型,music、video或link，不填默认为link
|
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
|
success: function () {
|
// 用户点击了分享后执行的回调函数
|
// alert(123)
|
}
|
});
|
})
|
},
|
|
// 刷新
|
reload(){
|
this.isRouterAlive = false
|
this.$nextTick(()=>{
|
this.isRouterAlive = true
|
})
|
},
|
|
// toast
|
toast (e, type) {
|
type = type || 'toast'
|
this.toastText = e
|
this.toastShow = true
|
this.toastType = type
|
|
if (type == 'toast') {
|
clearTimeout(timer)
|
timer = setTimeout(()=>{
|
this.hideToast()
|
}, 2000)
|
}
|
},
|
// 显示loading
|
loading () {
|
this.toast('', 'loading')
|
},
|
// 隐藏toast
|
hideToast(){
|
this.toastShow = false
|
},
|
// toast loading 收起
|
hideLoading(){
|
this.hideToast()
|
},
|
}
|
}
|
</script>
|
|
<style>
|
@import './assets/css/common.css';
|
.toast-mask{
|
position: fixed;
|
z-index: 2000;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
transition: all .5s;
|
}
|
.toast-mask.type-toast{
|
pointer-events: none;
|
}
|
.toast{
|
text-align: center;
|
border-radius: 6px;
|
color:#FFF;
|
background: rgba(17, 17, 17, 0.9);
|
line-height: 1.6;
|
padding: 30px;
|
max-width: 400px;
|
font-size: 24px;
|
}
|
|
@keyframes ball-rotate {
|
0% {transform: rotate(0deg) scale(1); }
|
|
50% {transform: rotate(180deg) scale(0.6);}
|
|
100% {transform: rotate(360deg) scale(1);}
|
}
|
.ball-rotate{position: relative;width: 200px;height: 140px;}
|
.ball-rotate > div {
|
background-color: #fff;
|
width: 30px;
|
height: 30px;
|
border-radius: 100%;
|
margin: 4px;
|
animation-fill-mode: both;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin: -16px 0 0 -16px;
|
}
|
.ball-rotate > div:first-child {
|
animation: ball-rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
|
}
|
.ball-rotate > div:before, .ball-rotate > div:after {
|
background-color: #fff;
|
width: 30px;
|
height: 30px;
|
border-radius: 100%;
|
margin: 4px;
|
content: ""!important;
|
position: absolute;
|
opacity: .8;
|
}
|
.ball-rotate > div:before {top: 0px;left: -56px}
|
.ball-rotate > div:after {top: 0px;left: 50px}
|
</style>
|
