137 lines
2.9 KiB
Vue
137 lines
2.9 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="content">
|
||
<div class="goToBtn" @click="goAppHandler">立即打开</div>
|
||
<div class="content_tip">
|
||
<div class="font_cls">如未安装，请点击 <span @click="downLoadHandler">立即下载</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信内置浏览器引导 -->
|
||
<div v-if="showGuide" class="guide-mask" @click.self="closeGuide">
|
||
<img class="guide-img" src="@/assets/sucai.png" alt="引导在浏览器打开" />
|
||
<div class="guide-btn" @click="closeGuide">我知道了</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getNewVersion, getLog } from "@/api/order"
|
||
export default {
|
||
name: "goToApp",
|
||
data() {
|
||
return {
|
||
showGuide: false
|
||
}
|
||
},
|
||
mounted() {
|
||
getLog({
|
||
source: 'App下载页',
|
||
event: '页面浏览',
|
||
page: '/h5/supplier/dispatch/goToApp'
|
||
})
|
||
this.showGuide = this.isWeixin()
|
||
},
|
||
methods: {
|
||
isWeixin() {
|
||
const ua = navigator.userAgent.toLowerCase()
|
||
return ua.indexOf('micromessenger') !== -1
|
||
},
|
||
closeGuide() {
|
||
this.showGuide = false
|
||
},
|
||
goAppHandler() {
|
||
getLog({
|
||
source: 'App下载页',
|
||
event: '直接打开',
|
||
page: '/h5/supplier/dispatch/goToApp'
|
||
})
|
||
window.location.href = "rvdriver://page/pagesLogin/phoneLogin?source=h5Link";
|
||
},
|
||
async downLoadHandler() {
|
||
getLog({
|
||
source: 'App下载页',
|
||
event: '立即下载',
|
||
page: '/h5/supplier/dispatch/goToApp'
|
||
});
|
||
getNewVersion({
|
||
appType: 5
|
||
}).then((res) => {
|
||
window.location.href = res?.result?.path
|
||
}).catch(() => {
|
||
this.$message.error('请求版本失败，请重试');
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-image: url('@/assets/toAppBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 74vh;
|
||
}
|
||
.goToBtn {
|
||
width: 70%;
|
||
height: 45px;
|
||
margin-left: 15%;
|
||
background: linear-gradient( 270deg, #2347C0 0%, #72A3FF 100%);
|
||
border-radius: 23px;
|
||
//font-weight: bold;
|
||
font-size: 17px;
|
||
color: #FFFFFF;
|
||
letter-spacing: 2px;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
}
|
||
.content_tip {
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
.font_cls {
|
||
font-size: 14px;
|
||
color: #808080;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
span {
|
||
color: #007BE9;
|
||
}
|
||
}
|
||
}
|
||
.guide-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.guide-img {
|
||
width: 90%;
|
||
margin-top: 0;
|
||
object-fit: contain;
|
||
}
|
||
.guide-btn {
|
||
width: 140px;
|
||
height: 40px;
|
||
margin-top: 40px;
|
||
border: 1px solid #FFFFFF;
|
||
border-radius: 20px;
|
||
font-size: 15px;
|
||
color: #FFFFFF;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
</style>
|