大雕哥
你身边最懂互联网的朋友

志汇餐饮外卖小程序二次开发增加预约点餐功能

志汇餐饮外卖小程序有几个痛点,预约只能预约,不能点餐,而点餐却又只能扫码点餐,为什么不能综合一下呢?没办法,今天花点时间好好读一下代码,做一个《预约点餐》的功能二次开发;

思路,原预约功能不需要改动,在扫码点餐的基础上,增加一个二阶弹窗,让用户选择是扫码,还是到店自取。

先设计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}}" 参数,就可以了。
完成的效果:


完整代码下载:

温馨提示: 隐藏内容需要 回复评论 后才能查看, 评论后请 刷新 !.




赞(0) 解决问题,就是我最大的快乐
转载请保留出处:大雕哥 » 志汇餐饮外卖小程序二次开发增加预约点餐功能
分享到: 更多 (0)

评论 14

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    厉害厉害厉害

    厉害2个月前 (06-17)回复
  2. #2

    ok,这个功能方便预约点餐

    shundao2个月前 (06-20)回复
  3. #3

    ok,这个功能方便预约点餐。[email protected]

    shundao2个月前 (06-20)回复
  4. #4

    ok,这个功能方便预约点餐

    baoye2个月前 (06-26)回复
  5. #5

    厉害厉害厉害

    ottojen2个月前 (06-28)回复
  6. #6

    厉害厉害厉害

    厉害厉害厉害1个月前 (07-05)回复
  7. #7

    ok,这个功能方便预约点餐

    vaevie3周前 (07-25)回复
  8. #8

    厉害厉害厉害

    1213133周前 (07-28)回复
  9. #9

    这个功能方便预约点餐

    demo0472周前 (07-30)回复
  10. #10

    ok,这个功能方便预约点餐

    a5933565782周前 (08-04)回复
  11. #11

    厉害厉害厉害

    apple1周前 (08-09)回复
  12. #12

    厉害厉害厉害

    jkshiyan1周前 (08-09)回复
  13. #13

    这个很强大,应该可以用,下载测试

  14. #14

    牛鼻啊 厉害

    林哥4天前回复

大雕哥,做你身边最懂互联网的朋友

邮箱订阅联系我们

如果觉得文章有用可以打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏