微信小程序前端开发（预约功能1）

开发一个预约活动界面：
首先可以按照之前提到的方式插入图片和文字介绍：
https://blog.youkuaiyun.com/songguiren/article/details/145914968?spm=1001.2014.3001.5502

需要放上可预约时间段，并实现点击预约

1.如何放上卡片，标记不同的可预约时间段：

首先，放置卡片，并显示出文字：

<view class="container2">
  <view class="grid">
    <view wx:for="{{items}}" wx:key="id" class="grid-item" bindtap="onGridTap" data-id="{{item.id}}">
      <view class="grid-item-content">{{item.text}},余{{item.count}}</view>
    </view>
  </view>
</view>

container2：容器，可以用于调节卡片上下的高度，再wxss参数设置中可以看出
grid：可以称之为网格，用于定位，使卡片整齐排列
wx：for：功能类似于for循环，循环对象为items数组，要用两层大括号包裹
wx：id：标记，类似于关键字？是一个对象的唯一标符，便于后续查找和表示
class：用来定义样式
bindtap：绑定一个方法，用来执行后续的点击操作相关功能
data-id：data中定义了id这个属性，并把items数组中的id赋值给它，又来后续做点击相关功能
class=“grid-item-content”：定义卡片上的文字样式
{{item.text}},余{{item.count}}：标签中间，表示显示出的文字，双大括号包裹item.text，表示此处显示出item数组中的text这一属性的内容

经过wxml中的定义，我们已经放入了卡片和卡片上的文字，通过循环item数组实现多个类似的卡片放置

2.如何使卡片样式合理

.container2 {
  margin-top: -200px;
}
.grid {
  margin-left:5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.grid-item {
  width: calc((100% - 30px) / 2); /* 每行显示 3 个方格，留出间隙 */
  background-color: #d0ffaa;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
}
.grid-item-content {
  font-size: 18px;
  color: #333;
}

container2：主要调整上下距离
grid ：创建一个网格布局。它的主要功能是通过CSS的Flexbox布局来组织子元素（即 .grid-item）的排列方式
如果没有grid样式：

grid-item：设计grid里子元素的样式，就是我们看到的格子是什么边框，什么背景颜色等参数
没有grid-item：

grid-item-content：格子里文字的参数

3.如何实现定义items数组内容

定义items数组内容，属于数据的范畴，需要在页面.js文件中编辑

data: {
  items: [
    { id: 1, text: "可约时段1" ,count:3},
    { id: 2, text: "可约时段2" ,count:3},
    { id: 3, text: "可约时段3" ,count:3},
    { id: 4, text: "可约时段4" ,count:3},
    { id: 5, text: "可约时段5" ,count:3},
    { id: 6, text: "可约时段6" ,count:3}
  ],
  isBooked:false
},

很明显，items是我们上面文件中调用的数组，id做区分的标志，text是显示的文字内容，count是我们之后要用到的计数器
最后的isBooked是之后点击预约功能需要的

4.如何实现点击卡片进行预约，使它弹出预约窗口

5.预约完成后，如何实现计数器-1，剩余数量为0，则不可继续预约

6.完成5，发现，点击卡片预约，弹出窗口后又选择取消，数量也会-1，如何解决

一次性写太多了，之后再写456