Table of contents:
Code example:
app.jsonFirst, we need to add a page configuration to the applet file:
{
"pages": [
"pages/index/index",
"pages/queue/queue"
],
"window": {
"navigationBarTitleText": "排队叫号"
}
}
Then, we pages/queue/queue.wxmldesign a simple queuing page in the file:
<view class="container">
<view class="queue-info">
<view class="queue-number">{
{queueNumber}}</view>
<view class="queue-tip">当前排队人数</view>
</view>
<view class="queue-actions">
<button class="queue-btn" bindtap="takeNumber">取号排队</button>
<button class="queue-btn" bindtap="cancelNumber">取消排队</button>
</view>
</view>
In the above code, we use viewthe tag to layout the page and buttonthe tag to add two buttons. We also added some styles to spruce up the page.
Next, we pages/queue/queue.jsadd some logic and data to the file:
Page({
data: {
queueNumber: 0,
isTakingNumber: false
},
takeNumber: function() {
if (!this.data.isTakingNumber) {
wx.showLoading({
title: '正在取号...'
});
// TODO: 请求服务器接口，获取排队号码，并更新页面数据
}
},
cancelNumber: function() {
if (this.data.queueNumber > 0) {
wx.showModal({
title: '取消排队',
content: '您确定要取消排队吗？',
success: function(res) {
if (res.confirm) {
// TODO: 请求服务器接口，取消排队，并更新页面数据
}
}
});
} else {
wx.showToast({
title: '您还没有取号',
icon: 'none'
});
}
}
});
In the above code, we use Pagethe constructor to create a page, define some initial data, and two click event functions. In takeNumberthe function, we will send a request to the server, obtain the queuing number, and update the page data; in the cancelNumberfunction, we will pop up a dialog box to prompt the user whether to cancel the queuing, and handle the user's choice accordingly.
Finally, we can app.wxssadd some styles to the file to beautify the page:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
font-size: 20rpx;
color: #333333;
}
.queue-info {
margin-bottom: 30rpx;
}
.queue-number {
font-size: 100rpx;
}
.queue-tip {
font-size: 24rpx;
margin-top: 10rpx;
}
.queue-actions {
display: flex;
justify-content: space-between;
width: 100%;
}
.queue-btn {
width: 40%;
height: 80rpx;
border: 2rpx solid #333333;
border-radius: 8rpx;
background-color: #FFFFFF;
color: #333333;
font-size: 28rpx;
}
So far, we have completed the design of a simple WeChat applet queuing page. When the user clicks the queue button, a request will be sent to the server to obtain the queue number and the page data will be updated; when the user clicks the cancel queue button, a dialog box will pop up to prompt the user whether to cancel the queue and send a request to cancel the queue to the server.
The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)