VAVABUY/pages/user/help_center.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="帮助中心" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="tabs">
          <Tab :tabList="detail" :active="tabActive" keyName="name" size="24rpx" isTran @confirm="tabClick" />
        </view>
        <view class="question_list">
          <up-collapse :border="false" accordion :value="collapseValue" ref="collapseRef">
            <view class="_list" v-for="item, index in list" :key="index">
              <up-collapse-item :name="item.id" :border="false">
                <template #title>
                  <view class="_list_title">
                    {{ item.title }}
                  </view>
                </template>
                <view class="_list_cont">
                  <rich-text :nodes="item.content"></rich-text>
                </view>
              </up-collapse-item>
            </view>
          </up-collapse>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar"
import navMenu from '@/components/nav_menu';
import { ref, computed, nextTick } from "vue";
import { CONTENT_HELP } from "@/api"
import Tab from "@/components/tabs"

const collapseRef = ref(null);
const detail = ref([]);
const tabActive = ref(0);
const collapseValue = ref('');
const list = computed(() => {
  return detail.value.length && (detail.value[tabActive.value].lists || []);
})

const tabClick = (item, index) => {
  collapseValue.value = '';
  tabActive.value = index;
  nextTick(() => {
    collapseRef.value && collapseRef.value.init();
  })
}

const getDetail = async () => {
  try {
    const res = await CONTENT_HELP();
    detail.value = res.data;
  } catch (error) { }
}
getDetail();
</script>
<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .content {
    padding: 0 24rpx;
    overflow: hidden;

    .question_list {
      margin: 24rpx 0;
      background-color: var(--light);
      border-radius: 16rpx;

      /deep/ .u-collapse {
        .u-cell__left-icon-wrap {
          margin-right: 0;
        }

        .u-cell--clickable {
          background-color: transparent;
        }

        .u-cell__body {
          padding: 0;
          height: 96rpx;
          color: var(--text);
          .size(28rpx);
        }

        .u-collapse-item__content__text {
          padding: 0;
          padding-bottom: 20rpx;
        }
      }

      ._list {
        padding: 0 40rpx;
        border-bottom: 1px solid var(--bg);

        &:last-child {
          border-bottom: none;
        }


        ._list_cont {
          padding: 16rpx;
          background-color: #f7f8fa;
          border-radius: 16rpx;
          color: var(--text);
          .size(24rpx);

          /deep/ img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>