Comment l'application Uniapp implémente le panier d'achat et le règlement des commandes

Comment l'application uniapp met-elle en œuvre le panier et le règlement des commandes

1. Implémentation de la fonction de panier

Le panier est l'une des fonctions courantes dans les applications de commerce électronique. Il est utilisé pour enregistrer les articles achetés par les utilisateurs. pour la commodité des utilisateurs. Consultez, modifiez et commandez à tout moment.

1. Conception de page

Tout d'abord, nous devons concevoir la mise en page de la page du panier. Il peut être conçu comme suit :

1) Barre de navigation supérieure : Affiche le titre du panier et le bouton de retour.

2) Liste du panier d'achat : affiche les informations sur les produits achetés par l'utilisateur, y compris les photos des produits, les noms, les prix, les quantités, les sous-totaux, etc. Chaque produit peut également ajouter un nombre réduit de boutons d'action.

3) Colonne de paiement : Affiche la quantité totale, le montant total et le bouton de paiement des produits sélectionnés.

2. Stockage de données

Dans uniapp, vous pouvez utiliser Vuex ou le stockage local pour stocker les données du panier. Voici l'exemple de code :

// 在main.js中引入Vuex和创建store实例
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    cart: [] // 购物车数据
  },
  mutations: {
    addToCart(state, product) { // 添加商品到购物车
      state.cart.push(product)
    },
    removeFromCart(state, index) { // 从购物车中移除商品
      state.cart.splice(index, 1)
    }
  },
  getters: {
    totalPrice(state) { // 计算购物车中商品的总价
      let total = 0
      state.cart.forEach(item => {
        total += item.price * item.quantity
      })
      return total
    },
    totalQuantity(state) { // 计算购物车中商品的总数量
      let quantity = 0
      state.cart.forEach(item => {
        quantity += item.quantity
      })
      return quantity
    }
  }
})

3. Ajouter un produit au panier

Lorsque l'utilisateur clique sur le bouton Ajouter au panier sur la page de détails du produit, nous devons ajouter les informations sur le produit au panier et mettre à jour le statut. .

Voici un exemple de code :

// 在商品详情页的methods中添加商品到购物车的方法
methods: {
  addToCart(product) {
    this.$store.commit('addToCart', product)
  }
}

4. Afficher la liste du panier

Dans la page du panier, nous devons parcourir les données du panier via l'instruction v-for pour afficher la liste des produits.

Voici un exemple de code :

<!-- 在购物车页面的template中展示购物车列表 -->
<view class="cart-list">
  <view v-for="(product, index) in $store.state.cart" :key="index">
    <image :src="product.image" class="product-image"></image>
    <text class="product-name">{{ product.name }}</text>
    <text class="product-price">￥{{ product.price }}</text>
    <view class="quantity-container">
      <text class="minus" @click="decreaseQuantity(index)">-</text>
      <text class="quantity">{{ product.quantity }}</text>
      <text class="plus" @click="increaseQuantity(index)">+</text>
    </view>
  </view>
</view>

5. Modifier le panier

Les utilisateurs peuvent modifier la quantité d'articles dans le panier et modifier la quantité en cliquant sur le bouton d'augmentation ou de diminution. Voici un exemple de code :

// 在购物车页面的methods中增加和减少商品数量的方法
methods: {
  increaseQuantity(index) {
    this.$store.state.cart[index].quantity++
  },
  decreaseQuantity(index) {
    if (this.$store.state.cart[index].quantity > 1) {
      this.$store.state.cart[index].quantity--
    } else {
      this.$store.commit('removeFromCart', index)
    }
  }
}

2. Implémentation de la fonction de règlement des commandes

Le règlement des commandes est une extension de la fonction de panier d'achat. Les utilisateurs peuvent sélectionner les produits qu'ils souhaitent acheter et déterminer l'adresse de livraison, le mode de paiement et d'autres éléments associés. information.

1. Conception de la page

Tout d'abord, nous devons concevoir la mise en page de la page de règlement des commandes. Il peut être conçu comme suit :

1) Barre de navigation supérieure : Affiche le titre du règlement de la commande et le bouton de retour.

2) Liste des produits : affiche les informations sur les produits achetés par l'utilisateur, y compris les images des produits, les noms, les prix, les quantités, les sous-totaux, etc.

3) Informations sur la commande : y compris l'adresse de livraison, les coordonnées, le mode de paiement, etc.

4) Total de la commande : affiche la quantité totale, le montant total et le bouton Soumettre la commande des produits sélectionnés.

2. Données de règlement des commandes

Dans uniapp, nous pouvons stocker les données de règlement des commandes sélectionnées par l'utilisateur dans Vuex.

Ce qui suit est un exemple de code :

// 在Vuex中添加订单结算数据的state和mutations
const store = new Vuex.Store({
  state: {
    checkoutItems: [] // 订单结算数据
  },
  mutations: {
    addToCheckout(state, product) { // 将商品添加到订单结算数据
      state.checkoutItems.push(product)
    },
    removeFromCheckout(state, index) { // 从订单结算数据中移除商品
      state.checkoutItems.splice(index, 1)
    }
  },
  getters: {
    totalPrice(state) { // 计算订单结算数据中商品的总价
      let total = 0
      state.checkoutItems.forEach(item => {
        total += item.price * item.quantity
      })
      return total
    },
    totalQuantity(state) { // 计算订单结算数据中商品的总数量
      let quantity = 0
      state.checkoutItems.forEach(item => {
        quantity += item.quantity
      })
      return quantity
    }
  }
})

3. Ajouter des produits aux données de règlement de la commande

Une fois que l'utilisateur a sélectionné le produit sur la page du panier et cliqué sur le bouton Passer à la caisse, nous devons ajouter les informations sur le produit à la page du panier. données de règlement des commandes et accédez à la page de règlement des commandes.

Voici un exemple de code :

// 在购物车页面的methods中添加商品到订单结算数据的方法
methods: {
  checkout() {
    this.$store.state.cart.forEach(item => {
      this.$store.commit('addToCheckout', item)
    })
    this.$store.state.cart = []
    uni.navigateTo({
      url: '/pages/checkout'
    })
  }
}

4. Affichez la liste de règlement des commandes

Dans la page de règlement des commandes, nous devons parcourir les données de règlement des commandes via l'instruction v-for pour afficher la liste des produits.

Voici un exemple de code :

<!-- 在订单结算页面的template中展示订单结算清单 -->
<view class="checkout-list">
  <view v-for="(product, index) in $store.state.checkoutItems" :key="index">
    <image :src="product.image" class="product-image"></image>
    <text class="product-name">{{ product.name }}</text>
    <text class="product-price">￥{{ product.price }}</text>
    <text class="product-quantity">数量：{{ product.quantity }}</text>
    <text class="product-subtotal">小计：￥{{ product.price * product.quantity }}</text>
  </view>
</view>

5. Soumettre la commande

Dans la page de règlement de la commande, nous devons concevoir un bouton de soumission de commande et effectuer l'opération de soumission de commande correspondante lorsque vous cliquez sur le bouton.

Voici un exemple de code :

// 在订单结算页面的methods中提交订单的方法
methods: {
  submitOrder() {
    // 提交订单的逻辑，如创建订单、生成订单号、进行支付等
    // ...
  }
}

Grâce à la mise en œuvre des étapes ci-dessus, nous pouvons créer et mettre en œuvre avec succès les fonctions de panier d'achat et de règlement des commandes dans l'application uniapp, offrant aux utilisateurs une expérience d'achat et de règlement pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!