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

<template>
    <view class="rules-page" v-if="!loading">
        <!-- 折叠面板 -->
        <view class="collapse-container">
            <u-collapse :accordion="true" @change="changeHandler">
                <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">
                            <view class="number-circle">{{ index + 1 }}</view>
                            <text class="title-text">{{ item.subTitle }}</text>
                        </view>
                    </template>
                    <view class="collapse-content">
                        <u-parse :html="item.subContent" class="rich-text-style"></u-parse>
                        <!-- <rich-text :nodes="item.subContent" class="rich-text-style"></rich-text> -->
                    </view>
                </u-collapse-item>
            </u-collapse>
        </view>

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

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

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

<script>
export default {
    data() {
        return {
            pageTitle: "卖书规则",
            faqList: [], // FAQ列表数据
            loading: false,
            selectedIndex: -1,
        };
    },
    onLoad() {
        this.getFaqData();
    },
    methods: {
        // 获取FAQ数据
        getFaqData() {
            this.loading = true;
            this.$u.http
                .get("/token/getArticleTwo?code=faq")
                .then((res) => {
                    if (res.code === 200) {
                        // 根据接口返回的数据结构进行处理
                        this.pageTitle = res.data.title || "卖书规则";

                        // 根据接口返回的数据结构处理
                        if (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: 20rpx 30rpx;
    padding-bottom: 120rpx;
}

.rules-container {
    padding: 30rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
}

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

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

.number-circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: #38c148;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

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

.sub-content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
}

.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;
}
.collapse-content {
    color: #444444;
    font-size: 28rpx;
    padding: 10rpx 0;
    height: auto;
    overflow: visible;
}
.rich-text-style {
    width: 100%;
}
.rich-text-style img {
    max-width: 100%;
    height: auto !important;
    border-radius: 10rpx;
    margin-top: 10rpx;
    display: block;
}

/deep/ .u-collapse-item {
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: visible;
    background-color: #ffffff;
    padding: 0 30rpx;
}

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

/* 添加rich-text内容样式 */
/deep/ .rich-text-style {
    width: 100%;
}
</style>