book-hi/pages-sell/pages/detail.vue

<template>
    <view class="detail-page">
        <!-- Top Background -->
        <view class="header-bg"></view>

        <!-- Custom Navbar -->
        <Navbar :title="product.bookName || '详情'" :titleSize="32" title-color="#fff" back-icon-color="#fff"
            background="transparent">
        </Navbar>

        <!-- Notification Bar -->
        <view class="notification-bar">
            <u-avatar size="40" src="https://img.yzcdn.cn/vant/cat.jpeg"></u-avatar>

            <text class="notif-text">微 ** 用户 购买了 《苏菲的世界》</text>
        </view>

        <view class="content-scroll">
            <!-- Book Cover Area -->
            <view class="cover-area">
                <image class="book-cover" :src="product.cover" mode="aspectFill"></image>
                <view class="share-btn" @click="openSharePopup">
                    <image src="/pages-sell/static/goods/icon-share.png" class="share-icon"></image>
                    <text>分享</text>
                </view>
            </view>

            <!-- Product Info Card -->
            <InfoCard :product="product"></InfoCard>

            <!-- Banner -->
            <view class="banner-area">
                <image src="/pages-sell/static/top-banner.png" class="banner-img" mode="widthFix"></image>
            </view>

            <!-- Service Info -->
            <ServiceCard @click="showServicePopup"></ServiceCard>

            <!-- Customer Service Float -->
            <FloatingDrag :width="120" :height="120" :initial-position="servicePosition"
                @position-change="handlePositionChange" :z-index="20">
                <!-- #ifdef MP-ALIPAY -->
                <button class="service-btn" @click="navigateToCustomerService">
                    <image src="/pages-sell/static/goods/icon-kefu.png" class="cs-icon" style="width: 100rpx;"
                        mode="widthFix"></image>
                </button>
                <!-- #endif -->
                <!-- #ifndef MP-ALIPAY -->
                <button class="service-btn" open-type="contact">
                    <image src="/pages-sell/static/goods/icon-kefu.png" class="cs-icon" style="width: 100rpx"
                        mode="widthFix"></image>
                </button>
                <!-- #endif -->
            </FloatingDrag>

            <!-- Tabs -->
            <view class="tabs-header">
                <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
                    <text>商品详情</text>
                    <view class="indicator" v-if="currentTab === 0"></view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
                    <text>相关推荐</text>
                    <view class="indicator" v-if="currentTab === 1"></view>
                </view>
            </view>

            <!-- Product Detail Content -->
            <ProductContent :currentTab="currentTab" :product="product" :tipsContent="tipsContent"
                :relatedBooksList="relatedBooksList" @bookClick="onBookClick">
            </ProductContent>

            <u-gap height="220"></u-gap>
        </view>

        <!-- Footer -->
        <FooterBar :hasStock="hasStock" :isCollect="product.isCollect" @addCart="openSelectPopup" @notify="handleNotify" @collect="handleCollect"></FooterBar>

        <!-- Select Popup -->
        <SelectGoodPopup ref="selectPopup" @confirm="onPopupConfirm"></SelectGoodPopup>

        <!-- Share Popup -->
        <SharePopup ref="sharePopup" :product="product"></SharePopup>
    </view>
</template>

<script>
    import Navbar from '@/components/navbar/navbar.vue'
    import SelectGoodPopup from '../components/select-good-popup/index.vue'
    import InfoCard from '../components/detail/info-card.vue'
    import ServiceCard from '../components/detail/service-card.vue'
    import ProductContent from '../components/detail/product-content.vue'
    import FooterBar from '../components/detail/footer-bar.vue'
    import FloatingDrag from "@/components/floating-drag.vue";
    import SharePopup from '../components/detail/share-popup.vue';

    export default {
        components: {
            Navbar,
            SelectGoodPopup,
            InfoCard,
            ServiceCard,
            ProductContent,
            FooterBar,
            FloatingDrag,
            SharePopup
        },
        data() {
            return {
                currentTab: 0,
                hasStock: false, // Toggle this to test stock status
                tipsContent: [
                    '印刷版次较多，二手图书封面、版次、原价等信息可能与商品介绍有差异，具体以收到实物为准；',
                    '二手图书性质特殊，不保证随新书赠送的光盘、海报、卡片等内容，仅支持图书质量问题退款，否则将扣除运费成本；',
                    '收到的图书如有质量问题，请于七天内联系客服处理，超出售后时效，不予处理。'
                ],
                relatedBooksList: [],
                product: {},
                servicePosition: {
                    left: "auto",
                    right: 0,
                    bottom: "300rpx",
                },
            }
        },
        onLoad(options) {
            const isbn = options.isbn || options.id; // Support both just in case
            if (isbn) {
                this.getBookDetail(isbn);
            } else {
                uni.showToast({
                    title: '参数错误',
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            }
        },
        methods: {
            getBookDetail(isbn) {
                uni.showLoading({ title: '加载中' });
                this.$u.api.getBookDetailAjax({ isbn }).then(res => {
                    uni.hideLoading();
                    if (res.code === 200) {
                        this.product = res.data;
                        this.hasStock = res.data.skuList.some(sku => sku.stockNum > 0);
                        if (res.data.recommendList) {
                            this.relatedBooksList = res.data.recommendList;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg || '获取详情失败',
                            icon: 'none'
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            switchTab(index) {
                this.currentTab = index;
            },
            openSelectPopup(sourceFrom) {
                this.$refs.selectPopup.open(this.product, sourceFrom);
            },
            handleNotify() {
                uni.showToast({
                    title: '已订阅到货通知',
                    icon: 'success'
                });
            },
            onPopupConfirm(data) {
                console.log('Added to cart:', data);
                uni.showToast({
                    title: '已加入购物车',
                    icon: 'success'
                });
                this.$updateCartBadge();
            },
            handleCollect() {
                if (!this.product || !this.product.isbn) {
                    return this.$u.toast('商品信息不完整');
                }
                const isCollect = this.product.isCollect;
                const api = isCollect ? this.$u.api.removeCollectAjax : this.$u.api.addCollectAjax;
                const params = isCollect ? [this.product.isbn] : this.product.isbn;

                uni.showLoading({ mask: true });
                api(params).then(res => {
                    uni.hideLoading();
                    if (res.code === 200) {
                        this.$set(this.product, 'isCollect', !isCollect);
                        this.$u.toast(isCollect ? '已取消收藏' : '收藏成功');
                    } else {
                        this.$u.toast(res.msg);
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            showServicePopup() {
                // Placeholder for service popup
            },
            onBookClick(book) {
                console.log('Book clicked:', book);
                uni.navigateTo({
                    url: '/pages-sell/pages/detail?id=' + encodeURIComponent(book.title)
                });
            },
            openSharePopup() {
                this.$refs.sharePopup.open();
            },
            // 处理位置变更
            handlePositionChange(position) {
                this.servicePosition = position;
            },
            //支付宝小程序的客服
            navigateToCustomerService() {
                uni.navigateTo({
                    url: "/pages-mine/pages/customer-service",
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .detail-page {
        min-height: 100vh;
        background-color: #f5f5f5;
        position: relative;
        padding-bottom: 100rpx;
    }

    .header-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 664rpx;
        background: linear-gradient(0deg, #4ED868 0%, #D1FFE5 100%);
        z-index: 0;
    }

    .notification-bar {
        position: fixed;
        top: 180rpx;
        /* Adjust based on navbar height */
        left: 30rpx;
        z-index: 10;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 30rpx;
        padding: 6rpx 20rpx 6rpx 6rpx;
        display: flex;
        align-items: center;

        .notif-text {
            font-size: 24rpx;
            color: #fff;
            margin-left: 10rpx;
        }
    }

    .content-scroll {
        position: relative;
        z-index: 1;
        height: 100vh;
    }

    .cover-area {
        position: relative;
        display: flex;
        justify-content: center;
        padding-top: 60rpx;
        padding-bottom: 40rpx;

        .book-cover {
            width: 360rpx;
            height: 360rpx;
            box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
        }

        .share-btn {
            position: absolute;
            right: 50rpx;
            top: 50rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10; // Ensure it's clickable

            .share-icon {
                width: 40rpx;
                height: 40rpx;
                margin-bottom: 4rpx;
            }

            text {
                font-size: 20rpx;
                color: #333;
            }
        }
    }

    .banner-area {
        background: #f5f5f5;
        padding: 20rpx;

        .banner-img {
            width: 100%;
            border-radius: 20rpx;
        }
    }

    .service-btn {
        padding: 0;
        margin: 0;
        background-color: transparent;
        line-height: 1;
        border-radius: 0;

        &::after {
            border: none;
        }
    }

    .tabs-header {
        display: flex;
        justify-content: center;
        /* Center the tabs */
        background: #F8F8F8;
        padding: 20rpx 0;
        /* Remove horizontal padding as we center items */

        .tab-item {
            padding: 0 30rpx;
            /* Add internal padding for hit area */
            position: relative;

            text {
                font-family: 'Source Han Sans SC';
                font-size: 30rpx;
                /* Assuming 30px from design tool = 30rpx */
                color: #666666;
                transition: all 0.3s;
            }

            &.active {
                text {
                    font-size: 30rpx;
                    /* Keep consistent size or adjust if 'big' effect needed, user said 30px */
                    font-weight: bold;
                    color: #333333;
                }

                .indicator {
                    position: absolute;
                    bottom: 2rpx;
                    /* Adjust vertical position */
                    left: 50%;
                    transform: translateX(-50%);
                    width: 120rpx;
                    /* Make it wider or relative to text? Usually fixed or text width. Let's try matching text width visually or a fixed width */
                    height: 8rpx;
                    /* Slightly thicker for gradient visibility */
                    background: linear-gradient(90deg, rgba(78, 217, 100, 0.1) 0%, #4ED964 100%);
                    border-radius: 4rpx;
                }
            }
        }
    }


</style>