hfysite/pages/product/info/index.vue

<template>
  <div class="content">
    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone" />
    <item-banner :title="type.type_name" :sub-title="type.sub_text"></item-banner>
    <big-title>
      <a :href="`/product/${type.type_key}`">{{type.type_name}}</a>-
      {{productDetail.name}}
    </big-title>

    <div class="container product-view mx-auto ">
      <product-info :product="productDetail" :lang="lang" :unescape="true" @tryBuy="tryBuy"/>
    </div>
<!--    页脚 -->
    <default-footer :lang="lang"/>

    <site-bar></site-bar>


    <pop :show="buyShow" :loading="buyLoading"
    >
      <div class="product-buy">
        <div class="product-buy-con">
          <big-title>
            <span>{{productDetail.name}}</span>
          </big-title>
          <div class="buy-fn" v-if="productDetail.shop_addr||platform.shop_addr">
            <div class="fn-name">网店购买</div>
            <div class="fn-show">
              <a :href="productDetail.shop_addr?productDetail.shop_addr:platform.shop_addr" trget="_blank">打开网店</a>
            </div>
          </div>
          <div class="buy-fn">
            <div class="fn-name">联系销售</div>
            <div class="fn-show">
              <img class=" wx-qrc z-50" :src="imagePathBabel(platform.wx_qrc)" alt="销售微信">
            </div>
          </div>
        </div>
        <div class="close-btn" @click="cancelBuy">
          <svg-icon icon-class="close" />
        </div>

      </div>
    </pop>
  </div>
</template>

<script>
// import 'ant-design-vue/dist/antd.css'

import axios from "axios";
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";
import {isMediaView} from "@/until/mediaView";
import {apiMap, baseUrl} from "~/map/apiMap";
import BigTitle from "~/components/public/bigTitle.vue";
import {toNumber,isEmpty} from "../../../until/typeTool";
import Pop from "@/components/public/pop.vue";
import ImageViewer from "@/components/public/imageViewer.vue";
import {imagePathBabel} from "@/tools/imagePath";

export default {
  name: "itemIndex",
  components: {ImageViewer, Pop, BigTitle, ItemBanner, LucencyHeader, DefaultFooter, qTab},
  props:['uLang','pType', 'pInfo'],
  head() {
    let headInfo = {
      meta: []
    }
    if (this.title)
    {
      headInfo.title = this.title;
    }
    if (this.desc)
    {
      headInfo.meta.push({
        hid: "description",
        name: "description",
        content: this.desc,
      })
    }
    if(this.seo_key)
    {
      headInfo.meta.push({
        hid: "keywords",
        name: "keywords",
        content: this.seo_key,
      })
    }
    return headInfo
  },
  async asyncData(ctx){
    console.log(`asyncData `);
    // 判断是否有id,如果有id则请求数据,否则则不请求数据
    let err,res;
    let id = ctx.query.id;
    // id转数字
    let url = baseUrl + apiMap.productInfo.path ;
    if(!toNumber(id)){
      return ctx.redirect(`/product`);
    }
    console.log(`开始获取产品 id:${id}`);
    url += `/${id}`;
    [err,res] = await handle(axios.get(url));
    if(err){
      // 加载失败,返回至产品页面
      console.log(`查询产品数据失败`);
      ctx.redirect(`/product`);
      return {}
    }
    let result = res.data;
    if(result.code === 1){
      console.log('产品详情');
      console.log(result.data);
      let desc = result.data.remark
      let enDesc = ctx.lang !== langMap.lang.cn ? result.data.remark_en || result.data.remark : result.data.remark
      let seoKey = result.data.seo_key
      return {
        desc: desc,
        enDesc: enDesc,
        seo_key: seoKey? seoKey : `合方圆-产品中心,合方圆科技-产品中心`,
        title: `合方圆-${result.data.name}`,
        productDetail:result.data
      }
    }else{
      console.log(`查询产品数据失败,服务器异常`);
      ctx.redirect(`/product`);
    }
    return {}
  },
  data(){
    return {
      title: ``,
      desc: '',
      enDesc: '',
      seo_key: '',
      langType: langMap.lang,
      lang: this.uLang?this.uLang:langMap.lang.cn,
      productId: null,
      types: this.$store.getters.pTypes,
      productDetail: {},
      isPhone: false,
      buyShow: false,
      buyLoading: false,

    }
  },
  computed: {
    type(){
      let info = isEmpty(this.productDetail)?this.pInfo:this.productDetail

      let types = this.$store.getters.pTypes || this.types;
      let type = types.find(val => val.type_key === info.type_key);
      let resultType = {}
      if(this.lang !== langMap.lang.cn)
      {
        resultType.type_name = type.type_name_en;
        resultType.sub_text = type.sub_text_en;
      }
      if(!resultType.type_name) resultType.type_name = type.type_name;
      if(!resultType.sub_text) resultType.sub_text = type.sub_text;
      resultType.type_key = type.type_key;
      return resultType;
    },
    platform(){
      let info = this.$store.getters.platform;
      return info
    }
  },

  beforeMount() {
    console.log(this.pInfo);
    if(isEmpty(this.productDetail) && isEmpty(this.pInfo)){
      console.log('没有数据');
      return this.$router.push('/product');
    }

    if(isEmpty(this.productDetail)){
      this.productDetail = this.pInfo;
    }
  },
  mounted() {
    // console.log(this.pType);
    // console.log(this.type);
    // this.$root.$on('tryBuy',this.tryBuy);
    this.isPhone = isMediaView(0,1024);

  },
  methods:{
    imagePathBabel,
    getLangText(str) {
      return langMap.getText(this.lang, str);
    },
    getAbbrText(str) {
      return langMap.getAbbrText(this.lang, str);
    },
    async loadProductDetail(){
      let err,res;
      let url = apiMap.productInfo.path;
      url += `/${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.code === 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('加载产品失败!!!');
      }
    },
    tryBuy(){
      console.log('tryBuy');
      this.buyShow = true;

    },
    cancelBuy(){
      this.buyShow = false;
    },

  }
}
</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{

}


.product-buy{
  width: 70%;
  max-width: 1200px;
  height: calc(100% - 260px);
  overflow: auto;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  padding: 10px;
}
.close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 1.6rem;
  transition: all 0.3s;
  background-color: orangered;
  border-radius: 50%;
  box-shadow: 0 0 5px gainsboro;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-buy-con{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.buy-fn{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.buy-fn:nth-child(1){
  margin-top: 0;
}
.buy-fn .fn-name{
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.buy-fn .fn-show{
  width: calc(100% - 130px);
  height: auto;
  max-height: 260px;
  overflow: auto;
  box-sizing: border-box;
  padding: 5px;
  border-left: 1px solid gainsboro;
  margin-left: 10px;
}
.wx-qrc{
  width: 220px;
  height: 220px;
}



</style>