完整代码
<template>
<div class="share-page">
<div>
<div class="share-row1">
<div class="share-img">
<img
:src="shareList.banners[0].imageUrl"
alt=""
width="100%"
height="100%"
/>
</div>
<div class="share-price">活动价<span>￥69</span></div>
<div class="share-yprice">原价<span>￥99</span></div>
<div>商品描述:{{ shareList.description }}</div>
</div>
<div class="share-row1">
<div class="share-title">拼团流程</div>
<div class="grid">
<div class="line-row">
<div class="share-tuan">
<div class="share-row1-img"></div>
<div class="share-row1-title">发起拼团</div>
</div>
<div class="row1-line-img">
<img src="../../../img/share-tuan.png" width="100%" height="100%" alt="">
</div>
<div class="share-tuan">
<div class="share-row1-img"></div>
<div class="share-row1-title">邀请好友</div>
</div>
<div class="row1-line-img">
<img src="../../../img/share-tuan.png" width="100%" height="100%" alt="">
</div>
<div class="share-tuan">
<div class="share-row1-img"></div>
<div class="share-row1-title">拼团成功</div>
</div>
</div>
</div>
</div>
<div class="share-row1">
<div class="grid2">
<div class="share-title">参团人员</div>
<div class="share-title1">还差3人成团</div>
</div>
<div class="grid3">
<div class="share-row2-img"></div>
<div class="share-title1">135*******</div>
<div class="share-title1">2022-08-24</div>
</div>
<div class="grid3">
<div class="share-row2-img"></div>
<div class="share-title1">135*******</div>
<div class="share-title1">2022-08-24</div>
</div>
</div>
<div class="share-row1">
<div class="share-title">活动规则</div>
<div class="share-text">
活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则
文案活动规则文案活动规则文案活动规则文案活动规则 文案活动规则文案
</div>
</div>
<div class="share-row1">
<div class="share-title">活动详情</div>
</div>
<div class="page-top">
<el-button type="primary" @click="JoinTogether()" class="share-button"
>我要加入</el-button
>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
shareList: {},
spu: 962735,
shareIcon:'../../../img/share-tuan.png'
}
},
async mounted() {
const data = {
currentPage: 1,
pageSize: 12,
saleStatusList: 3, // 销售中
saleStatus: 99
}
// const res = await this.$api.GET_SPU_LIST(data)
const res = await this.$api.GET_SPU_DETAIL(this.spu)
this.shareList = res
console.log(res, 9090)
},
methods: {
JoinTogether() {
var u = navigator.userAgent,
app = navigator.appVersion
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isAndroid) {
alert('我是安卓')
this.android()
}
if (isIOS) {
alert('我是苹果')
// this.OpentProduct = true
// this.isShowCard = true
this.appStore()
}
},
android() {
var _clickTime = new Date().getTime()
window.location.href = 'zhihu://' /***打开app的协议，有安卓同事提供***/
var _count = 0,
intHandle
intHandle = setInterval(function() {
_count++
var elsTime = new Date().getTime() - _clickTime
if (_count >= 100 || elsTime > 5000) {
clearInterval(intHandle)
//检查app是否打开
if (document.hidden || document.webkitHidden) {
window.location.href = 'zhihu://'
alert('打开了')
window.close()
// return;
} else {
window.location.href =
'https://a.app.qq.com/o/simple.jsp?pkgname=cn.ch.neighbour' //下载链接
}
}
}, 20)
},
//IOS
appStore() {
var clickTime = +new Date()
var ifr = document.createElement('iframe')
ifr.src = '' //ios协议
ifr.style.display = 'none'
document.body.appendChild(ifr)
//启动间隔20ms 运行定时器
var count = 0
var intHandle = ''
intHandle = setInterval(function() {
count++
var elsTime = +new Date() - clickTime
if (count >= 100 || elsTime > 300) {
clearInterval(intHandle)
document.body.removeChild(ifr)
// 检查App是否打开
if (document.hidden || document.webkitHidden) {
//打开了
ifr.src = '' //ios协议
window.close()
} else {
//没打开
alert('没有APP')
window.open('https://8ec4cbe.umindex.com')
// window.location.href = 'itms-apps://8ec4cbe.umindex.com'
}
}
}, 20)
},
clickSet() {
this.isShowCard = false
this.$router.push('XXX') //跳转到指定页面
},
closeCard() {
this.isShowCard = false
}
}
}
</script>
<style lang="scss">
.iframe {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
overflow-y: hidden;
}
.page-top {
z-index: 2;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.share-button {
width: 100%;
}
.share-page {
width: 100%;
height: 100%;
margin: auto;
background: rgb(238, 237, 237);
}
.share-img {
width: 98%;
height: 200px;
margin: auto;
}
.share-price {
font-size: 0.8rem;
span {
color: red;
font-display: 500;
font-size: 1.2rem;
}
}
.share-yprice {
font-size: 0.8rem;
color: #666;
span {
color: red;
}
}
.share-row1 {
background: #fff;
margin: auto;
padding: 8px;
border-radius: 3px;
margin-bottom: 5px;
}
.share-tuan {
width: 80px;
}
.share-row1-img {
width: 3.5rem;
height: 3.5rem;
border-radius: 3rem;
background: rgb(194, 192, 192);
margin: auto;
}
.share-row2-img {
width: 3.5rem;
height: 3.5rem;
border-radius: 3rem;
background: rgb(194, 192, 192);
}
.share-row1-title {
margin-left: 5px;
}
.share-title {
font-size: 1.2rem;
font-display: 500;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
line-height: 40px;
}
.share-title1 {
font-size: 0.9rem;
line-height: 40px;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.line-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
width: 300px;
}
.row1-line-img {
width: 3.5rem;
height: 3rem;
}
.grid2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 10px;
}
.mask {
background: rgba(0, 0, 0, 0.5);
position: fixed;
margin: 0, 0, 0, 0;
z-index: 10;
}
.advertise {
position: fixed;
width: 5.2rem;
height: 7rem;
top: 3.31rem;
left: 50%;
transform: translate(-50%, 0%); // 控制居中显示
z-index: 20;
}
.img_set {
position: absolute;
width: 2.4rem;
height: 0.64rem;
top: 5rem;
left: 50%;
z-index: 40;
transform: translate(-50%, 0%);
}
.shut {
position: absolute;
width: 0.42rem;
height: 0.42rem;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: rgb(195, 32, 32);
background-size: 42px 42px;
}
</style>
