<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-13 10:15:36
|
* @Description:拼团详情
|
-->
|
<template>
|
<div>
|
<div class="content">
|
<p class="collage-title">火热拼团中...</p>
|
<div class="seckill-info" @click="goClick(goodsDetail)">
|
<div class="seckill-list-left">
|
<div class="seckill-list-img"
|
:style="{ 'background-image': `url(${goodsDetail.prodImgUrl})` }">
|
</div>
|
</div>
|
<div class="seckill-list-right">
|
<div class="bt-style">
|
<div class="info-left">
|
<div class="title">
|
<p class="title-d">{{ goodsDetail.prodName }}</p>
|
<p class="title-info">{{ goodsDetail.prodSpecs }}</p>
|
</div>
|
<div class="price-style">
|
<div class="p-price">
|
<span class="price_tag">拼团价：￥</span>
|
<span class="price_tag">{{ goodsDetail.salePrice | fillerToFixed}}</span>
|
</div>
|
<div class="actual-price">
|
<span class="price_tag">￥</span>
|
<span class="price_tag">{{goodsDetail.prodPrice | fillerToFixed}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="collage-user">
|
<div v-for="item in collageData.detailRespVos" :key="item.orderId" class="user-box">
|
<div class="user-head">
|
<img v-if='item.memberPic' class="user-img" v-lazy='item.memberPic' alt="">
|
<img v-else class="user-img" src='../../assets/images/goodsDetail/userM.png' alt="">
|
<img v-if='item.isHead' class="head" src='../../assets/images/activityArea/head.png'
|
alt="">
|
<img v-if='!item.isPaid' class="is-paid"
|
src='../../assets/images/activityArea/unpaid.png' alt="">
|
</div>
|
<p class="user-name">{{item.memberNickName}}</p>
|
</div>
|
<div v-for="item in collageData.lackNum" :key="item.orderId" class="user-box">
|
<img class="user-img" src='../../assets/images/goodsDetail/user-none.png' alt="">
|
<p class="user-name"></p>
|
</div>
|
</div>
|
<div class="collage-detail">
|
<p v-if='collageData.endCountDownSec>0'>
|
仅剩{{collageData.lackNum}}个名额，{{collageData.endCountDownSecStr}}后结束
|
</p>
|
<p v-else>拼团时间已结束</p>
|
<van-button @click="goApp()" type="danger" block class="invite-group">
|
{{collageData.endCountDownSec>0?'立即参团':'去逛逛'}}</van-button>
|
</div>
|
<div class="rule-box">
|
<div v-for="(item,index) in ruleText.split('\n')" :key='index' style="margin-bottom:6px;">
|
{{item}}</div>
|
</div>
|
</div>
|
|
<div class="download-btn" @click="goApp()" v-if="!getQueryVariable('flag')">
|
下载/打开APP
|
</div>
|
<!-- 微信引导提示 -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
<script>
|
import { getCollageData, searchGoodsDetail } from '@/api/collageActivity/index'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
export default {
|
components: {
|
guideOpen
|
},
|
data () {
|
return {
|
params: {},
|
goodsDetail: {
|
prodImgUrl: '',
|
prodName: '',
|
prodSpecs: '',
|
salePrice: '',
|
prodPrice: ''
|
},
|
timer: null,
|
collageData: {},
|
openStatus: false
|
}
|
},
|
filters: {
|
// 保留两位小数
|
fillerToFixed (val) {
|
var num = '0.00'
|
if (val) {
|
num = Number(val).toFixed(2)
|
}
|
return num
|
}
|
},
|
computed: {
|
ruleText () {
|
return this.collageData.expInfo ? JSON.parse(this.collageData.expInfo).promotionRuledesc : ''
|
}
|
},
|
created () {
|
this.params = this.$route.query
|
this.getData()
|
},
|
beforeDestroy () {
|
clearInterval(this.timer)
|
},
|
methods: {
|
countTime (val) {
|
let day = parseInt(val / 60 / 60 / 24)
|
let hr = parseInt(val / 60 / 60 % 24)
|
let min = parseInt(val / 60 % 60)
|
let sec = parseInt(val % 60)
|
day = day > 9 ? day : day === 0 ? '' : `0${day}天 `
|
hr = hr > 9 ? hr : '0' + hr
|
min = min > 9 ? min : '0' + min
|
sec = sec > 9 ? sec : '0' + sec
|
return `${day}${hr}:${min}:${sec}`
|
},
|
getData () {
|
// 获取商品详情
|
searchGoodsDetail(this.params).then(res => {
|
this.goodsDetail = res.data || {}
|
})
|
// 获取拼团数据
|
getCollageData(this.params).then(res => {
|
if (res.data) {
|
this.collageData = res.data
|
this.timer = setInterval(() => {
|
this.collageData.endCountDownSec--
|
this.$set(this.collageData, 'endCountDownSecStr', this.countTime(this.collageData.endCountDownSec))
|
}, 1000)
|
}
|
})
|
},
|
// 获取url参数
|
getQueryVariable (variable) {
|
var query = window.location.search.substring(1)
|
var vars = query.split('&')
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split('=')
|
if (pair[0] == variable) {
|
return pair[1]
|
}
|
}
|
return false
|
},
|
// 下载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
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.content {
|
padding: 40px 20px;
|
height: 100vh;
|
box-sizing: border-box;
|
background-color: #fff;
|
.collage-title {
|
font-size: 32px;
|
font-weight: 600;
|
color: #000000;
|
}
|
|
.seckill-info {
|
margin-top: 39px;
|
padding: 20px;
|
overflow: hidden;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
border-radius: 10px;
|
border: 1px solid #d9d9d9;
|
|
.seckill-list-left {
|
width: 198px;
|
height: 198px;
|
border-radius: 8px;
|
|
.seckill-list-img {
|
width: 100%;
|
height: 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: 0% 0%;
|
}
|
}
|
|
.seckill-list-right {
|
width: 50%;
|
flex-grow: 1;
|
margin-left: 30px;
|
|
.bt-style {
|
min-height: 198px;
|
overflow: hidden;
|
position: relative;
|
|
.info-left {
|
.title {
|
font-size: 28px;
|
word-break: break-all;
|
.title-d {
|
font-weight: 600;
|
margin-bottom: 20px;
|
}
|
.title-info {
|
font-weight: 400;
|
font-size: 24px;
|
color: #666666;
|
}
|
}
|
|
.price-style {
|
margin-top: 56px;
|
color: #ce3135;
|
|
.p-price {
|
font-weight: 600;
|
font-size: 26px;
|
}
|
|
.actual-price {
|
color: #999999;
|
text-decoration: line-through;
|
font-size: 26px;
|
margin-left: 16px;
|
}
|
|
.actual-price,
|
.p-price {
|
display: inline-block;
|
}
|
}
|
|
.desc {
|
font-size: 24px;
|
margin-top: 32px;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
|
.collage-user {
|
margin-top: 60px;
|
background: #f6f6f6;
|
border-radius: 40px;
|
padding: 39px 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.user-box {
|
width: 25%;
|
box-sizing: border-box;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.user-head {
|
width: 80px;
|
position: relative;
|
.head,
|
.is-paid {
|
position: absolute;
|
right: -30px;
|
top: -6px;
|
width: 56px;
|
height: 30px;
|
}
|
.is-paid {
|
width: 72px;
|
}
|
}
|
.user-img {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
}
|
.user-name {
|
font-size: 24px;
|
width: 100%;
|
height: 34px;
|
line-height: 34px;
|
text-align: center;
|
margin-top: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
.collage-detail {
|
margin-top: 40px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
p {
|
font-size: 26px;
|
color: #ce3135;
|
}
|
.invite-group {
|
width: 670px;
|
margin-top: 110px;
|
background: linear-gradient(96deg, #db4b4e, #c23034 100%);
|
border-radius: 234px;
|
}
|
}
|
}
|
|
.rule-box {
|
margin-top: 20px;
|
padding: 30px 35px;
|
box-sizing: border-box;
|
overflow-y: auto;
|
background: #ffffff;
|
border-radius: 8px;
|
font-size: 24px;
|
color: #994d00;
|
}
|
.download-btn {
|
position: absolute;
|
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;
|
}
|
</style>
|
