志汇餐饮外卖小程序有几个痛点,预约只能预约,不能点餐,而点餐却又只能扫码点餐,为什么不能综合一下呢?没办法,今天花点时间好好读一下代码,做一个《预约点餐》的功能二次开发;
思路,原预约功能不需要改动,在扫码点餐的基础上,增加一个二阶弹窗,让用户选择是扫码,还是到店自取。
先设计UI界面,路径->zh_dianc/pages/home/home:
<view class=”hydlzhezhao” bindtap=”hideView” wx:if=”{{hydl==true}}”></view><view class=”hydlbd” wx:if=”{{hydl==true}}”><viewclass=”hydl”><buttonclass=”hydlquerenA”bindtap=”breakout”>扫码点餐</button></view><viewclass=”hydl”><buttonclass=”hydlquerenB”bindtap=”takezq”>到店自取</button></view></view>
CSS代码:
.hydl {margin:50rpx0;}.hydlquerenA {font-size:30rpx;line-height:80rpx;text-align:center;color:white;background:orange;border-radius:10rpx;margin-top:30rpx;}.hydlquerenB {font-size:30rpx;line-height:80rpx;text-align:center;color:white;background:#09BB07;border-radius:10rpx;margin-top:30rpx;}.hydlbd {width:60%;left:50%;top:35%;position:fixed;transform:translate(-50%,0);background:#fff;border-radius:10px;z-index:999;padding:50rpx;}.hydlzhezhao {position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.7);z-index:998;}
熟悉这个志汇点餐小程序代码的人应该不陌生,是从原登录界面COPY过来的,同时因为原点餐、外卖的函数是:breakout、takeout,扫码点餐我们不用改动,只需要在takeout函数上做一些改动:
takezq: function (t) {wx.navigateTo({url: “../index/index?type=2&dnzq=0”});},
尽管是到店自取,可还是跟原代码一样,走的takeout也就是外卖的界面,我们接下来给外卖页面设置参数就可以了,路径->zh_dianc/pages/index/index:
onload:
t.setData({ dnzq:a.dnzq});
pay:
var dnzq = “”;
if (!this.data.dnzq){
dnzq = “&dnzq=” + this.data.dnzq;
}
这时候,当从点餐页面结算的时候,我们还需要注意设置自动勾选“到店自取”按钮,路径->zh_dianc/pages/pay/pay::
onload:
var h = this;
h.setData({
dnzt: !e.dnzq
});
需要注意的是,我们传过来的参数是 dnzq ,而 dnzt 是结算页面用于控制 “到店自取”勾选的参数,注意区分;
同时,我们还遇到一个问题,如果自动勾选到店自取,你会发现,最顶上的地址那一栏被隐藏了,而不知道写这个程序的人是怎么设计逻辑的,既然到店取出不需要地址,可当你结算付款的时候,没有填地址,还是不行的。
这时,为了节约时间,不要大动作改他代码,我们只能改动一下前端的一个参数:
<view bindtap=”map” class=”pay_header” hidden=”{{dnzt}}” style=”background:{{color}}”>
删掉 hidden=”{{dnzt}}” 参数,就可以了。
完成的效果:

完整代码下载:
[reply]这部分属于额外的付费,有能力的可以根据本文自行二开[/reply]