first commit
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
<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 />
|
||||
<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>
|
||||
Reference in New Issue
Block a user