Wie die Uniapp-Anwendung die Warenkorb- und Bestellabwicklung implementiert

Wie implementiert die Uniapp-Anwendung den Warenkorb und die Bestellabwicklung? 1. Implementierung der Warenkorbfunktion

Der Warenkorb ist eine der häufigsten Funktionen in E-Commerce-Anwendungen. Er wird zur Erfassung der von Benutzern gekauften Artikel verwendet für den Komfort der Benutzer, jederzeit anzusehen, zu bearbeiten und auszuchecken.

Seitendesign

1. Zuerst müssen wir das Layout der Warenkorbseite entwerfen. Es kann wie folgt gestaltet sein:

1) Obere Navigationsleiste: Zeigt den Warenkorbtitel und den Zurück-Button an.

2) Warenkorbliste: Zeigt vom Benutzer gekaufte Produktinformationen an, einschließlich Produktbildern, Namen, Preisen, Mengen, Zwischensummen usw. Jedes Produkt kann auch eine reduzierte Anzahl von Aktionsschaltflächen hinzufügen.

3) Checkout-Spalte: Zeigt die Gesamtmenge, den Gesamtbetrag und den Checkout-Button der ausgewählten Produkte an.

Datenspeicherung

2. In Uniapp können Sie Vuex oder lokalen Speicher zum Speichern von Warenkorbdaten verwenden. Das Folgende ist der Beispielcode:

// 在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
    }
  }
})

Produkt zum Warenkorb hinzufügen

3. Wenn der Benutzer auf der Produktdetailseite auf die Schaltfläche „Zum Warenkorb hinzufügen“ klickt, müssen wir die Produktinformationen zum Warenkorb hinzufügen und den Status aktualisieren .

Das Folgende ist der Beispielcode:

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

Zeigen Sie die Warenkorbliste an

4. Auf der Warenkorbseite müssen wir die Warenkorbdaten durch die V-for-Anweisung durchlaufen, um die Produktliste anzuzeigen.

Das Folgende ist der Beispielcode:

<!-- 在购物车页面的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>

Einkaufswagen bearbeiten

5. Benutzer können die Menge der Artikel im Einkaufswagen bearbeiten und die Menge ändern, indem sie auf die Schaltfläche „Erhöhen“ oder „Verringern“ klicken. Das Folgende ist ein Beispielcode:

// 在购物车页面的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. Implementierung der Bestellabwicklungsfunktion

Die Bestellabwicklung ist eine Erweiterung der Warenkorbfunktion. Benutzer können die Waren auswählen, die sie kaufen möchten, und die Lieferadresse, die Zahlungsmethode usw. festlegen Information.

Seitendesign

1. Zuerst müssen wir das Layout der Bestellabwicklungsseite entwerfen. Es kann wie folgt gestaltet sein:

1) Obere Navigationsleiste: Zeigt den Bestellabwicklungstitel und die Schaltfläche „Rückgabe“ an.

2) Produktliste: Zeigt vom Benutzer gekaufte Produktinformationen an, einschließlich Produktbildern, Namen, Preisen, Mengen, Zwischensummen usw.

3) Bestellinformationen: einschließlich Lieferadresse, Kontaktinformationen, Zahlungsmethode usw.

4) Bestellsumme: Zeigt die Gesamtmenge, den Gesamtbetrag und die Schaltfläche „Bestellung absenden“ der ausgewählten Produkte an.

Auftragsabrechnungsdaten

2. In Uniapp können wir die vom Benutzer ausgewählten Auftragsabrechnungsdaten in Vuex speichern.

Das Folgende ist ein Beispielcode:

// 在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
    }
  }
})

Produkte zu Bestellabrechnungsdaten hinzufügen

3. Nachdem der Benutzer das Produkt auf der Warenkorbseite ausgewählt und auf die Schaltfläche „Zur Kasse gehen“ geklickt hat, müssen wir die Produktinformationen zum hinzufügen Geben Sie die Daten zur Auftragsabwicklung ein und gelangen Sie zur Seite zur Auftragsabwicklung.

Das Folgende ist der Beispielcode:

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

Zeigen Sie die Auftragsabrechnungsliste an

4. Auf der Auftragsabrechnungsseite müssen wir die Auftragsabrechnungsdaten über die V-For-Anweisung durchlaufen, um die Produktliste anzuzeigen.

Das Folgende ist der Beispielcode:

<!-- 在订单结算页面的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>

Bestellung absenden

5. Auf der Bestellabwicklungsseite müssen wir eine Schaltfläche zum Absenden der Bestellung entwerfen und den entsprechenden Vorgang zum Absenden der Bestellung ausführen, wenn auf die Schaltfläche geklickt wird.

Das Folgende ist der Beispielcode:

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

Durch die Implementierung der oben genannten Schritte können wir die Warenkorb- und Bestellabrechnungsfunktionen in der Uniapp-Anwendung erfolgreich erstellen und implementieren und den Benutzern ein bequemes Einkaufs- und Abrechnungserlebnis bieten.

Das obige ist der detaillierte Inhalt vonWie die Uniapp-Anwendung die Warenkorb- und Bestellabwicklung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!