book-hi/pages-mine/pages/rules-for-sellbooks.vue

<template>
    <view class="rules-page">
        <!-- 头部选项卡 -->
        <view class="sticky-header">
            <view class="type-tabs-wrapper">
                <view class="type-tab" :class="{ active: currentTab === 0 }" @click="handleTabChange(0)">卖书答疑</view>
                <view class="type-tab" :class="{ active: currentTab === 1 }" @click="handleTabChange(1)">买书答疑</view>
            </view>
        </view>

        <!-- 折叠面板 -->
        <view class="collapse-container" v-if="!loading && faqList.length > 0">
            <u-collapse :accordion="true" @change="changeHandler" ref="collapse">
                <u-collapse-item
                    v-for="(item, index) in faqList"
                    :key="index"
                    :title="item.subTitle"
                    :index="index"
                    :arrow="true"
                    :name="index"
                    :class="{ 'active-item': selectedIndex == index }"
                >
                    <template #title>
                        <view class="custom-title">
                            <text class="title-text">{{ item.subTitle }}</text>
                        </view>
                    </template>
                    <view class="collapse-content">
                        <u-parse :html="item.subContent" class="rich-text-style"></u-parse>
                    </view>
                </u-collapse-item>
            </u-collapse>
        </view>

        <!-- 空状态 -->
        <view v-if="!loading && faqList.length === 0" class="empty-state">
            <u-empty mode="data" text="暂无数据"></u-empty>
        </view>

        <!-- 客服按钮 -->
        <view class="customer-service">
            <!-- #ifdef MP-ALIPAY -->
            <button class="service-btn" @click="navigateToCustomerService">
                <view class="service-title">在线客服</view>
                <view class="service-time">需要帮助?联系在线客服，每日8:00-24:00在线</view>
            </button>
            <!-- #endif -->
            <!-- #ifndef MP-ALIPAY -->
            <button class="service-btn" open-type="contact">
                <view class="service-title">在线客服</view>
                <view class="service-time">需要帮助?联系在线客服，每日8:00-24:00在线</view>
            </button>
            <!-- #endif -->
        </view>

        <!-- 加载中 -->
        <u-loading-page :loading="loading"></u-loading-page>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentTab: 0,
            faqList: [], // FAQ列表数据
            loading: false,
            selectedIndex: -1,
        };
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: "买卖答疑"
        });
        this.getFaqData();
    },
    methods: {
        handleTabChange(index) {
            if (this.currentTab === index) return;
            this.currentTab = index;
            this.selectedIndex = -1;
            this.getFaqData();
        },
        navigateToCustomerService() {
            uni.navigateTo({
                url: '/pages-mine/pages/customer-service'
            });
        },
        // 获取FAQ数据
        getFaqData() {
            this.loading = true;
            const code = this.currentTab === 0 ? 'faq' : 'faqShop';
            this.$u.http
                .get("/token/getArticleTwo?code=" + code)
                .then((res) => {
                    if (res.code === 200) {
                        if (res.data && res.data.subArticleList && res.data.subArticleList.length > 0) {
                            this.faqList = res.data.subArticleList;
                        } else {
                            this.faqList = [];
                        }
                    } else {
                        this.$u.toast(res.msg || "获取数据失败");
                    }
                })
                .catch((err) => {
                    console.error("获取FAQ数据失败", err);
                    this.$u.toast("获取数据失败");
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        // 折叠面板变化事件
        changeHandler(index) {
            console.log("当前打开的是第" + index + "个");
            this.selectedIndex = index;
        },
    },
};
</script>

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

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #f5f5f5;
}

.type-tabs-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 88rpx;
    background-color: #f5f5f5;
}

.type-tab {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #666;
    line-height: 88rpx;
    position: relative;
    background-color: transparent;
}

.type-tab.active {
    color: #38c148;
    font-weight: bold;
}

.type-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #38c148;
    border-radius: 4rpx;
}

.collapse-container {
    background-color: #ffffff;
    overflow: hidden;
}

.custom-title {
    display: flex;
    align-items: center;
    flex: 1;
}

.title-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
}

.collapse-content {
    color: #444444;
    font-size: 28rpx;
    padding: 20rpx 0;
    height: auto;
    overflow: visible;
}

.empty-state {
    margin-top: 100rpx;
}

.customer-service {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 10;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.service-btn {
    width: 100%;
    height: 90rpx;
    line-height: 32rpx;
    background-color: #4caf50;
    color: white;
    font-size: 36rpx;
    border-radius: 10rpx;
    text-align: center;
    margin-bottom: 15rpx;
    padding-top: 16rpx;
}

.service-time {
    font-size: 22rpx;
    color: #ffffff;
    text-align: center;
}

::v-deep .u-collapse-item {
    border-bottom: 1px solid #f0f0f0;
    overflow: visible;
    background-color: #ffffff;
    padding: 0 30rpx;
}

::v-deep .u-collapse-item:last-child {
    border-bottom: none;
}

::v-deep .active-item .u-collapse-body {
    height: fit-content !important;
}

::v-deep .rich-text-style {
    width: 100%;
}
::v-deep .rich-text-style img {
    max-width: 100%;
    height: auto !important;
    border-radius: 10rpx;
    margin-top: 10rpx;
    display: block;
}
</style>