uniapp アプリケーションがショッピング カートと注文決済を実装する方法

uniapp アプリケーションでのショッピング カートと注文決済の実装方法

1. ショッピング カート機能の実装

ショッピング カートは電子マネーの一般的な機能です。コマース アプリケーション 1 つは、ユーザーが購入した商品を記録するために使用され、ユーザーがいつでも閲覧、編集、決済するのに便利です。

1. ページ デザイン

まず、ショッピング カート ページのレイアウトをデザインする必要があります。次のように設計できます:

1) 上部ナビゲーション バー: ショッピング カートのタイトルと戻るボタンが表示されます。

2) ショッピング カート リスト: ユーザーが購入した製品情報 (製品の写真、名前、価格、数量、小計など) が表示されます。各製品では、アクション ボタンの数を減らして追加することもできます。

3) 決済欄：選択した商品の合計数量、合計金額、レジへ進むボタンが表示されます。

2. データ ストレージ

uniapp では、Vuex またはローカル ストレージを使用してショッピング カート データを保存できます。以下はサンプル コードです:

// 在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. 製品をショッピング カートに追加

ユーザーが製品詳細ページの [ショッピング カートに追加] ボタンをクリックするとき、次の操作を行う必要があります。商品情報をショッピングカートに追加し、ステータスを更新します。

以下はサンプル コードです:

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

4. ショッピング カート リストの表示

ショッピング カート ページでは、ショッピング カートを次のように移動する必要があります。 v-for命令データ、製品リストを表示します。

以下はサンプル コードです:

<!-- 在购物车页面的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. ショッピング カートの編集

ユーザーは、増加をクリックしてショッピング カート内の商品の数量を編集できます。または減少ボタンで数量を変更します。サンプルコードは以下の通りです：

// 在购物车页面的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. 注文決済機能の実装

注文決済はショッピングカート機能の拡張機能であり、ユーザーは購入したい商品を選択し、決定することができます。お届け先、お支払い方法等の関連情報。

1. ページデザイン

まず、注文決済ページのレイアウトをデザインする必要があります。次の方法で設計できます:

1) 上部ナビゲーション バー: 注文決済のタイトルと戻るボタンが表示されます。

2) 製品リスト: ユーザーが購入した製品情報 (製品の写真、名前、価格、数量、小計など) が表示されます。

3) 注文情報: 配送先住所、連絡先情報、支払い方法など。

4) 注文合計: 選択した製品の合計数量、合計金額を表示し、注文を送信するボタンを表示します。

2. 注文決済データ

uniappでは、ユーザーが選択した注文決済データをVuexに保存することができます。

以下はサンプルコードです:

// 在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. 注文決済データに商品を追加

ユーザーがショッピングカートページで商品を選択した後、チェックアウトボタンをクリックすると、注文決済データに商品情報を追加し、注文決済ページにジャンプします。

以下はサンプル コードです:

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

4. 注文決済リストの表示

注文決済ページでは、注文決済をたどる必要があります。 v-for命令データ、製品リストを表示します。

以下はサンプル コードです:

<!-- 在订单结算页面的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. 注文の送信

注文決済ページでは、注文の送信ボタンをデザインする必要があります。ボタンをクリックすると、対応する注文送信操作が実行されます。

以下はサンプル コードです:

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

上記の手順の実装により、uniapp アプリケーションでショッピング カートと注文決済機能を正常に構築および実装することができ、ユーザーに便利なショッピングと決済体験。

以上がuniapp アプリケーションがショッピング カートと注文決済を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。