Blame view

src/views/ProductDetail.vue 6.48 KB
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>