Cara melaksanakan pesanan elektronik dan penghantaran bawa pulang dalam uniapp

Cara melaksanakan pesanan elektronik dan penghantaran bawa pulang dalam aplikasi uni

Dengan perkembangan pesat Internet mudah alih, pesanan elektronik dan penghantaran bawa pulang telah menjadi keperluan harian dalam kehidupan orang ramai. Bagi memenuhi keperluan pengguna, banyak syarikat katering telah mula menggunakan sistem pesanan elektronik dan penghantaran bawa pulang untuk menyediakan perkhidmatan yang lebih mudah. Artikel ini akan memperkenalkan cara melaksanakan pesanan elektronik dan penghantaran bawa pulang dalam apl uni dan memberikan contoh kod khusus.

1. Persediaan
Sebelum memulakan pembangunan, kami perlu memasang persekitaran pembangunan uni-apl dan memastikan antara muka bahagian belakang telah dibina. Bahagian belakang boleh dilaksanakan menggunakan tindanan teknologi seperti Node.js Artikel ini tidak melibatkan pelaksanaan khusus bahagian belakang.

2. Reka bentuk antara muka
Sebelum menyedari fungsi pesanan elektronik dan penghantaran bawa pulang, kita perlu mereka bentuk antara muka yang berkaitan terlebih dahulu. Reka bentuk antara muka perlu mengambil kira tabiat dan proses operasi pengguna untuk memastikan pengguna boleh memesan dan menghantar makanan dengan mudah.

1. Laman utama: Memaparkan logo restoran, nama, hidangan yang disyorkan dan maklumat lain serta menyediakan fungsi seperti carian, penapisan dan pengelasan.
2. Halaman menu: Memaparkan senarai menu restoran, termasuk nama, gambar, harga, kuantiti dan maklumat lain hidangan. Pengguna boleh memilih hidangan dengan mengklik butang Tambah dan mengubah suai bilangan hidangan.
3. Halaman troli beli-belah: Memaparkan senarai hidangan yang dipilih oleh pengguna dan jumlah keseluruhan pengguna boleh menambah, mengurangkan dan memadam hidangan.
4. Halaman pesanan: Memaparkan maklumat pesanan yang diserahkan oleh pengguna, termasuk alamat penghantaran, orang yang boleh dihubungi, masa penghantaran, dsb.
5. Halaman Takeout: Memberi peluang kepada pengguna untuk mengisi maklumat seperti alamat penghantaran dan orang yang boleh dihubungi, mengesahkan pesanan dan membayar. . data menu daripada antara muka bahagian belakang dan paparkan data pada halaman. Anda boleh menggunakan kaedah uni.request() untuk menghantar permintaan rangkaian dan mendapatkan data yang dikembalikan oleh antara muka bahagian belakang.

Contoh kod:

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

Tambah hidangan ke troli beli-belah: Dalam halaman menu, apabila pengguna mengklik butang tambah, kita perlu menambah hidangan yang dipilih ke troli beli-belah. Anda boleh menggunakan vuex untuk menyimpan data troli beli-belah.

Contoh kod:

// 菜单页
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)
    }
  }
})

Pengendalian troli beli-belah: Dalam halaman troli beli-belah, pengguna boleh menambah, mengurangkan dan memadam item dalam troli beli-belah. Anda boleh menggunakan vuex untuk mengemas kini data troli beli-belah.

Contoh kod:

// 购物车页
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)
    }
  }
})

Serahkan pesanan dan pembayaran: Pada halaman bawa pulang, pengguna perlu mengisi maklumat seperti alamat penghantaran dan orang yang boleh dihubungi, serahkan pesanan dan bayar. Anda boleh menggunakan kaedah uni.request() untuk menghantar maklumat pesanan ke antara muka bahagian belakang dan antara muka bahagian belakang akan mengembalikan hasil pembayaran.

Contoh kod:

// 外卖页
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 = '支付失败'
        }
      })
    }
  }
}

Ringkasan:

Artikel ini memperkenalkan cara melaksanakan fungsi pesanan elektronik dan penghantaran bawa pulang dalam apl uni dan menyediakan contoh kod khusus. Melalui kaedah di atas, kami boleh melaksanakan pesanan elektronik dan sistem penghantaran bawa pulang dengan mudah untuk menyediakan perkhidmatan yang lebih mudah. Sudah tentu, dalam pembangunan sebenar, pelarasan dan pengembangan yang sesuai perlu dibuat mengikut keperluan tertentu. Saya harap artikel ini dapat membantu kerja pembangunan anda.

Atas ialah kandungan terperinci Cara melaksanakan pesanan elektronik dan penghantaran bawa pulang dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!