hfysite/pages/product/index.vue

<template>
  <div class="">
    <lucency-header :lang="lang" page-key="product" />
<!--    推荐广告-->
    <product-banner :lang="lang" />
<!--    产品类别 -->
    <product-types :lang="lang" :type="type"></product-types>
  </div>
</template>

<script>
import langMap from "@/map/langMap";
import productBanner from "@/components/banner/productBanner";

export default {
  name: "index",
  props:['uLang','pType','pKey'],
  components:{
    productBanner
  },
  data(){
    return {
      lang: this.uLang?this.uLang:langMap.lang.cn,
      type: this.pType?this.pType:'all',
      key: this.pKey?this.pKey:'',
      page: 1,
      productTypes: [],
    }
  },
  mounted() {
    this.$root.$on('changeLang',this.switchLang);
    this.$root.$on('searchProductKey',this.changeProductKeyHandle);
    this.$root.$on('changeProductType',this.selectType);
    // 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.searchProduct();
    },
    changeProductKeyHandle(key){
      if(this.key === key){
        return 0;
      }
      this.key = key;
      this.searchProduct();
    },
    async searchProduct(){
      const formData = new FormData();
      formData.append('key',this.key);
      formData.append('type',this.type);
      formData.append('page',this.page);
      // 获取数据
      let [err,res] = await handle(this.$axios.get())
    }
  }
}
</script>

<style scoped>

</style>