panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

商品详情页面布局调整修改

master
dy-hu 1 year ago
parent
66e13e1c5d
commit
f70e54495e
5 changed files with 2346 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      App.vue
  2. 68
      pages_category_page1/goodsModule/components/GoodActivityDetail.vue
  3. 549
      pages_category_page1/goodsModule/components/GoodActivityDetail2.vue
  4. 4
      pages_category_page1/goodsModule/goodsDetails.vue
  5. 1743
      pages_category_page1/goodsModule/goodsDetails2.vue

13
App.vue
View File

@ -599,6 +599,10 @@ uni-rich-text img {
color: #C83732; color: #C83732;
} }
.font-color-F54639 {
color: #F54639 ;
}
.font-color-3F { .font-color-3F {
color: #3F536E; color: #3F536E;
} }
@ -758,6 +762,15 @@ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
.u-drawer-content { .u-drawer-content {
//border-radius: 0 !important; //border-radius: 0 !important;
} }
.font-color-90919C {
color: #90919C;
}
.font-color-252744 {
color: #252744;
}
</style> </style>
<style> <style>
.uni-modal__btn_primary { .uni-modal__btn_primary {

68
pages_category_page1/goodsModule/components/GoodActivityDetail.vue
View File

@ -6,7 +6,7 @@
* @LastEditTime: 2022/11/7 * @LastEditTime: 2022/11/7
--> -->
<template> <template>
<view>
<view class="prod-box">
<!-- 商品详情 --> <!-- 商品详情 -->
<swiper <swiper
class="goodsImgswiper-box " class="goodsImgswiper-box "
@ -31,9 +31,9 @@
> >
<image <image
class="share-img" class="share-img"
src="https://ceres.zkthink.com/static/images/shareBut.png"
src="https://wechat.hnthee.com/ceres-local-file/image/prod_share.png"
></image> ></image>
<label class="fs24 mar-left-5">分享</label>
<label class="fs24 mar-left-10 font-color-252744">分享</label>
</view> </view>
<view class="goodgDes-box flex-start flex-column"> <view class="goodgDes-box flex-start flex-column">
<view <view
@ -41,12 +41,11 @@
class="priceBuyNum-box flex-display u-skeleton-fillet flex-sp-between mar-left-30" class="priceBuyNum-box flex-display u-skeleton-fillet flex-sp-between mar-left-30"
> >
<view> <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>
<label class="fs32 font-color-F54639 fs-bold">¥</label>
<label class="fs32 fs-bold font-color-F54639 mar-left-5">{{ skuSelect.price || 0 }}</label>
<label class="fs20 font-color-90919C discountsPriceLine mar-left-20">¥ {{ skuSelect.originalPrice || 0 }}</label>
</view> </view>
<label class="fs24 font-color-999">{{ productInfo.users || 0 }}{{$t('common.payticktip')}}</label>
<label class="fs20 font-color-90919C mar-right-50">{{ productInfo.users || 0 }}{{$t('common.payticktip')}}</label>
</view> </view>
<view <view
v-else-if="skuSelect.activityType === 8" v-else-if="skuSelect.activityType === 8"
@ -139,8 +138,8 @@
</view> </view>
</view> </view>
<view class="nameContainer"> <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 class="goodsName-box overflowNoDot mar-top-20 u-skeleton-fillet">
<label class="goodsName fs32">{{ productInfo.productName }}</label>
</view> </view>
<view <view
class="collectBox " class="collectBox "
@ -148,16 +147,15 @@
> >
<image <image
v-if="productInfo.ifCollect === 1" v-if="productInfo.ifCollect === 1"
class="store-icon "
src="https://ceres.zkthink.com/static/images/shoucangActive1.png"
class="store-icon"
src="https://wechat.hnthee.com/ceres-local-file/image/prod_collect_active.png"
></image> ></image>
<image <image
v-else v-else
class="store-icon" class="store-icon"
src="https://ceres.zkthink.com/static/images/shoucang2x.png"
src="https://wechat.hnthee.com/ceres-local-file/image/prod_collect_normal.png"
> >
</image> </image>
<label class="fs22">{{$t('common.collect')}}</label>
</view> </view>
</view> </view>
<view <view
@ -392,33 +390,44 @@ export default {
</script> </script>
<style <style
lang="scss"
scoped
lang="scss"
scoped
> >
.prod-box{
display: flex;
flex-direction: column;
background-color: #FFFFFF;
margin-left: 30rpx;
margin-right: 30rpx;
border-radius: 40rpx;
justify-content: center;
align-items: center;
}
.goodsImgswiper-box { .goodsImgswiper-box {
width: 750upx;
height: 750upx;
width: 580rpx;
height: 580rpx;
border-radius: 60rpx;
.goodsImg { .goodsImg {
width: 750upx;
height: 750upx;
width: 580rpx;
height: 580rpx;
border-radius: 60rpx;
} }
} }
.share-box { .share-box {
width: 200upx; width: 200upx;
height: 60upx; height: 60upx;
background-color: #FFFFFF;
border-radius: 30upx 0 0 30upx;
position: absolute; position: absolute;
top: 30upx; top: 30upx;
right: 0; right: 0;
z-index: 99; z-index: 99;
.share-img { .share-img {
width: 36upx;
height: 36upx;
width: 30rpx;
height: 30rpx;
} }
} }
@ -426,6 +435,8 @@ export default {
background-color: #FFFFFF; background-color: #FFFFFF;
width: 100%; width: 100%;
padding-bottom: 25upx; padding-bottom: 25upx;
border-bottom-right-radius: 40rpx;
border-bottom-left-radius: 40rpx;
.priceBuyNum-box { .priceBuyNum-box {
width: 677upx; width: 677upx;
@ -437,8 +448,7 @@ export default {
.goodsName-box { .goodsName-box {
width: 677upx; width: 677upx;
height: 85upx;
margin-left: 30rpx;
.img618-cion { .img618-cion {
width: 70upx; width: 70upx;
height: 36upx; height: 36upx;
@ -447,7 +457,7 @@ export default {
.collectBox { .collectBox {
width: 80rpx; width: 80rpx;
margin: 0 30rpx 0 15rpx;
margin: 12rpx 30rpx 0 15rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -455,8 +465,8 @@ export default {
} }
.store-icon { .store-icon {
width: 48upx;
height: 48upx;
width: 68rpx;
height: 68rpx;
} }
} }

549
pages_category_page1/goodsModule/components/GoodActivityDetail2.vue
View File

@ -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>

4
pages_category_page1/goodsModule/goodsDetails.vue
View File

@ -4,7 +4,7 @@
@scroll="handlePageScroll" @scroll="handlePageScroll"
> >
<global-loading/> <global-loading/>
<view class="">
<view style="background-color: #FAFAFA">
<!-- 拼团滚动--> <!-- 拼团滚动-->
<view class="news-box"> <view class="news-box">
<view class="news-bg"> <view class="news-bg">
@ -730,7 +730,7 @@ export default {
// 评价 // 评价
this.commentList = res.data.comments this.commentList = res.data.comments
// 宝贝详情 // 宝贝详情
this.sellDescList = res.data.text.replace(/\<img class=\"wscnph\"/gi, this.sellDescList = res.data.text.replace(/\<img class=\"wscnph\"/gi,
'<img') '<img')
.replace(/\<img style=\"display: block; margin-left: auto; margin-right: auto;\"/gi, .replace(/\<img style=\"display: block; margin-left: auto; margin-right: auto;\"/gi,

1743
pages_category_page1/goodsModule/goodsDetails2.vue
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save