vue实现购物节
Vue 实现购物节功能
商品展示组件
创建商品卡片组件展示促销商品信息，包含图片、名称、原价、折扣价和倒计时。
<template>
<div class="product-card">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p class="original-price">¥{{ product.price }}</p>
<p class="discount-price">¥{{ product.discountPrice }}</p>
<div class="countdown">
剩余时间: {{ countdown.days }}天 {{ countdown.hours }}:{{ countdown.minutes }}:{{ countdown.seconds }}
</div>
<button @click="addToCart">加入购物车</button>
</div>
</template>倒计时功能
使用计算属性和定时器实现活动倒计时功能。
data() {
return {
endTime: new Date('2023-11-11 23:59:59').getTime(),
now: Date.now(),
timer: null
}
},
computed: {
countdown() {
const diff = this.endTime - this.now
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
const seconds = Math.floor((diff % (1000 * 60)) / 1000)
return { days, hours, minutes, seconds }
}
},
mounted() {
this.timer = setInterval(() => {
this.now = Date.now()
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}购物车功能
使用Vuex管理购物车状态，实现添加商品和计算总价功能。
// store.js
const store = new Vuex.Store({
state: {
cart: []
},
mutations: {
ADD_TO_CART(state, product) {
const existingItem = state.cart.find(item => item.id === product.id)
if (existingItem) {
existingItem.quantity++
} else {
state.cart.push({ ...product, quantity: 1 })
}
}
},
getters: {
cartTotal(state) {
return state.cart.reduce((total, item) => {
return total + (item.discountPrice * item.quantity)
}, 0)
}
}
})优惠券功能
实现优惠券选择和使用逻辑。
<template>
<div class="coupon-selector">
<select v-model="selectedCoupon">
<option v-for="coupon in coupons" :value="coupon" :key="coupon.id">
{{ coupon.name }} (减¥{{ coupon.value }})
</option>
</select>
<p>优惠后总价: ¥{{ discountedTotal }}</p>
</div>
</template>
<script>
export default {
computed: {
discountedTotal() {
return this.$store.getters.cartTotal - (this.selectedCoupon ? this.selectedCoupon.value : 0)
}
}
}
</script>页面布局
使用Vue Router创建活动页面和商品详情页。
const routes = [
{
path: '/promotion',
component: PromotionPage,
children: [
{
path: 'product/:id',
component: ProductDetail
}
]
}
]响应式设计
使用CSS媒体查询确保在不同设备上良好显示。
@media (max-width: 768px) {
.product-card {
width: 100%;
margin-bottom: 20px;
}
}性能优化
使用Vue的异步组件和懒加载提升页面加载速度。
const ProductDetail = () => import('./components/ProductDetail.vue')
