lilishop-uniapp/components/m-airbtn/index.vue

113 lines
2.4 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,
logo: require("@/icon.png"),
};
},
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: {
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>