<template>
|
<div class="invite-page">
|
<div class="poster">
|
<img class="bg_img" src="../../assets/images/blindBox/1.png" />
|
<div class="time_item">
|
<div class="time_text" v-if="promotion.promotionStartTime">
|
活动时间：{{promotion.promotionStartTime || "无时间"}}-{{promotion.promotionEndTime || "无时间"}}
|
</div>
|
</div>
|
</div>
|
<div class="download-btn" @click="goApp('android')">下载APP</div>
|
<!-- <div class="download-btn" @click="isShow = true">下载APP</div>
|
<div v-show="isShow" class="overlay-style">
|
<div class="overlay-con">
|
<van-icon name="cross" class="close" @click="isShow = false" />
|
<div class="tips-style">温馨提示</div>
|
<div class="overlay-con-item">
|
<div class="overlay-con-item1">
|
<div class="overlay-i">
|
<div class="overlay-i-line" @click="goApp('android')">
|
<img src="../../assets/images/seckill/android.png" />
|
<span style="margin-top: 10px">安卓</span>
|
</div>
|
</div>
|
<div class="overlay-i">
|
<div class="overlay-i-line" @click="goApp('ios')">
|
<img src="../../assets/images/seckill/ios.png" />
|
<span style="margin-top: 10px">IOS</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
|
<script>
|
import { getPromotionInfo } from '@/api/blindBox/index.js'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
export default {
|
name: 'invite',
|
components: {
|
guideOpen
|
},
|
data() {
|
return {
|
promotion: {},
|
isShow: false,
|
openStatus: false
|
}
|
},
|
created() {
|
var params = {
|
promotionId: this.$route.query.promotionId,
|
bizId: 'B02'
|
}
|
getPromotionInfo({ params }).then(res => {
|
if (res.code == 0) {
|
this.promotion = res.data.promotion // 促销活动
|
}
|
})
|
},
|
methods: {
|
// 下载app
|
goApp() {
|
let url;
|
var isWeixin = this.is_weixin()
|
// 判断是否在微信内置浏览器打开
|
if (isWeixin) {
|
this.openStatus = true
|
} else {
|
if (this.$root.isIos) {
|
url = this.$store.getters.iosUrl
|
} else {
|
url = this.$store.getters.androidUrl
|
}
|
location.href = url
|
}
|
},
|
is_weixin() {
|
var ua = window.navigator.userAgent.toLowerCase()
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
return true
|
} else {
|
return false
|
}
|
}
|
// goApp (name) {
|
// if (name === 'ios') {
|
// } else if (name === 'android') {
|
// window.location.href = `https://wly-prod.oss-cn-chengdu.aliyuncs.com/ycloudfiles/01/100001/apkVersion/wlyxls.apk`
|
// }
|
// }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.invite-page {
|
.poster {
|
position: relative;
|
.bg_img {
|
width: 100%;
|
}
|
.time_item {
|
position: absolute;
|
top: 860px;
|
width: 100%;
|
text-align: center;
|
font-size: 24px;
|
color: #994d00;
|
}
|
}
|
|
.download-btn {
|
position: fixed;
|
top: 35px;
|
right: 0;
|
z-index: 101;
|
background: #e49e14;
|
color: #fff;
|
padding: 12px 28px;
|
font-size: 26px;
|
border-top-left-radius: 28px;
|
border-bottom-left-radius: 28px;
|
}
|
|
.tips-style {
|
text-align: center;
|
font-size: 32px;
|
font-weight: 400;
|
color: #333;
|
height: 70px;
|
line-height: 70px;
|
}
|
|
.overlay-style {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.7);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.overlay-con {
|
background-color: #fff;
|
width: 540px;
|
height: 332px;
|
border-radius: 10px;
|
position: relative;
|
font-size: 28px;
|
color: #666;
|
|
.close {
|
position: absolute;
|
right: 20px;
|
top: 20px;
|
font-size: 40px;
|
cursor: pointer;
|
z-index: 10000;
|
}
|
|
.overlay-con-item {
|
height: calc(100% - 70px);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.overlay-i {
|
width: 168px;
|
height: 52px;
|
display: inline-block;
|
margin-right: 15px;
|
background: #e7e7e7;
|
|
.overlay-i-line {
|
text-align: center;
|
|
> img {
|
width: 40px;
|
height: 40px;
|
position: relative;
|
top: 6px;
|
}
|
|
span {
|
margin-left: 15px;
|
font-size: 16px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
