uniappで電子注文とテイクアウトデリバリーを実装する方法

uni-app で電子注文とテイクアウト デリバリーを実装する方法

モバイル インターネットの急速な発展により、電子注文とテイクアウト デリバリーは人々の生活の一部になりました。日々のニーズに応えます。ユーザーのニーズに応えるため、多くのケータリング会社は電子注文やテイクアウト配送システムを導入し、より便利なサービスを提供し始めています。この記事では、uni-appで電子注文とテイクアウトデリバリーを実装する方法と、具体的なコード例を紹介します。

1. 準備
開発を開始する前に、まずユニアプリ開発環境をインストールし、バックエンド インターフェイスが構築されていることを確認する必要があります。バックエンドは、Node.js などのテクノロジ スタックを使用して実装できます。この記事では、バックエンドの特定の実装については説明しません。

2. インターフェイスの設計
電子注文とテイクアウト デリバリーの機能を実現する前に、まず関連するインターフェイスを設計する必要があります。ユーザーが便利に食品を注文して配達できるように、インターフェイスのデザインはユーザーの操作習慣とプロセスを考慮する必要があります。

1. トップページ：お店のロゴ、店名、おすすめ料理などの情報を表示し、検索、絞り込み、分類などの機能を提供します。
2. メニュー ページ: 料理の名前、写真、価格、数量などの情報を含むレストランのメニュー リストが表示されます。ユーザーは、「追加」ボタンをクリックして料理を選択し、料理の数を変更できます。
3. ショッピングカートページ: ユーザーが選択した料理のリストと合計金額が表示され、料理の追加、削減、削除が可能です。
4. 注文ページ: 配送先住所、連絡先、配達時間など、ユーザーが送信した注文情報が表示されます。
5. お持ち帰りページ: 配送先住所や連絡先などの情報を入力し、注文を確認し、支払いを行う機会をユーザーに提供します。

3.電子注文・テイクアウトデリバリー機能の実現
uni-appで電子注文・テイクアウトデリバリー機能を実現するには、主に以下の手順が必要です。メニュー データの取得: メニュー ページでは、バックエンド インターフェイスからレストランのメニュー データを取得し、ページにデータを表示する必要があります。 uni.request() メソッドを使用してネットワーク要求を送信し、バックエンド インターフェイスから返されたデータを取得できます。

1. サンプル コード:

// 菜单页
export default {
  data() {
    return {
      menuList: [] // 菜单列表
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      uni.request({
        url: '接口地址',
        success: (res) => {
          this.menuList = res.data.menuList
        }
      })
    }
  }
}

ログイン後にコピー

料理をショッピング カートに追加: メニュー ページで、ユーザーが追加ボタンをクリックしたときに、選択した料理をショッピング カートに追加する必要があります。ショッピングカートの真ん中。 vuex を使用してショッピング カート データを保存できます。

2. サンプル コード:

// 菜单页
export default {
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item)
    }
  }
}

// store.js
export default new Vuex.Store({
  state: {
    cartList: [] // 购物车列表
  },
  mutations: {
    addToCart(state, item) {
      state.cartList.push(item)
    }
  }
})

ログイン後にコピー

ショッピング カートの操作: ショッピング カート ページでは、ユーザーはショッピング カート内のアイテムを追加、削減、削除できます。 vuex を使用してショッピング カート データを更新できます。

3. サンプルコード:

// 购物车页
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList
    },
    totalPrice() {
      let total = 0
      for (let item of this.cartList) {
        total += item.price * item.quantity
      }
      return total
    }
  },
  methods: {
    increase(item) {
      this.$store.commit('increase', item)
    },
    decrease(item) {
      this.$store.commit('decrease', item)
    },
    remove(item) {
      this.$store.commit('remove', item)
    }
  }
}

// store.js
export default new Vuex.Store({
  mutations: {
    increase(state, item) {
      item.quantity++
    },
    decrease(state, item) {
      if (item.quantity > 1) {
        item.quantity--
      }
    },
    remove(state, item) {
      const index = state.cartList.indexOf(item)
      state.cartList.splice(index, 1)
    }
  }
})

ログイン後にコピー

注文と支払いの送信: テイクアウト ページで、ユーザーは配送先住所や連絡先などの情報を入力し、注文を送信して、支払う。 uni.request() メソッドを使用して注文情報をバックエンド インターフェイスに送信すると、バックエンド インターフェイスは支払い結果を返します。

4. サンプル コード:

// 外卖页
export default {
  data() {
    return {
      address: '', // 配送地址
      contact: '', // 联系人
      payResult: '' // 支付结果
    }
  },
  methods: {
    submitOrder() {
      uni.request({
        url: '接口地址',
        method: 'POST',
        data: {
          address: this.address,
          contact: this.contact,
          cartList: this.$store.state.cartList
        },
        success: (res) => {
          this.payOrder(res.data.orderId)
        }
      })
    },
    payOrder(orderId) {
      uni.requestPayment({
        timeStamp: '',
        nonceStr: '',
        package: '',
        signType: '',
        paySign: '',
        success: (res) => {
          this.payResult = '支付成功'
        },
        fail: (res) => {
          this.payResult = '支付失败'
        }
      })
    }
  }
}

ログイン後にコピー

この記事では、uni-app で電子注文とテイクアウト デリバリー機能を実装する方法を紹介し、具体的なコード例を示します。以上の方法により、電子注文・テイクアウト配送システムを簡単に導入することができ、より便利なサービスを提供することができます。もちろん、実際の開発においては、ニーズに応じて適切な調整や拡張を行う必要があります。この記事があなたの開発作業に役立つことを願っています。

以上がuniappで電子注文とテイクアウトデリバリーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。