From 9860e221460a0a4ac1903dad2c97160d0eed0e63 Mon Sep 17 00:00:00 2001 From: long <515897141@qq.com> Date: 星期五, 03 三月 2023 10:59:42 +0800 Subject: [PATCH] 初始化 --- src/App.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 284 insertions(+), 0 deletions(-) diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..55381aa --- /dev/null +++ b/src/App.vue @@ -0,0 +1,284 @@ +<template> + <div id="app"> + <transition name="fade" mode="out-in"> + <!-- 椤甸潰锛宨sRouterAlive 鍒锋柊鐢� --> + <router-view v-if="isRouterAlive" /> + </transition> + + <!-- Toast 鎻愮ず --> + <transition name="fade"> + <div v-if="toastShow" class="toast-mask flex flex-center" :class="{'type-toast': toastType=='toast', 'type-loading': toastType=='loading'}"> + <!-- 鎻愮ず --> + <div v-if="toastType=='toast'" class="toast" v-html="toastText" /> + <!-- loading --> + <div v-if="toastType=='loading'" class="toast"> + <div class="ball-rotate"><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' +var timer = null +export default { + name: 'App', + + // 瀹夎缁勪欢 + components: { + + }, + data() { + return { + // 鍒锋柊鐢� + isRouterAlive: true, + + toastText: '', + toastShow: false, + toastType: 'toast' + } + }, + + // 鐩戝惉璺敱 + watch: { + // $route(to, from){ + + // } + }, + + // 瀛愮粍浠秈njection + // -鐢ㄤ簬鍏变韩app methods + provide() { + return { + reload: this.reload, // 鍒锋柊 + toast: this.toast, // toast + // 淇input瀵艰嚧ios寰俊娴忚鍣ㄦ敹璧烽敭鐩樻椂锛屼笉鍥炴粴 + inputBlur: () => { + const u = navigator.userAgent + const app = navigator.appVersion + const 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() {} + } + }, + mounted() { + console.log('app amounted') + + // 閬垮厤鍒锋柊瀵艰嚧code閲嶅浣跨敤 + const code = this.getQueryString('code') // 寰俊鍥炶皟code + const local_code = this.getLocalStorage('code') // 鏈湴缂撳瓨code + + // 浠ヤ笅鎯呭喌闇�瑕侀噸瀹氬悜鍒伴暱閾� + // 1. 閾炬帴甯︽湁code锛屼絾code宸茬粡鐢ㄨ繃 + // 2. 闈瀋over鍏ュ彛 + // 3. 姝e紡鐜 + // 4. 闈炶鍒欏崟椤� + // 4. 闈炰紭鎯犲埜鍗曢〉 + // console.dir(Config.createCodeUrl()) + + if (Config.isWxLoginType) { + if (code && local_code == code || (!code && !Config.ismock && !Config.istest)) { + // 璇ュ井淇ode宸蹭娇鐢紝閲嶆柊璺宠浆闀块摼 + Login.toLongUrl() + return + } else { + this.removeLocalStorage('code') + } + } + + // 鍒锋柊鍥哄畾棣栭〉 + if (location.hash && location.hash != '#/') { + this.$router.replace({ name: 'root' }) + } + + // 鏆撮湶鍒板叏灞�锛宩un_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') + + const shareImg = sessionStorage.getItem('shareImg') + const shareTitle = sessionStorage.getItem('shareTitle') + const shareDesc = sessionStorage.getItem('shareDesc') + + // 鍒嗕韩閾炬帴 + let url = location.origin + location.pathname + '?cover=1' + // 甯hannelNo + const 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銆乿ideo鎴杔ink锛屼笉濉粯璁や负link + // dataUrl: '', // 濡傛灉type鏄痬usic鎴杤ideo锛屽垯瑕佹彁渚涙暟鎹摼鎺ワ紝榛樿涓虹┖ + 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> -- Gitblit v1.8.0