前準備

第六節ではログインページと登録ページを作成しました。今回はその続きとして、ユーザー端のメインページに移り、「イベント申請」ページの実装について説明します。

1. ナビゲーションバーの設定

app.jsonに以下のコードを追加し、ナビゲーションバーを構築します。

"pages": [
    "pages/home/home",
    "pages/eventApply/eventApply",
    "pages/history/history",
    "pages/appointment/appointment",
    "pages/appointmentHistory/appointmentHistory"
],
"tabBar": {
    "color": "#C0C0C0",
    "selectedColor": "#000000",
    "list": [
        {
            "pagePath": "pages/home/home",
            "text": "ホーム",
            "iconPath": "/icons/home.png",
            "selectedIconPath": "/icons/home_selected.png"
        },
        {
            "pagePath": "pages/eventApply/eventApply",
            "text": "イベント申請",
            "iconPath": "/icons/apply.png",
            "selectedIconPath": "/icons/apply_selected.png"
        },
        {
            "pagePath": "pages/history/history",
            "text": "履歴",
            "iconPath": "/icons/history.png",
            "selectedIconPath": "/icons/history_selected.png"
        }
    ]
}

2. イベント申請ページの作成

2.1 実装ステップ

以下は、イベント申請ページの主要な要素です。

• テキスト入力フィールド：基本的な情報入力用。
• 選択ボックス：所属組織や場所を選択するため。
• 日付ピッカー：開始・終了日時を選択するため。
• ラジオボタン：有無の選択（例：スポンサーの有無）。
• 提出ボタン：データをクラウドにアップロードする。

2.2 コード例

eventApply.wxml

<view class="comment">すべての情報が確認に使用されます。</view>
<view class="subtitle"><text>イベント内容:</text></view>
<view class="input-border">
  <input type="text" placeholder="イベント名（必須）" bindinput="bindEventName"/>
</view>
<view class="subtitle"><text>所属組織:</text></view>
<picker mode="selector" range="{{organizations}}" bindchange="bindOrganizationChange">
  <view>{{organizations[index]}}</view>
</picker>
<view class="subtitle"><text>開始日時:</text></view>
<picker mode="date" bindchange="bindStartDate">
  <view>{{startDate}}</view>
</picker>
<view class="subtitle"><text>終了日時:</text></view>
<picker mode="date" bindchange="bindEndDate">
  <view>{{endDate}}</view>
</picker>
<button bindtap="submitForm">送信</button>

eventApply.wxss

.input-border {
  border: 1px solid gray;
  margin: 15px;
  padding: 10px;
  border-radius: 5px;
}
.subtitle {
  margin-left: 15px;
  font-weight: bold;
  color: #D43C33;
}
.comment {
  font-size: 12px;
  color: gray;
  margin: 10px;
}
button {
  background-color: #D43030;
  color: white;
  border-radius: 80rpx;
  margin: 20px;
  box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}

eventApply.js

Page({
  data: {
    organizations: ['組織A', '組織B', '組織C'],
    index: 0,
    startDate: '',
    endDate: ''
  },
  onLoad() {
    const today = new Date().toISOString().split('T')[0];
    this.setData({ startDate: today, endDate: today });
  },
  bindEventName(e) {
    this.setData({ eventName: e.detail.value });
  },
  bindOrganizationChange(e) {
    this.setData({ index: e.detail.value });
  },
  bindStartDate(e) {
    this.setData({ startDate: e.detail.value });
  },
  bindEndDate(e) {
    this.setData({ endDate: e.detail.value });
  },
  submitForm() {
    if (!this.data.eventName || !this.data.startDate || !this.data.endDate) {
      wx.showToast({ title: 'すべての項目を入力してください', icon: 'none' });
      return;
    }
    wx.cloud.callFunction({
      name: 'submitEvent',
      data: {
        name: this.data.eventName,
        organization: this.data.organizations[this.data.index],
        start: this.data.startDate,
        end: this.data.endDate
      }
    }).then(res => {
      wx.showToast({ title: '送信成功' });
    }).catch(err => {
      wx.showToast({ title: '送信失敗', icon: 'none' });
    });
  }
});