hfysite/pages/product/index.vue

<script>
import langMap from "@/map/langMap";
import productBanner from "@/components/banner/productBanner";
import qs from "qs"
import axios from "axios"
import {handle} from "~/until/handle";
import {isMediaView} from "@/until/mediaView";
import LucencyHeader from "~/components/header/lucencyHeader.vue";
import DefaultFooter from "~/components/footer/defaultFooter.vue";
import {apiMap, baseUrl} from "~/map/apiMap";
import {isEmpty} from "@/until/typeTool";
export default {
  name: "index",
  props:[
    'uLang','pType','pKey','pProduct','pPageData',
    'pSeoKey','pSeoDescription'
  ],
  components:{
    DefaultFooter,
    LucencyHeader,
    productBanner
  },
  head(){
    let headInfo = {
      meta: []
    }
    if (this.title)
    {
      headInfo.title = this.title;
    }
    if (this.seoDescription)
    {
      headInfo.meta.push({
        hid: "description",
        name: "description",
        content: this.seoDescription,
      })
    }
    if(this.seo_key)
    {
      headInfo.meta.push({
        hid: "keywords",
        name: "keywords",
        content: this.seo_key,
      })
    }
    return headInfo
  },
  async asyncData(ctx){
    // 获取数据
    let url = baseUrl + apiMap.searchProduct.path;
    url += `?type=all&p=1`;
    let [err,res] = await handle(axios.get( url));
    if(err){
      console.log(err);
      return {};
    }
    let result = res.data;

    // 获取页面的seo优化关键字, 直接访问首页不需要获取对应的seo关键字
    let types = ctx.store.getters.pTypes;
    let title = "合方圆-产品中心"
    let seo_key = "合方圆,合方圆科技,深圳合方圆";
    let seoDescription = "合方圆科技产品中心,可选择4g,或者poe摄像头.满足多种需求,以及定制化需求";


    // 获取seo 数据
    if(result.code === 1){
      let pageData = {
        limit: result.limit,
        page: result.page,
        total: result.total,
        count: result.count,
      }
      return {
        title,
        seo_key,
        seoDescription,
        products: result.data,
        basePageData: pageData,
      }
    }else{
      console.error(result.msg);
      console.log(result);
      return {
        products:[],
        title,
        seo_key,
        seoDescription
      }
    }
  },
  data(){
    return {
      lang: this.uLang?this.uLang:langMap.lang.cn,
      title: '',
      seo_key: '',
      seoDescription: '',
      type: this.pType?this.pType:'all',
      key: this.pKey?this.pKey:'',
      page: 1,
      nowCount: 199,
      nowTotal: 2,
      products: this.pProduct?this.pProduct:[],
      basePageData: {},
      pageSave: {},
      isPhone: false,
      types: this.$store.getters.productTypes
    }
  },
  beforeMount() {
    let pageData;
    if (this.pPageData){
      this.basePageData = this.pPageData
    }
    this.type = this.pType?this.pType:'all';
    pageData = this.basePageData;
    this.updatePageData(pageData);
  },
  mounted() {
    this.isPhone = isMediaView(0,1024);
    this.$root.$on('changeLang',this.switchLang);
    this.$root.$on('searchProductKey',this.changeProductKeyHandle);
    this.$root.$on('changeType',this.selectType);
    this.$root.$on('changePage',this.changePageHandle);
    // this.loadData();
  },
  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.searchProduct();
    },
    changeProductKeyHandle(key){
      if(this.key === key){
        return 0;
      }
      this.key = key;
      this.page = 1;
      this.searchProduct();
    },
    changePageHandle(nextPage){
      this.page = nextPage;
      this.searchProduct();
    },
    async searchProduct(){
      // 获取数据
      let url = apiMap.searchProduct.path;

      url += `?key=${this.key}&type=${this.type}&p=${this.page}`
      let [err,res] = await handle(axios.get(url));
      if(err){ console.log(err); return null; }
      let result = res.data;
      if(result.code === 1){
        this.products = result.data;
        let pageData;
        if(result.total){
          // 更新页面信息
          pageData = {
            limit: result.limit,
            page: result.page,
            total: result.total,
            count: result.count,
          }
        }else if(this.pageSave[this.type] && this.pageSave[this.type][this.key]){
          pageData = this.pageSave[this.type][this.key]
        }
        this.updatePageData(pageData);
      }else{
        console.error(result.msg);
        console.log(result);
      }
    },
    updatePageData(pageData){
      if(!this.pageSave[this.type]){
        this.pageSave[this.type] = {}
      }
      if(!this.pageSave[this.type][this.key]){
        this.pageSave[this.type][this.key] = pageData;
      }
      let nowTotal = Math.ceil(pageData.total / pageData.limit);
      let nowCount = pageData.total;
      this.nowTotal = nowTotal;
      this.nowCount = nowCount;
    },
    changeTypeHandle(nextType){
      console.log(nextType)
      this.selectType(nextType);
    }
  }
}
</script>

<template>
  <div class="">
    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone"/>
    <!--    推荐广告-->
    <product-banner :lang="lang" />
    <!--    产品类别 -->
    <show-types :lang="lang" :type="type" :types="types" @changeType="changeTypeHandle"></show-types>
    <!--    产品列表 -->
    <product-list :lang="lang" :product-list="products"></product-list>
    <page-select :page="page" :count="nowCount" :total="nowTotal"></page-select>
    <default-footer :lang="lang"/>

    <site-bar></site-bar>
  </div>
</template>

<style scoped>

</style>