parking/src/views/frontend/helpcenter.vue

<template>
  <div style="background-color:white;height: 100%;">
    <div v-loading="datas.loading">
      <el-scrollbar>
        <div class="flex justify-flex-start">
          <div class="scrollbar-demo-item flex column center" v-for="(item,index) in datas.categoryList" :key="index"
            @click="onCategoryClick(index)">
            <div :class="{'font_bold':item.isSelect}">{{item.name}}</div>
            <div :class="{'line_active':item.isSelect}"></div>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar>
        <div style="padding-left:20px;padding-right:20px;" v-if="datas.detailList.length>0">
          <div class="mt-20" v-for="(item,index) in datas.detailList" :key="index" v-loading="datas.listLoading" @click="onGoDetail(item.id)">
            <div class="flex justify-space-between ">
              <div style="font-size:15px;color:#25272B">{{item.helpTitle}}</div>
              <div>
                <el-image :src="navIocn" style="width:20px;"></el-image>
              </div>
            </div>
            <div style="width:100%;height:1px;background-color:#F3F1F1;" class="mt-15"></div>
          </div>

        </div>
        <div class="flex center mt-100" v-else>
            <el-empty  image-size="100" description="暂无数据" />
        </div>

      </el-scrollbar>
    </div>
  </div>
</template>

<script  setup lang="ts">
import Vue, { reactive } from 'vue'
import { getHelpCategoryList, getInfoList } from '/@/api/frontend/helpcenter'
import navIocn from '/@/assets/list_nav_go_icon.svg'
import {useRouter} from 'vue-router'
const router = useRouter()

const datas = reactive({
    loading: false,
    listLoading:false,
    categoryList: [] as any,
    detailList: [],
})

getHelpCategoryList().then((res) => {
    if (res.data) {
        let count = 0
        res.data.map((item: any) => {
            let subItem = {
                name: '',
                id: '',
                isSelect: false,
            }

            if (count === 0) {
                subItem.isSelect = true
            } else {
                subItem.isSelect = false
            }

            subItem.id = item.id
            subItem.name = item.value
            datas.categoryList.push(subItem)
            count++
        })

        getList(res.data[0].id)
    }
})

const getList = (val: any) => {
    let params = {
        page: 1,
        limit: 200,
        typeId: val,
    }

    datas.listLoading=true
    getInfoList(params).then((res) => {
        datas.detailList = res.data.list
        datas.listLoading=false
    }).catch(()=>{
        datas.listLoading=false
    })


}

const onCategoryClick = (index: number) => {
    datas.categoryList.map((item:any) => {
        item.isSelect = false
    })
    datas.categoryList[index].isSelect = true
    getList(datas.categoryList[index].id)

}

const onGoDetail=(id:any)=>{

    let info={id:id}

    router.push({name: 'helpdetail', query: info})

}


</script>

  <style scoped>
.scrollbar-flex-content {
    display: flex;
}
.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    width: 80px;
    height: 30px;
    margin: 20px;
    text-align: center;
    border-radius: 4px;
    color: black;
}

.font_bold {
    font-weight: bold;
}

.line_active {
    width: 30px;
    height: 3px;
    background-color: #9c4dc5;
    border-radius: 3px;
}

.line_disable {
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 3px;
}
</style>

function getHelpCategoryList() {
  throw new Error('Function not implemented.')
}