UniApp跨平台开发实战：从零构建企业级电商应用 | 一站式多端开发解决方案

<template>
  <view class="product-list">
    <view 
      v-for="product in products" 
      :key="product.id"
      class="product-item"
      @click="goToDetail(product.id)"
    >
      <image 
        :src="product.image" 
        mode="aspectFill"
        class="product-image"
      ></image>
      <view class="product-info">
        <text class="product-name">{{ product.name }}</text>
        <text class="product-price">¥{{ product.price }}</text>
        <button 
          class="add-cart-btn"
          @click.stop="addToCart(product)"
        >加入购物车</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: []
    }
  },
  onLoad() {
    this.loadProducts()
  },
  methods: {
    async loadProducts() {
      const res = await uni.request({
        url: 'https://api.example.com/products'
      })
      this.products = res.data
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      })
    },
    addToCart(product) {
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
      // 调用Vuex存储购物车数据
      this.$store.dispatch('cart/addToCart', product)
    }
  }
}
</script>

购物车状态管理

// store/cart.js
export default {
  state: {
    cartItems: uni.getStorageSync('cart') || []
  },
  mutations: {
    ADD_TO_CART(state, product) {
      const existingItem = state.cartItems.find(item => 
        item.id === product.id
      )
      
      if (existingItem) {
        existingItem.quantity++
      } else {
        state.cartItems.push({
          ...product,
          quantity: 1
        })
      }
      
      // 持久化存储
      uni.setStorageSync('cart', state.cartItems)
    },
    REMOVE_FROM_CART(state, productId) {
      state.cartItems = state.cartItems.filter(
        item => item.id !== productId
      )
      uni.setStorageSync('cart', state.cartItems)
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product)
    },
    removeFromCart({ commit }, productId) {
      commit('REMOVE_FROM_CART', productId)
    }
  }
}