cheflinkuser/src/pages-user/pages/faqs/index.vue

<script setup lang="ts">
import { appHelpCenterListGet } from "@/service";
import { throttle } from "throttle-debounce";
import Config from "@/config";
import Fuse from "fuse.js";

const { t } = useI18n();
const selected = ref<string[]>([]);
const keyword = ref<string>("");
const isSearch = ref(false);
const searchResult = ref([]);

const dataList = ref<any[]>([]);

function handleClearSearch() {
  isSearch.value = false;
}

function search(event: any) {
  if (!event.value) {
    isSearch.value = false;
  } else {
    isSearch.value = true;
    const fuse = new Fuse(dataList.value, {
      threshold: 0.2,
      keys: ["title", "content"],
    });
    searchResult.value = fuse.search(event.value);
    selected.value = [];
    console.log("searchResult.value", searchResult.value);
  }
}

const handleSearch = throttle(Config.throttleShortTime, search, {
  noLeading: true,
  noTrailing: false,
});


onLoad(()=> {
  appHelpCenterListGet({}).then(res=> {
    console.log(res)
    if(res.data && res.data.length> 0) {
      dataList.value = res.data.map(item=> {
        return {
          id: item.id,
          title: item.question,
          content: item.answer
        }
      })
    }
  })
})
</script>

<template>
  <view>
    <z-paging
      :auto="false"
    >
      <template #top>
        <navbar :title="t('pages.mine.help')" />
        <view class="px-30rpx pb-42rpx">
          <!-- <view class="text-46rpx text-#333 font-bold lh-46rpx mb-36rpx mt-10rpx">{{ t("pages.mine.help") }}</view> -->
          <view
            class="flex items-center h-88rpx px-30rpx bg-#F2F3F6 rounded-88rpx box-border"
          >
            <image class="w-28rpx h-28rpx shrink-0" src="@img/chef/100222.png"></image>
            <wd-input
              no-border
              focus-when-clear
              type="text"
              v-model="keyword"
              :maxlength="120"
              :placeholder="t('common.search')"
              placeholderStyle="font-size: 30rpx;line-height: 42rpx;color: #4A4A4A;"
              custom-class="flex-1 ml-16rpx !bg-transparent"
              @clear="handleClearSearch"
              @input="handleSearch"
            />
          </view>
        </view>
      </template>
      <template v-if="isSearch">
        <view class="py-4rpx bg-#fff px-30rpx" v-if="searchResult.length">
          <wd-collapse v-model="selected">
            <wd-collapse-item
                :name="item.id"
                custom-class="!px-0"
                v-for="item in searchResult"
                :key="item.id"
            >
              <template #title="{ expanded, disabled, isFirst }">
                <view class="flex items-center justify-between">
                  <view class="flex items-center">
                    <image
                        class="w-32rpx h-32rpx shrink-0 mr-14rpx"
                        src="@img/chef/102.png"
                    ></image>
                    <text
                        class="text-32rpx text-#000 lh-32rpx transition-all"
                        :class="[expanded ? '' : 'line-clamp-1']"
                    >{{ item.item.title }}
                    </text>
                  </view>
                  <image
                      class="shrink-0 ml-12rpx w-30rpx h-30rpx transition-all ease-out"
                      :class="[expanded && 'rotate-180']"
                      src="@img/chef/101.png"
                  ></image>
                </view>
              </template>
              <view
                  class="text-28rpx text-#666 lh-36rpx whitespace-pre-wrap"
              >
                <mp-html
                    selectable
                    :preview-img="false"
                    :show-img-menu="false"
                    :tag-style="{
                  div: 'white-space: pre-wrap;',
                  p: 'white-space: pre-wrap;',
                  img: 'width:100%;max-width: 100%;height:auto;',
                }"
                    :content="item.item.content"
                ></mp-html>
              </view>
            </wd-collapse-item>
          </wd-collapse>
        </view>
        <view class="px-24rpx" v-show="!searchResult.length">
          <z-paging-empty-view
            :empty-view-fixed="false"
            empty-view-img="/static/images/16033@2x.png"
            :empty-view-img-style="{
              width: '450rpx',
              height: '450rpx',
            }"
            :empty-view-text="t('common.empty-view-text')"
            :empty-view-title-style="{
              marginTop: '24rpx',
            }"
          />
        </view>
      </template>
      <view v-else-if="dataList.length" class="px-30rpx">
        <wd-collapse v-model="selected">
          <wd-collapse-item
            :name="item.id"
            custom-class="!px-0"
            v-for="item in dataList"
            :key="item.id"
          >
            <template #title="{ expanded, disabled, isFirst }">
              <view class="flex items-center justify-between">
                <view class="flex items-center">
                  <image
                    class="w-32rpx h-32rpx shrink-0 mr-14rpx"
                    src="@img/chef/102.png"
                  ></image>
                  <text
                    class="text-32rpx text-#000 lh-32rpx transition-all"
                    :class="[expanded ? '' : 'line-clamp-1']"
                    >{{ item.title }}
                  </text>
                </view>
                <image
                  class="shrink-0 ml-12rpx w-30rpx h-30rpx transition-all ease-out"
                  :class="[expanded && 'rotate-180']"
                  src="@img/chef/101.png"
                ></image>
              </view>
            </template>
            <view
              class="text-28rpx text-#666 lh-36rpx whitespace-pre-wrap"
            >
              <mp-html
                selectable
                :preview-img="false"
                :show-img-menu="false"
                :tag-style="{
                  div: 'white-space: pre-wrap;',
                  p: 'white-space: pre-wrap;',
                  img: 'width:100%;max-width: 100%;height:auto;',
                }"
                :content="item.content"
              ></mp-html>
            </view>
          </wd-collapse-item>
        </wd-collapse>
      </view>
    </z-paging>
  </view>
</template>
<style>
page {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
:deep(.wd-collapse) {
  .wd-collapse-item::after {
    background: transparent !important;
  }

  .wd-collapse-item__header {
    padding: 18rpx 0  !important;
  }
  .wd-collapse-item__body {
    padding: 0 !important;
  }
  .wd-collapse-item__header::after {
    background: transparent !important;
  }

  .wd-collapse-item__body {
    padding-top: 0 !important;
  }
}
</style>