vue 实现商品页面
商品页面实现步骤
页面结构设计
使用Vue单文件组件（SFC）构建商品页面，通常包含以下部分：
- 商品主图展示区（轮播图或静态图）
- 商品标题与价格信息
- 商品规格选择器（如颜色、尺寸）
- 商品详情描述（图文混排）
- 购买按钮与库存状态
<template>
<div class="product-container">
<product-gallery :images="product.images"/>
<div class="product-info">
<h1>{{ product.title }}</h1>
<price-display :price="product.price" :discount="product.discount"/>
<sku-selector
:variants="product.variants"
@change="handleSkuChange"/>
<add-to-cart
:stock="product.stock"
@add="handleAddToCart"/>
</div>
<product-detail :content="product.detail"/>
</div>
</template>数据获取与状态管理
通过Vuex或Composition API管理商品数据状态：
<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
export default {
setup() {
const product = ref({})
const route = useRoute()
onMounted(async () => {
const { data } = await axios.get(`/api/products/${route.params.id}`)
product.value = data
})
return { product }
}
}
</script>交互功能实现
处理用户交互的核心逻辑：
methods: {
handleSkuChange(selectedSku) {
this.selectedSku = selectedSku
this.updatePrice(selectedSku.price)
},
handleAddToCart() {
if(!this.selectedSku) return alert('请选择规格')
this.$store.dispatch('cart/addItem', {
product: this.product,
sku: this.selectedSku,
quantity: this.quantity
})
}
}样式与响应式设计
使用SCSS编写组件样式：
.product-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.product-info {
position: sticky;
top: 1rem;
}性能优化技巧
实现懒加载和缓存策略：
// 图片懒加载
import { Lazyload } from 'vant'
app.use(Lazyload)
// 路由级数据预取
router.beforeResolve((to, from, next) => {
if(to.name === 'product') {
store.dispatch('fetchProduct', to.params.id)
}
next()
})完整组件示例
商品主图展示组件：
<template>
<div class="gallery">
<van-swipe @change="onChange">
<van-swipe-item v-for="image in images" :key="image">
<img v-lazy="image" alt="商品图片">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
props: ['images'],
methods: {
onChange(index) {
this.currentIndex = index
}
}
}
</script>通过以上模块化设计，可以构建出功能完善、用户体验良好的商品详情页面。实际开发中可根据业务需求增加评价模块、推荐商品等扩展功能。
