60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { product } from '@domains/product/di/productModule';
|
||
import { ProductType } from '@domains/product/domain/type/ProductType';
|
||
import { defineComponent, onMounted, reactive } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
|
||
interface storeType {
|
||
item: ProductType
|
||
id: number
|
||
}
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const route = useRoute();
|
||
const productService = product.createProductApplicationService();
|
||
|
||
const state = reactive<storeType>({
|
||
item: {} as ProductType,
|
||
id: 0
|
||
})
|
||
|
||
onMounted(() => {
|
||
if (!route.query.id) {
|
||
throw new Error("缺少id参数");
|
||
}
|
||
|
||
state.id = Number(route.query.id)
|
||
console.log("id: ", state.id);
|
||
loadProductDetail()
|
||
})
|
||
|
||
const loadProductDetail = async () => {
|
||
state.item = await productService.getProductInfo(state.id);
|
||
console.log("state.item: ", state.item);
|
||
}
|
||
|
||
return () => (
|
||
<div class="ProductDetail">
|
||
<h1>商品领域模块 - 商品详情页面</h1>
|
||
<hr/>
|
||
<p>商品id：{ state.id }</p>
|
||
{ state.item.name }
|
||
<ul>
|
||
{
|
||
Object.entries(state.item).map(([ key, value ]) =>
|
||
<li>{ key }: { value }</li>
|
||
)
|
||
}
|
||
</ul>
|
||
</div>
|
||
)
|
||
}
|
||
})
|
||
|
||
// export default defineComponent({
|
||
// setup() {
|
||
// return () => (
|
||
// <div>商品详情</div>
|
||
// )
|
||
// }
|
||
// })
|