|
|
@@ -11,19 +11,27 @@
|
|
|
<!-- 轮播 -->
|
|
|
<goods-image-swiper :list="imageList" @click="onSwiperClick" @change="onSwiperChange"></goods-image-swiper>
|
|
|
<!-- 价格 -->
|
|
|
- <goods-price></goods-price>
|
|
|
+ <goods-price :productData="productInfo"></goods-price>
|
|
|
|
|
|
<!-- 活动优惠券 -->
|
|
|
- <goods-coupon-list></goods-coupon-list>
|
|
|
+ <goods-coupon-list
|
|
|
+ @click="couponVisiable = true"
|
|
|
+ :couponList="couponList"
|
|
|
+ v-if="couponList.length > 0"
|
|
|
+ ></goods-coupon-list>
|
|
|
|
|
|
<!-- 商品基本信息：商品名称 && 分享 && 标签 && 备注 && 服务-->
|
|
|
- <goods-info @share="onShare"></goods-info>
|
|
|
+ <goods-info @share="onShare" :productData="productInfo"></goods-info>
|
|
|
|
|
|
<!-- 参数 -->
|
|
|
- <view class="section"><goods-params-section></goods-params-section></view>
|
|
|
+ <view class="section" v-if="productInfo.parametersList.length > 0">
|
|
|
+ <goods-params-section :paramList="productInfo.parametersList"></goods-params-section>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 优惠券 -->
|
|
|
- <view class="section"><goods-coupon-section></goods-coupon-section></view>
|
|
|
+ <view class="section" v-if="couponList.length > 0">
|
|
|
+ <goods-coupon-section @click="couponVisiable = true" :couponList="couponList"></goods-coupon-section>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 锚点1 -->
|
|
|
<view id="anchor-1" class="anchor"></view>
|
|
|
@@ -31,8 +39,9 @@
|
|
|
<!-- 商品详情 -->
|
|
|
<view class="section detail">
|
|
|
<view class="title">商品详情</view>
|
|
|
+ <view v-if="productDetail && productDetail.detailInfo" v-html="productDetail.detailInfo"></view>
|
|
|
<!-- 空 -->
|
|
|
- <view class="section-empty">暂无商品详情</view>
|
|
|
+ <view class="section-empty" v-else>暂无商品详情</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 锚点2 -->
|
|
|
@@ -41,6 +50,7 @@
|
|
|
<!-- 服务项目 -->
|
|
|
<view class="section service-items">
|
|
|
<view class="title">服务项目</view>
|
|
|
+ <view v-if="productDetail && productDetail.serviceInfo" v-html="productDetail.serviceInfo"></view>
|
|
|
<!-- 空 -->
|
|
|
<view class="section-empty">暂无服务项目</view>
|
|
|
</view>
|
|
|
@@ -63,9 +73,6 @@
|
|
|
</template>
|
|
|
</goods-navbar>
|
|
|
|
|
|
- <!-- 安全区域 -->
|
|
|
- <cm-safe-area-bottom></cm-safe-area-bottom>
|
|
|
-
|
|
|
<!-- 活动价 -->
|
|
|
<goods-activity-popup
|
|
|
ref="activitypPopup"
|
|
|
@@ -75,9 +82,28 @@
|
|
|
></goods-activity-popup>
|
|
|
|
|
|
<!-- 领券购买 -->
|
|
|
- <goods-receive-buy-pupup ref="receiveBuyPopup" @detail="$refs.activitypPopup.open()"></goods-receive-buy-pupup>
|
|
|
+ <goods-receive-buy-popup
|
|
|
+ ref="receiveBuyPopup"
|
|
|
+ :productData="productInfo"
|
|
|
+ :currentCoupon="currentCoupon"
|
|
|
+ :navbarType="navbarTypeFlag"
|
|
|
+ @detail="$refs.activitypPopup.open()"
|
|
|
+ @submit="onSubmit"
|
|
|
+ ></goods-receive-buy-popup>
|
|
|
<!-- 分享弹窗 -->
|
|
|
<cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>
|
|
|
+
|
|
|
+ <!-- 优惠券弹窗 -->
|
|
|
+ <cm-coupon-popup
|
|
|
+ :list="couponList"
|
|
|
+ :visiable="couponVisiable"
|
|
|
+ :hasSafeArea="true"
|
|
|
+ @close="couponVisiable = false"
|
|
|
+ @couponClick="onCouponClick"
|
|
|
+ ></cm-coupon-popup>
|
|
|
+
|
|
|
+ <!-- 安全区域 -->
|
|
|
+ <cm-safe-area-bottom></cm-safe-area-bottom>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -86,41 +112,52 @@
|
|
|
import { navbarButtonGroup } from './config/config.js'
|
|
|
import { debounce } from '@/common/utils.js'
|
|
|
import { shareDataResult } from '@/common/share.helper.js'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
+import { fetchProductDetail } from '@/services/api/goods.js'
|
|
|
+import { fetchCouponListByProductId } from '@/services/api/coupon.js'
|
|
|
+import { mapGetters, mapActions } from 'vuex'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- jumpState: 0,
|
|
|
isRequest: true,
|
|
|
+ jumpState: 0,
|
|
|
+ productId: '',
|
|
|
// 轮播图
|
|
|
currentTab: 0,
|
|
|
- imageList: ['https://picsum.photos/1000/1000?random=1', 'https://picsum.photos/1000/1000?random=2'],
|
|
|
- navbarType: 'groupByCoupon',
|
|
|
leftButton: {},
|
|
|
rightButton: {},
|
|
|
- ladderList: [
|
|
|
- {
|
|
|
- buyPrice: '2000',
|
|
|
- buyNum: 1
|
|
|
- },
|
|
|
- {
|
|
|
- buyPrice: '2000',
|
|
|
- buyNum: 2
|
|
|
- },
|
|
|
- {
|
|
|
- buyPrice: '2000',
|
|
|
- buyNum: 3
|
|
|
- }
|
|
|
- ],
|
|
|
// 锚点列表
|
|
|
anchorList: [],
|
|
|
scorllTop: 0,
|
|
|
productInfo: {},
|
|
|
+ couponList: [],
|
|
|
+ couponVisiable: false,
|
|
|
+ navbarTypeFlag: '',
|
|
|
+ // 海报数据
|
|
|
posterData: {}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['userId'])
|
|
|
+ ...mapGetters(['userId']),
|
|
|
+ // 轮播图
|
|
|
+ imageList() {
|
|
|
+ return this.productInfo.imageList
|
|
|
+ },
|
|
|
+ // 活动价
|
|
|
+ ladderList() {
|
|
|
+ return this.productInfo.ladderList
|
|
|
+ },
|
|
|
+ // 商品详情
|
|
|
+ productDetail() {
|
|
|
+ return this.productInfo.productDetail
|
|
|
+ },
|
|
|
+ // 商品导航类型
|
|
|
+ navbarType() {
|
|
|
+ return this.generateNavbarType()
|
|
|
+ },
|
|
|
+ // 当前商品默认可以使的优惠券
|
|
|
+ currentCoupon() {
|
|
|
+ return this.couponList.find(coupon => coupon.couponId === this.productInfo.couponId)
|
|
|
+ }
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
this.scorllTop = e.scrollTop
|
|
|
@@ -135,11 +172,82 @@ export default {
|
|
|
}
|
|
|
return shareDataResult(shareData, this.productInfo.name, this.imageList[0])
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- this.initNavbarButton()
|
|
|
- setTimeout(() => (this.isRequest = false), 2000)
|
|
|
+ onLoad(options) {
|
|
|
+ this.productId = parseInt(options.productId)
|
|
|
+ this.jumpState = parseInt(options.jumpState)
|
|
|
+ this.fetchProductDetail()
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapActions('cart', ['addToCart']),
|
|
|
+
|
|
|
+ // 立即购买
|
|
|
+ buyNow(count) {
|
|
|
+ let productStp = {
|
|
|
+ productCount: count,
|
|
|
+ productId: this.productInfo.productId,
|
|
|
+ heUserId: this.productInfo.heUserId,
|
|
|
+ collageFlag: 0,
|
|
|
+ collageId: 0,
|
|
|
+ allCount: count
|
|
|
+ }
|
|
|
+ uni.setStorageSync('COMMIT_PRODUCT_INFO', productStp)
|
|
|
+ this.toCreateOrder()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 拼团购买
|
|
|
+ buyGroupNow(count) {
|
|
|
+ console.log('拼团购买')
|
|
|
+ let productStp = {
|
|
|
+ productCount: count,
|
|
|
+ productId: this.productInfo.productId,
|
|
|
+ heUserId: this.productInfo.heUserId,
|
|
|
+ collageFlag: 1,
|
|
|
+ collageId: 0,
|
|
|
+ allCount: count
|
|
|
+ }
|
|
|
+ uni.setStorageSync('COMMIT_PRODUCT_INFO', productStp)
|
|
|
+ this.toCreateOrder()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转到创建订单
|
|
|
+ toCreateOrder() {
|
|
|
+ this.$router.navigateTo('order/order-create?type=product')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品提交
|
|
|
+ onSubmit(count) {
|
|
|
+ console.log(count)
|
|
|
+ if (this.navbarTypeFlag === 'cart') {
|
|
|
+ this.addToCart({
|
|
|
+ productId: this.productInfo.productId,
|
|
|
+ productCount: count,
|
|
|
+ heUserId: this.productInfo.heUserId
|
|
|
+ })
|
|
|
+ return this.$refs.receiveBuyPopup.close()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.navbarTypeFlag === 'buy') {
|
|
|
+ if (this.productInfo.collageStatus > 0) {
|
|
|
+ this.buyGroupNow(count)
|
|
|
+ } else {
|
|
|
+ this.buyNow(count)
|
|
|
+ }
|
|
|
+ return this.$refs.receiveBuyPopup.close()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 优惠券点击事件
|
|
|
+ onCouponClick(couponData) {
|
|
|
+ const coupon = { ...couponData }
|
|
|
+ if (coupon.controlType === 'receive') {
|
|
|
+ const index = this.couponList.findIndex(item => item.couponId === coupon.couponId)
|
|
|
+ this.couponList.splice(index, 1)
|
|
|
+ coupon.controlType = 'buy'
|
|
|
+ coupon.couponStatus = 'received'
|
|
|
+ this.$set(this.couponList, index, coupon)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
// 分享事件
|
|
|
onShare() {
|
|
|
this.posterData = {
|
|
|
@@ -150,6 +258,7 @@ export default {
|
|
|
}
|
|
|
this.$refs.sharePopup.open()
|
|
|
},
|
|
|
+
|
|
|
// 轮播图事件
|
|
|
onSwiperClick() {
|
|
|
uni.previewImage({
|
|
|
@@ -158,23 +267,31 @@ export default {
|
|
|
loop: true
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
// 轮播图切换
|
|
|
onSwiperChange(current) {
|
|
|
this.current = current
|
|
|
},
|
|
|
- // 初始化导航按钮
|
|
|
+
|
|
|
+ // 初始化导航按钮文案
|
|
|
initNavbarButton() {
|
|
|
const navbarButton = navbarButtonGroup[this.navbarType]
|
|
|
- console.log(navbarButton)
|
|
|
+ // 拼团商品 + 其他商品
|
|
|
+ if (this.navbarType === 'groupByCoupon') {
|
|
|
+ navbarButton.left[1] = `￥${this.productInfo.normalCouponPrice.toFixed(2)}`
|
|
|
+ } else {
|
|
|
+ navbarButton.right[1] = `￥${this.productInfo.couponPrice.toFixed(2)}`
|
|
|
+ }
|
|
|
this.leftButton = navbarButton.left
|
|
|
this.rightButton = navbarButton.right
|
|
|
},
|
|
|
+
|
|
|
// 导航菜单右侧按钮点击
|
|
|
navbarRightClick(index) {
|
|
|
- if (this.navbarType !== 'normal') {
|
|
|
- this.$refs.receiveBuyPopup.open()
|
|
|
- }
|
|
|
+ this.navbarTypeFlag = index > 0 || this.productInfo.collageStatus > 0 ? 'buy' : 'cart'
|
|
|
+ this.$refs.receiveBuyPopup.open()
|
|
|
},
|
|
|
+
|
|
|
// 导航栏菜单左侧按钮点击
|
|
|
navbarLeftClick(index) {
|
|
|
if (index === 0) {
|
|
|
@@ -184,6 +301,7 @@ export default {
|
|
|
this.$router.navigateTo('cart/cart')
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
// 顶部tab切换
|
|
|
onTabChange(index) {
|
|
|
// const selector = `.product-detail #anchor-${index}`
|
|
|
@@ -193,6 +311,7 @@ export default {
|
|
|
duration: 300
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
// 初始化锚点
|
|
|
getAnchorList: debounce(
|
|
|
function() {
|
|
|
@@ -202,13 +321,13 @@ export default {
|
|
|
.boundingClientRect(data => {
|
|
|
this.anchorList = data
|
|
|
this.setCurrentTabIndex()
|
|
|
- console.log(this.anchorList)
|
|
|
})
|
|
|
.exec()
|
|
|
},
|
|
|
300,
|
|
|
false
|
|
|
),
|
|
|
+
|
|
|
// 设置tab索引
|
|
|
setCurrentTabIndex() {
|
|
|
this.anchorList.forEach((item, index) => {
|
|
|
@@ -216,6 +335,72 @@ export default {
|
|
|
this.currentTab = index
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取商品详情
|
|
|
+ async fetchProductDetail() {
|
|
|
+ try {
|
|
|
+ const res = await fetchProductDetail({ productId: this.productId, userId: this.userId })
|
|
|
+ this.productInfo = res.data
|
|
|
+ this.isRequest = false
|
|
|
+ this.productInfo.heUserId = this.jumpState === 1 ? 0 : this.userId
|
|
|
+ this.initNavbarButton()
|
|
|
+ this.fetchCouponList()
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ console.log('获取商品详情失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 生成导航菜单类型
|
|
|
+ generateNavbarType() {
|
|
|
+ const { couponStatus = 0, collageStatus = 0, activeStatus = 0, discountStatus = 0 } = this.productInfo
|
|
|
+ if ((activeStatus > 0 || discountStatus > 0) && couponStatus > 0) {
|
|
|
+ // (限时活动 / 活动价) + 优惠券
|
|
|
+ return 'activity'
|
|
|
+ } else if (collageStatus > 0) {
|
|
|
+ if (couponStatus > 0) {
|
|
|
+ // 拼团 + 优惠券
|
|
|
+ return 'groupByCoupon'
|
|
|
+ } else {
|
|
|
+ // 仅拼团
|
|
|
+ return 'group'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 无优惠券
|
|
|
+ return 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 创建优惠券
|
|
|
+ generateCoupon(coupon) {
|
|
|
+ const obj = Object.assign({}, coupon)
|
|
|
+ // 添加标题
|
|
|
+ if (coupon.noThresholdFlag > 0) {
|
|
|
+ obj.couponTitle = `减${coupon.couponAmount}`
|
|
|
+ } else {
|
|
|
+ obj.couponTitle = `满${coupon.touchPrice}减${coupon.couponAmount}`
|
|
|
+ }
|
|
|
+ // 添加优惠券状态
|
|
|
+ if (obj.useStatus === 0) {
|
|
|
+ obj.controlType = 'receive'
|
|
|
+ } else if (obj.useStatus === 1) {
|
|
|
+ obj.couponStatus = 'received'
|
|
|
+ obj.controlType = 'search'
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取商品可用优惠券
|
|
|
+ async fetchCouponList() {
|
|
|
+ try {
|
|
|
+ const res = await fetchCouponListByProductId({ productId: this.productId, userId: this.userId })
|
|
|
+ this.couponList = res.data.map(coupon => this.generateCoupon(coupon))
|
|
|
+ } catch (e) {
|
|
|
+ //TODO handle the exception
|
|
|
+ console.log(e)
|
|
|
+ console.log('获取优惠券列表失败')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -246,7 +431,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
.section-empty {
|
|
|
- height: 1200rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
}
|
yuwenjun1997