当前位置：首页 > VUE

vue实现购物节

2026-01-15 02:54:57VUE

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管理购物车状态，实现添加商品和计算总价功能。

vue实现购物节

// 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创建活动页面和商品详情页。

vue实现购物节

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')

标签: vue

分享给朋友：

vue实现拖放

Vue 实现拖放功能 Vue 中实现拖放功能通常可以通过 HTML5 的原生拖放 API 或第三方库（如 vuedraggable）来实现。以下是两种方法的详细说明。使用 HTML5 原生拖放 A…

vue实现tag

Vue 实现标签（Tag）功能在 Vue 中实现标签（Tag）功能可以通过多种方式完成，以下是一些常见的方法和实现步骤：使用动态组件和 v-for 通过 v-for 指令动态渲染标签列表，结合样…

vue原理实现

Vue 原理实现的核心机制 Vue.js 的核心原理基于响应式系统、虚拟 DOM 和模板编译。以下是其核心实现机制的分解：响应式系统 Vue 使用 Object.defineProperty（Vu…

vue实现动画

Vue 实现动画的方法 Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue实现slot

Vue 中的 Slot 实现方法 Vue 的 slot 是一种内容分发机制，允许父组件向子组件插入内容。以下是几种常见的 Slot 实现方式：默认 Slot 子组件通过 <slot>…

vue实现增删

Vue 实现增删功能在 Vue 中实现增删功能通常涉及数据绑定、事件处理和列表渲染。以下是基于 Vue 2 或 Vue 3 的实现方法：数据定义初始化一个数组用于存储列表数据，并在 Vue 实…

vue实现购物节