hfysite/components/productList.vue

<template>
<div class="content productList">
  <div class="conBox container productCenter">
    <a class="product"
       v-for="(product,i) in productList"
       :key="'pro-'+i"
       @click="clickProductHandle(product)"
    >
          <span class="imgBox">
             <img :src="imagePathBabel(product.image)" :alt="product.name" class="img">
          </span>
      <span class="more">
            {{lang===langType.cn?"了解更多":getAbbrText("了解更多")}}
          </span>
      <p class="product-info">
            <span class="title">
              {{lang===langType.cn?product.name:getAbbrText(product.name)}}
            </span>
        <span class="description" v-if="product.remark">
          {{product.remark}}
        </span>
      </p>
    </a>
  </div>
</div>
</template>

<script>
import langMap from "~/map/langMap";
import {imagePathBabel} from "@/tools/imagePath";

export default {
  name: "productList",
  props: {
    lang:{
      default: langMap.lang.cn
    },
    productList: {
      default(){
        return []
      }
    }
  },
  data(){
    return {
      langType: langMap.lang,

    }
  },
  methods: {
    imagePathBabel,
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    clickProductHandle(product){
      console.log(product);
      let url = ""
      if(product.sourceType === "1"){
        url = product.source;
      }else{
        url = `/product/info/${product.type_key}?id=${product.id}`
      }
      window.location.href = url;
    }
  }
}
</script>

<style scoped>
@import "~/assets/productList.css";
</style>