Repository: getweapp/weapp-diancan
Branch: master
Commit: e38aae92a920
Files: 11
Total size: 16.9 KB

Directory structure:
gitextract_hyylxvx4/

├── README.md
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── home/
│   │   ├── home.js
│   │   ├── home.wxml
│   │   └── home.wxss
│   └── order/
│       ├── order.js
│       ├── order.wxml
│       └── order.wxss
└── utils/
    └── util.js

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# 微信小程序－点餐

### 说明：

实现了点餐功能，包括菜品展示，分类筛选，加入购物车，提交订单等功能。

### 数据接口:

使用本地数据

### 目录结构：

- res — 存放项目图片
- pages — 存放项目页面相关文件，包括home,order等页面
- utils — 存放时间处理文件，可require引入

### 开发环境：

微信web开发者工具 v0.10.102800

### 项目截图：

https://www.getweapp.com/project?projectId=583291e9bb2538f8186c706d


================================================
FILE: app.js
================================================
//app.js
App({
  // onLaunch: function () {
  //   //调用API从本地缓存中获取数据
  //   var logs = wx.getStorageSync('logs') || []
  //   logs.unshift(Date.now())
  //   wx.setStorageSync('logs', logs)
  // },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo: null,
    foodList: [
      {
        id: 1,
        title: "黑胡椒意酱面",
        cost: 45,
        desc: "进口意大利通心粉制作，搭配有机番茄秘制酱汁。",
        icon: "https://fuss10.elemecdn.com/8/05/0b0f3719bf1c9c1673ed69e262888jpeg.jpeg",
        num: 0
      },
      {
        id: 2,
        title: "吉士意大利虾仁面",
        cost: 40,
        desc: "进口意大利通心粉制作，搭配进口地中海大虾仁。",
        icon: "https://fuss10.elemecdn.com/4/df/ff64bc5b06893a12aafb1e94f8b31jpeg.jpeg",
        num: 0
      },
      {
        id: 3,
        title: "牛排意大利面",
        cost: 38,
        desc: "进口意大利通心粉制作，搭配新鲜酱汁牛排和甜糯玉米。",
        icon: "https://fuss10.elemecdn.com/3/42/70aae8406958d22657c5772e2412ejpeg.jpeg",
        num: 0
      },
      {
        id: 4,
        title: "香炸鸡翅",
        cost: 12,
        desc: "有机食品，绿色农场放心肉源",
        icon: "https://fuss10.elemecdn.com/e/0e/df4f9d07b191d34ceddc3fedd88dcjpeg.jpeg",
        num: 0
      },
      {
        id: 5,
        title: "一品寿司",
        cost: 22,
        desc: "百分百手工，百分百口味，来自东海岸的问候。",
        icon: "https://fuss10.elemecdn.com/8/53/353cf146fc9cab79479efcfb6e88ajpeg.jpeg",
        num: 0
      },
      {
        id: 6,
        title: "水果拼盘",
        cost: 16,
        desc: "新鲜时蔬，源自生活的百味奇珍。",
        icon: "https://fuss10.elemecdn.com/0/b9/42b68495a09ec2e501ec3eaa36c6ejpeg.jpeg",
        num: 0
      },
      {
        id: 7,
        title: "巧手三明治",
        cost: 22,
        desc: "好吃不贵，明治选择。",
        icon: "https://fuss10.elemecdn.com/a/fe/0d647946855f76e9dcdfbedfcad61jpeg.jpeg",
        num: 0
      },
      {
        id: 8,
        title: "培根焗饭",
        cost: 26,
        desc: "好吃不解释，真的不解释。",
        icon: "https://fuss10.elemecdn.com/9/de/30676686cf98d88961eb69f1f3083jpeg.jpeg",
        num: 0
      }

    ]
    
  }
})

================================================
FILE: app.json
================================================
{
  "pages":[
    "pages/home/home",
    "pages/order/order"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "backgroundColor": "#fbf9fe",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "餐厅",
    "navigationBarTextStyle":"white"
  }
}


================================================
FILE: app.wxss
================================================
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 


================================================
FILE: pages/home/home.js
================================================
Page({
  data:{
    
    foodList:[],
    detailFood:{},
    modalHidden: true,

    //订单数据
    orderList: {},
    orderNum: 0,
    orderCost: 0,
    toastHidden: true,

    //轮播图
    imgUrls: [
      'https://fuss10.elemecdn.com/d/c0/56cfcdabba9fec97a3307b571ca8cjpeg.jpeg',
      'https://fuss10.elemecdn.com/6/f2/5cd85b966281a8d545c34019d0fd1jpeg.jpeg',
      'https://fuss10.elemecdn.com/e/55/b00aef689cb424aaaeae9d50d3e76jpeg.jpeg',
      'https://fuss10.elemecdn.com/a/88/98d10d5580ce28db07673e28726ccjpeg.jpeg'

    ],
    indicatorDots: true,
    autoplay: true,
    interval: 4000,
    duration: 1000,

    //picker
    foodTypes: ['全部菜品', '披萨', '面条', '水果', '寿司', '三明治'],
    foodTypesIndex: 0,
    rankTypes: ['综合排序', '热度', '价格', '好评', '时间'],
    rankTypesIndex: 0
  },

  // 页面初始化 options为页面跳转所带来的参数
  onLoad:function(options){
    
    //全局数据中获得食品列表
    var appInstance = getApp();
    var t_foodList = appInstance.globalData.foodList;

    var t_arr;
    for(var i=0; i<t_foodList.length; i++){
      if(i%2 == 0){
        t_arr = [];
        this.data.foodList.push(t_arr); //整理成二维数据，方便显示
      }
      t_arr.push(t_foodList[i]);
    }
  },

  //关闭食品详情弹窗
  closeModal: function(e) {
    this.setData({
      modalHidden: true
    })
  },

  //展示食品详情弹窗
  imageClick:function(e){

    var dataset = e.currentTarget.dataset;
    
    var appInstance = getApp();
    var t_foodList = appInstance.globalData.foodList;

    //设置数据，自动刷新界面
    this.setData({
      modalHidden: false,
      detailFood: t_foodList[dataset.index],
      detailIndex: dataset.index
    })
  },

  //提交订单
  sublimitClick:function(e){

    //订单列表 传参
    var agrs = JSON.stringify(this.data.orderList);
    wx.navigateTo({
        url: '../order/order?order=' + agrs
    })
  },

  //加入到购物车
  addCartClick:function(e){
    var dataset = e.currentTarget.dataset;
    this.changeNum(dataset.index, true);

    this.setData({
      toastHidden: false
    });

    //1s后关闭
    var _this = this;
    setTimeout(function(){
      _this.setData({
        toastHidden: true
      });
    }, 1000);

    //关闭商品详情面板
    this.closeModal();
  },

  //增加数量
  addClick:function(e){
    var dataset = e.currentTarget.dataset;
    this.changeNum(dataset.index, true);
  },

  //减少数量
  reduceClick:function(e){
    var dataset = e.currentTarget.dataset;
    this.changeNum(dataset.index, false);
  },

  changeNum:function(index, bool){
    var appInstance = getApp();
    var t_food = appInstance.globalData.foodList[index];

    var orderList = this.data.orderList;

    var obj = orderList[t_food.id];

    //如果存在，则数量变化
    if(obj){
        if(bool){
          obj.num = obj.num + 1;
        }else{
          if(obj.num > 0){
            obj.num = obj.num - 1;
          }else{
            return;//已经减少为0
          }
        }
    }else{
        if(bool){
          //不存在，点击增加，则写入一条订单数据，数量默认1
          obj = {
            id: t_food.id,
            num: 1,
            cost: t_food.cost,
            title: t_food.title
          };
          this.data.orderList[t_food.id] = obj;
        }else{
          return;//不存在，并且点击的是减少
        }
    }
    
    var order_num = 0;
    var order_cost = 0;
    for(var k in orderList){
      order_num = orderList[k].num + order_num; //计算总数量
      order_cost = order_cost + orderList[k].cost * orderList[k].num; //计算总价格
    }

    this.setData({
      orderList: orderList,
      orderNum: order_num,
      orderCost: order_cost
    });
  },

  //食品类型
  foodTypeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      foodTypesIndex: e.detail.value
    })
  },

  //排序类型
  rankTypeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      rankTypesIndex: e.detail.value
    })
  },

})

================================================
FILE: pages/home/home.wxml
================================================
<view class="section">

  <!-- banner -->
  <view class="banner" >
    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}" wx:key="item.id">
        <swiper-item>
          <image src="{{item}}" mode="scaleToFill" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
  </view>

  <!-- picker -->
  <view class="memu">
    <picker style="flex: 1;" bindchange="foodTypeChange" value="0" range="{{foodTypes}}">
        <view class="memu-bt">{{foodTypes[foodTypesIndex]}}<span style="font-size:22px;">﹀</span></view>
    </picker>

    <picker style="flex: 1;" bindchange="rankTypeChange" value="0" range="{{rankTypes}}">
        <view class="memu-bt">{{rankTypes[rankTypesIndex]}}<span style="font-size:22px;">﹀</span></view>
    </picker>
  </view>

  <!-- 食品列表 -->
  <view>
    <scroll-view style="height: 100%;" scroll-y="true">
      <view class="fooditem" wx:for="{{foodList}}" wx:key="item.id">

        <view class="fooditem-l" >
          <image mode="scaleToFill" src="{{item[0].icon}}" data-index="{{index*2}}" bindtap="imageClick"></image>
          <view class="foodtitle">{{item[0].title}}</view>
          <view class="fooditem-handle">
            <span class="fooditem-jia" data-index="{{index*2}}" bindtap="addClick" >+</span>
            <span class="fooditem-num">{{orderList[item[0].id].num ? orderList[item[0].id].num : 0}}</span>
            <span class="fooditem-jia" data-index="{{index*2}}" bindtap="reduceClick">-</span>
            <span class="fooditem-cost">￥{{item[0].cost}}</span>
          </view>
        </view>
        <view class="fooditem-r" >
          <image mode="scaleToFill" src="{{item[1].icon}}" data-index="{{index*2 + 1}}" bindtap="imageClick"></image>
          <view class="foodtitle">{{item[1].title}}</view>
          <view class="fooditem-handle">
            <span class="fooditem-jia" data-index="{{index*2 + 1}}" bindtap="addClick">+</span>
            <span class="fooditem-num">{{orderList[item[1].id].num ? orderList[item[1].id].num : 0}}</span>
            <span class="fooditem-jia" data-index="{{index*2 + 1}}" bindtap="reduceClick">-</span>
            <span class="fooditem-cost">￥{{item[1].cost}}</span>
          </view>
        </view>
        
      </view>
    </scroll-view>
  </view>

  <!-- toast -->
  <toast hidden="{{toastHidden}}">已加入购物车</toast>

  <!-- 弹出面板 -->
  <view class="detail" style="display:{{modalHidden ? 'none' : 'block'}};">
    <view class="detail-top" bindtap="closeModal"></view>
    <view class="detail-bottom">
      <image src="{{detailFood.icon}}"></image>
      <view class="detail-title">{{detailFood.title}}</view>
      <view class="detail-cost">￥{{detailFood.cost}}</view>
      <view class="detail-desc">{{detailFood.desc}}</view>
    </view>
    <view class="detail-buybt" data-index="{{detailIndex}}" bindtap="addCartClick">加入购物车</view>
  </view>

  <view style="height:45px;" ><view>

  <!-- 提交订单 -->
  <view class="order-view" style="display:{{modalHidden ? 'flex' : 'none'}};">
      <view class="order-number">
        <image mode="scaleToFill" src="/res/img/cart.png"></image>
        <span class="order-num-txt">{{orderNum}}</span>
        <span>￥{{orderCost}}</span>
      </view>
      <view class="order-bt" bindtap="sublimitClick">提交订单</view>
  <view>

</view>




================================================
FILE: pages/home/home.wxss
================================================

/* banner image */
.slide-image{
    width: 96%;
    height: 250px;
    margin: 0 auto;
    margin-left: 2%;
}

/* 下拉菜单 */
.memu{
    display: flex;
    flex-direction: row;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
.memu-bt{
    display: block;
    flex: 1;
    padding: 10px 0px;
}
.memu-bt span{
    position: relative;
    top: 7px;
    left: 5px;
}

/* 食品列表 */
.fooditem{
    flex-direction: row;
    display: flex;
    margin: 15px 0px;
}
.fooditem-l,.fooditem-r{
    flex: 1;
}
.fooditem-l{
    margin-left: 5%;
}
.fooditem-r{
    margin-left: 0%;
}
.fooditem image{
    width: 90%; 
    height: 100px;
}
.foodtitle{
    font-size: 14px;
    margin-top: 10px;
}
.fooditem-handle{
    margin-top: 12px;
}
.fooditem-jia{
    font-size: 20px;
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 1px solid #ff2d2d;
    color: #ff2d2d;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
}
.fooditem-num{
    font-size: 14px;
    display: inline-block;
    color: #ff2d2d;
    width: 28px;
    text-align: center;
    margin-top: -3px;
}
.fooditem-cost{
    font-size: 14px;
    color: #ff2d2d;
    width: 40px;
    float: right;
    margin-top: 5px;
}

/* 提交订单 */
.order-view{
    position: fixed;
    display: flex;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 45px;
}
.order-number{
    width: 50%;
    background-color: #eee;
    color: #ff2d2d;
    text-align: center;
    line-height: 45px;
}
.order-number image{
    position: absolute;
    width: 20px; 
    height: 20px;
    left: 19px;
    top: 13px;
}
.order-num-txt{
    position: absolute;
    width: 20px; 
    height: 20px;
    display: block;
    font-size: 14px;
    border-radius: 10px;
    background-color: #ff2d2d;
    color: #fff;
    line-height: 22px;
    left: 35px;
    top: 5px;
}
.order-bt{
    width: 50%;
    background-color: #09bb07;
    color: #fff;
    text-align: center;
    line-height: 45px;
}

/* 食品详情-弹出面板 */
.detail{
    width: 100%;
    position: fixed;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
}
.detail-top{
    height: 16%;
    background-color: #000;
    opacity: 0.75;
}
.detail-bottom{
    height: 84%;
    background-color: #fff;
}
.detail-bottom image{
    width: 100%;
}
.detail-title{
    font-size: 14px;
    margin: 20px 0px 0px 20px;
}
.detail-cost{
    font-size: 14px;
    color: #ff2d2d;
    margin: 10px 0px 20px 20px;
}
.detail-desc{
    font-size: 14px;
    color: #aaa;
    padding: 20px 0px 0px 20px;
    border-top: 1px solid #999;
}
.detail-buybt{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    background-color: #09bb07;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

================================================
FILE: pages/order/order.js
================================================
Page({
  data:{
    orderList: [],
    total: 0, //总价格
    toastHidden: true,
    toastTxt: "",
    tables: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号"], //桌号
    tableIndex: 0
  },

  // 页面初始化 options为页面跳转所带来的参数
  onLoad:function(options){
    
    //object 转 array
    var order = JSON.parse(options.order);
    var t_order = [];
    var t_total = 0;
    for(var k in order){
      if(order[k].num > 0){
          t_order.push(order[k]);
          t_total = t_total + order[k].cost*order[k].num; //计算总价格
      }
    }
  
    this.setData({
      orderList: t_order,
      total: t_total
    });
    
  },

  //修改标题
  onReady:function(){
    wx.setNavigationBarTitle({
      title: '确认菜品'
    })
  },

  //返回修改
  returnClick:function(){
    wx.navigateBack();
  },

  //确认提交
  okClick:function(){

    //1s后关闭
    var _this = this;
    setTimeout(function(){
      _this.setData({
        toastHidden: true
      });
    }, 1000);

    if(this.data.orderList.length == 0){
        this.setData({
          toastHidden: false,
          toastTxt: "没有选择商品"
        });
    }else{
        this.setData({
          toastHidden: false,
          toastTxt: "提交成功"
        });
    }
  },

  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      tableIndex: e.detail.value
    })
  },
})

================================================
FILE: pages/order/order.wxml
================================================
<view>
  <view class="table">
    <view class="table-num">桌号</view>
    
    <picker bindchange="bindPickerChange" value="{{tableIndex}}" range="{{tables}}">
      <view class="table-input">{{tables[tableIndex]}}</view>
      <span class="table-arrow">﹀</span>
    </picker>

  </view>

  <view class="beizhu">
    <view class="beizhu-txt">备注</view>
    <input class="beizhu-input"  placeholder="" />
  </view>

  <view class="order">
    <view class="cost">总价：<span>￥{{total}}</span></view>

    <view class="orderlist" wx:for="{{orderList}}" wx:key="item.id">
      <span>{{item.title}}</span><span style="float:right;">￥{{item.cost}} * {{item.num}}</span>
    </view>
  </view>

  <view class="bt-area">
    <view class="bt-return" bindtap="returnClick">返回修改</view>
    <view class="bt-ok" bindtap="okClick">确定提交</view>
  </view>

  <toast hidden="{{toastHidden}}">{{toastTxt}}</toast>

</view>

================================================
FILE: pages/order/order.wxss
================================================

.table{
    padding: 40px 0px 0px 30px;
}
.table-num{
    margin-right: 20px;
    font-size: 16px;
    margin-top: 4px;
    float: left;
}
.table-input{
    width: 50px;
    height: 25px;
    display: inline-block;
    border: 1px solid #ccc;
    vertical-align: middle;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
}
.table-arrow{
    width: 30px;
    height: 25px;
    margin-left: -1px;
    display: inline-block;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 35px;
    vertical-align: middle;
}

.beizhu{
    padding: 30px 40px 40px 30px;
    border-bottom: 1px solid #aaa;
}
.beizhu-txt{
    margin-top: 4px;
    margin-right: 20px;
    font-size: 16px;
    float: left;
}
.beizhu-input{
    padding-left: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.order{
    padding: 20px 20px 48px 30px;
}
.cost{
    font-size: 16px;
    margin-bottom: 20px;
}
.cost span{
    color: #ff2d2d;
    margin-left: 12px; 
}
.orderlist{
    margin-top: 20px;
}
.orderlist span{
    font-size: 15px;
}

.bt-area{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;

}
.bt-return{
    width: 50%;
    height: 48px;
    display: inline-block;
    background-color: #eee;
    text-align: center;
    line-height: 48px;
    font-size: 20px;
}
.bt-ok{
    width: 50%;
    height: 48px;
    display: inline-block;
    background-color: #09bb07;
    text-align: center;
    line-height: 48px;
    font-size: 20px;
    color: #fff;
}

================================================
FILE: utils/util.js
================================================
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}