uni-app 求一套饭店的开单系统 需要unicloud版

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 求一套饭店的开单系统 需要unicloud版

求一套饭店的开单系统,需要unicloud版
图片

2 回复

承接双端(Android,iOS)原生插件开发,uni-app外包项目开发。
接受已有项目的二次开发、修改功能、修复问题bug等任何开发相关的单
QQ:1559653449 VX:fan-rising


针对您的需求,以下是一个简化的uni-app饭店开单系统示例,结合unicloud进行后端服务。这个示例将展示如何实现基本的菜品选择、下单和结账功能。

1. 前端(uni-app)

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

pages/index/index.vue

<template>
  <view>
    <list v-for="dish in dishes" :key="dish.id">
      <view>{{ dish.name }} - ¥{{ dish.price }}</view>
      <button @click="addToCart(dish)">Add to Cart</button>
    </list>
    <view>
      <list v-for="item in cart" :key="item.id">
        <view>{{ item.dish.name }} - ¥{{ item.dish.price }} x {{ item.quantity }}</view>
      </list>
      <button @click="checkout">Checkout</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dishes: [],
      cart: []
    }
  },
  created() {
    this.fetchDishes()
  },
  methods: {
    async fetchDishes() {
      const result = await uniCloud.database().collection('dishes').get()
      this.dishes = result.result.data
    },
    addToCart(dish) {
      const cartItem = this.cart.find(item => item.dish.id === dish.id)
      if (cartItem) {
        cartItem.quantity++
      } else {
        this.cart.push({ dish, quantity: 1 })
      }
    },
    async checkout() {
      const order = {
        cart: this.cart,
        total: this.cart.reduce((sum, item) => sum + item.dish.price * item.quantity, 0)
      }
      await uniCloud.database().collection('orders').add({
        data: order
      })
      uni.showToast({ title: 'Order placed!', icon: 'success' })
      this.cart = []
    }
  }
}
</script>

2. 后端(unicloud)

cloudfunctions/database/index.js

exports.main = async (event, context) => {
  const db = uniCloud.database()
  const collection = db.collection('dishes')
  // 根据需求实现CRUD操作
  // 示例:获取所有菜品
  if (event.type === 'getDishes') {
    return collection.get()
  }
  // 其他操作,如添加订单等,可以类似实现
}

uniCloud/database/schema.json

{
  "collections": [
    {
      "name": "dishes",
      "fields": [
        {
          "name": "_id",
          "type": "string",
          "auto": true
        },
        {
          "name": "name",
          "type": "string"
        },
        {
          "name": "price",
          "type": "number"
        }
      ]
    },
    {
      "name": "orders",
      "fields": [
        {
          "name": "_id",
          "type": "string",
          "auto": true
        },
        {
          "name": "cart",
          "type": "array"
        },
        {
          "name": "total",
          "type": "number"
        }
      ]
    }
  ]
}

此代码示例展示了如何在uni-app中实现一个简单的饭店开单系统,并结合unicloud进行数据存储和处理。您可以根据实际需求进行扩展和优化。

回到顶部