zhusen / kelude-outside-web · Files

<template>

  <!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
  <v-container>
    <v-row class="ma-0">
      <v-col cols="5"
        ><v-carousel class="tw-float-left" height="550" v-model="slide">
          <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>
        <v-card-title class="mb-10 text-h4"> {{ info.name }} </v-card-title>
        <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]">产品型号：{{ 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-col>

          <v-table density="compact" class="table1 tw-mt-[32px]">
            <thead>
              <tr>
                <th class="text-left">name</th>
                <th class="text-left">weight</th>
                <th class="text-left">price</th>
              </tr>
            </thead>
            <tbody>
              <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
                <td class="td">{{ item.rank }}</td>
                <td class="td">{{ item.typeName }}</td>
                <td class="td">{{ item.price }}</td>
              </tr>
            </tbody>
          </v-table>

        </v-col>

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

      <v-tabs v-model="tab" color="blue-lighten-1" align-tabs="start">
        <v-tab :value="1">商品介绍</v-tab>
        <v-tab :value="2">规格参数</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-html="info.physicalproperty"></div>
          <div v-html="info.storage"></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'

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>
.td,
th {
  border: 1px solid #dcdcdc;
  border-right: 0px;
  border-bottom: 0px !important;

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

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