caimei-applets-store/pages/views/goods/goods-detail.vue

<template>
    <view class="product-detail">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>

        <!-- 顶部导航 -->
        <goods-top-tabs @change="onTabChange" :current="currentTab" v-show="scorllTop > 100"></goods-top-tabs>

        <!-- 锚点0 -->
        <view id="anchor-0" class="anchor"></view>

        <!-- 轮播 -->
        <goods-image-swiper :list="imageList" @click="onSwiperClick" @change="onSwiperChange"></goods-image-swiper>
        <!-- 价格 -->
        <goods-price :productData="productInfo"></goods-price>

        <!-- 活动优惠券 -->
        <goods-coupon-list
            @click="couponVisiable = true"
            :couponList="couponList"
            v-if="couponList.length > 0"
        ></goods-coupon-list>

        <!-- 商品基本信息：商品名称 && 分享 && 标签 && 备注 && 服务-->
        <goods-info @share="onShare" :productData="productInfo"></goods-info>

        <!-- 参数 -->
        <view class="section" v-if="productInfo.parametersList.length > 0">
            <goods-params-section :paramList="productInfo.parametersList"></goods-params-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>

        <!-- 商品详情 -->
        <view class="section detail">
            <view class="title">商品详情</view>
            <view v-if="productDetail && productDetail.detailInfo" v-html="productDetail.detailInfo"></view>
            <!-- 空 -->
            <view class="section-empty" v-else>暂无商品详情</view>
        </view>

        <!-- 锚点2 -->
        <view id="anchor-2" class="anchor"></view>

        <!-- 服务项目 -->
        <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>

        <!-- 商品操作导航 -->
        <goods-navbar class="navbar" :class="navbarType" @rightClick="navbarRightClick" @leftClick="navbarLeftClick">
            <template v-slot:left>
                <view class="left-btn text1" v-text="leftButton[0]"></view>
                <view class="left-btn" v-if="leftButton[1]">
                    <text class="prefix">券后</text>
                    <text class="text2" v-text="leftButton[1]"></text>
                </view>
            </template>
            <template v-slot:right>
                <view class="right-btn text1" v-text="rightButton[0]"></view>
                <view class="right-btn" v-if="rightButton[1]">
                    <text class="prefix">券后</text>
                    <text class="text2" v-text="rightButton[1]"></text>
                </view>
            </template>
        </goods-navbar>

        <!-- 活动价 -->
        <goods-activity-popup
            ref="activitypPopup"
            :ladderList="ladderList"
            @open="$refs.receiveBuyPopup.close()"
            @close="$refs.receiveBuyPopup.open()"
        ></goods-activity-popup>

        <!-- 领券购买 -->
        <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>

<script>
// 配置
import { navbarButtonGroup } from './config/config.js'
import { debounce } from '@/common/utils.js'
import { shareDataResult } from '@/common/share.helper.js'
import { fetchProductDetail } from '@/services/api/goods.js'
import { fetchCouponListByProductId } from '@/services/api/coupon.js'
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            isRequest: true,
            jumpState: 0,
            productId: '',
            // 轮播图
            currentTab: 0,
            leftButton: {},
            rightButton: {},
            // 锚点列表
            anchorList: [],
            scorllTop: 0,
            productInfo: {},
            couponList: [],
            couponVisiable: false,
            navbarTypeFlag: '',
            // 海报数据
            posterData: {}
        }
    },
    computed: {
        ...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
        this.getAnchorList()
    },
    onShareAppMessage() {
        const shareData = {
            type: 1,
            productId: this.productInfo.productId,
            inviteUserId: this.userId,
            jumpState: this.jumpState
        }
        return shareDataResult(shareData, this.productInfo.name, this.imageList[0])
    },
    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 = {
                porductName: '肌本演绎360愉悦修护套组标准版防晒修复补水',
                productPrice: 500,
                productOriginPrice: 800,
                productImage: 'https://picsum.photos/1000/1000?random=1'
            }
            this.$refs.sharePopup.open()
        },

        // 轮播图事件
        onSwiperClick() {
            uni.previewImage({
                urls: this.imageList,
                current: this.current,
                loop: true
            })
        },

        // 轮播图切换
        onSwiperChange(current) {
            this.current = current
        },

        // 初始化导航按钮文案
        initNavbarButton() {
            const navbarButton = navbarButtonGroup[this.navbarType]
            // 拼团商品 + 其他商品
            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) {
            this.navbarTypeFlag = index > 0 || this.productInfo.collageStatus > 0 ? 'buy' : 'cart'
            this.$refs.receiveBuyPopup.open()
        },

        // 导航栏菜单左侧按钮点击
        navbarLeftClick(index) {
            if (index === 0) {
                this.$router.switchTab('home')
            }
            if (index === 2) {
                this.$router.navigateTo('cart/cart')
            }
        },

        // 顶部tab切换
        onTabChange(index) {
            // const selector = `.product-detail #anchor-${index}`
            const offset = this.anchorList[index].top
            uni.pageScrollTo({
                scrollTop: this.scorllTop + offset - 40 - 10,
                duration: 300
            })
        },

        // 初始化锚点
        getAnchorList: debounce(
            function() {
                const query = uni.createSelectorQuery().in(this)
                query
                    .selectAll('.anchor')
                    .boundingClientRect(data => {
                        this.anchorList = data
                        this.setCurrentTabIndex()
                    })
                    .exec()
            },
            300,
            false
        ),

        // 设置tab索引
        setCurrentTabIndex() {
            this.anchorList.forEach((item, index) => {
                if (item.bottom < 100) {
                    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('获取优惠券列表失败')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.product-detail {
    min-height: 100vh;
    padding-bottom: 100rpx;
    box-sizing: border-box;

    .section {
        margin: 24rpx 0;
        background-color: #fff;

        &.detail {
            padding: 24rpx;
        }

        &.service-items {
            padding: 24rpx;
        }

        .title {
            margin-bottom: 24rpx;
            font-size: 26rpx;
            font-weight: bold;
        }

        .section-empty {
            font-size: 24rpx;
            color: #999;
        }
    }

    .navbar {
        line-height: 1;
        text-align: center;
        &.group,
        &.normal {
            .prefix {
                display: none !important;
            }
        }

        .left-btn {
            color: #ff457b;
            &.text1 {
                font-size: 24rpx;
                margin-bottom: 4rpx;
            }
            .text2 {
                font-size: 24rpx;
                font-weight: bold;
            }

            .prefix {
                font-size: 20rpx;
            }
        }

        .right-btn {
            color: #fff;
            &.text1 {
                font-size: 24rpx;
                margin-bottom: 4rpx;
            }

            .text2 {
                font-size: 24rpx;
                font-weight: bold;
            }

            .prefix {
                font-size: 20rpx;
            }
        }
    }
}
</style>