hfysite/pages/solution/index.vue

<template>
  <div class="">
    <lucency-header :lang="lang" page-key="solution" />
    <item-banner :lang="lang" :title="`解决方案`" :sub-title="`专业,高效,稳定解决方案`"/>
    <solution-types :lang="lang" :type="type"></solution-types>
    <solution-list :lang="lang" :solution-list="solutions"></solution-list>
    <page-select :page="page" :count="nowCount" :total="nowTotal"></page-select>

    <default-footer :lang="lang"/>
  </div>
</template>

<script>
import qs from "qs"

import productBanner from "~/components/banner/productBanner";
import itemBanner from "~/components/banner/itemBanner";
import solutionTypes from "~/components/solutionTypes";
import solutionList from "~/components/solutionList";

import langMap from "~/map/langMap";
import handle from "~/until/handle";
import axios from "axios";

const pageLimit = 5;
export default {
  name: "solutionIndex",
  props:['uLang','pType','pKey','pSolution'],
  components:{
    productBanner,
    itemBanner,
    solutionTypes,
    solutionList
  },
  async asyncData(ctx){
    // ctx.searchProduct();
    const queryData = {};
    // console.log(ctx)
    queryData['key']=ctx.key;
    queryData['type']=ctx.type;
    queryData['page']=1;
    queryData['limit']=pageLimit;
    // 获取数据
    let url = 'http://szhfy.com.cn/api/searchSolution.php';
    let [err,res] = await handle(axios.post(
      url,
      qs.stringify(queryData)
    ));
    if(err){
      console.log(err);
      return {};
    }
    let result = res.data;
    if(result.rcode === 1){
      return {solutions:result.data}
    }else{
      console.error(result.msg);
      console.log(result);
      return {solutions:[]}
    }
  },
  data(){
    return {
      lang: this.uLang?this.uLang:langMap.lang.cn,
      type: this.pType?this.pType:'all',
      key: this.pKey?this.pKey:'',
      page: 1,
      nowCount: 199,
      nowTotal: 2,
      limit:pageLimit,
      solutions:this.pSolution?this.pSolution:[],
      pageSave: {

      }
    }
  },
  mounted() {
    this.$root.$on('changeLang',this.switchLang);
    this.$root.$on('changeSolutionType',this.selectType);
    this.$root.$on('changePage',this.changePageHandle);
    // this.$root.$on('changeProductType',this.selectType);
    const queryData = {};
    // console.log(ctx)
    queryData['key']=this.key;
    queryData['type']=this.type;
    queryData['page']=this.page;
    queryData['limit']=this.limit;
    let data = qs.stringify(queryData);
    this.loadPageData(data);
  },
  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
        }
      }
    },
    selectType(nextType){
      console.log(nextType)
      this.type = nextType;
      this.page = 1;
      this.searchSolution();
    },
    changePageHandle(nextPage){
      this.page = nextPage;
      this.searchSolution();
    },
    async searchSolution(){
      // const formData = new FormData();
      // formData.append('key',this.key);
      // formData.append('type',this.type);
      // formData.append('page',this.page);
      const queryData = {};
      // console.log(ctx)
      queryData['key']=this.key;
      queryData['type']=this.type;
      queryData['page']=this.page;
      queryData['limit']=this.limit;
      // 获取数据
      let url = '/api/searchSolution.php';
      let data = qs.stringify(queryData);
      let [err,res] = await handle(this.$axios.post(
        url,
        data
      ));
      if(err){
        console.log(err);
        return null;
      }
      let result = res.data;
      console.log(result)
      if(result.rcode === 1){
        this.solutions = result.data?result.data:[];
        this.loadPageData(data);
      }else{
        console.error(result.msg);
        console.log(result);
      }
    },
    async loadPageData(queryData){
      let url = '/api/getSolutionPage.php';
      // let
      let err,res;
      let pageData = null;
      if(this.pageSave[this.type] && this.pageSave[this.type][this.key]){
        pageData = this.pageSave[this.type][this.key]
      }else{
        [err,res] = await handle(this.$axios.post(
          url,
          queryData
        ));
        if(err){
          console.error(err);
        }else{
          let result = res.data;
          if(result.rcode === 1){
            pageData = result.data?result.data:{};
          }else{
            console.error(result.msg);
            console.log(result);
          }
        }
      }
      if (pageData){
        this.nowTotal = Math.ceil(pageData.count / pageData.limit);
        this.nowCount = pageData.count;
        if(!this.pageSave[this.type]){
          this.pageSave[this.type] = {}
        }
        if(!this.pageSave[this.type][this.key]){
          this.pageSave[this.type][this.key] = pageData;
        }
      }else{
        this.nowTotal = 1;
        this.nowCount = 1;
      }
    }
  }
}
</script>

<style scoped>

</style>