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="scrollTop > 100"></goods-top-tabs>

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

        <!-- 轮播 -->
        <goods-image-swiper
            :list="imageList"
            @click="onSwiperClick"
            @change="onSwiperChange"
            :current="current"
            :autoplay="autoplay"
        ></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"
                style="overflow-x: hidden;"
            ></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"
            :couponTip="couponTip"
            :groupBuyFlag="groupBuyFlag"
            :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>

        <!-- 返回顶部 -->
        <tui-scroll-top :scrollTop="scrollTop" :bottom="80"></tui-scroll-top>

        <!-- 安全区域 -->
        <cm-safe-area-bottom></cm-safe-area-bottom>
    </view>
</template>

<script>
// 配置
import { generateActivityType, generatePriceType, generateNavbarButtonText } from './commons/helper.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 { queryStringify } from '@/common/utils.js'
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            isRequest: true,
            jumpState: 0,
            productId: '',
            // 轮播图
            currentTab: 0,
            current: 0,
            leftButton: {},
            rightButton: {},
            // 锚点列表
            anchorList: [],
            scrollTop: 0,
            productInfo: {},
            couponList: [],
            couponVisiable: false,
            navbarTypeFlag: '',
            // 海报数据
            posterData: {},
            collageId: '',
            groupBuyFlag: false, // 用户是否拼团购买
            autoplay: true,
        }
    },
    computed: {
        ...mapGetters(['userId']),
        // 轮播图
        imageList() {
            return this.productInfo.imageList
        },
        // 活动价
        ladderList() {
            return this.productInfo.ladderList
        },
        // 商品详情
        productDetail() {
            return this.productInfo.productDetail
        },
        // 商品导航类型
        navbarType() {
            return this.generateNavbarType()
        },
        // 当前商品默认可以使的优惠券
        couponTip() {
            if (this.productInfo.couponId) {
                const currentCoupon = this.couponList.find(coupon => this.productInfo.couponId === coupon.couponId)
                return currentCoupon?.couponTitle
            } else {
                return this.productInfo?.couponInfo?.split('|')[1]
            }
        }
    },
    onPageScroll(e) {
        this.scrollTop = 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()
    },
    onShow() {
        this.autoplay = true
    },
    onHide() {
        this.autoplay = false
    },
    methods: {
        ...mapActions('cart', ['addToCart']),

        // 商品提交
        onSubmit(count) {
            // 加入购物车
            if (this.navbarTypeFlag === 'cart') {
                this.addToCart({
                    productId: this.productInfo.productId,
                    productCount: count,
                    heUserId: this.productInfo.heUserId
                })
            }

            // 立即购买(提交商品信息)
            if (this.navbarTypeFlag === 'buy') {
                if (!this.userId) {
                    const pages = getCurrentPages()
                    const page = pages[pages.length - 1]
                    uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                    uni.redirectTo({ url: '/pages/authorize/login-custom' })
                    return
                }

                const submitData = {
                    productId: this.productInfo.productId, // 产品id
                    productCount: count, // 产品购买数量
                    heUserId: this.productInfo.heUserId, // 协销用户id
                    collageFlag: this.groupBuyFlag ? 1 : 0, // 是否拼团购买
                    collageId: this.collageId, // 拼团id
                    couponId: this.productInfo.couponId, // 默认使用优惠券id
                    allCount: count // 商品总数
                }
                uni.setStorageSync('COMMIT_PRODUCT_INFO', submitData)
                this.$router.navigateTo('order/order-create?type=product')
            }

            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() {
            const query = queryStringify({
                type: 1,
                productId: this.productInfo.productId,
                inviteUserId: this.userId,
                jumpState: this.jumpState
            })
            this.posterData = {
                porductName: this.productInfo.name,
                productPrice: this.productInfo.price,
                productOriginPrice:
                    this.productInfo.normalPrice === this.productInfo.price ? 0 : this.productInfo.normalPrice,
                productImage: this.productInfo.mainImage,
                query: query
            }
            this.$refs.sharePopup.open()
        },

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

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

        // 初始化导航按钮文案
        initNavbarButton() {
            const navbarButton = generateNavbarButtonText(this.productInfo)
            this.leftButton = navbarButton.left
            this.rightButton = navbarButton.right
        },

        // 导航菜单右侧按钮点击
        navbarRightClick(index) {
            this.navbarTypeFlag = index > 0 || this.productInfo.collageStatus > 0 ? 'buy' : 'cart'

            if (this.productInfo.activityType === 'group') {
                this.groupBuyFlag = index > 0
            }

            this.$refs.receiveBuyPopup.open()
        },

        // 导航栏菜单左侧按钮点击
        navbarLeftClick(index) {
            if (index === 0) {
                this.$router.switchTab('home')
            }
            if (index === 2) {
                if (!this.userId) {
                    const pages = getCurrentPages()
                    const page = pages[pages.length - 1]
                    uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                    uni.redirectTo({ url: '/pages/authorize/login-custom' })
                    return
                }
                this.$router.navigateTo('cart/cart')
            }
        },

        // 顶部tab切换
        onTabChange(index) {
            // const selector = `.product-detail #anchor-${index}`
            const offset = this.anchorList[index].top
            uni.pageScrollTo({
                scrollTop: this.scrollTop + 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 = this.generateProductInfo(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 (collageStatus > 0) {
                if (couponStatus === 1) {
                    return 'groupWithCoupon' // 拼团券后价
                } else {
                    return 'group' // 拼团价
                }
            }
            // 限时活动
            else if (discountStatus > 0 || activeStatus > 0) {
                if (couponStatus === 1) {
                    return 'activityWithCoupon' // 券后价
                } else {
                    return 'normal' // 限时活动价格
                }
            }
            // 无活动价
            else {
                if (couponStatus === 1) {
                    return 'normalWithCoupon' // 普通券后价
                } else {
                    return 'normal' // 普通价
                }
            }
        },

        // 创建优惠券
        generateCoupon(coupon) {
            const obj = Object.assign({}, coupon)
            // 添加标题
            if (coupon.noThresholdFlag > 0) {
                obj.couponTitle = `减￥${coupon.couponAmount.toFixed(2)}`
            } else {
                obj.couponTitle = `满￥${coupon.touchPrice.toFixed(2)}减￥${coupon.couponAmount.toFixed(2)}`
            }
            // 添加优惠券状态
            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('获取优惠券列表失败')
            }
        },

        // 处理商品信息
        generateProductInfo(product = {}) {
            // 商品活动类型
            product.activityType = generateActivityType(product)
            product.priceType = generatePriceType(product)
            return product
        }
    }
}
</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>