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

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

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

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

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

评论 1

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

    厉害厉害厉害

    厉害1天前回复

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

邮箱订阅联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏