<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-12 15:10:21
|
* @Description: 拼团活动详情
|
-->
|
<template>
|
<div class="seckill-detail">
|
<nav-bar :shadow="false" :autoBack="false" leftIcon="arrow-left" title="拼团活动"
|
@clickRight="clickShare" @clickLeft="clickLeft" v-if="getQueryVariable('flag')">
|
<div v-if='isShowList.flag' slot="right" class="right-icon"></div>
|
</nav-bar>
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height: 100vh;"
|
:class="goodsList.length?'seckill-box-grey':'seckill-box-red'">
|
<div class="seckill-bg">
|
<div class="bg-style" :style="{
|
'padding-top': getQueryVariable('flag') ? '44px' : '0',
|
}">
|
<div class="seckill-header"
|
:style="{ 'background-image': `url(${activityData.backgroundUrl})` }">
|
<!-- <div class="banner-style"> -->
|
<banner-module :list="bannerImgList"></banner-module>
|
<!-- </div> -->
|
</div>
|
</div>
|
<div class="seckill-con">
|
<div class="seckill-con-c">
|
<div class="seckill-list">
|
<div class="seckill-list-bottom">
|
<div v-if='goodsList.length' class="list-bg">
|
<div class="seckill-info" v-for="(item, index) in goodsList" :key="index"
|
@click="goClick(item)">
|
<div class="seckill-list-left">
|
<div class="seckill-list-img"
|
:style="{ 'background-image': `url(${item.prodImgUrl?($isMp4(item.prodImgUrl)?`${item.prodImgUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360`:item.prodImgUrl) : require('@/assets/images/find_logo.png')})` }">
|
</div>
|
</div>
|
<div class="seckill-list-right">
|
<div class="bt-style">
|
<div class="info-left">
|
<div class="title" :class="{'grey-box':!item.ensalequantity}">
|
<span class="title-d">{{ item.prodName }}</span>
|
<span class="title-info">{{ item.prodSpecs }}</span>
|
</div>
|
<div class="price-style" :class="{'grey-box':!item.ensalequantity}">
|
<div class="p-price">
|
<span class="price_tag">￥</span>
|
<span class="price_tag">{{
|
item.salePrice | fillerToFixed
|
}}</span>
|
</div>
|
<div class="actual-price">
|
<span class="price_tag">￥</span>
|
<span class="price_tag">{{
|
item.prodPrice | fillerToFixed
|
}}</span>
|
</div>
|
</div>
|
<div class="desc" v-if="item.maxbuyquantity && item.ensalequantity">
|
每人限购 {{ item.maxbuyquantity }} 件
|
</div>
|
</div>
|
<div v-if='isShowList.flag' class="info-right">
|
<span class="qg" v-if="item.ensalequantity">去拼团</span>
|
<div class="qg-xq" v-else>
|
<img src="../../assets/images/seckill/xq.jpg" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="row-center coloum-center">
|
<div class="empty-row pdt" style="background: #fff">
|
<img src="../../assets/images/seckill/empy.png" class="empty-img" />
|
<div class="empty-text">{{activityMsg}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="download-btn" @click="goApp()" v-if="!getQueryVariable('flag')">
|
下载APP
|
</div>
|
</van-pull-refresh>
|
<!-- 微信引导提示 -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
<script type="text/javascript">
|
import { searchCollageActivity } from '@/api/collageActivity/index'
|
import bannerModule from './modules/banner.vue'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
import { closeLoading, showLoading } from '@/utils/loading.js'
|
var baseUrl = process.env.VUE_APP_H5_URL
|
|
export default {
|
components: {
|
bannerModule,
|
guideOpen
|
},
|
data () {
|
return {
|
isLoading: false,
|
htmlHeight: {
|
height: '0px'
|
},
|
bannerImgList: [],
|
goodsList: [],
|
activityData: {}, // 拼团活动数据
|
openStatus: false,
|
shareUrl: `${baseUrl}/collageActivity` // 分享链接
|
}
|
},
|
filters: {
|
// 保留两位小数
|
fillerToFixed (val) {
|
var num = '0.00'
|
if (val) {
|
num = Number(val).toFixed(2)
|
}
|
return num
|
}
|
},
|
computed: {
|
activityMsg () {
|
return !this.isShowList.flag || this.isShowList.nowTime > this.isShowList.endTime ? '很抱歉，当前活动已结束' : ''
|
},
|
isShowList () {
|
if (!this.activityData.startTime) return { flag: false }
|
const nowTime = Date.now()
|
// 兼容IOS日期格式
|
const startTime = new Date(this.activityData.startTime.replace(/-/g, '/')).getTime()
|
const endTime = new Date(this.activityData.endTime.replace(/-/g, '/')).getTime()
|
return {
|
flag: nowTime <= endTime && nowTime >= startTime,
|
nowTime,
|
startTime
|
}
|
}
|
},
|
created () {
|
this.getActivityList()
|
},
|
mounted () {
|
this.getHtmlHeight()
|
},
|
methods: {
|
getHtmlHeight () {
|
const htmlHeight = window.innerHeight + 'px'
|
this.$set(this.htmlHeight, 'height', htmlHeight)
|
},
|
// 获取活动列表
|
async getActivityList () {
|
showLoading(0)
|
const res = await searchCollageActivity({
|
promotionId: this.getQueryVariable('promotionId')
|
})
|
this.bannerImgList = []
|
this.activityData = {}
|
this.goodsList = []
|
this.isLoading = false
|
closeLoading(0)
|
if (res.code === '0') {
|
const _data = res.data
|
this.activityData = _data.promotionAgglomerate
|
// 活动开始、结束时间
|
this.activityData.startTime = _data.npPromotion.promotionStartTime
|
this.activityData.endTime = _data.npPromotion.promotionEndTime
|
this.activityData.promotionName = _data.npPromotion.promotionName
|
this.bannerImgList = this.activityData.bannerUrl ? this.activityData.bannerUrl.split(',') : []
|
this.goodsList = _data.npPromotionProd || []
|
}
|
},
|
onRefresh () {
|
this.getActivityList()
|
},
|
// 点击抢购
|
goClick (data) {
|
if (this.$route.query.isPreview) return
|
// 已抢购完 不跳转
|
if (!data.ensalequantity) {
|
this.$toast('当前商品已售罄')
|
return
|
}
|
const _extparams = JSON.parse(data.extparams)
|
const promotionId = this.getQueryVariable('promotionId')
|
if (JSON.stringify(_extparams) != '{}') {
|
if (this.getQueryVariable('flag')) {
|
const params = {
|
activityType: '6',
|
shopSpuId: _extparams.shopSpuId,
|
shopSkuId: _extparams.shopSkuId,
|
spuId: data.prodId,
|
promotionId
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosRouter.postMessage(
|
`wlyxls://product_detail?activityType=${params.activityType}&promotionId=${promotionId}&shopSpuId=${_extparams.shopSpuId}&spuId=${data.prodId}&shopSkuId=${_extparams.shopSkuId}`
|
)
|
} else if (window.wlyxls) {
|
window.wlyxls.toCommodityDetailPage(JSON.stringify(params))
|
}
|
} else {
|
location.href = `${baseUrl}/goodsDetail?promotionId=${promotionId}&shopSpuId=${_extparams.shopSpuId}&spuId=${data.prodId}&shopSkuId=${_extparams.shopSkuId}`
|
}
|
}
|
},
|
// 下载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
|
}
|
},
|
// 打开分享面板
|
clickShare () {
|
if (this.$route.query.isPreview) return
|
const _this = this
|
const params = {
|
// type: _name === "wx" ? 0 : 1, //0-好友 1-朋友圈
|
title: `${this.activityData.promotionName}`,
|
description: '五味相谐，人生对味！五粮液新零售APP邀您共品佳酿！',
|
imgurl: `${baseUrl}/frame.png`,
|
url: `${_this.shareUrl}?promotionId=${this.$route.query.promotionId}`
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosShare.postMessage(JSON.stringify(params))
|
} else if (window.wlyxls) {
|
window.wlyxls.openShareWindow(JSON.stringify(params))
|
}
|
},
|
// 获取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
|
},
|
// navigateBack 返回 navigateClose关闭
|
clickLeft () {
|
if (window.wlyxls) {
|
window.wlyxls.navigateBack('')
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage('')
|
} else {
|
this.$router.go(-1)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "@/views/activityList/index.scss";
|
.bg-style {
|
height: 460px;
|
}
|
.banner-style {
|
top: 80px;
|
width: 82%;
|
}
|
.seckill-con {
|
margin-top: 20px;
|
}
|
</style>
|
