bandhuBuy-uniapp/src/pages/mine/helpCenter.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '%helpCenter.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'

import { qaGroupList, qaList } from '@/api/qa'
import i18n from '@/locale/index'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'HelpCenter',
})

const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets

const paging = ref<any>(null)
useZPaging(paging)

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

const groupList = ref<any[]>([])
const tab = ref<string>('')

const locale = computed(() => i18n.global.locale)

const shouldUseEn = computed(() => locale.value !== 'bn')

watch(locale, () => {
  paging.value?.reload()
})

function getGroupName(item: any) {
  return shouldUseEn.value ? (item.enName || '') : (item.bnName || '')
}

function getQaTitle(item: any) {
  return shouldUseEn.value ? (item.enTitle || '') : (item.bnTitle || '')
}

async function loadGroups() {
  const res = await qaGroupList()
  if (res.code === '200') {
    const list = (res.data || []) as any[]
    groupList.value = list
    if (!tab.value && list.length)
      tab.value = String(list[0].id)
  }
}

async function queryList(pageNo: number, pageSize: number) {
  if (!tab.value) {
    paging.value?.complete([])
    return
  }
  try {
    const res = await qaList({
      page: pageNo,
      size: pageSize,
      groupId: Number(tab.value),
    })
    if (res.code === '200') {
      paging.value.complete(res.data?.list || [])
    }
    else {
      paging.value.complete(false)
    }
  }
  catch {
    paging.value.complete(false)
  }
}
function handleTabClick() {
  paging.value?.reload()
}

function handleItemClick(item: any) {
  toPage({ url: '/pages/mine/helpCenterDetail', params: { id: item.id } })
}

onShow(async () => {
  if (!groupList.value.length) {
    await loadGroups()
  }
  else {
    paging.value?.reload()
  }
})
</script>

<template>
  <z-paging v-if="tab" ref="paging" v-model="dataList" :show-loading-more-no-more-view="false" use-page-scroll @query="queryList">
    <template #top>
      <view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
        <wd-tabs v-if="groupList.length && tab" v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always" @click="handleTabClick">
          <wd-tab v-for="g in groupList" :key="g.id" :name="String(g.id)" :title="getGroupName(g)" />
        </wd-tabs>
      </view>
    </template>

    <view class="pt-20rpx">
      <view v-for="item in dataList" :key="item.id" class="mb-20rpx bg-white px-22rpx py-20rpx" @click="handleItemClick(item)">
        <view class="flex items-center justify-between">
          <view class="flex-1 pr-16rpx text-28rpx line-height-[2]">
            {{ getQaTitle(item) }}
          </view>
          <wd-icon name="chevron-right" class="opacity-50" size="28rpx" />
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>

</style>