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

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

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

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

先设计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)

评论 22

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

    厉害厉害厉害

    dadca4周前 (10-24)回复

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

邮箱订阅联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏