【页面案例汇总】微信小程序排队叫号页面

最新推荐文章于 2024-05-27 10:08:03 发布

米饭，℡

最新推荐文章于 2024-05-27 10:08:03 发布

阅读量1.5k

点赞数 13

分类专栏：小程序页面案例文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_42317757/article/details/131321765

版权

小程序同时被 2 个专栏收录

31 篇文章

订阅专栏

页面案例

24 篇文章

订阅专栏

代码示例：

首先，我们需要在小程序的 app.json 文件中添加一个页面的配置：

{
  "pages": [
    "pages/index/index",
    "pages/queue/queue"
  ],
  "window": {
    "navigationBarTitleText": "排队叫号"
  }
}

然后，我们在 pages/queue/queue.wxml 文件中设计一个简单的排队叫号页面：

<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>

在上面的代码中，我们使用了 view 标签来布局页面，使用了 button 标签来添加两个按钮。我们还添加了一些样式来美化页面。

接下来，我们在 pages/queue/queue.js 文件中添加一些逻辑和数据：

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'
      });
    }
  }
});

在上面的代码中，我们使用了 Page 构造函数来创建一个页面，定义了一些初始的数据，以及两个点击事件函数。在 takeNumber 函数中，我们会向服务器发送一个请求，获取排队号码，并更新页面数据；在 cancelNumber 函数中，我们会弹出一个对话框提示用户是否要取消排队，并对用户的选择做出相应的处理。

最后，我们可以在 app.wxss 文件中添加一些样式来美化页面：

.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;
}