dy-hu
11 months ago
5 changed files with 2346 additions and 31 deletions
-
13App.vue
-
68pages_category_page1/goodsModule/components/GoodActivityDetail.vue
-
549pages_category_page1/goodsModule/components/GoodActivityDetail2.vue
-
4pages_category_page1/goodsModule/goodsDetails.vue
-
1743pages_category_page1/goodsModule/goodsDetails2.vue
@ -0,0 +1,549 @@ |
|||
<!-- |
|||
* @FileDescription: 商品信息（包括活动信息、优惠券） |
|||
* @Author: kahu |
|||
* @Date: 2022/11/7 |
|||
* @LastEditors: kahu |
|||
* @LastEditTime: 2022/11/7 |
|||
--> |
|||
<template> |
|||
<view> |
|||
<!-- 商品详情 --> |
|||
<swiper |
|||
class="goodsImgswiper-box " |
|||
:indicator-dots="true" |
|||
:autoplay="true" |
|||
> |
|||
<swiper-item |
|||
v-for="(imgItem, index) in productInfo.images" |
|||
:key="index" |
|||
> |
|||
<image |
|||
class="goodsImg default-img u-skeleton-fillet" |
|||
:src="imgItem" |
|||
onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null" |
|||
></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
<!-- 分享 --> |
|||
<view |
|||
class="share-box flex-items-plus" |
|||
@click="shareMenuShow" |
|||
> |
|||
<image |
|||
class="share-img" |
|||
src="https://ceres.zkthink.com/static/images/shareBut.png" |
|||
></image> |
|||
<label class="fs24 mar-left-5">分享</label> |
|||
</view> |
|||
<view class="goodgDes-box flex-start flex-column"> |
|||
<view |
|||
v-if="skuSelect.activityType === 0" |
|||
class="priceBuyNum-box flex-display u-skeleton-fillet flex-sp-between mar-left-30" |
|||
> |
|||
<view> |
|||
<label class="fs36 font-color-C83732">¥</label> |
|||
<label class="fs36 fs-bold font-color-C83732 mar-left-10">{{ skuSelect.price || 0 }}</label> |
|||
<label class="fs24 font-color-999 discountsPriceLine mar-left-20">¥ |
|||
{{ skuSelect.originalPrice || 0 }}</label> |
|||
</view> |
|||
<label class="fs24 font-color-999">{{ productInfo.users || 0 }}{{$t('common.payticktip')}}</label> |
|||
</view> |
|||
<view |
|||
v-else-if="skuSelect.activityType === 8" |
|||
class="sceneMarketingBox" |
|||
> |
|||
<view class="flex-row-plus flex-items-plus mar-left-30 mar-top-10"> |
|||
<label class="fs30 font-color-FFF">¥</label> |
|||
<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label> |
|||
<label class="fs28 mar-left-10 discountsPriceLine font-color-CCC">¥ |
|||
{{ skuSelect.originalPrice || 0 }}</label> |
|||
</view> |
|||
<view class="sceneNameBox">{{ productInfo.sceneName }}</view> |
|||
</view> |
|||
<view |
|||
v-else |
|||
class="seckill-box" |
|||
> |
|||
<view |
|||
class="flex-items flex-sp-between" |
|||
v-if="skuSelect.activityType === 9 " |
|||
> |
|||
<view class="vipImg flex-items"> |
|||
<image |
|||
class="vip-icon" |
|||
src="https://ceres.zkthink.com/static/images/vipDetail.png" |
|||
mode="" |
|||
> |
|||
</image> |
|||
</view> |
|||
<view class="flex-row-plus flex-items-plus mar-left-30 mar-top-10"> |
|||
<label class="fs30 font-color-FFF">¥</label> |
|||
<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label> |
|||
<label class="fs28 mar-left-10 discountsPriceLine font-color-999">¥ |
|||
{{ skuSelect.originalPrice || 0 }} |
|||
</label> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-else |
|||
class="flex-items flex-row flex-sp-between" |
|||
> |
|||
<view class="flex-column-plus"> |
|||
<image |
|||
v-if="[2,4].includes(skuSelect.activityType)" |
|||
class="seckill-icon" |
|||
src="https://ceres.zkthink.com/static/images/seckillicon.png" |
|||
mode="" |
|||
></image> |
|||
<image |
|||
v-if="[3,5].includes(skuSelect.activityType)" |
|||
class="discount-icon" |
|||
src="https://ceres.zkthink.com/static/images/discounticon.png" |
|||
mode="" |
|||
></image> |
|||
<image |
|||
v-if="skuSelect.activityType === 1" |
|||
class="spell-icon" |
|||
src="https://ceres.zkthink.com/static/images/spellicon.png" |
|||
mode="" |
|||
></image> |
|||
<view class="flex-row-plus flex-items mar-top-10"> |
|||
<label class="fs30 font-color-FFF">¥</label> |
|||
<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label> |
|||
<label class="fs28 mar-left-10 discountsPriceLine font-color-999">¥ |
|||
{{ skuSelect.originalPrice || 0 }} |
|||
</label> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-if="[1,2,3,4,5].includes(skuSelect.activityType)" |
|||
class="countdown flex-column-plus" |
|||
> |
|||
<view v-if="timeActiveType"> |
|||
<label class="fs28">距离结束剩余</label> |
|||
<view class="flex-row-plus fs34 flex-items-plus mar-top-10"> |
|||
<view class="countdown-box flex-items-plus">{{ activeTimeObj.day }}</view> |
|||
<view class="font-color-999">天</view> |
|||
<view class="countdown-box flex-items-plus">{{ activeTimeObj.hour }}</view> |
|||
<view class="font-color-999">:</view> |
|||
<view class="countdown-box flex-items-plus">{{ activeTimeObj.min }}</view> |
|||
<view class="font-color-999">:</view> |
|||
<view class="countdown-box flex-items-plus">{{ activeTimeObj.sec }}</view> |
|||
</view> |
|||
</view> |
|||
<view v-else> |
|||
<label class="fs28 mar-right-20">即将开始：{{ skuSelect.startTime }}</label> |
|||
<!-- <view class="fs28 mar-right-20 mar-top-20">{{productInfo.startTime}}</view>--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="nameContainer"> |
|||
<view class="goodsName-box overflowNoDot mar-top-30 mar-left-30 u-skeleton-fillet"> |
|||
<label class="goodsName fs32 mar-left-20 ">{{ productInfo.productName }}</label> |
|||
</view> |
|||
<view |
|||
class="collectBox " |
|||
@click="handleCollect" |
|||
> |
|||
<image |
|||
v-if="productInfo.ifCollect === 1" |
|||
class="store-icon " |
|||
src="https://ceres.zkthink.com/static/images/shoucangActive1.png" |
|||
></image> |
|||
<image |
|||
v-else |
|||
class="store-icon" |
|||
src="https://ceres.zkthink.com/static/images/shoucang2x.png" |
|||
> |
|||
</image> |
|||
<label class="fs22">{{$t('common.collect')}}</label> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-if="markTools.length>0 || shopMarkTools.length>0" |
|||
class="activity-box mar-top-10" |
|||
@click="couponShowClick" |
|||
> |
|||
<label class="fs24 font-color-999">优惠</label> |
|||
<view class="activity-content mar-left-30 flex-items flex-sp-between flex-row"> |
|||
<view |
|||
class="fs20 overflow" |
|||
style="width: 500rpx;" |
|||
> |
|||
{{ productInfo.couponSplicing }} |
|||
</view> |
|||
<view class="flex-items"> |
|||
<label class="fs24 font-color-C5AA7B">领券</label> |
|||
<image |
|||
class="coupon-arrow" |
|||
src="https://ceres.zkthink.com/static/img/user/arrow.png" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 分享弹出 --> |
|||
<u-action-sheet |
|||
:list="shareObj.actionList" |
|||
v-model="shareObj.actionShow" |
|||
@click="handleShareSelect" |
|||
></u-action-sheet> |
|||
|
|||
<shareSpell |
|||
ref="shareSpell" |
|||
@shareCancel="shareCancel" |
|||
:url="shareObj.url" |
|||
:img="shareObj.image" |
|||
:title="shareObj.title" |
|||
> |
|||
</shareSpell> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import { TimeFormatting } from "../../../utils/timeUtil"; |
|||
import NET from "../../../utils/request"; |
|||
import API from "../../../config/api"; |
|||
import shareSpell from '../../../component/share.vue' |
|||
|
|||
export default { |
|||
name: "GoodActivityDetail", |
|||
components: {shareSpell}, |
|||
data() { |
|||
return { |
|||
// 活动倒计时 |
|||
timeDifference: 0, |
|||
activeTimeObj: { |
|||
day: '00', |
|||
hour: '00', |
|||
min: '00', |
|||
sec: '00' |
|||
}, |
|||
countdownInterval: null, |
|||
// 分享 |
|||
shareObj: { |
|||
url: '', |
|||
image: '', |
|||
title: '好友分享了一个很棒的商品', |
|||
actionList: [ |
|||
{text: '生成分享海报'}, |
|||
{text: '邀请好友'} |
|||
], |
|||
actionShow: false |
|||
}, |
|||
} |
|||
}, |
|||
props: { |
|||
// 商品信息 |
|||
productInfo: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
// 当前选中的sku |
|||
skuSelect: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
timeActiveType: { |
|||
type: Boolean, |
|||
default: () => false |
|||
}, |
|||
markTools: { |
|||
type: Array, |
|||
default: () => ([]) |
|||
}, |
|||
shopMarkTools: { |
|||
type: Array, |
|||
default: () => ([]) |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化活动倒计时 |
|||
* @param endTimestamp |
|||
*/ |
|||
handleGetCountDownNumber(endTimestamp) { |
|||
endTimestamp = endTimestamp.substring(0, 19).replace(/-/g, '/'); |
|||
// 与当前时间的时间差（秒） |
|||
const timeDifference = (new Date(endTimestamp).getTime() - new Date().getTime()) / 1000; |
|||
this.timeDifference = timeDifference |
|||
this.activeTimeObj = TimeFormatting(timeDifference) |
|||
this.handleCountDown() |
|||
}, |
|||
|
|||
/** |
|||
* 开始倒计时 |
|||
*/ |
|||
handleCountDown() { |
|||
if (this.countdownInterval) { |
|||
return |
|||
} |
|||
this.countdownInterval = setInterval(() => { |
|||
if (this.timeDifference <= 0) { |
|||
clearInterval(this.countdownInterval) |
|||
uni.showToast({ |
|||
title: "活动结束", |
|||
duration: 2000, |
|||
icon: 'none' |
|||
}) |
|||
this.$emit('activityEnd', 0) |
|||
} else { |
|||
this.timeDifference-- |
|||
this.activeTimeObj = TimeFormatting(this.timeDifference) |
|||
} |
|||
}, 1000) |
|||
}, |
|||
|
|||
/** |
|||
* 拉起父组件优惠券 |
|||
*/ |
|||
couponShowClick() { |
|||
this.$emit('couponClick') |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 收藏 |
|||
*/ |
|||
handleCollect() { |
|||
if (this.productInfo.ifCollect === 0) { |
|||
NET.request(API.collect, { |
|||
productId: parseInt(this.productInfo.productId) |
|||
}, 'POST').then(res => { |
|||
this.productInfo.ifCollect = 1 |
|||
uni.showToast({ |
|||
title: this.$t('common.collectsuccess'), |
|||
icon: "success" |
|||
}) |
|||
}) |
|||
} else { |
|||
NET.request(API.cancelCollect, { |
|||
ids: [this.productInfo.productId] |
|||
}, 'PUT').then(res => { |
|||
this.productInfo.ifCollect = 0 |
|||
uni.showToast({ |
|||
title: this.$t('common.cancelcollectsuccess'), |
|||
icon: "success" |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 海报分享 |
|||
*/ |
|||
sharePoster() { |
|||
let system = undefined |
|||
// #ifdef APP-PLUS |
|||
system = 1 |
|||
// #endif |
|||
|
|||
// #ifdef H5 |
|||
system = 3 |
|||
// #endif |
|||
|
|||
// #ifdef MP-WEIXIN |
|||
system = 2 |
|||
// #endif |
|||
|
|||
// #ifdef MP-ALIPAY |
|||
system = 4 |
|||
// #endif |
|||
uni.showLoading({ |
|||
mask: true, |
|||
title: '请稍候...' |
|||
}) |
|||
NET.request(API.getSharePic, { |
|||
productId: this.productInfo.productId, |
|||
shopId: this.productInfo.shopId, |
|||
skuId: this.skuSelect.skuId, |
|||
terminal: system |
|||
}, 'GET').then(res => { |
|||
uni.hideLoading() |
|||
// 推广商品 |
|||
uni.navigateTo({ |
|||
url: `/pages_category_page1/distributionModule/shareProduct?shareType=2&productImage=${ this.productInfo.images[0] }&shopId=${ this.productInfo.shopId }&productId=${ this.productInfo.productId }&skuId=${ this.skuSelect.skuId }&productName=${ this.productInfo.productName }&price=${ this.productInfo.price }&headImage=${ res.data.headImage }&shareName=${ res.data.name }&shareImg=${ res.data }` |
|||
}); |
|||
}).catch(res => { |
|||
uni.hideLoading() |
|||
}) |
|||
}, |
|||
shareMenuShow() { |
|||
this.shareObj.actionShow = true |
|||
}, |
|||
shareCancel() { |
|||
this.$refs.shareSpell.shareShow = false |
|||
}, |
|||
handleShareSelect(index) { |
|||
if (index === 0) { |
|||
this.sharePoster() |
|||
} else { |
|||
this.shareObj.url = '/pages_category_page1/goodsModule/goodsDetails?shopId=' + this.productInfo.shopId + '&productId=' + this.productInfo.productId + '&skuId=' + this.skuSelect.skuId |
|||
this.shareObj.image = this.productInfo.images[0] |
|||
this.shareObj.title = `【cereshop】好友分享了一个好物给您！${ this.productInfo.productName } ￥${ this.productInfo.price } ` |
|||
this.$refs.shareSpell.shareShow = true |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
scoped |
|||
> |
|||
|
|||
.goodsImgswiper-box { |
|||
width: 750upx; |
|||
height: 750upx; |
|||
|
|||
.goodsImg { |
|||
width: 750upx; |
|||
height: 750upx; |
|||
} |
|||
} |
|||
|
|||
.share-box { |
|||
width: 200upx; |
|||
height: 60upx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 30upx 0 0 30upx; |
|||
position: absolute; |
|||
top: 30upx; |
|||
right: 0; |
|||
z-index: 99; |
|||
|
|||
.share-img { |
|||
width: 36upx; |
|||
height: 36upx; |
|||
} |
|||
} |
|||
|
|||
.goodgDes-box { |
|||
background-color: #FFFFFF; |
|||
width: 100%; |
|||
padding-bottom: 25upx; |
|||
|
|||
.priceBuyNum-box { |
|||
width: 677upx; |
|||
margin-top: 30upx; |
|||
} |
|||
|
|||
.nameContainer { |
|||
display: flex; |
|||
|
|||
.goodsName-box { |
|||
width: 677upx; |
|||
height: 85upx; |
|||
|
|||
.img618-cion { |
|||
width: 70upx; |
|||
height: 36upx; |
|||
} |
|||
} |
|||
|
|||
.collectBox { |
|||
width: 80rpx; |
|||
margin: 0 30rpx 0 15rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.store-icon { |
|||
width: 48upx; |
|||
height: 48upx; |
|||
} |
|||
} |
|||
|
|||
.discounts-box { |
|||
margin-top: 20upx; |
|||
|
|||
.discounts-text { |
|||
margin-left: 10upx; |
|||
color: #FF7800; |
|||
background-color: #FFE4CC; |
|||
padding: 6upx 12upx; |
|||
border-radius: 4upx; |
|||
} |
|||
} |
|||
|
|||
.activity-box { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: flex-end; |
|||
border-top: 1upx solid #EDEDED; |
|||
|
|||
.activity-content { |
|||
width: 614upx; |
|||
padding-top: 20upx; |
|||
|
|||
.activity-text { |
|||
color: #FF7700; |
|||
border: 1upx solid #FF7700; |
|||
padding: 6upx 23upx; |
|||
} |
|||
|
|||
.coupon-arrow { |
|||
width: 16upx; |
|||
height: 24upx; |
|||
margin-left: 15upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.seckill-box { |
|||
width: 100%; |
|||
background: url("https://ceres.zkthink.com/static/images/storeTop_Img.png") no-repeat left top; |
|||
padding: 35rpx 30rpx; |
|||
|
|||
.seckill-icon { |
|||
width: 187rpx; |
|||
height: 41rpx; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.vip-icon { |
|||
width: 187rpx; |
|||
height: 41rpx; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.discount-icon { |
|||
width: 187rpx; |
|||
height: 41rpx; |
|||
background-size: contain; |
|||
} |
|||
|
|||
.spell-icon { |
|||
width: 182rpx; |
|||
height: 37rpx; |
|||
background-size: contain; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.countdown { |
|||
text-align: center; |
|||
|
|||
label { |
|||
text-align: center; |
|||
color: #CCCCCC; |
|||
} |
|||
} |
|||
|
|||
.countdown-box { |
|||
padding: 0 8rpx; |
|||
height: 48rpx; |
|||
color: #FFEBC4; |
|||
background-color: #525252; |
|||
margin: 10rpx; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
1743
pages_category_page1/goodsModule/goodsDetails2.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue