sanmu
authored
|
1
|
<template>
|
sanmu
authored
|
2
3
|
<!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
<v-container>
|
sanmu
authored
|
4
|
<v-row class="mb-16 ma-0">
|
sanmu
authored
|
5
6
|
<v-col cols="5">
<v-carousel class="tw-float-left" height="450" v-model="slide" hide-delimiter-background>
|
sanmu
authored
|
7
8
9
10
11
|
<v-carousel-item
cover
v-for="(slide, i) in info.productimageliststore"
:src="slide.url"
:key="i"
|
sanmu
authored
|
12
|
>
|
sanmu
authored
|
13
14
15
|
</v-carousel-item>
</v-carousel>
</v-col>
|
sanmu
authored
|
16
17
|
<v-col cols="7">
<div class="mb-10 text-h4 font-weight-medium">{{ info.name }}</div>
|
sanmu
authored
|
18
19
20
21
22
23
24
25
26
|
<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]">
|
sanmu
authored
|
27
|
<span class="tw-leading-[10px] tw-m-[16px]">Product Model:{{ info.model }}</span>
|
sanmu
authored
|
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
</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
|
sanmu
authored
|
42
|
>
|
sanmu
authored
|
43
|
</div>
|
sanmu
authored
|
44
|
</div>
|
sanmu
authored
|
45
|
<v-table density="comfortable" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">
|
sanmu
authored
|
46
47
|
<thead>
<tr class="bg-grey-lighten-3">
|
sanmu
authored
|
48
49
50
|
<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>
|
sanmu
authored
|
51
52
53
54
|
</tr>
</thead>
<tbody>
<tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
|
sanmu
authored
|
55
56
|
<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>
|
sanmu
authored
|
57
58
|
<!-- <td class="td">{{ item.price }}</td> -->
<td class="td">
|
sanmu
authored
|
59
|
<v-btn size="small" color="blue-darken-1" @click="dialogStore.updateDialog(true)">
|
sanmu
authored
|
60
61
|
Quotation Inquiry
</v-btn>
|
sanmu
authored
|
62
63
64
65
|
</td>
</tr>
</tbody>
</v-table>
|
sanmu
authored
|
66
67
68
|
<!-- <v-dialog v-model="dialog" activator="parent" width="auto">
<v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
</v-dialog> -->
|
sanmu
authored
|
69
70
|
</v-col>
</v-row>
|
sanmu
authored
|
71
72
|
<div class="tw-pb-[64px]">
<v-tabs
|
sanmu
authored
|
73
|
class="tabs"
|
sanmu
authored
|
74
75
76
77
78
79
|
v-model="tab"
color="white"
bg-color="#eeeeee"
slider-color="blue-lighten-1"
selected-class="active"
>
|
sanmu
authored
|
80
81
|
<v-tab :value="1">Product Description</v-tab>
<v-tab :value="2">Specification and model</v-tab>
|
sanmu
authored
|
82
83
84
85
|
<!-- <v-tab :value="3">商品百科</v-tab> -->
</v-tabs>
<v-window v-model="tab" class="tw-p-[24px]">
<v-window-item key="1" :value="1">
|
sanmu
authored
|
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<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>
|
sanmu
authored
|
111
|
</v-window-item>
|
sanmu
authored
|
112
113
114
115
116
117
118
119
120
121
|
<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>
|
sanmu
authored
|
122
123
124
125
126
127
128
129
|
<!-- <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'
|
sanmu
authored
|
130
131
|
import type { Product } from '@/type'
import type { ProductImage } from '@/type'
|
sanmu
authored
|
132
133
|
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
|
sanmu
authored
|
134
135
|
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
|
sanmu
authored
|
136
137
|
const route = useRoute()
|
sanmu
authored
|
138
|
const info = ref<Partial<Product>>({
|
sanmu
authored
|
139
140
141
142
143
144
|
productimageliststore: []
})
onMounted(() => {
getDetail({ id: route.params.id as string }).then((res) => {
const data = res.data.data || {}
|
sanmu
authored
|
145
146
|
data.productimageliststore = (JSON.parse(data.productimageliststore) || []) as ProductImage[]
data.productimageliststore = data.productimageliststore.map((item: ProductImage) => ({
|
sanmu
authored
|
147
148
149
150
151
152
153
154
155
156
157
|
...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>
|
sanmu
authored
|
158
|
<style lang="scss" scoped>
|
sanmu
authored
|
159
160
161
162
163
164
|
.headerBorder {
border-top: 3px solid #1f88e5 !important;
}
.tabs {
border-bottom: 2px solid #1f88e5;
}
|
sanmu
authored
|
165
166
167
|
.active {
background-color: #1086e8;
}
|
sanmu
authored
|
168
169
170
171
172
|
.td,
th {
border: 1px solid #dcdcdc;
border-right: 0px;
border-bottom: 0px !important;
|
sanmu
authored
|
173
|
height: 50px !important;
|
sanmu
authored
|
174
175
176
177
178
179
180
181
182
183
184
185
|
&:last-child {
border: 1px solid #dcdcdc;
}
}
.tr:last-child {
.td {
border-bottom: 1px solid #dcdcdc !important;
}
}
</style>
|