ProductDetail.vue
3.21 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
<v-container class="pa-1">
<v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs>
<v-card max-width="1000" class="tw-m-auto tw-mb-[32px]">
<v-row class="ma-0">
<div class="tw-float-left tw-w-[300px]">
<v-carousel
show-arrows="hover"
hide-delimiter-background
delimiter-icon="mdi-square"
class="tw-float-left"
height="300"
v-model="slide"
>
<v-carousel-item
cover
v-for="(slide, i) in info.productimageliststore"
:src="slide.url"
:key="i"
>
</v-carousel-item>
</v-carousel>
</div>
<v-col>
<v-card-title class="text-h5"> {{ info.name }} </v-card-title>
<v-row>
<v-col>
<v-card-text class="tw-leading-[10px]">品牌：{{ info.brandName }}</v-card-text>
</v-col>
<v-col>
<v-card-text>产品分类：{{ info.brandName }}</v-card-text>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card-text>产品型号：{{ info.model }}</v-card-text>
</v-col>
<v-col>
<v-card-text>{{ info.basename1 }}：{{ info.basecore1 }}</v-card-text>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card-text>{{ info.basename2 }}：{{ info.basecore2 }}</v-card-text>
</v-col>
<v-col>
<v-card-text>{{ info.basename2 }}：{{ info.basecore3 }}</v-card-text>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card>
<div class="tw-m-auto tw-max-w-[1000px]">
<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-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="less" scoped></style>