微信小程序电子菜单点菜系统模块代码分析

微信小程序电子菜单点菜系统的模块代码,包括菜品列表展示,菜品详情页面,购物车页面,以及结算页面功能模块

1、WXML(菜品列表页面):

```html



 
   
     
     
        {{item.name}}
        ¥{{item.price}}
     

   

 


```

WXSS:

```css
/* pages/dishList/dishList.wxss */
.dish-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.dish-item {
  width: 45%;
  margin-bottom: 20rpx;
  border: 1rpx solid #e0e0e0;
  padding: 10rpx;
  box-sizing: border-box;
  position: relative;
}

.dish-info {
  padding-top: 10rpx;
  text-align: center;
}

.dish-name {
  font-size: 28rpx;
  color: #333;
}

.dish-price {
  font-size: 24rpx;
  color: #f00;
}
```

JS(菜品列表页面逻辑):

javascript
// pages/dishList/dishList.jsPage({
  data: {
    dishes: [
      { id: 1, name: '红烧肉', price: 38, image: 'dish1.jpg' },
      { id: 2, name: '鱼香肉丝', price: 28, image: 'dish2.jpg' },
      // 其他菜品数据...
    ],
    cart: []  // 购物车
  },
  addToCart: function(event) {
    let dishId = event.currentTarget.dataset.id;
    let selectedDish = this.data.dishes.find(dish => dish.id === dishId);
    this.data.cart.push(selectedDish);
    this.setData({
      cart: this.data.cart
    });
  }
});
```

2、菜品详情页面的代码。

WXML(菜品详情页面):

```html

 
 
    {{dish.name}}
    ¥{{dish.price}}
    {{dish.description}}
 

 

```

WXSS:

```css/* pages/dishDetail/dishDetail.wxss */
.dish-detail {
  padding: 20rpx;
  box-sizing: border-box;
}

.dish-info {
  margin-top: 20rpx;
  text-align: center;
}

.dish-name {
  font-size: 32rpx;
  color: #333;
}

.dish-price {
  font-size: 28rpx;
  color: #f00;
  margin-top: 10rpx;
}

.dish-description {
  font-size: 26rpx;
  color: #666;
  margin-top: 20rpx;
}

button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f00;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border: none;
  border-radius: 10rpx;
  margin-top: 40rpx;
}
```

JS(菜品详情页面逻辑):

```javascript
// pages/dishDetail/dish.js
Page({
  data: {
    dish: {
      id: 1,
      name: '红烧肉',
      price: 38,
      image: 'dish1.jpg',
      description: '红烧肉是一道传统的中式菜肴...'
    }
  },
  addToCart: function() {
    // 将当前菜品添加到购物车,具体逻辑根据实际需求实现
  }
});
```

需要自行扩展菜品的图片、名称、价格、描述,菜品的规格选择、数量选择等功能。

 

3、购物车页面代码。

WXML(购物车页面):

```


 
   
     
     
        {{item.name}}
        ¥{{item.price}}
     

   

 

 

```

WXSS:

```
/* pages/shoppingCart/shoppingCart.wxss */
.shopping-cart {
  padding: 20rpx;
  box-sizing: border-box;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.cart-info {
  margin-left: 20rpx;
}

.cart-name {
  font-size: 28rpx;
  color: #333;
}

.cart-price {
  font-size: 24rpx;
  color: #f00;
  margin-top: 10rpx;
}

button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f00;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border: none;
  border-radius: 10rpx;
  margin-top: 40rpx;
}
```

JS(购物车页面逻辑):

```
// pages/shoppingCart/shoppingCart
Page({
  data: {
    cart: [
      {
        id: 1,
        name: '红烧肉',
        price: 38,
        image: 'dish1.jpg'
      },
      {
        id: 2,
        name: '宫保鸡丁',
        price: 28,
        image: 'dish2.jpg'
      }
    ]
  },
  checkout: function() {
    // 进入结算页面,具体逻辑根据实际需求实现  }
});
```

后续需要根据需求完善购物车页面的菜品数量修改、删除菜品等功能,并与结算页面进行数据交互。

 

4、结算页面代码

WXML(结算页面):

html


 
    订单总价:
    ¥{{totalPrice}}
 

 

```

WXSS:

css
/* pages/checkout/checkout.wxss */
.checkout {
  padding: 20rpx;
  box-sizing: border-box;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.summary-text {
  font-size: 28rpx;
  color: #333;
}

.summary-price {
  font-size: 32rpx;
  color: #f00;
}

button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f00;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border: none;
  border-radius: 10rpx;
}
```

JS(结算页面逻辑):

```javascript// pages/checkout/.js
Page({
  data: {
    totalPrice: 0, // 订单总价,根据实际情况进行算
  },
  confirmOrder: function() {
    // 确认订单,具体逻辑根据实际需求实现  }
});
```

后续需要根据需求完善结算页面的支付方式选择、订单信息展示等功能,并与后台系统进行数据交互。

 

你可能感兴趣的:(微信小程序开发大全,经验分享,课程设计,微信小程序,微信开放平台,微信公众平台)