118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
||
<view>
|
||
<!-- #ifdef H5 -->
|
||
<view class="wrapper" v-if="!weChat" @click="openApp()">
|
||
<!-- 左侧图标 -->
|
||
<image class="img" :src="logo"></image>
|
||
<view class="open">
|
||
打开{{config.name}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "@/config/config";
|
||
export default {
|
||
data() {
|
||
return {
|
||
config, // 设置工具类
|
||
weChat: false, // 是否微信浏览器，该项为true时不显示 当前整个页面
|
||
logo: require("@/icon.png"), //显示的圆形logo
|
||
};
|
||
},
|
||
mounted() {
|
||
// #ifdef H5
|
||
// 判断是否是微信浏览器
|
||
var ua = navigator.userAgent.toLowerCase();
|
||
var isWeixin = ua.indexOf("micromessenger") != -1;
|
||
if (isWeixin) {
|
||
this.weChat = true;
|
||
} else {
|
||
this.weChat = false;
|
||
}
|
||
// #endif
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 跳转到下载app页面
|
||
*/
|
||
downloadApp() {
|
||
setTimeout(function () {
|
||
window.location.href = config.downloadLink;
|
||
}, 2000);
|
||
},
|
||
|
||
/**
|
||
* 打开app 仅在h5生效 使用ifream唤醒app
|
||
*/
|
||
openApp() {
|
||
let src;
|
||
if (location.href) {
|
||
src = location.href.split("/pages")[1];
|
||
}
|
||
let t = `${config.schemeLink}pages${src}`;
|
||
|
||
try {
|
||
var e = navigator.userAgent.toLowerCase(),
|
||
n = e.match(/cpu iphone os (.*?) like mac os/);
|
||
if (
|
||
((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
|
||
) {
|
||
window.location.href = t;
|
||
|
||
this.downloadApp();
|
||
} else {
|
||
var r = document.createElement("iframe");
|
||
(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
|
||
|
||
this.downloadApp();
|
||
}
|
||
} catch (e) {
|
||
window.location.href = t;
|
||
this.downloadApp();
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.img {
|
||
margin: 0 4rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
border: 5rpx solid #fff;
|
||
}
|
||
|
||
.open {
|
||
margin: 0 10rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
}
|
||
.wrapper:hover {
|
||
transform: translateX(0);
|
||
}
|
||
.wrapper {
|
||
transform: translateX(160rpx);
|
||
transition: 0.35s;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
border-top-left-radius: 20px;
|
||
border-bottom-left-radius: 20px;
|
||
color: #fff;
|
||
// width: 220rpx;
|
||
background: $light-color;
|
||
position: fixed;
|
||
top: 25%;
|
||
right: 0;
|
||
height: 60rpx;
|
||
z-index: 9;
|
||
}
|
||
</style>
|