[鼠年全马] W33 - Vue出一个旅馆预约平台(7)

这周继续来做 [预约页面]

回顾一下上周切的区块

• [标题] (已完成)
• [预约功能]
• [房间详细]
• [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

有需要改进或是任何意见建议欢迎下面留言~