52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, reactive } from 'vue';
|
|
import { ModelFbx } from 'vue-3d-model';
|
|
import { useProductStore } from './stores/product';
|
|
import type { ProductInfo } from './stores/product';
|
|
import { SERVER_URL } from './constants'
|
|
|
|
type StateType = {
|
|
active_product?: ProductInfo
|
|
}
|
|
|
|
const products = useProductStore()
|
|
|
|
const state: StateType = reactive({
|
|
active_product: undefined
|
|
})
|
|
|
|
const setActive = (id: number) => {
|
|
state.active_product = products.list.find(el => el.id == id)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
products.getData()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="sidebar">
|
|
<ul>
|
|
<li v-for="item in products.list">
|
|
<a @click.stop.prevent="setActive(item.id)" :href="item.id.toString()">
|
|
{{ item.title }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header">Проекты Кустарщины</div>
|
|
<div class="product">
|
|
<div v-if="state.active_product">
|
|
<model-fbx v-if="state.active_product.model3d" class="product-model"
|
|
:src="`${SERVER_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
|
|
<div class="model-image" v-if="state.active_product.image1">
|
|
<img :src="state.active_product.image1" />
|
|
</div>
|
|
<div class="product-description">
|
|
{{ state.active_product.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |