微信小程序电子菜单点菜系统的模块代码，包括菜品列表展示，菜品详情页面，购物车页面，以及结算页面功能模块
1、WXML（菜品列表页面）：
```html
<!-- pages/dishList/dishList.wxml -->
<view class="dish-list">
<block wx:for="{{dishes}}" wx:key="id">
<view class="dish-item" data-id="{{item.id}}" bindtap="addToCart">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="dish-info">
<text class="dish-name">{{item.name}}</text>
<text class="dish-price">￥{{item.price}}</text>
</view>
</view>
</block>
</view>
```
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<!-- pages/dishDetail/dishDetail.wxml -->
<view class="dish-detail">
<image src="{{dish.image}}" mode="aspectFill"></image>
<view class="dish-info">
<text class="dish-name">{{dish.name}}</text>
<text class="dish-price">￥{{dish.price}}</text>
<text class="dish-description">{{dish.description}}</text>
</view>
<button bindtap="addToCart">加入购物车</button>
</view>
```
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（购物车页面）：
```
<!-- pages/shoppingCart/shoppingCart.wxml -->
<view class="shopping-cart">
<block wx:for="{{cart}}" wx:key="index">
<view class="cart-item">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="cart-info">
<text class="cart-name">{{item.name}}</text>
<text class="cart-price">￥{{item.price}}</text>
</view>
</view>
</block>
<button bindtap="checkout">去结算</button>
</view>
```
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
<!-- pages/checkout/checkout.wxml -->
<view class="checkout">
<view class="order-summary">
<text class="summary-text">订单总价：</text>
<text class="summary-price">￥{{totalPrice}}</text>
</view>
<button bindtap="confirmOrder">确认订单</button>
</view>
```
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() {
// 确认订单，具体逻辑根据实际需求实现 }
});
```
后续需要根据需求完善结算页面的支付方式选择、订单信息展示等功能，并与后台系统进行数据交互。