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="navbarTitleColor"
            :back-icon-color="navbarIconColor" :background="navbarBackground">
        </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="heightFix"></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="showReduceRulePopup" :bookInfo="product"></ServiceCard>

            <!-- Customer Service Float -->
            <FloatingDrag :width="126" :height="140" :initial-position="servicePosition"
                @position-change="handlePositionChange"
                @drag-start="handleDragStart"
                @drag-end="handleDragEnd">
                <!-- #ifdef MP-ALIPAY -->
                <button class="service-btn" @click="navigateToCustomerService">
                    <image src="/static/img/kf.png" class="cs-icon" mode="aspectFit"></image>
                </button>
                <!-- #endif -->
                <!-- #ifndef MP-ALIPAY -->
                <button class="service-btn" open-type="contact">
                    <image src="/static/img/kf.png" class="cs-icon" mode="aspectFit"></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" :hasArrivalNotice="product.hasArrivalNotice"
            @addCart="openSelectPopup" @notify="handleNotify" @collect="handleCollect"></FooterBar>

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

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

        <!-- Reduce Rule Popup -->
        <ReduceRulePopup ref="reduceRulePopup"></ReduceRulePopup>
    </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';
import ReduceRulePopup from '../components/reduce-rule-popup/index.vue';

export default {
    components: {
        Navbar,
        SelectGoodPopup,
        InfoCard,
        ServiceCard,
        ProductContent,
        FooterBar,
        FloatingDrag,
        SharePopup,
        ReduceRulePopup
    },
    data() {
        return {
            currentTab: 0,
            hasStock: false, // Toggle this to test stock status
            navbarBackground: 'transparent',
            navbarTitleColor: '#ffffff',
            navbarIconColor: '#ffffff',
            isDragging: false, // 是否正在拖动悬浮按钮
            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);
        }
    },
    onPageScroll(e) {
        if (this.isDragging) return; // 拖动悬浮按钮时禁止滚动
        if (e.scrollTop > 0) {
            this.navbarBackground = '#ffffff';
            this.navbarTitleColor = '#000000';
            this.navbarIconColor = '#000000';
        } else {
            this.navbarBackground = 'transparent';
            this.navbarTitleColor = '#ffffff';
            this.navbarIconColor = '#ffffff';
        }
    },
    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);
        },
        onNoticeChange(val) {
            this.$set(this.product, 'hasArrivalNotice', val);
        },
        handleNotify() {
            const isCancel = this.product.hasArrivalNotice === 1;
            const apiUrl = isCancel ? '/token/shop/user/noticeArrivalCancel' : '/token/shop/user/noticeArrival';

            uni.showLoading({ mask: true });
            uni.$u.http.post(apiUrl, { isbn: this.product.isbn }).then(res => {
                uni.hideLoading();
                if (res.code === 200) {
                    this.$set(this.product, 'hasArrivalNotice', isCancel ? 0 : 1);
                    uni.showToast({
                        title: isCancel ? '已取消到货通知' : '已订阅到货通知',
                        icon: 'success'
                    });
                } else {
                    uni.showToast({
                        title: res.msg || '操作失败',
                        icon: 'none'
                    });
                }
            }).catch(() => {
                uni.hideLoading();
            });
        },
        async onPopupConfirm(data) {
            console.log('Added to cart:', data);
            await this.$updateCartBadge();
            uni.showToast({
                title: '已加入购物车',
                icon: 'success',
                duration: 3000
            });
        },
        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();
            });
        },
        showReduceRulePopup() {
            this.$refs.reduceRulePopup.open();
        },
        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;
        },
        // 拖动开始
        handleDragStart() {
            this.isDragging = true;
        },
        // 拖动结束
        handleDragEnd() {
            this.isDragging = false;
        },
        //支付宝小程序的客服
        navigateToCustomerService() {
            uni.navigateTo({
                url: "/pages-mine/pages/customer-service",
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "reduce") {
            let reduceCode = uni.getStorageSync("reduceCodeShare");
            // 调用分享接口
            if (this.$u && this.$u.api && this.$u.api.goToReduceShareAjax) {
                this.$u.api.goToReduceShareAjax({
                    reduceCode: reduceCode
                });
            } else {
                uni.$u && uni.$u.http && uni.$u.http.get('/token/shop/order/goToShare', { reduceCode: reduceCode });
            }

            return {
                title: "快来帮我减钱买书吧！",
                path: "/pages/home/index?reduceCode=" + reduceCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        }
        return {
            title: `${this.product.bookName}`,
            path: `/pages-sell/pages/detail?isbn=${this.product.isbn}`,
            imageUrl: this.product.cover
        };
    }
}
</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 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: transparent;
    line-height: 1;
    border-radius: 0;

    &::after {
        border: none;
    }

    .cs-icon {
        width: 100rpx;
        height: 100rpx;
    }
}

.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>