微信小程序-店内点餐小程序

最新推荐文章于 2024-05-25 13:45:07 发布

置顶代码哥-老余

最新推荐文章于 2024-05-25 13:45:07 发布

阅读量7.6k

点赞数 6

分类专栏：微信小程序文章标签：小程序 javascript html css php

本文链接：https://blog.csdn.net/weixin_43466318/article/details/108367605

版权

微信小程序专栏收录该内容

5 篇文章 7 订阅

订阅专栏

店内点餐小程序

##前几天给朋友店里写了个点餐小程序，可以实现点餐、上架、编辑、在线支付，，，废话不多说，看代码
代码下载地址：https://download.csdn.net/download/weixin_43466318/18393423
效果图：
前端
在这里插入图片描述

后台
在这里插入图片描述

js代码

//index.js
const app = getApp()
var order = require('../../utils/order.js')

var util = require('../../utils/util.js')
Page({
  data: {
    sx:0,
    pathUrl: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/nl-club-image/',
    tanchuang:0,
    list: [],
    content: '',
    list2: [],
    navBtn: null,
    name:null,
    time:null,
    weizhi:null,
  },

  onLoad: function() {
///判断用户是否完善了桌号信息，若无完善，弹出窗口，让客户完善
var app = getApp()
this.setData({
  tanchuang:app.globalData.zhuohao
})


//刷新
this.setData({       
  sx: 1
});
var that = this;
setTimeout(function () {
  that.setData({
    sx: 0
  });
}, 2000);



wx.downloadFile({
  ///下载分类数据库
  url: 'https://www.yingmei.club/dianzhiyun/QT/upload/fl.txt',
  success: res => {
    const filePath = res.tempFilePath
    wx.getFileSystemManager().readFile({  /读取文件
      filePath: res.tempFilePath,
      encoding: 'utf-8',
      success: re2s => {
          数据截取神器--余朝永原创代码
            var dateList = re2s.data.split(";");
            var arr = []
            for (var i in dateList) {
            arr = arr.concat(dateList[i]);
            }
            this.setData({
              navBtn: [{
                'name': arr[0],
                'icon': 'https://www.yingmei.club/dianzhiyun/QT/upload/fl1.gif',
                'url': '',
                'bgc': '#5093D2',
                'fl':'tiaozhuancaidan1'
              },{
                'name': arr[1],
                'icon': 'https://www.yingmei.club/dianzhiyun/QT/upload/fl2.gif',
                'url': '../caicai/caicai',
                'bgc': '#5094D2',
                'fl':'tiaozhuancaidan2'
              },
              {
                'name': arr[2],
                'icon': 'https://www.yingmei.club/dianzhiyun/QT/upload/fl3.gif',
                'url': '../caicai/caicai',
                'bgc': '#DA70A0',
                'fl':'tiaozhuancaidan3'
              },
              {
                'name': arr[3],
                'icon': 'https://www.yingmei.club/dianzhiyun/QT/upload/fl4.gif',
                'url': '../caicai/caicai',
                'bgc': '#DF975C',
                'fl':'tiaozhuancaidan4'
              } 
            ],

            })
           ///数据截取神器--余朝永原创代码
  }})
},
  fail: console.error
})




wx.downloadFile({
  ///下载商家信息数据——店铺名称
  url: 'https://www.yingmei.club/dianzhiyun/QT/upload/name.txt',
  success: res => {
    const filePath = res.tempFilePath
    wx.getFileSystemManager().readFile({  /读取文件
      filePath: res.tempFilePath,
      encoding: 'utf-8',
      success: re2s => {
            this.setData({
              name:re2s.data
            })
  }})
},
  fail: console.error
})



wx.downloadFile({
  ///下载商家信息数据——营业时间
  url: 'https://www.yingmei.club/dianzhiyun/QT/upload/time.txt',
  success: res => {
    const filePath = res.tempFilePath
    wx.getFileSystemManager().readFile({  /读取文件
      filePath: res.tempFilePath,
      encoding: 'utf-8',
      success: re2s => {
            this.setData({
              time:re2s.data
            })
  }})
},
  fail: console.error
})



wx.downloadFile({
  ///下载商家信息数据——地址
  url: 'https://www.yingmei.club/dianzhiyun/QT/upload/weizhi.txt',
  success: res => {
    const filePath = res.tempFilePath
    wx.getFileSystemManager().readFile({  /读取文件
      filePath: res.tempFilePath,
      encoding: 'utf-8',
      success: re2s => {
            this.setData({
              weizhi:re2s.data
            })
  }})
},
  fail: console.error
})





  //加载热门菜品
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/caipin/api/list.html', 
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success (res) {
        var list = res.data.data;
        console.log(res.data.data)
        
        for(var i = 0; i<list.length; i++){
          var item = list[i];
          item.img = app.globalData.baseUrl + '/' + item.img;
        }
        that.setData({
          list3: list
        });
      }
    })
  










    var that = this;
    that.loadTableNumber();
  },
  //加载桌号
  loadTableNumber: function(){
    var that = this;
    console.log(app.globalData.baseUrl + '/tableNumber/api/list.html')
    wx.request({
      url: app.globalData.baseUrl + '/tableNumber/api/list.html', 
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success (res) {
        var list = res.data.data;
        var tableId = order.getTableId();
        for(var i = 0; i<list.length; i++){
          list[i].active = '';
          if(list[i].dbid == tableId)
            list[i].active = 'active';
        }
        that.setData({
          list: list
        });
      }
    })
  },



  //添加菜品
  addCaipin: function(e){
    var that = this;
    var list = that.data.list;
    var id = e.currentTarget.dataset.id;
    var caipin = that.getCaipinById(id);
    caipin.number = 1;//数量
    order.addCaipin(caipin);
    wx.setTabBarBadge({
      index: 2,
      text: order.getCaipinNumber()+''
    })
  },
  //根据id获得
  getCaipinById: function(id){
    var that = this;
    var list = that.data.list3;
    for(var i = 0; i<list.length; i++){
      var item = list[i];
      if(item.dbid == id)
        return item;
    }
    return null;
  },



  clickEvent: function(e){
    var that = this;
    var list = that.data.list;
    var index = e.currentTarget.dataset.index;
    for(var i = 0; i<list.length; i++){
      list[i].active = '';
    }
    list[index].active = 'active';
    that.setData({
      list: list
    });
    order.setTable(list[index].dbid, list[index].name);
    setTimeout(function () {
     // wx.switchTab({
       // url: '../menu/menu'
      //})
    }, 500) ;
  },













  onShow: function () {
    var that = this;
    that.loadComment();
  },
  //加载评论
  loadComment: function(){
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/comment/api/list.html', 
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success (res) {
        var list = res.data.data;
        that.setData({
          list2: list
        });
      }
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  onGotUserInfo (e) {
    var that = this;
    var userInfo = e.detail.userInfo;
    var content = that.data.content.trim();
    if(content == ''){
      wx.showToast({
        title: '请填写评论内容',
        icon: 'none',
        duration: 2000
      })
      return ;
    }
    wx.showLoading({
      title: '提交中',
    })
    util.getOpenid(function(openid){
      wx.request({
        url: app.globalData.baseUrl + '/comment/api/add.html', 
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        data: {
          openid: openid,
          nickname: userInfo.nickName,
          avatar: userInfo.avatarUrl,
          content: content
        },
        success (res) {
          wx.hideLoading();
          var data = res.data;
          if(data.code != 0){
            wx.showToast({
              title: data.data,
              icon: 'none',
              duration: 2000
            })
            return ;
          }
          wx.showToast({
            title: '提交成功!',
            icon: 'none',
            duration: 2000
          })
          that.setData({
            content: ''
          });
          that.loadComment();
        }
      })
    })


  },








  onPullDownRefresh: function () {
      //加载评论
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/comment/api/list.html', 
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success (res) {
        var list = res.data.data;
        that.setData({
          list2: list
        });
      }
    })

  },





  ///按分类跳转到菜单
  tiaozhuancaidan1(e){
      wx.switchTab({
        url: '../menu/menu'
      })

          //异步方式储存表单数据
          wx.setStorage({
            key: 'fl',
            data: 1,
          })


      console.log("跳转菜单页1")
      },

      tiaozhuancaidan2(e){
        wx.switchTab({
          url: '../menu/menu'
        })


                  //异步方式储存表单数据
                  wx.setStorage({
                    key: 'fl',
                    data: 2,
                  })


        console.log("跳转菜单页2")
        },

        tiaozhuancaidan3(e){
          wx.switchTab({
            url: '../menu/menu'
          })

          //异步方式储存表单数据
          wx.setStorage({
            key: 'fl',
            data: 3,
          })



          console.log("跳转菜单页3")
          },

          tiaozhuancaidan4(e){
            wx.switchTab({
              url: '../menu/menu'
            })


          //异步方式储存表单数据
          wx.setStorage({
            key: 'fl',
            data: 4,
          })
            console.log("跳转菜单页4")
            },








  modalChange22(e){
    this.setData({
      tanchuang:1
    })

  },




  //客服电话
  freeTell: function(e){
    wx.downloadFile({
      ///下载客服管理数据库
      url: 'https://www.yingmei.club/dianzhiyun/QT/upload/kfgl.txt',
      success: res => {
        const filePath = res.tempFilePath
        wx.getFileSystemManager().readFile({  /读取文件
          filePath: res.tempFilePath,
          encoding: 'utf-8',
          success: re2s => {
              数据截取神器--余朝永原创代码
                var dateList = re2s.data.split(";");
                var arr = []
                for (var i in dateList) {
                arr = arr.concat(dateList[i]);
                }
               ///数据截取神器--余朝永原创代码
                 
               wx.makePhoneCall({             ///拨打电话
                phoneNumber: arr[0],
              })
      }})
    },
      fail: console.error
    })

  },




//导航
dh: function(e){
  var name=this.data.name

  wx.downloadFile({
    ///下载客服管理数据库
    url: 'https://www.yingmei.club/dianzhiyun/QT/upload/kfgl.txt',
    success: res => {
      const filePath = res.tempFilePath
      wx.getFileSystemManager().readFile({  /读取文件
        filePath: res.tempFilePath,
        encoding: 'utf-8',
        success: re2s => {
            数据截取神器--余朝永原创代码
              var dateList = re2s.data.split(";");
              var arr = []
              for (var i in dateList) {
              arr = arr.concat(dateList[i]);
              }
             ///数据截取神器--余朝永原创代码
               console.log(parseFloat(arr[2]))
             const latitude = parseFloat(arr[2])    // 纬度  parseFloat是将字符转换为数字（保留小数）
             const longitude = parseFloat(arr[1])        //经度
             wx.openLocation({       导航
               latitude,
               longitude,
               name: name,
               address: "联系我们："+arr[0]+" 这家店超赞！",
               scale: 18
             })
    }})
  },
    fail: console.error
  })






  }

})

wxml

<!--index.wxml-->

<modal title="选择座位号" class="modal" no-cancel bindconfirm="modalChange22" confirmText="选好了" wx:if="{{tanchuang == 0}}">

  <view>
  <view class="list">
    <text class="item {{item.active}}" wx:for="{{list}}" wx:for-item="item" wx:for-index="idx" bindtap="clickEvent" data-index="{{idx}}">{{item.name}}</text>
  </view>
</view>


<view style="line-height: 34px;text-align: center;color:#8c8c8c;font-size: 12PX;">Copyright ©滇之韵 版权所有</view>

</modal>



<view class="body-view">
    <loading wx:if="{{sx == 1}}">
        列表刷新中...
    </loading>
</view>



<view>
	<contact-button class="img-plus-style zindex100 yc" bindtap="freeTell"></contact-button>
	<image src="/images/kf.png" class="img-plus-style" ></image>
  <view></view>

  	<contact-button class="img-plus-style2 zindex1002 yc2" bindtap="dh"></contact-button>
	<image src="/images/dh.png" class="img-plus-style2"></image>
</view>





<!--商家信息-->
<view class="bj1" style="z-index:-1">
<view class="sjxq"><image class="sjxq2" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1740312404,1328794564&fm=26&gp=0.jpg"></image> <view class="sjxq3"> 商家详情</view></view>

<image class="logo1" src="https://www.yingmei.club/dianzhiyun/QT/upload/logo.png"></image> 
<view class="name1"> 
<image  style="  height: 110rpx;width: 350rpx;" src="https://www.yingmei.club/dianzhiyun/QT/upload/zp.gif"></image> 
<text  class="zzyy"> </text> <view class="name2">  ———{{weizhi}}</view>  </view> 


  <scroll-view scroll-y="true" class="list2">
    <view>
      <view class="item2" style="border-top:2rpx solid #bbbbbb;">
        <view class="top2">
          <image class="avatar2" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=196227483,1184402527&fm=26&gp=0.jpg"></image>
          <text class="nickname2">营业时间：{{time}}</text>
        </view>
      </view>

     <view class="item2" style="border-top:2rpx solid #bbbbbb;">
        <view class="top2">
          <image class="avatar2" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1013393775,2521806282&fm=26&gp=0.jpg"></image>
          <text class="nickname2">地址: {{weizhi}}</text>
        </view>
    </view>

    <view class="item3"> </view>
      
    </view>
  </scroll-view>




<!--轮播图-->
<view class="view6" style="z-index:-1">
<swiper style='height:150px;z-index:-1' autoplay="auto" interval="3000" duration="500" indicator-dots="true">
<swiper-item>
<image src='https://www.yingmei.club/dianzhiyun/QT/upload/lb1.gif' style='width:100%;height:150px;z-index:-1'></image>
</swiper-item>
<swiper-item>
<image src='https://www.yingmei.club/dianzhiyun/QT/upload/lb2.gif' style='width:100%;height:150px;z-index:-1'></image>
</swiper-item>
<swiper-item>
<image src='https://www.yingmei.club/dianzhiyun/QT/upload/lb3.gif' style='width:100%;height:150px;z-index:-1'></image>
</swiper-item>
</swiper>
</view>

</view>





<!--分类栏-->

<view class="bj2">

<view class="sjxq"><image class="sjxq2" src="/images/bj_fl.jpg"></image> <view class="sjxq3"> 分类/点餐</view></view>

<view class='navBox'>
  <view class='navBtn' wx:for="{{navBtn}}" wx:key="unique">
    <navigator url='{{}}' hover-class='none'>
      <image class='navImg' src='{{item.icon}}' style='background:{{item.bgc}}' bindtap="{{item.fl}}"></image>
      <view class='navName'>{{item.name}}</view>
    </navigator>
  </view>
</view>




</view>













<!--热销产品-->
<view class="sjxq"><image class="sjxq2" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2377859805,1547641452&fm=15&gp=0.jpg"></image> <view class="sjxq3"> 热销</view></view>

  <view class="list3">
    <view class="row3" wx:for="{{list3}}" wx:key="unique" wx:if="{{item.order == 5}}"  style="background-color:#ffffff;">
      <image class="icon3" src="{{item.img}}"></image>
      <text style="margin: 0 0 0 0px;width: 45%;   font-size: 16px;color: rgb(58, 58, 58);">{{item.name}}</text>
      <text style=" color: rgb(255, 0, 0);">¥{{item.price}}</text>
   <image class="jiahao3" src="/images/lyd.png" bindtap="addCaipin" data-id="{{item.dbid}}"></image>
    </view>
  </view>












<!--评论区域-->
  <text class="title2">♡评论</text>
<scroll-view class="swiper_container" scroll-y>
<view class="container2">

  <scroll-view scroll-y="true" class="list2">
    <view>
      <view class="item2" wx:for="{{list2}}" wx:for-item="item">
        <view class="top2" >
          <image class="avatar2" src="{{item.avatar}}"  style="z-index:-1"></image>
          <text class="nickname2"  style="z-index:-1">{{item.nickname}}</text>
          <text  style="z-index:-1">{{item.createTime}} </text>
        </view>
        <text class="con2">{{item.content}}</text>
      </view>
    </view>
  </scroll-view>

  <view class="form2" style="z-index:0">
    <input class="inp2" value="{{content}}" bindinput="bindKeyInput"/>
    <button size="mini" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">提交</button>
  </view>
</view>



</scroll-view>










<view style="line-height: 34px;text-align: center;color:#8c8c8c;font-size: 12PX;">Copyright ©滇之韵 版权所有</view>

wxss

/**index.wxss**/

.img-plus-style {
  height: 130rpx;
  width: 130rpx;
  position: fixed;
  bottom: 250rpx;
  right: 13rpx;
  opacity: 1
  }
  .zindex100{z-index: 2}
  .yc{opacity: 0}

  .img-plus-style2 {
    height: 130rpx;
    width: 130rpx;
    position: fixed;
    bottom: 100rpx;
    right: 13rpx;
    opacity: 1
    }
    .zindex1002{z-index: 2}
    .yc2{opacity: 0}





page {
  background:   #ffffff00;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list{
  width: 95%;
  display: flex;
  justify-content: flex-start;
  padding-top: 20rpx;
  flex-wrap: wrap;
}
.item{
  border:2rpx solid #7a92b4;
  border-radius: 10rpx;
  padding: 15rpx 20rpx 15rpx 20rpx;
  margin: 20rpx 20rpx 0 0 ;
}
.active{
  border:4rpx solid #fcf400;
  color: #505050;
}



.bj1{
  margin: 2px 0 0 0;
  background-color: rgb(255, 255, 255);
  height: 390px;
}
.sjxq{
  margin: 0px 0 0 0;
}

.sjxq3{
margin: -25px 0 0 40px;
}


.sjxq2{
  margin: 10px 0 0 2%;
  width: 25px;
  height: 25px;
}

.logo1{
  margin: 10px 0 0 5%;
  height: 100px;
  width: 27%;
}

.name1{
  color: coral;
  font-size: 25px;
  margin: -70px 0 0 40%;
}

.name2{
  color: coral;
 font-size: 13px;
}

.dw{
  margin: 5px 0 0 0;
  width: 20px;
  height: 20px;
}

.zzyy{
  font-size: 12px;
  margin: 0 0 0 2px;
  background-color: cornflowerblue;
  color: #ffffff;
}

.view6{
  background-color: rgb(214, 236, 113); 
   font-size: 18PX; 
   width:98%;
   height: 150px; 
   margin: 5px  0PX  0PX 1% ; 
  background-size: 100% 200px;
  z-index: -1
  }




.bj2{

  margin: 20px 0 0 0;

}

.navBox {
  display: flex;
  width: 98%;
  height: 220rpx;
  background: rgba(255, 183, 0, 0.563);

  padding: 10rpx 0 ;
  margin: 0 0 0 1%;
  font-size: 12pt;
}

.navBtn {
  /* 33.3 25 20 */
  width: 35%;
  text-align: center;
  padding-top: 15rpx;
  box-sizing: border-box;
}


.navImg {
  margin: 0 0 0 10%;
  width: 125rpx;
  height: 125rpx;
  border-radius: 50%;
  
}

.navName {
  padding: 0rpx 0;
}



/**index.wxss**/



.container3{
  display: flex;
  flex-direction: column;
}
.list3{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
}

.row3{
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10rpx 0 10rpx 0;
  border:0.5rpx solid #ffffff;
  border-radius: 10rpx;
}
.row3 .icon3{
  width: 180rpx;
  height: 180rpx;
}

.row3 .jiahao3{
  width: 120rpx;
  height: 65rpx;
  padding: 10rpx;
}


.modal{
  background-color: chocolate;
}


























page2 {
  background: #b3d0f0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.container2{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
.title2{
  margin: 10px 0 0 0;
  padding: 10rpx 0 30rpx 15rpx;
}
.list2{
  margin: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}
.list2 .item2{
  width: 94%;
  border-top:1rpx solid #f0f0f0;
  padding: 15rpx 15rpx 15rpx 0rpx;
  margin: 0 0 0 2%;
}





.item3{
  border-top:2rpx solid #bbbbbb;
  width: 96%;
  margin: 0 0 0 2%;
}


.list2 .item2 .top2{
  display: flex;
  align-items: center;
}
.list2 .item2 .top2 .avatar2{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
.list2 .item2 .top2 .nickname2{
  flex: 1;
}
.list2 .item2 .con2{
  padding-top: 10rpx;
}

.form2{
  display: flex;
  align-items: center;
  background-color: #eae7e9;
  width: 100%;
  padding: 15rpx 0 15rpx 0;
}
.form2 .inp2{
  flex: 1;
  padding: 10rpx 15rpx 10rpx 15rpx;
  background-color: #ffffff;
  opacity: 0.8;
  margin-left: 15rpx;
}


.swiper_container{

  height: 300px;
}

安装过程有疑问，直接扣
在这里插入图片描述

代码哥-老余

关注

6
点赞
踩
138

收藏

觉得还不错? 一键收藏
打赏
1
评论
微信小程序-店内点餐小程序

店内点餐小程序##前几天给朋友店里写了个点餐小程序，可以实现点餐、上架、编辑、在线支付，，，废话不多说，看代码效果图：前端后台js代码//index.jsconst app = getApp()var order = require('../../utils/order.js')var util = require('../../utils/util.js')Page({ data: { sx:0, pathUrl: 'https://nlwxapp.oss-c
复制链接

扫一扫