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></goods-price>

        <!-- 活动优惠券 -->
        <goods-coupon-list></goods-coupon-list>

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

        <!-- 参数 -->
        <view class="section"><goods-params-section></goods-params-section></view>

        <!-- 优惠券 -->
        <view class="section"><goods-coupon-section></goods-coupon-section></view>

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

        <!-- 商品详情 -->
        <view class="section detail">
            <view class="title">商品详情</view>
            <!-- 空 -->
            <view class="section-empty">暂无商品详情</view>
        </view>

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

        <!-- 服务项目 -->
        <view class="section service-items">
            <view class="title">服务项目</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>

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

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

        <!-- 领券购买 -->
        <goods-receive-buy-pupup ref="receiveBuyPopup" @detail="$refs.activitypPopup.open()"></goods-receive-buy-pupup>
        <!-- 分享弹窗 -->
        <cm-share-popup ref="sharePopup" :data="posterData" type="product"></cm-share-popup>
    </view>
</template>

<script>
// 配置
import { navbarButtonGroup } from './config/config.js'
import { debounce } from '@/common/utils.js'
import { shareDataResult } from '@/common/share.helper.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            jumpState: 0,
            isRequest: true,
            // 轮播图
            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: {},
            posterData: {}
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    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() {
        this.initNavbarButton()
        setTimeout(() => (this.isRequest = false), 2000)
    },
    methods: {
        // 分享事件
        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]
            console.log(navbarButton)
            this.leftButton = navbarButton.left
            this.rightButton = navbarButton.right
        },
        // 导航菜单右侧按钮点击
        navbarRightClick(index) {
            if (this.navbarType !== 'normal') {
                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()
                        console.log(this.anchorList)
                    })
                    .exec()
            },
            300,
            false
        ),
        // 设置tab索引
        setCurrentTabIndex() {
            this.anchorList.forEach((item, index) => {
                if (item.bottom < 100) {
                    this.currentTab = index
                }
            })
        }
    }
}
</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 {
            height: 1200rpx;
            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>