uk_front/pages/product/_code.vue

<template>
  <div class="com-main com-margin-auto ">
    <template v-if="pageData?.id">
      <breadcrumb :pageData="pageData" ></breadcrumb>
      <section class="product">
        <product-left :pageData="pageData" :id="pageData.id"></product-left>
        <product-right :pageData="pageData" :id="pageData.id"></product-right>
      </section>
      <ul class="picLink-wrap">
        <li  v-if="pageData.showcase[0]?.length">
          <p class="title">SERVICES</p>
          <p class="intro">We offer a variety of services to suit your needs</p>
          <a :href="item.url" v-for="(item,index) in pageData.showcase[0]" :key="index" class="showcase">
            <el-image lazy  :src="item.images" fit="cover" style="width: 100%; height: 356px;"></el-image>
          </a>
        </li>
        <li  v-if="pageData.showcase[1]?.length">
          <p class="title">DECORATION METHODS</p>
          <p class="intro">A range of print enhancements to fully customise your product</p>
          <a :href="item.url" v-for="(item,index) in pageData.showcase[1]" :key="index" class="showcase">
            <el-image lazy  :src="item.images" fit="cover" style="width: 100%; height: 258px;margin-top: 20px;border-radius: 12px;"></el-image>
          </a>
        </li>
        <li v-if="pageData.showcase[2]?.length">
          <p class="title">PRINT MARKETING</p>
          <p class="intro">A range of great print supplement options, to expand your branding messages</p>
          <div class="imgWrap">
            <a :href="item.url" v-for="(item,index) in pageData.showcase[2]" :key="index" class="showcase">
              <el-image lazy  :src="item.images" fit="cover" style="width: 100%; height:100%;"></el-image>
            </a>
          </div>
        </li>
        <li v-if="pageData.showcase[3]?.length">
          <p class="title">PACKAGING</p>
          <p class="intro">Perfect your branding solution with great customised packaging options</p>
          <div class="imgWrap">
            <a :href="item.url" v-for="(item,index) in pageData.showcase[3]" :key="index" class="showcase">
              <el-image lazy  :src="item.images" fit="cover" style="width: 100%; height:100%;"></el-image>
            </a>
          </div>
        </li>
      </ul>
    </template>
    <el-empty description="No Data" v-else></el-empty>
    <section class="com-width-1200 com-margin-auto" >
      <pc-title :title="'Related ltems'" :marginTop="70"></pc-title>
      <div class="card-wrap  com-margin-auto">
        <card
          v-for="(item, k) in indexGoodsRankLists"
          :key="k"
          :cardData="item"></card>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  layout: "default",
  async asyncData({ $axios, params, error, redirect }) {
    const pageData = await $axios.get(`/uk-api/uk/goods/detail?product_code=${params.code}`);
    let indexGoodsRankLists=[]
    if(pageData.result?.category_id){
        try{
          indexGoodsRankLists = await $axios.get(`/uk-api/uk/goods/recommend/${pageData.result?.category_id}`);
        }catch (err) {
          console.log(err);
        }
      }else{
        indexGoodsRankLists = await $axios.get("/uk-api/home/indexGoodsRankList");
    }
    return {
      pageData: pageData.result,
      indexGoodsRankLists: indexGoodsRankLists.result,
    };
  },
  // middleware: 'auth',
  data() {
    return {
      pageData:null,
      indexGoodsRankLists:[]
    };
  },
  head() {
    return {
      title: this.pageData?.product_name || 'PromoCollection',
      meta: [
        { name: 'keywords', content: this.pageData?.keywords },
        { name: 'description', content: this.pageData?.main?.description },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.product {
  display: flex;
}
.card-wrap {
  display: grid;
  justify-items: center;
  justify-content: space-evenly;
  // grid-template-columns: repeat(5,1fr);
}
.picLink-wrap{
  text-align: center;
  li{
    color:#1A376B;
    .title{
      font-family: ProximaNova-Black;
      font-size: 50px;
      font-weight: 900;
      margin-top: 50px;
    }
    .intro{
      font-family: ProximaNova-Light;
      font-size: 26px;
      font-weight: 300;
      margin:10px 0 0;
    }
    &:nth-child(1){
      .intro{
        margin-bottom: 20px;
      }
    }
    &:nth-child(3){
       .imgWrap{
        margin-top: 30px;
        display: grid;
			  grid-template-columns: repeat(2,1fr);
			  gap: 26px;
       }
       a {
          height: 484px;
        }
    }
    &:nth-child(4){
       .imgWrap{
        margin-top: 30px;
        display: grid;
			  grid-template-columns: repeat(4,1fr);
			  gap: 32px;
       }
       a {
          height: 278px;
        }
    }
  }
}
</style>