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 >
        {{productDetail.name}}
      </span>
      <div class="hr"></div>
    </div>
    <div class="conBox product-view">
      <div class="left">
        <div class="imgView">
          <img :src="'/public/'+productDetail.image" alt=""/>
        </div>
        <div class="concatUs">
<!--          联系销售 -->
          <span class="chunk">联系购买</span>
          <div class="imgView">
            <img src="/image/wechat.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="right">
        <div class="remark">
          {{productDetail.remark}}
        </div>
        <div class="detail" v-html="productDetail.detail">
        </div>
      </div>
    </div>
<!--    更多数据页面 -->
    <div class="conBox product-detail">
      <q-tab></q-tab>
    </div>

<!--    页脚 -->
    <default-footer :lang="lang"/>

    <site-bar wechat-src="/image/wechat.jpg"></site-bar>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import { getTypeText,getTypeSubText, pTypes} from "~/map/productMap";
import handle from "~/until/handle";
import {unescape} from "~/until/unescapeHtml";
import qTab from "../../../components/qTab";
import DefaultFooter from "../../../components/footer/defaultFooter";
import LucencyHeader from "../../../components/header/lucencyHeader";
import ItemBanner from "../../../components/banner/itemBanner";

export default {
  name: "itemIndex",
  components: {ItemBanner, LucencyHeader, DefaultFooter, qTab},
  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.php?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;
        console.log(this.productDetail.detail)
        this.productDetail.detail = unescape(this.productDetail.detail);
        console.log(this.productDetail.detail)

      }else{
        console.log('not match result');
        console.log(result);
        return alert('加载产品失败!!!');
      }
    },

  }
}
</script>

<style scoped>
.big-title {
  margin: 5px auto;
  justify-content: left;
}
.product-view{
  height: auto;
  min-height: 680px;
  /*width: 100%;*/
  border-top: 1px solid #dedede;
  display: flex;

}
.product-view .left{
  width: 320px;
  height: auto;
}
.product-view .left .imgView{
  width: 300px;
  height: 300px;
  margin: 10px;
  position: relative;
}
.product-view .left .imgView img{
  display: block;
  width: 100%;
  height: 100%;
}
.product-view .right{
  width: calc(100% - 320px);
  height: auto;
}
.product-view .right .remark{
  padding: 10px 5px;
  border-left: 1px solid #b6b6b6;
  margin-top: 5px;
  box-sizing: border-box;
}
.product-view .left .concatUs{
  width: 100%;
  height: auto;
  border-top: 1px solid gray;
}
.product-view .left .concatUs .chunk{
  width: 90%;
  margin: 5px auto;
  display: flex;
  padding: 5px 15px;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 3px;
  box-shadow: 0 0 5px gainsboro;
  cursor: pointer;
}
.product-view .left .concatUs .chunk:hover{
  background-color: skyblue;
  color: white;
}

.product-detail{
  margin-top: 20px;
  border-top: 1px solid gainsboro;
}
.tab-header{
  display: flex;
}
.tab-header .header-title{

}
</style>