店内点餐小程序
##前几天给朋友店里写了个点餐小程序,可以实现点餐、上架、编辑、在线支付,,,废话不多说,看代码
代码下载地址: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;
}
安装过程有疑问,直接扣