這週繼續來做 [預約頁面]

回顧一下上週切的區塊

• [標題] (已完成)
• [預約功能]
• [房間詳細]
• [Footer] (已完成)

這週來處理 [預約功能] 綠色框的部分~

#預約功能

我們使用 ReservationCard.vue 這個component來做 [預約功能]
可以切分成幾個小塊來處理:

• 日期
• 姓名
• 電話
• 確定按鈕

#Step 1

把切好的小塊都加上:

<div class="resblock pl-6 pr-6 pt-2 pb-12">
  <div>日期</div>
  <div>姓名</div>
  <div>電話</div>
  <div>確定按鈕</div>
</div>

外層套上設計師的CSS:

.resblock {
  background: #e3eae2 0% 0% no-repeat padding-box;
  border: 1px solid #a5bb94;
  margin-top: 80px;
  margin-left: 112px;
  margin-right: 64px;
}

#Step 2

日期 的部分使用

• Vuetify-Date Picker日期選擇器組件
• Vuetify-Menu菜單組件
• Vuetify-Text Field文字框組件

組合出來:

<div>
  <span>日期</span>
  <v-menu
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="myDates"
        readonly
        outlined
        dense
        color="#a5bb94"
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker
      v-model="dates"
      color="#72916E"
      no-title
      range
      scrollable
      locale="zh-tw"
      value="yyyy/MM/dd"
    >
    </v-date-picker>
  </v-menu>
</div>

說明一下菜單組件的組合是由 <template> 包住觸發菜單開關的組件內容，下方在放菜單本身的內容:

<v-menu>
  <template>
    觸發菜單的組件
  </template>
  菜單內容
</v-menu>

其中使用到的屬性部分:

• v-menu

  • close-on-content-click: 點擊內容之後是否關閉菜單
  • transition: 菜單開關時使用的動畫效果
  • offset-y: 菜單在觸發組件下方開啟

• v-text-field

  • readonly: 只能讀
  • outlined: 有邊框
  • dense: 高度變低
  • color: 組件顏色

• v-date-picker

  • color: 組件顏色
  • no-title: 隱藏標題
  • range: 可以選擇範圍
  • scrollable: 滾動滑鼠滾輪觸發切換月份
  • locale: 語言

其他沒寫到的屬性就參考上面的組件連結吧~

#Step 3

這裡用了兩個 v-model 指令
其中日期選擇器綁的 dates 是一個陣列(因為有設定可以選擇範圍):

data: () => ({ 
  dates: [] 
}),

文字框組件綁的 myDates ，是用 computed 計算的值，邏輯都寫在註解中:

computed: {
  myDates() {
    //如果dates沒有值或dates長度是0就回傳空字串
    if (!this.dates || this.dates.length === 0) {
      return "";
    }
    let str;
    //取得第1個日期的年月日
    const [year1, month1, day1] = this.dates[0].split("-");
    //自訂格式"年/月/日"
    str = `${year1}/${month1}/${day1}`;
    //如果有第2個日期就做這個if
    if (this.dates.length > 1) {
      //取得第2個日期的年月日
      const [year2, month2, day2] = this.dates[1].split("-");
      //自訂格式"年/月/日"
      let str2 = `${year2}/${month2}/${day2}`;
      //判斷日期1跟日期2的大小來決定字串擺放順序
      if (this.dates[0] > this.dates[1]) {
        str = `${str2} ~ ${str}`;
      } else if (this.dates[1] > this.dates[0]) {
        str += ` ~ ${str2}`;
      }
    }
    //回傳最後的字串
    return str;
  },
},

#Step 4

最後套上CSS:

.resblock div span {
  text-align: left;
  letter-spacing: 0px;
  color: #425752;
  font-size: 17px;
  font-family: Segoe UI Regular;
}

加上輸入框上距及圓角改為直角:

.resblock div .v-input {
  margin-top: 8px;
  border-radius: 0;
}

日期完美呈現xD

#Step 5

姓名 跟 電話 很簡單可以一併寫，用到 Vuetify-Text Field文字框組件:

<div>
  <span>姓名</span>
  <v-text-field
    outlined
    dense
    color="#a5bb94"
    v-model="name"
  ></v-text-field>
</div>
<div>
  <span>電話</span>
  <v-text-field
    outlined
    dense
    color="#a5bb94"
    v-model="phone"
  ></v-text-field>
</div>

加上 v-model 綁定的 name 和 phone

data: () => ({ 
  ..., 
  name: "", 
  phone: "" 
}),

一片蛋糕~

#Step 6

最後 確定按鈕 用了 Vuetify-Button按紐組件:

<div>
  <v-btn 
    color="#496146" 
    dark 
    block 
    height="63" 
    class="mt-4">
    確定預定日期
  </v-btn>
</div>

• color: 按鈕顏色
• dark: 深色模式，加上之後文字會變白色
• block: 寬度擴展到100%
• height: 按鈕高度

#結果

按鈕功能先保留，目前整體畫面長這樣:

附上這次進度的雲端壓縮檔, 執行前記得先npm install

有需要改進或是任何意見建議歡迎下面留言~