[鼠年全马] 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

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