基于微信小程序的甜品外卖小程序＋PC端管理后台

一、系统截图

二、系统架构

微信小程序端：使用uniapp框架开发 PC端管理后台：使用SSM框架，数据库使用MySQL，前端使用VUE框架，开发环境：JDK8+IDEA+MySQL8.0

三、下载链接

点击下载

更多关于项目的描述可以点击基于微信小程序的甜品外卖小程序＋PC端管理后台

四、核心代码

`

1. project.config.json

jsonCopy Code
{
  "miniprogramRoot": "./dist",
  "appid": "YOUR_APPID",
  "projectname": "DessertDelivery",
  "description": "甜品外卖小程序",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
  },
  "compileType": "miniprogram"
}

2. app.js

javascriptCopy Code
App({
  globalData: {
    menu: [
      { name: '巧克力蛋糕', price: 25.0 },
      { name: '草莓冰淇淋', price: 10.0 },
      { name: '提拉米苏', price: 18.0 }
    ],
    order: []
  },
  addToOrder(dessert) {
    this.globalData.order.push(dessert);
  },
  removeFromOrder(index) {
    this.globalData.order.splice(index, 1);
  },
  clearOrder() {
    this.globalData.order = [];
  }
})

3. pages/index/index.js

javascriptCopy Code
// 获取应用实例
const app = getApp();

Page({
  data: {
    menu: [],
    order: [],
    totalPrice: 0
  },
  onLoad() {
    this.setData({
      menu: app.globalData.menu,
      order: app.globalData.order
    });
  },
  addToOrder(e) {
    const dessert = e.currentTarget.dataset.dessert;
    app.addToOrder(dessert);
    this.setData({
      order: app.globalData.order,
      totalPrice: this.calculateTotalPrice(app.globalData.order)
    });
  },
  removeFromOrder(e) {
    const index = e.currentTarget.dataset.index;
    app.removeFromOrder(index);
    this.setData({
      order: app.globalData.order,
      totalPrice: this.calculateTotalPrice(app.globalData.order)
    });
  },
  calculateTotalPrice(order) {
    let totalPrice = 0;
    for (const dessert of order) {
      totalPrice += dessert.price;
    }
    return totalPrice.toFixed(2);
  },
  clearOrder() {
    app.clearOrder();
    this.setData({
      order: [],
      totalPrice: 0
    });
  }
})

4. pages/index/index.wxml

htmlCopy Code
<view class="container">
  <view class="header">甜品菜单</view>
  <view class="menu">
    <block wx:for="{{ menu }}" wx:key="index">
      <view class="item" bindtap="addToOrder" data-dessert="{{ item }}">
        <text class="name">{{ item.name }}</text>
        <text class="price">￥{{ item.price }}</text>
      </view>
    </block>
  </view>

  <view class="header">我的订单</view>
  <view class="order">
    <block wx:for="{{ order }}" wx:key="index">
      <view class="item" bindtap="removeFromOrder" data-index="{{ index }}">
        <text class="name">{{ item.name }}</text>
        <text class="price">￥{{ item.price }}</text>
      </view>
    </block>
    <view class="total">总价：￥{{ totalPrice }}</view>
    <view class="clear" bindtap="clearOrder">清空订单</view>
  </view>
</view>

5. app.json

jsonCopy Code
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "甜品外卖",
    "navigationBarTextStyle": "black"
  },
  "style": "v2"
}

`