微信小程序如何制作点餐系统始终置于底部的购物车，要求显示总价并能点击查看具体添加菜品，请提供提供js文件、wxss文件、wxml文件的代码范例

下面是一个简单的微信小程序点餐系统的示例代码，包括JS文件、WXSS文件和WXML文件。其中，购物车部分始终置于底部，可以显示总价并能点击查看具体添加的菜品。

JS文件：

// pages/menu/menu.js

Page({
  data: {
    menuList: [
      { id: 1, name: '鱼香肉丝', price: 20 },
      { id: 2, name: '宫保鸡丁', price: 18 },
      { id: 3, name: '糖醋排骨', price: 22 },
      { id: 4, name: '红烧茄子', price: 16 },
      { id: 5, name: '酸辣土豆丝', price: 12 }
    ],
    cartList: [],
    totalPrice: 0,
    showCartDetail: false
  },

  // 点击菜品添加到购物车
  addToCart(e) {
    const menuId = e.currentTarget.dataset.id;
    const menuIndex = this.data.menuList.findIndex(menu => menu.id === menuId);
    const cartIndex = this.data.cartList.findIndex(cart => cart.id === menuId);

    if (cartIndex === -1) {
      this.setData({
        cartList: [...this.data.cartList, { ...this.data.menuList[menuIndex], count: 1 }]
      });
    } else {
      const newCartList = [...this.data.cartList];
      newCartList[cartIndex].count++;
      this.setData({ cartList: newCartList });
    }

    this.calculateTotalPrice();
  },

  // 计算购物车总价
  calculateTotalPrice() {
    const totalPrice = this.data.cartList.reduce((total, cart) => total + cart.price * cart.count, 0);
    this.setData({ totalPrice });
  },

  // 点击购物车显示购物车详情
  showCartDetail() {
    this.setData({ showCartDetail: true });
  },

  // 点击购物车详情关闭购物车详情
  closeCartDetail() {
    this.setData({ showCartDetail: false });
  },

  // 清空购物车
  clearCart() {
    this.setData({ cartList: [], totalPrice: 0 });
  }
});

WXSS文件：

/* pages/menu/menu.wxss */

.menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.menu-item {
  width: 30%;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  overflow: hidden;
}

.menu-item-img {
  width: 100%;
  height: 200rpx;
}

.menu-item-name {
  padding: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.menu-item-price {
  padding: 10rpx;
  font-size: 24rpx;
}

.cart-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, .1);
  z-index: 999;
}

.cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  background-color: #ff9900;
  border-radius: 50%;
  color: #fff;
  font-size: 28rpx;
}

.cart-total-price {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  text-align: right;
}

.cart-detail {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70%;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, .1);
  z-index: 998;
  overflow: scroll;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.cart-item-name {
  font-size: 28rpx;
}

.cart-item-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  font-size: 24rpx;
}

.cart-item-price {
  font-size: 24rpx;
}

.cart-item-total-price {
  font-size: 24rpx;
  font-weight: bold;
}

WXML文件：

<!-- pages/menu/menu.wxml -->

<view class="menu-container">
  <view class="menu-item" wx:for="{{ menuList }}" wx:key="id" data-id="{{ item.id }}" bindtap="addToCart">
    <image class="menu-item-img" src="https://picsum.photos/200/200?random={{ item.id }}" />
    <view class="menu-item-name">{{ item.name }}</view>
    <view class="menu-item-price">￥{{ item.price }}</view>
  </view>
</view>

<view class="cart-container" bindtap="showCartDetail">
  <view class="cart-icon">购物车</view>
  <view class="cart-total-price">总价：￥{{ totalPrice }}</view>
</view>

<view wx:if="{{ showCartDetail }}" class="cart-detail">
  <view class="cart-item" wx:for="{{ cartList }}" wx:key="id">
    <view class="cart-item-name">{{ item.name }}</view>
    <view class="cart-item-count">{{ item.count }}</view>
    <view class="cart-item-price">￥{{ item.price }}</view>
    <view class="cart-item-total-price">￥{{ item.price * item.count }}</view>
  </view>
  <view class="cart-clear" bindtap="clearCart">清空购物车</view>
  <view class="cart-close" bindtap="closeCartDetail">关闭</view>
</view>