index.vue
1.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ 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>