随着小程序的横空出世，俨然微信平台已经成为外卖行业的主力军之一，让不少有微信外卖平台的餐饮行业，都纷纷开发了自己的外卖订餐系统小程序，可见订餐小程序是多么的火爆！
订餐小程序对商家来说既降低了运营的成本，提高了效率，实现了线上与线下的融合，可是在选择做小程序时，要选择在品质、功能、售后服务上都有保障的平台。引进订餐小程序，可以有效保证店铺工作的有序性，杜绝漏单、跑单等失误的现象，后台可以轻松对于订单进行清算和统计，有利于根据经营情况调整营销策略。
工作清闲之余，自己动手写了一套外卖订餐微信小程序系统。收货很多！下面是系统截图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面是商品功能页面代码
<view class="cont">
<!--轮播-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='width:100%;height:800rpx;'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class="a">
<view class="a_b">{{info.name}}</view>
<view class="a_c">{{info.content}}</view>
<!--购买商品按钮-->
<view class="mon">
<view class="yuan">
￥{{info.price_yh}}
</view>
<view class="stepper">
<!-- 减号 -->
<text class="op {{minusStatuses[index]}}" data-alpha-beta="0" bindtap="changeNum">-</text>
<!-- 数值 -->
<view class="nownum">{{buynum}}</view>
<!-- 加号 -->
<text class="oq normal" data-alpha-beta="1" bindtap="changeNum">+</text>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom_a" bindtap="ydzw">预订座位</view>
<view class="bottom_b" bindtap="addShopCart" data-type="addcart">加入购物车</view>
</view>
</view>
// pages/product/product.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
buynum:1,
proId:0,
info:{},
},
// 加减
changeNum: function (e) {
var that = this;
if (e.target.dataset.alphaBeta == 0) {
if (this.data.buynum <= 1) {
buynum: 1
} else {
this.setData({
buynum: this.data.buynum - 1
})
};
} else {
this.setData({
buynum: this.data.buynum + 1
})
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('===' + options.productId);
var proId = options.productId;
var title = options.title;
wx.setNavigationBarTitle({
title: title,
})
this.setData({
proId: proId,
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.hideToast();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
wx.showToast({
title: '加载中...',
icon: 'loading',
});
var that = this;
var proId = that.data.proId;
wx.request({
url: app.d.ceshiUrl + '/Api/Product/index',
method: 'post',
data: {
pro_id: proId,
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var status = res.data.status;
if (status == 1) {
var pro = res.data.pro;
console.log(pro);
that.setData({
info: pro,
imgUrls: pro.img_arr,
});
} else {
wx.showToast({
title: res.data.err,
duration: 2000,
});
}
},
error: function (e) {
wx.showToast({
title: '网络异常！',
duration: 2000,
});
},
});
},
//预订座位
ydzw: function() {
wx.navigateTo({
url: '../dinner/dinner',
})
},
addShopCart: function (e) { //添加到购物车
var that = this;
var ptype = e.currentTarget.dataset.type;
wx.request({
url: app.d.ceshiUrl + '/Api/Shopping/add',
method: 'post',
data: {
uid: app.d.userId,
pid: that.data.proId,
num: that.data.buynum,
ptype: ptype
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// //--init data
var data = res.data;
if (data.status == 1) {
if (ptype == 'buynow') {
wx.redirectTo({
url: '../order/pay?cartId=' + data.cart_id
});
return;
} else {
wx.showModal({
title: '提示',
content: '加入成功，点击确定进入购物车结算！',
cancelText: '再看看',
cancelColor: "#D0D0D0",
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '../ordering/ordering?cartId=' + data.cart_id,
})
}
}
})
}
} else {
wx.showToast({
title: data.err,
duration: 2000
});
}
},
fail: function () {
// fail
wx.showToast({
title: '网络异常！',
duration: 2000
});
}
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var title = this.data.info.name;
var proId = this.data.info.id;
return {
title: title,
path: '/pages/product/product?proId=' + proId,
success: function (res) {
// 分享成功
},
fail: function (res) {
// 分享失败
}
}
}
})
需要可以加微信（LGY178888）了解下！
