hfysite/pages/support/index.vue

<template>
  <div>
    <lucency-header :lang="lang" :page-key="pageKey" :is-phone="isPhone"></lucency-header>
    <item-banner :title="'支持中心'" :sub-title="'需要我们为您提供些什么内容呢?'"></item-banner>
    <div class="conBox">
      <q-tab :headers="qTabs">
        <template v-slot:question>
          <support ></support>
        </template>
        <template v-slot:download>
         <downloads :downloads="downloadsType"></downloads>
        </template>
      </q-tab>
    </div>
    <default-footer :lang="lang"></default-footer>
    <site-bar wechat-src="/image/wechat.jpg"></site-bar>
  </div>
</template>

<script>
import qs from "qs";


import lucencyHeader from "~/components/header/lucencyHeader";
import langMap from "@/map/langMap";
import {handle} from "@/until/handle";
import {unescapeHtml} from "@/until/unescapeHtml";
import {isMediaView} from "@/until/mediaView";
import ItemBanner from "~/components/banner/itemBanner.vue";
import Downloads from "~/components/supportCom/downloads.vue";
import DefaultFooter from "~/components/footer/defaultFooter.vue";
import {apiMap} from "~/map/apiMap";

function getFileIcon(fileName){
  // 获取文件后缀
  if(!fileName){
    return 'unknownfile';
  }
  const fileSuffix = fileName.split('.').pop();
  switch (fileSuffix) {
    case 'doc':
      return 'doc';
    case 'docx':
      return 'doc';
    case 'pdf':
      return 'pdf';
    case 'png':
      return 'img';
    case 'jpg':
      return 'img';
    case 'jpeg':
      return 'img';
    default:
      return 'unknownfile';

  }
}
export default {
  name: "index",
  props:['uLang'],
  components: {DefaultFooter, Downloads, ItemBanner, lucencyHeader },
  head(){
    return {
      title: `合方圆-支持中心`,
      meta: [
        { hid: 'description', name: 'description', content: '合方圆支持中心' },
        { hid: 'keywords', name: 'keywords', content: '合方圆技术支持,合方圆科技技术支持,合方圆科技-下载中心' },
      ]
    }
  },
  data(){
    return {
      lang: this.uLang?this.uLang:langMap.lang.cn,
      pageKey: 'support',
      qTabs: [
        {
          text: '技术支持',
          content: '技术支持',
          key: 'question'
        },
        {
          text: '下载中心',
          content: '下载相关技术资料',
          key: 'download'
        },
      ],
      downloadsType: [
        {
          title: "G8100",
          key: 1,
          subItems: [
            {
              icon: "doc",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            },
            {
              icon: "pdf",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            },
            {
              icon: "img",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            }
          ]
        },
        {
          title: "枪机摄像头",
          key: 2,
          subItems: [
            {
              icon: "doc",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            },
            {
              icon: "pdf",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            },
            {
              icon: "img",
              title: "4G低功耗模块G8100B硬件手册",
              url: "https://gpscore.net/",
              add_time: "1486538906"
            }
          ]
        }
      ],
      isPhone: false
    }
  },

  mounted() {
    this.$root.$on('changeLang',this.switchLang);
    this.$root.$on('loadDownloadItem',this.loadDownloadItems);
    this.isPhone = isMediaView(0,1024);
    this.loadDownloads();
  },

  methods:{
    switchLang(nextLang){
      if(nextLang){
        this.lang = nextLang;
      }else{
        if(this.lang === langMap.lang.cn){
          this.lang = langMap.lang.en
        }else{
          this.lang = langMap.lang.cn
        }
      }
    },
    async loadDownloads(){
      let err, res;
      let url = apiMap.downloads.path;
      [err, res] = await handle(this.$axios.$get(url));
      if(err) {
        console.log(err);
        return 0;
      }
      if(res.code === 1){

        // this.downloadsType = res.data;
        this.downloadsType = res.data.map(item=>{
          item.key = item.id;
          return item;
        });
      }else{
        console.log(res.msg);
        console.log(res);
      }

    },
    async loadDownloadItems(downloadId){
      console.log(`获取下载项${downloadId}`)
      let err, res;
      const queryData = {
        id: downloadId
      };
      let url = apiMap.downloadItem.path;
      // let data = qs.stringify(queryData);
      url += `?id=&${downloadId}`;
      [err, res] = await handle(this.$axios.get(
        url,
      ));
      if(err){
        console.log(err);
        return null;
      }
      let result = res.data;
      console.log(result)
      if(result.code === 1){
        // 匹配对应的id
        let downloadItem = this.downloadsType.find(item => item.id === downloadId);
        let arr = result.data?result.data:[];
        downloadItem.subItems = arr.map(item=>{
          item.title = unescapeHtml(item.remark);
          item.icon = getFileIcon(item.files);
          item.src = item.files;
          return item;
        });
      }else{
        console.error(result.msg);
        console.log(result);
      }
    }
  },
}
</script>

<style scoped>

</style>