<template>
|
<div class="goods-detail-page">
|
<template v-if="!prodIsOff">
|
<van-sticky>
|
<div class="header-navbar">
|
<van-tabs v-model="navActive" @click="changeNav" color='#9f1310' line-height='2px'
|
title-active-color='#9f1310'>
|
<van-tab title="商品" name="goods"></van-tab>
|
<van-tab title="详情" name="detail"></van-tab>
|
<van-tab title="评论" name="comment"></van-tab>
|
</van-tabs>
|
<div class="download-btn" @click="openGuide()">
|
打开APP
|
</div>
|
</div>
|
</van-sticky>
|
<div class="content">
|
<div class="good-banner" id="good-banner" ref="goodBanner">
|
<van-swipe :autoplay="videoList.length ? '' : 3000" @change="changeSwipe" style='height:376px;'>
|
<van-swipe-item v-for="item in videoList" :key="item.imgNum">
|
<div class="video-box">
|
<video :src="item.imgUrl" controls loop
|
:poster='`${item.imgUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360`' style="width:100%;"
|
class="swipe-video"></video>
|
</div>
|
</van-swipe-item>
|
<van-swipe-item v-for="(image, index) in imgList" :key="image.imgNum">
|
<img @click="previewImg(imgList, index)" v-lazy="image.imgUrl" class="swipe-img" />
|
</van-swipe-item>
|
</van-swipe>
|
<div class="goods-t" v-if="showActivityData">
|
<!-- 限购 -->
|
<template v-if='showActivityData.activityType === "4" && showActivityData.endCountDownSec > 0'>
|
<div class="goods-t-left"
|
v-if="JSON.stringify(showActivityData.limiTimePromotion) != '{}' && showActivityData.endCountDownSec > 0">
|
<div class="goods-label">
|
<span>{{ showActivityData.limiTimePromotion.promotionRule }}</span>
|
<span style="margin-left:10px;" v-if="showActivityData.startCountDownSec < 2">¥<span class="jg">{{
|
showActivityData.salePrice | fillerToFixed
|
}}</span></span>
|
</div>
|
<div id="triangle-topleft"></div>
|
<div id="triangle-bottomleft"></div>
|
</div>
|
<div class="goods-t-right" v-if="showActivityData.startCountDownSec > 2">
|
<span class="hdsj-time-style">距离开始还有{{ showActivityData.startCountDownSecStr }}</span>
|
</div>
|
<div class="goods-t-right" v-else-if="showActivityData.endCountDownSec > 0">
|
<span class="hdsj-time-style1">距离结束还有{{ showActivityData.endCountDownSecStr }}</span>
|
</div>
|
</template>
|
<!-- 拼团 -->
|
<template v-else-if='isCollage && showActivityData.endCountDownSec > 0'>
|
<div class="goods-t-left">
|
<div class="goods-label">
|
<span>{{ showActivityData.agglomerateNum }}人拼团</span>
|
<div>
|
<p class="jg"><span>¥</span>{{ showActivityData.salePrice | fillerToFixed }}</p>
|
<span class="jg prod-price">¥{{ showActivityData.prodPrice | fillerToFixed }}</span>
|
</div>
|
</div>
|
<div id="triangle-topleft"></div>
|
<div id="triangle-bottomleft"></div>
|
</div>
|
<div class="goods-t-right">
|
<span class="hdsj-time-style1">距离结束还有{{ showActivityData.endCountDownSecStr }}</span>
|
</div>
|
</template>
|
</div>
|
<div class="goods-info">
|
<div class="goods-s">
|
<div class="name">{{ goodBasicInfo.spuName }}</div>
|
<div class="font22 textf68388" v-if="goodBasicInfo.spuTags">
|
{{ goodBasicInfo.spuTags }}
|
</div>
|
</div>
|
<div class="row-start coloum-center">
|
<div v-if="showActivityData">
|
<div class="new-price">
|
<!-- 秒杀价格 -->
|
<!-- ¥{{ showActivityData.salePrice | fillerToFixed}} -->
|
<!-- 销售价格 -->
|
<span v-if="checkPrice">
|
<span>¥{{ checkPrice.salePrice | fillerToFixed }}</span></span>
|
</div>
|
</div>
|
<div v-else>
|
<div class="new-price" v-if="checkPrice">
|
<!-- 销售价格 -->
|
¥{{ checkPrice.salePrice | fillerToFixed }}
|
<!-- 挂牌价格 -->
|
<span class="price-decoration" v-if="checkPrice.salePrice != checkPrice.listPrice">¥{{
|
checkPrice.listPrice | fillerToFixed
|
}}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 拼团活动 -->
|
<Collage @openGuide='openGuide' v-if='isCollage && collageUserList.length'
|
:collageUserList='collageUserList' />
|
<collageRule v-if='isCollage && isBegin' :ruleText='showActivityData.promotionRuledesc'>
|
</collageRule>
|
<!-- 优惠券模态框 -->
|
<coupon-modal v-if='!isCollage' @openGuide='openGuide' class="border_bottom" :spuId="spuId"></coupon-modal>
|
<div class="coupon-list row-between coloum-center mt20 mb20" @click="activeModalVis = !activeModalVis"
|
v-if="!isCollage && activeList && activeList.length">
|
<div class="font600 flex1 flex">
|
活动:
|
<span class="font400 flex1 font26 common-txt-color">
|
{{ activeList[0].promotionName }}
|
</span>
|
</div>
|
<img src="~@/assets/images/goodsDetail/arrows.png" class="common-base-icon ml20" />
|
</div>
|
<!-- 商品活动模块 -->
|
<active-modal :list="activeList" :visable="activeModalVis" @close-modal="activeModalVis = false"
|
v-if="activeList && activeList.length" />
|
<!-- <div class="line_row"></div> -->
|
<div class="list">
|
<div class="list-item row-start coloum-center " @click="addShopCar('choose')">
|
<div class="font600">已选</div>
|
<div class="color_grey flex1">{{ checkSku }}</div>
|
<img src="~@/assets/images/goodsDetail/arrows.png" class="common-base-icon" />
|
</div>
|
<div class="list-item row-start coloum-center " @click="addShopCar('choose')">
|
<div class="font600">运费</div>
|
<div class="color_grey flex1">免运费（请以提交订单时为准）</div>
|
</div>
|
<div class="freight_row flex1">
|
<div class="row-between coloum-center">
|
<div class="row-start coloum-center">
|
<img src="~@/assets/images/goodsDetail/params_logo1.png" class="left_logo" />
|
<span class='text99 font24'>酒厂直发</span>
|
</div>
|
<div class="row-start coloum-center">
|
<img src="~@/assets/images/goodsDetail/params_logo1.png" class="left_logo" />
|
<span class='text99 font24'>品质保证</span>
|
</div>
|
</div>
|
<div class="row-between coloum-center">
|
<div class="row-start coloum-center">
|
<img src="~@/assets/images/goodsDetail/params_logo1.png" class="left_logo" />
|
<span class='text99 font24'>急速审核</span>
|
</div>
|
<div class="row-start coloum-center">
|
<img src="~@/assets/images/goodsDetail/params_logo1.png" class="left_logo" />
|
<span class='text99 font24'>不支持7天无理由退货</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="good-content" id="good-content">
|
<!-- 商品详情 -->
|
<good-content :goodParams="goodParams" />
|
</div>
|
<div class="comment-content" id="comment-content">
|
<!-- 评论详情 -->
|
<comment :shopSpuId="shopSpuId" :scrollTop="scrollTop" />
|
</div>
|
</div>
|
</template>
|
<!-- 加入购物车/立即购买模态框模态框-->
|
<NewModal :visable="shopModal" @close-modal="closeShopModal" v-if="shopModal">
|
<div slot="modal-content">
|
<div class="flex mb20 mt20">
|
<div class="skuImage">
|
<img v-if="clientSkuList && clientSkuList[indexImg].skuImages && clientSkuList[indexImg].skuImages.length"
|
:src="clientSkuList[indexImg].skuImages[0].imgUrl | ossProcess"
|
:key="clientSkuList[indexImg].shopSkuId" />
|
<img v-else src="../../assets/images/find_logo.png" />
|
<div class="storag-num">
|
库存：{{ showActivityData && isBegin ? showActivityData.ensalequantity : ((stockInfo && stockInfo.length &&
|
stockInfo[0].storageNum) || 0)
|
}}
|
</div>
|
</div>
|
<div class="goods-msg ml20">
|
<div class="goods-name">{{ goodBasicInfo.spuName }}</div>
|
<div class="font600 title-price">
|
￥{{ showActivityData && isBegin ? showActivityData.salePrice :
|
(clientSkuList && clientSkuList.length ? clientSkuList[indexImg].skuPrice.fixedPrice.salePrice :
|
checkPrice.salePrice)
|
| fillerToFixed
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="choose-box mb20" v-if="productCode.skuCodes && productCode.skuCodes.length">
|
<div class="title">商品规格</div>
|
<div class="row-start wrap coloum-center">
|
<div :class="activeChooseItem == index2 ? 'active-border' : ''" class="choose-item " :key="obj.shopSkuId"
|
v-for="(obj, index2) in productCode.skuCodes" @click="chooseGoods(obj, index2)">
|
{{ obj.skuPropName }}
|
<span v-if="obj.skuReduceStorage > 1">*{{ obj.skuReduceStorage }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="row-between coloum-center">
|
<div class="title">购买数量</div>
|
<div v-if="isBegin">
|
<div v-if="showActivityData.maxbuyquantity && showActivityData.maxbuyquantity != 0">
|
<lxc-count @handleCount="handleCountClick" :max="showActivityData.maxbuyquantity" :value="addNum"
|
:delayed="100">
|
</lxc-count>
|
</div>
|
<div v-else>
|
<lxc-count @handleCount="handleCountClick"
|
:max="showActivityData.ensalequantity || showActivityData.ensalequantity === 0 ? showActivityData.ensalequantity : 99999"
|
:value="addNum" :delayed="100"></lxc-count>
|
</div>
|
</div>
|
<div v-else>
|
<lxc-count @handleCount="handleCountClick"
|
:max="goodBasicInfo.negativeStockType === '1' ? 99999 : stockInfo && stockInfo.length ? stockInfo[0].storageNum : 0"
|
:value="addNum" :delayed="100"></lxc-count>
|
</div>
|
</div>
|
<div :class="buttonDisable ? 'disabled-button-row' : ''" class="row-between coloum-center button-row mt20"
|
v-if="isChoose">
|
<div class="default-button button flex1 txt-center border-right" @click="openGuide('add')">加入购物车
|
</div>
|
<div class="default-button button flex1 txt-center " @click="openGuide('buy')">立即购买
|
</div>
|
</div>
|
<div v-else>
|
<button :disabled="buttonDisable" type="warn" class="params-button" @click="openGuide">{{ isAdd ? '确认添加' :
|
'立即购买'
|
}}</button>
|
</div>
|
</div>
|
</NewModal>
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
<!-- 商品下架时展示页面 -->
|
<OffProdComponet v-if="prodIsOff"></OffProdComponet>
|
<van-overlay :show="showOverlay" class-name="showOverlay">
|
<div class="wrapper">
|
<van-loading type="spinner" size="40px" />
|
</div>
|
</van-overlay>
|
</div>
|
</template>
|
|
<script>
|
import lxcCount from '@/components/lxc-count/index.vue'
|
import couponModal from './couponModal.vue'
|
import ActiveModal from './activeModal.vue'
|
import GoodContent from './goodContent.vue'
|
import Comment from './comment.vue'
|
import Collage from './collage.vue'
|
import NewModal from '@/components/new-modal/index.vue'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
import collageRule from './collageRule.vue'
|
import { closeLoading, showLoading } from '@/utils/loading.js'
|
import OffProdComponet from './offProdComponet.vue'
|
import openAppMixin from './openAppMixin.js'
|
|
import {
|
querySkuInfoById,
|
checkStock,
|
getActiveByProduct,
|
findGoodsDetialAllForUser,
|
findGoodsDetialAll
|
} from '@/api/goodsDetail/index.js'
|
export default {
|
components: {
|
collageRule,
|
guideOpen,
|
lxcCount,
|
NewModal,
|
Collage,
|
couponModal,
|
ActiveModal,
|
GoodContent,
|
Comment,
|
OffProdComponet
|
},
|
name: 'goodsDetail',
|
mixins: [openAppMixin],
|
data () {
|
return {
|
openStatus: false,
|
autoplay: false,
|
activeModalVis: false,
|
couponModal: false, // 优惠券模态框
|
scrollTop: 0,
|
navActive: '商品',
|
// paramsModal: false, //商品参数模态框
|
shopModal: false, // 添加购物车模态框
|
isAdd: false, // 是否是添加购物车
|
isChoose: false, // 是否是选择规格
|
chooseModal: false, // 选择规格模态框
|
shopSpuId: '', // 商品ID
|
shopSkuId: '', // 商品单品编号
|
|
addNum: 1, // 添加购物车的数量
|
disableBottom: '2',
|
goodBasicInfo: {
|
saleMaxPrice: 0
|
}, // 商品基本信息
|
goodParams: {}, // 商品参数
|
goodCategories: {}, // 商品品类集合，包含一二三级品类
|
bannerList: [], // 商品轮播图
|
goodServiceList: [], // 商品服务清单
|
goodProp: [], // 商品属性查询返回信息（单品属性信息、属性分组信息）
|
productCode: {
|
skuCodes: []
|
}, // 产品编码信息
|
stockInfo: [], // 商品库存信息
|
activeChooseItem: 0, // 商品为多种规格是默认选择的规格
|
checkShopSkuId: '', // 商品为多种规格是选择的商品
|
skuInfo: {
|
skuImages: [{
|
imgUrl: ''
|
}],
|
skuPrice: {
|
fixedPrice: {
|
salePrice: 0
|
}
|
}
|
}, // 单品信息
|
fileSizeString: '',
|
activeList: [], // 活动信息
|
// 限时购
|
timer: null,
|
couponData: [], // 商品可使用的优惠券
|
startSeconds: 0, // 开始秒数
|
endSeconds: 0, // 结束秒数
|
salePrice: '', // 活动价格
|
promotionRule: '', // 活动标签
|
limitTimeProdVo: {}, // 限购抢购活动对象
|
isStart: false, //
|
isEnd: false, //
|
path: '', // 保存图片路径
|
indexImg: 0,
|
limitActivity: [], // 限购活动
|
collageActivity: [], // 拼团活动
|
prodIsOff: false, // 商品是否下架
|
showOverlay: true // 是否展示遮罩
|
}
|
},
|
filters: {
|
// 保留两位小数
|
fillerToFixed (val) {
|
return val ? Number(val).toFixed(2) : '0.00'
|
}
|
},
|
computed: {
|
// 活动是否开始
|
isBegin () {
|
return this.showActivityData ? this.showActivityData.startCountDownSec <= 0 : false
|
},
|
// 当前是否是拼团活动
|
isCollage () {
|
return this.showActivityData && this.showActivityData.activityType === '6'
|
},
|
// 拼团活动-可拼的团
|
collageUserList () {
|
let arr = []
|
if (this.collageActivity.some(val => !!val)) {
|
this.collageActivity.forEach(val => {
|
if (val && val.orderAgglomerateRespVos && val.orderAgglomerateRespVos.length) {
|
arr = val.orderAgglomerateRespVos
|
}
|
})
|
}
|
return arr
|
},
|
buttonDisable () {
|
let flag = false
|
// 查询库存 判断库存
|
if (this.stockInfo && this.stockInfo.length && (!this.stockInfo[0].storageNum || this.stockInfo[0].stockStateDesc === '无货')) {
|
flag = true
|
}
|
// 有活动时 判断
|
if (this.showActivityData && this.showActivityData.startCountDownSec < 2 && this.showActivityData.endCountDownSec > 0) {
|
// 库存数量
|
const _ensalequantity = this.showActivityData.ensalequantity
|
// 最大购买数量 _maxbuyquantity为0或空 不限制数量
|
const _maxbuyquantity = this.showActivityData.maxbuyquantity
|
if (_ensalequantity && ((this.addNum <= _ensalequantity && this.addNum <= _maxbuyquantity) || !_maxbuyquantity)) {
|
flag = false
|
} else {
|
flag = true
|
}
|
}
|
return flag
|
},
|
// 当前展示的活动
|
showActivityData () {
|
const collageData = this.collageActivity[this.activeChooseItem]
|
const limitData = this.limitActivity[this.activeChooseItem]
|
return limitData ? { ...limitData, activityType: '4' } : (collageData ? { ...collageData, activityType: '6' } : null)
|
},
|
imgList () {
|
return !this.bannerList.length ? [] : this.bannerList.filter(value => value.imgUrl.indexOf('mp4') === -1)
|
},
|
videoList () {
|
return !this.bannerList.length ? [] : this.bannerList.filter(value => value.imgUrl.indexOf('mp4') > -1)
|
},
|
checkPrice () {
|
if (this.productCode.defaultSku) {
|
return this.productCode.defaultClientSku && this.productCode.defaultClientSku.skuPrice.fixedPrice
|
}
|
return this.productCode.clientSkuList && this.productCode.clientSkuList[this.activeChooseItem].skuPrice.fixedPrice
|
},
|
checkSku () {
|
if (this.productCode.defaultSku) {
|
return `${this.goodBasicInfo.spuName}, ${this.goodBasicInfo.spuUnit}`
|
}
|
return this.productCode.skuCodes.length &&
|
`${this.goodBasicInfo.spuName}, ${this.productCode.skuCodes[this.activeChooseItem].skuPropName}`
|
}
|
},
|
async created () {
|
this.shopSpuId = this.$route.query.shopSpuId
|
this.spuId = this.$route.query.spuId
|
this.shopSkuId = this.$route.query.shopSkuId
|
await this.getAllDetial()
|
if (this.prodIsOff) return
|
await this.getActByShopId() // 获取商品适用活动
|
},
|
mounted () {
|
window.addEventListener('scroll', this.getScroll)
|
},
|
beforeDestroy () {
|
window.removeEventListener('scroll', this.getScroll)
|
this.timer && clearInterval(this.timer)
|
},
|
methods: {
|
changeSwipe () {
|
const videoList = document.getElementsByClassName('swipe-video')
|
for (let i = 0; i < videoList.length; i++) {
|
videoList[i].pause()
|
}
|
},
|
// 图片预览
|
previewImg (list, index) {
|
this.$ImagePreview({
|
images: list.map(val => val.imgUrl),
|
startPosition: index
|
})
|
},
|
// 提示下载app
|
openGuide () {
|
// 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
|
// 通用协议地址
|
let commSchemeUrl = `uni.wlyxls.commodity.share://wlyxlslaunch?shopSpuId=${this.shopSpuId}&enable=true`
|
// 首次尝试打开 App 并跳转
|
if (this.$root.isIos) {
|
commSchemeUrl = `${process.env.VUE_APP_IOS_QRCODE_URL}/product_detail?shopSpuId=${this.shopSpuId}`
|
}
|
this.openApp(commSchemeUrl)
|
}
|
},
|
is_weixin () {
|
var ua = window.navigator.userAgent.toLowerCase()
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
return true
|
} else {
|
return false
|
}
|
},
|
getScroll () {
|
const goodContent = document.getElementById('good-content')
|
const commentContent = document.getElementById('comment-content')
|
const contentYdata = {
|
goods: goodContent.offsetTop - 50, // 垂直距离减去van-tab的高度
|
comment: commentContent.offsetTop
|
}
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
this.navActive = scrollTop < contentYdata.goods ? 'goods' : (scrollTop < contentYdata.comment - 600 ? 'detail' : 'comment')
|
},
|
changeNav (val) {
|
// 商品详情切换，垂直距离减去van-tab的高度
|
window.scrollTo({
|
top: val === 'goods' ? 0 : val === 'detail' ? document.getElementById('good-content').offsetTop - 50 : document.getElementById('comment-content').offsetTop,
|
behavior: 'smooth'
|
})
|
},
|
// 点击数字输入框
|
handleCountClick (e) {
|
this.addNum = e.value
|
this.checkIsStock({
|
num: e.value,
|
shopSkuId: this.checkShopSkuId,
|
shopId: this.goodBasicInfo.shopId
|
})
|
},
|
// 点击购物车各种规格属性
|
chooseGoods (obj, index) {
|
var params = {
|
num: this.addNum,
|
shopId: this.goodBasicInfo.shopId,
|
shopSkuId: obj.shopSkuId,
|
negativeStockType: this.goodBasicInfo.negativeStockType
|
}
|
this.checkShopSkuId = obj.shopSkuId
|
this.activeChooseItem = index
|
this.addNum = 1
|
this.indexImg = index
|
this.checkIsStock(params)
|
this._querySkuInfoById({
|
shopSkuId: obj.shopSkuId
|
})
|
},
|
// 关闭模态框处理
|
closeShopModal () {
|
// this.activeChooseItem = 0;
|
// this.addNum = 1;
|
this.shopModal = false
|
},
|
// 点击添加购物车/立即购买按钮
|
addShopCar (name) {
|
if (this.goodBasicInfo.state !== '1') return
|
this.shopModal = true
|
this.isAdd = name === 'add'
|
this.isChoose = name === 'choose'
|
// this.addNum = 1;
|
if (!this.skuInfo.shopSkuId) {
|
if (this.productCode.defaultShopSkuId) {
|
this.checkIsStock({
|
num: 1,
|
shopSkuId: this.productCode.defaultShopSkuId,
|
shopId: this.goodBasicInfo.shopId,
|
negativeStockType: this.goodBasicInfo.negativeStockType
|
})
|
this._querySkuInfoById({
|
shopSkuId: this.productCode.defaultShopSkuId
|
})
|
} else {
|
// this.activeChooseItem = 0;
|
this.checkIsStock({
|
num: 1,
|
shopSkuId: this.productCode.skuCodes[0].shopSkuId,
|
shopId: this.goodBasicInfo.shopId,
|
negativeStockType: this.goodBasicInfo.negativeStockType
|
})
|
this._querySkuInfoById({
|
shopSkuId: this.productCode.skuCodes[0].shopSkuId
|
})
|
}
|
} else {
|
this.checkIsStock({
|
num: 1,
|
shopSkuId: this.skuInfo.shopSkuId,
|
shopId: this.goodBasicInfo.shopId,
|
negativeStockType: this.goodBasicInfo.negativeStockType
|
})
|
this._querySkuInfoById({
|
shopSkuId: this.skuInfo.shopSkuId
|
})
|
}
|
},
|
// 查看是否有库存
|
async checkIsStock (params = {}) {
|
try {
|
const res = await checkStock([params])
|
this.stockInfo = res.data
|
this.checkShopSkuId = this.stockInfo[0].shopSkuId
|
} catch (e) {
|
// TODO handle the exception
|
}
|
},
|
async _querySkuInfoById (params = {}) {
|
try {
|
const res = await querySkuInfoById(params)
|
if (res.code === '0') {
|
this.skuInfo = res.data
|
}
|
} catch (e) {
|
// TODO handle the exception
|
}
|
},
|
// 获取商品详情
|
async getAllDetial () {
|
try {
|
const _this = this
|
showLoading(0)
|
const prams = {
|
shopSpuId: this.shopSpuId,
|
isLoadLimitTimePromotion: true // 是否加载限时购活动
|
}
|
const res = localStorage.getItem('access_token') ? await findGoodsDetialAllForUser(prams) : await findGoodsDetialAll(prams)
|
closeLoading(0)
|
this.showOverlay = false
|
// 判断商品是否下架，下架则不进行任何处理
|
if (res.data.spuBase.state !== '1') {
|
this.prodIsOff = true
|
return
|
}
|
this.disableBottom = '1'
|
this.bannerList = res.data.images
|
this.goodBasicInfo = res.data.spuBase
|
this.goodCategories = res.data.categories
|
this.goodServiceList = res.data.serviceList
|
this.goodParams = res.data.spuDetail
|
this.productCode = res.data.clientSkuCodeResult
|
this.clientSkuList = res.data.clientSkuCodeResult.clientSkuList
|
// 获取商品每个规格参加的活动
|
if (this.productCode.clientSkuList && this.productCode.clientSkuList.length) {
|
let flag = false
|
let flag1 = false
|
this.productCode.clientSkuList.forEach((item, index) => {
|
// 拼团活动
|
if (item.agglomerateProdVo && !item.agglomerateProdVo.endCountDownSec) {
|
this.$set(item.agglomerateProdVo, 'endCountDownSec', item.agglomerateProdVo.endTime)
|
this.$set(item.agglomerateProdVo, 'endCountDownSecStr', '')
|
this.$set(item.agglomerateProdVo, 'startCountDownSec', 0)
|
}
|
this.collageActivity.push(item.agglomerateProdVo)
|
if (item.agglomerateProdVo && !flag1) {
|
this.activeChooseItem = index
|
this.indexImg = index
|
flag1 = true
|
}
|
|
// 限购活动
|
this.limitActivity.push(item.limitTimeProdVo)
|
// 判断哪一种规格有活动
|
if (item.limitTimeProdVo && !flag) {
|
this.activeChooseItem = index
|
this.indexImg = index
|
flag = true
|
}
|
// 从活动页面点对应的规格商品 查看对应的规格商品
|
if (this.shopSkuId === item.shopSkuId) {
|
this.indexImg = index
|
this.activeChooseItem = index
|
}
|
})
|
} else {
|
const item = this.productCode.defaultClientSku
|
// 拼团活动
|
if (item.agglomerateProdVo && !item.agglomerateProdVo.endCountDownSec) {
|
this.$set(item.agglomerateProdVo, 'endCountDownSec', item.agglomerateProdVo.endTime)
|
this.$set(item.agglomerateProdVo, 'endCountDownSecStr', '')
|
this.$set(item.agglomerateProdVo, 'startCountDownSec', 0)
|
}
|
this.indexImg = 0
|
this.activeChooseItem = 0
|
this.collageActivity.push(item.agglomerateProdVo)
|
// 限购活动
|
this.limitActivity.push(item.limitTimeProdVo)
|
}
|
// 定时 活动时间
|
this.timer = setInterval(function () {
|
_this.handleTime()
|
}, 1000)
|
this.bannerList.map(v => {
|
if (v.imgUrl.indexOf('mp4') > -1) {
|
v.type = 'video'
|
} else {
|
v.type = 'image'
|
}
|
})
|
} catch (e) {
|
console.log(e)
|
}
|
},
|
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}`
|
},
|
handleTime () {
|
let flag = false
|
this.limitActivity.length && this.limitActivity.forEach(item => {
|
if (item) {
|
item.startCountDownSec -= 1
|
item.endCountDownSec -= 1
|
item.startCountDownSecStr = this.countTime(item.startCountDownSec)
|
item.endCountDownSecStr = this.countTime(item.endCountDownSec)
|
if (item.endCountDownSec <= 0 && !flag) {
|
flag = true
|
this.getAllDetial()
|
}
|
}
|
})
|
!flag && this.collageActivity.length && this.collageActivity.forEach(item => {
|
if (item) {
|
item.startCountDownSec -= 1
|
item.endCountDownSec -= 1
|
item.startCountDownSecStr = this.countTime(item.startCountDownSec)
|
item.endCountDownSecStr = this.countTime(item.endCountDownSec)
|
etAllDetial()
|
}
|
})
|
},
|
// 获取此商品适用活动
|
getActByShopId () {
|
getActiveByProduct({
|
productId: this.spuId
|
}).then(res => {
|
this.activeList = res.data
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "./index.scss";
|
|
.download-btn {
|
position: fixed;
|
top: 16px;
|
right: 0;
|
background: rgb(217, 39, 27);
|
color: #fff;
|
padding: 12px 28px;
|
font-size: 26px;
|
border-top-left-radius: 28px;
|
border-bottom-left-radius: 28px;
|
}
|
|
.showOverlay {
|
background: rgba(255, 255, 255, 0.9);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
