zhusen / kelude-outside-web · Files

<template>

  <!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
  <v-container>

    <v-row class="mb-16 ma-0">

      <v-col cols="5">
        <v-carousel class="tw-float-left" height="450" v-model="slide" hide-delimiter-background>

          <v-carousel-item
            cover
            v-for="(slide, i) in info.productimageliststore"
            :src="slide.url"
            :key="i"

          >

          </v-carousel-item>
        </v-carousel>
      </v-col>

      <v-col cols="7">
        <div class="mb-10 text-h4 font-weight-medium">{{ info.name }}</div>

        <div class="tw-flex tw-flex-wrap">
          <div class="tw-w-1/2">
            <span class="tw-leading-[10px] tw-m-[16px]">Brand：{{ info.brandName }}</span>
          </div>
          <!-- <v-col>
            <span class="tw-leading-[10px]">Category：{{ info.brandName }}</span>
          </v-col> -->

          <div class="tw-w-1/2 tw-mb-[12px]">

            <span class="tw-leading-[10px] tw-m-[16px]">Product Model：{{ info.model }}</span>

          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename1">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename1 }}：{{ info.basecore1 }}</span
            >
          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename2">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename2 }}：{{ info.basecore2 }}</span
            >
          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename3">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename3 }}：{{ info.basecore3 }}</span

            >

          </div>

        </div>

        <v-table density="comfortable" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">

          <thead>
            <tr class="bg-grey-lighten-3">

              <th class="text-left headerBorder text-grey-darken-1">Product Name / Code</th>
              <th class="text-left headerBorder text-grey-darken-1">Specification and model</th>
              <th class="text-left headerBorder text-grey-darken-1">Price</th>

            </tr>
          </thead>
          <tbody>
            <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">

              <td class="td text-grey-darken-4 font-weight-medium">{{ item.rank }}</td>
              <td class="td text-grey-darken-4 font-weight-medium">{{ item.typeName }}</td>

              <!-- <td class="td">{{ item.price }}</td> -->
              <td class="td">

                <v-btn size="small" color="blue-darken-1" @click="dialogStore.updateDialog(true)">

                  Quotation Inquiry
                </v-btn>

              </td>
            </tr>
          </tbody>
        </v-table>

        <!-- <v-dialog v-model="dialog" activator="parent" width="auto">
          <v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
        </v-dialog> -->

      </v-col>
    </v-row>

    <div class="tw-pb-[64px]">
      <v-tabs

        class="tabs"

        v-model="tab"
        color="white"
        bg-color="#eeeeee"
        slider-color="blue-lighten-1"
        selected-class="active"
      >

        <v-tab :value="1">Product Description</v-tab>
        <v-tab :value="2">Specification and model</v-tab>

        <!-- <v-tab :value="3">商品百科</v-tab> -->
      </v-tabs>
      <v-window v-model="tab" class="tw-p-[24px]">
        <v-window-item key="1" :value="1">

          <div v-if="info.advantage" class="tw-mb-[24px]">
            <div class="text-h6">Advantage</div>
            <v-divider class="tw-mb-[12px]"></v-divider>
            <div v-html="info.advantage"></div>
          </div>
          <div v-if="info.physicalproperty" class="tw-mb-[24px]">
            <div class="text-h6">Physical Property</div>
            <v-divider class="tw-mb-[12px]"></v-divider>
            <div v-html="info.physicalproperty"></div>
          </div>
          <div v-if="info.advantage" class="tw-mb-[24px]">
            <div class="text-h6">Storage</div>
            <v-divider class="tw-mb-[12px]"></v-divider>
            <div v-html="info.storage"></div>
          </div>
          <div v-if="info.introduction" class="tw-mb-[24px]">
            <div class="text-h6">Introduction</div>
            <v-divider class="tw-mb-[12px]"></v-divider>
            <div v-html="info.introduction"></div>
          </div>
          <div v-if="info.advantage" class="tw-mb-[24px]">
            <div class="text-h6">Description</div>
            <v-divider class="tw-mb-[12px]"></v-divider>
            <div v-html="info.description"></div>
          </div>

        </v-window-item>

        <v-window-item key="2" :value="2">
          <v-table density="compact" class="table2">
            <tbody>
              <tr class="tr" v-for="item in info.productAttributeList || []" :key="item.name">
                <td class="td tw-w-[400px]">{{ item.name }}</td>
                <td class="td">{{ item.value }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-window-item>

        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
      </v-window>
    </div>
  </v-container>
</template>

<script setup lang="ts">
import { getDetail } from '@/service'

import type { Product } from '@/type'
import type { ProductImage } from '@/type'

import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()

const route = useRoute()

const info = ref<Partial<Product>>({

  productimageliststore: []
})

onMounted(() => {
  getDetail({ id: route.params.id as string }).then((res) => {
    const data = res.data.data || {}

    data.productimageliststore = (JSON.parse(data.productimageliststore) || []) as ProductImage[]
    data.productimageliststore = data.productimageliststore.map((item: ProductImage) => ({

      ...item,
      url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`
    }))
    info.value = data
  })
})

const tab = ref(0)
const slide = ref(0)
</script>

<style lang="scss" scoped>

.headerBorder {
  border-top: 3px solid #1f88e5 !important;
}
.tabs {
  border-bottom: 2px solid #1f88e5;
}

.active {
  background-color: #1086e8;
}

.td,
th {
  border: 1px solid #dcdcdc;
  border-right: 0px;
  border-bottom: 0px !important;

  height: 50px !important;

  &:last-child {
    border: 1px solid #dcdcdc;
  }
}

.tr:last-child {
  .td {
    border-bottom: 1px solid #dcdcdc !important;
  }
}
</style>