canrd-main / canrud-nuxt-front · Files

<template>
  <MobileProductDetail v-if="isMobile()" :info="info" />
  <ProductDetail v-else :info="info" />
</template>

<script setup lang="ts">

import { onMounted } from 'vue'

import ProductDetail from '~/components/ProductDetail.vue'
import MobileProductDetail from '~/components/MobileProductDetail.vue'
import type { Product, ProductImage } from '~/type'
import { useRoute } from 'vue-router'

const route = useRoute()

const info = ref<Partial<Product>>({
  productimageliststore: [],
  productAttributeList: [],
  name: '',
  ticketTypes: []
})

let { data: resData } = await useAsyncData('detail', () => $fetch('/shop/product/detail', {

  method: 'GET',
  params: {
    id: route.params.id
  }

}), {
  server: true  // 仅在服务器端获取数据
})

const newData: Product = resData.value.data

newData.productimageliststore = typeof newData.productimageliststore === 'string' ?
  (JSON.parse(newData.productimageliststore) || []) :
  newData.productimageliststore as ProductImage[]
newData.productimageliststore = newData?.productimageliststore.map((item: ProductImage) => ({
  ...item,
  // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`
  url: `/api/show/image?fileKey=${item.fileKey}`
}))
info.value = { ...newData }

</script>