hfysite/pages/product/info/index.vue

<template>
  <div class="content">
    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone" />
    <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
    <big-title>{{productDetail.name}}</big-title>
    <div class="conBox product-view">
      <div class="left">
        <div class="imgView">
          <img v-show="productDetail.image" :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 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";

export default {
  name: "itemIndex",
  components: {BigTitle, ItemBanner, LucencyHeader, DefaultFooter, qTab},
  props:['uLang','pType', 'pInfo'],
  async asyncData(ctx){
    // 判断是否有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(result.data);
      return {
        productDetail:result.data,
        type: result.data.type_key,
      }
    }else{
      console.log(`查询产品数据失败,服务器异常`);
      ctx.redirect(`/product`);
    }
    return {}
  },
  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: {},
      isPhone: false,
    }
  },
  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;
    }
    this.productDetail.detail = unescape(this.productDetail.detail);
  },
  mounted() {
    // console.log(this.pType);
    // console.log(this.type);
    this.isPhone = isMediaView(0,1024);
    if(!isEmpty(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 = 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('加载产品失败!!!');
      }
    },

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