114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<template>
|
||
<!-- 产品详情页 - 严格按 Figma 1544:530 实现 -->
|
||
<view class="detail-page">
|
||
<!-- 产品图片轮播 + 指示点 -->
|
||
<DetailSwiper :images="productImages" />
|
||
|
||
<!-- 产品信息：名称/SKU/国家/价格/4列快捷信息 -->
|
||
<ProductInfo :info="product" />
|
||
|
||
<!-- 灰色分隔条 -->
|
||
<view class="section-divider"></view>
|
||
|
||
<!-- 颜色选择 -->
|
||
<ColorSelector
|
||
:list="colors"
|
||
:selected-id="selectedColorId"
|
||
@select="selectColor"
|
||
/>
|
||
|
||
<!-- 灰色分隔条 -->
|
||
<view class="section-divider"></view>
|
||
|
||
<!-- 尺码选择 -->
|
||
<SizeSelector
|
||
:list="sizes"
|
||
:selected="selectedSize"
|
||
@select="selectSize"
|
||
/>
|
||
|
||
<!-- 灰色分隔条 -->
|
||
<view class="section-divider"></view>
|
||
|
||
<!-- 产品参数（含可展开的补充说明） -->
|
||
<ParamsTable :list="productParams" />
|
||
|
||
<!-- 灰色分隔条 -->
|
||
<view class="section-divider"></view>
|
||
|
||
<!-- 产品尺码表 -->
|
||
<SizeChart :data="sizeChart" />
|
||
|
||
<!-- 灰色分隔条 -->
|
||
<view class="section-divider"></view>
|
||
|
||
<!-- 包装规格表 -->
|
||
<PackagingSpec :data="packaging" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import DetailSwiper from './components/DetailSwiper.vue'
|
||
import ProductInfo from './components/ProductInfo.vue'
|
||
import ColorSelector from './components/ColorSelector.vue'
|
||
import SizeSelector from './components/SizeSelector.vue'
|
||
import ParamsTable from './components/ParamsTable.vue'
|
||
import SizeChart from './components/SizeChart.vue'
|
||
import PackagingSpec from './components/PackagingSpec.vue'
|
||
|
||
import {
|
||
mockProduct,
|
||
mockImages,
|
||
mockColors,
|
||
mockSizes,
|
||
mockParams,
|
||
mockSizeChart,
|
||
mockPackaging
|
||
} from './mock.js'
|
||
|
||
export default {
|
||
components: {
|
||
DetailSwiper,
|
||
ProductInfo,
|
||
ColorSelector,
|
||
SizeSelector,
|
||
ParamsTable,
|
||
SizeChart,
|
||
PackagingSpec
|
||
},
|
||
data() {
|
||
return {
|
||
productId: null,
|
||
product: mockProduct,
|
||
productImages: mockImages,
|
||
colors: mockColors,
|
||
// 默认选中"灰色"（id=3），与 Figma 设计稿一致
|
||
selectedColorId: 3,
|
||
sizes: mockSizes,
|
||
// 默认选中 L，与 Figma 设计稿一致
|
||
selectedSize: 'L',
|
||
productParams: mockParams,
|
||
sizeChart: mockSizeChart,
|
||
packaging: mockPackaging
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.id) {
|
||
this.productId = options.id
|
||
}
|
||
},
|
||
methods: {
|
||
selectColor(id) {
|
||
this.selectedColorId = id
|
||
},
|
||
selectSize(size) {
|
||
this.selectedSize = size
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import './product-detail.css';
|
||
</style>
|