微信小程序景点预约代码

以下是一个简单的微信小程序景点预约的代码示例：

1. 在 app.json 中配置页面路径和 tabBar：

{
  "pages": [
    "pages/index/index",
    "pages/booking/booking",
    "pages/my/my"
  ],
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/booking/booking",
      "text": "预约"
    }, {
      "pagePath": "pages/my/my",
      "text": "我的"
    }]
  }
}

2. 在 index 页面中展示景点列表：

<view class="page">
  <view class="list">
    <view wx:for="{{spots}}" wx:key="id" class="item" bindtap="gotoBooking">
      <image class="image" src="{{item.image}}"></image>
      <view class="name">{{item.name}}</view>
    </view>
  </view>
</view>

在 js 文件中定义数据：

data: {
  spots: [
    {
      id: 1,
      name: '景点1',
      image: 'https://example.com/images/spot1.jpg'
    },
    {
      id: 2,
      name: '景点2',
      image: 'https://example.com/images/spot2.jpg'
    },
    {
      id: 3,
      name: '景点3',
      image: 'https://example.com/images/spot3.jpg'
    }
  ]
}

3. 在 booking 页面中展示预约表单：

<view class="page">
  <form class="form" bindsubmit="submitBooking">
    <view class="field">
      <text>姓名：</text>
      <input type="text" name="name" placeholder="请输入姓名"></input>
    </view>
    <view class="field">
      <text>联系方式：</text>
      <input type="text" name="phone" placeholder="请输入联系方式"></input>
    </view>
    <view class="field">
      <text>出行日期：</text>
      <picker mode="date" name="date" start="{{today}}" end="{{endDate}}" bindchange="bindDateChange">
        <view class="picker">{{date}}</view>
      </picker>
    </view>
    <view class="field">
      <text>景点选择：</text>
      <picker mode="selector" name="spot" range="{{spots}}" bindchange="bindSpotChange">
        <view class="picker">{{spot.name}}</view>
      </picker>
    </view>
    <button class="submit" type="submit">提交预约</button>
  </form>
</view>

在 js 文件中定义数据和方法：

data: {
  today: new Date().toISOString().slice(0, 10),
  endDate: new Date().toISOString().slice(0, 10),
  date: '',
  spots: [
    {
      id: 1,
      name: '景点1',
      price: 100
    },
    {
      id: 2,
      name: '景点2',
      price: 200
    },
    {
      id: 3,
      name: '景点3',
      price: 300
    }
  ],
  spot: {}
},
bindDateChange: function (e) {
  this.setData({
    date: e.detail.value
  })
},
bindSpotChange: function (e) {
  this.setData({
    spot: this.data.spots[e.detail.value]
  })
},
submitBooking: function (e) {
  wx.showModal({
    title: '确认预约',
    content: '姓名：' + e.detail.value.name + '\n联系方式：' + e.detail.value.phone + '\n出行日期：' + this.data.date + '\n景点选择：' + this.data.spot.name + '\n总计费用：' + this.data.spot.price,
    confirmText: '提交',
    cancelText: '取消',
    success: function (res) {
      if (res.confirm) {
        wx.showToast({
          title: '提交成功',
          duration: 2000
        })
      }
    }
  })
}

4. 在 my 页面中展示已预约列表：

<view class="page">
  <view class="list">
    <view wx:for="{{bookings}}" wx:key="id" class="item">
      <view class="name">{{item.spot.name}}</view>
      <view class="date">{{item.date}}</view>
      <view class="price">总计费用：{{item.spot.price}}</view>
    </view>
  </view>
</view>

在 js 文件中定义数据：

data: {
  bookings: [
    {
      id: 1,
      name: '张三',
      phone: '13812345678',
      date: '2022-01-01',
      spot: {
        id: 1,
        name: '景点1',
        price: 100
      }
    },
    {
      id: 2,
      name: '李四',
      phone: '13912345678',
      date: '2022-01-02',
      spot: {
        id: 2,
        name: '景点2',
        price: 200
      }
    },
    {
      id: 3,
      name: '王五',
      phone: '13612345678',
      date: '2022-01-03',
      spot: {
        id: 3,
        name: '景点3',
        price: 300
      }
    }
  ]
}

以上是一个简单的微信小程序景点预约的代码示例，你可以根据自己的需求进行修改和完善。