hfysite/pages/product/item/index.vue

<template>
  <div class="content">
    <lucency-header :lang="lang" page-key="product" />
    <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
    <div class="conBox big-title">
      <span >
        {{product.name}}
      </span>
      <div class="hr"></div>
    </div>
    <div class="product-view">
      <div class="left">
        <div class="imgView">
          <img :src="product.image"/>
        </div>
        <div class="concatUs">
<!--          联系销售 -->
        </div>
      </div>
      <div class="right">

      </div>
    </div>
<!--    产品展示页面 -->
<!--    页脚 -->
    <default-footer :lang="lang"/>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import { getTypeText,getTypeSubText, pTypes} from "~/map/productMap";

export default {
  name: "itemIndex",
  props:['uLang','pType'],
  data(){
    return {
      langType: langMap.lang,
      lang: this.uLang?this.uLang:langMap.lang.cn,
      productId: null,
      types: pTypes,
      type: '',
      productTypeText: getTypeText(this.pType),
      productTypeSubText: getTypeSubText(this.pType),
      productDetail: {},
    }
  },
  beforeMount() {
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    if(params&&params.get('id')){
      this.productId = params.get('id');
    }else{
      window.location.href = '/product'
    }
    this.loadProductDetail();
  },
  mounted() {
    console.log(this.pType);
    console.log(this.type);
    this.type = this.pType;
  },
  methods:{
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    async loadProductDetail(){
      let err,res;
      let url = `/api/getProduct?id=${this.productId}`
      [err,res] = await handle(this.$axios.$get(url));
      if(err){
        console.error(err);
        return alert(err.message);
      }
      let result = res.data;
      if(result.rcode === 1){
        this.productDetail = result.data;
      }else{
        console.log('not match result');
        console.log(result);
        return alert('加载产品失败!!!');
      }
    }
  }
}
</script>

<style scoped>
.big-title {
  margin: 5px auto;
  justify-content: left;
}
</style>