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

因为上个月直接专注在 [iT邦铁人赛]
直接好几个礼拜都没有刷 [鼠年全马] 进度xD

这周回归来做我们美美的旅馆预约平台

#复习

来复习一下目前的进度

Vue出一个旅馆预约平台(1): 第一篇我们建立了专案
Vue出一个旅馆预约平台(2): 第二篇引用了Vuetify，并且实作出Banner区块
Vue出一个旅馆预约平台(3): 第三篇实作出Rooms区块的画面部分
Vue出一个旅馆预约平台(4): 第四篇使用axios套件抓API的到Rooms清单
Vue出一个旅馆预约平台(5): 第五篇实作Footer区块

看起来首页的部分该有的都有了~
这篇就来把首页完善吧!!

#滚动指令

Slide 文字目前只是装饰，但我们可以把它做的更好，让它真的有功能
这里使用Vuetify本身提供的 滚动指令 来做出简单的画面滚动动画

#Step 1

使用 button 元件包住 [Slide] 和 [>>]，并加上点击事件:

<button @click="slideClick" style="outline: none;">
  <div class="slidetext">
    Slide
  </div>
  <div class="slideicon"><span>></span><span>></span></div>
</button>

#Step 2

点击事件内容:
使用 $vuetify.goTo() 方法参考这边

methods: {
  slideClick() {
    //前往id叫做rooms的区块
    this.$vuetify.goTo("#rooms", this.scrollOptions);
  },
},

$vuetify.goTo(arg_1,arg_2)
- arg_1: 要滚动到哪个元件
- arg_2: 滚动属性

滚动属性设定放在data:

data: () => ({
  scrollOptions: {
    duration: 600,
    easing: "linear",
  },
})

duration: 滚动持续时间
easing: 滚动方式

#结果

来看看效果图吧~
gif已死QQ

#跳转预约页面

[首页] 最後要来写导向 [预约页面]
导向的时机在点选房间卡 RoomCard 的时候触发!!

#Step 1

首先, 我们在卡片组件 v-card 加上点击事件:

//RoomCard.vue
<v-card class="roomcard" @click="goto">
  //v-card内容
</v-card>

事件中使用 $router.push() 方法导向到 [预约页面]
vue-router导页参考这边
方法中设定带参数，把 RoomCard 详细资料带上

methods: {
  goto() {
    this.$router.push({ name: "Reservation", params: { room: this.room } });
  },
},

#Step 2

接着到 Reservation 接收资料:

//Reservation.vue
export default {
  name: "Reservation",
  created() {
    this.room = this.$route.params.room;
  },
  data: () => ({
    room: {},
  }),
};

取得参数资料之後，习惯放进後再使用

###################分隔线###################

上面是原本的写法，这里要介绍一招
开启路由设定页(router/index.js)，在里面加上一段function:

//router/index.js
const mixProps = function () {
  return route => {
    return Object.assign({}, route.params, route.query)
  }
}

mixProps: 将传入的 params 及 query 合并

在路由设定(routes)的部份加上:

const routes = [
  {
    ...,
    name: 'Reservation',
    props: mixProps(), //加入这行
  },
]

props: mixProps(): 将合并後的物件使用 props 接收

回到 Reservation 改成使用 props 接收参数就好罗!!

//Reservation.vue
export default {
  name: "Reservation",
  props: ["room"],
};

这样写就不用再分 params 或是 query，全都用 props 就好了~
是不是超酷的xD

页面跳转完成罗!!

#Reservation

[预约页面] 开始开发~先把它切好切满吧~

最上方为 [标题]
左边为 [预约功能]
右边为 [房间详细]
最下面没截到, 还有个之前已经做好的[Footer]

#Step 1

切好之後就建立对应的component之後放上画面吧~

//Reservation.vue
<template>
  <div>
    <ReservationTop />
    <ReservationCard />
    <ReservationInfo />
    <Footer />
  </div>
</template>
<script>
import Footer from "../components/Footer";
import ReservationTop from "../components/ReservationTop";
import ReservationCard from "../components/ReservationCard";
import ReservationInfo from "../components/ReservationInfo";
export default {
  name: "Reservation",
  components: { ReservationTop, ReservationCard, ReservationInfo, Footer },
};
</script>

#Step 2

因为左右两边各占一半，可以利用 grid 来帮忙切

<div class="row">
  <div class="col-6"><ReservationCard /></div>
  <div class="col-6"><ReservationInfo /></div>
</div>

row 预设有外距 -12px，可以加上 pa-0 ma-0 让内外距为0

<div class="row pa-0 ma-0">
  <div class="col-6"><ReservationCard /></div>
  <div class="col-6"><ReservationInfo /></div>
</div>

Reservation.vue 的部分先到这边结束~

#标题(ReservationTop)开发

再来从上往下开始做，从 ReservationTop.vue 开始

#Step 1

[标题] 是由3张图片 + 1个标题组合
图片的部分，利用 grid 来切分为2:1，使用 Vuetify-Images图片组件，先用官方提供的图片来生成画面:

//ReservationTop.vue
<div class="row pa-0">
  <div class="col-8">
    <v-img src="https://picsum.photos/500/300?image=10"></v-img>
  </div>
  <div class="col-4">
    <v-img src="https://picsum.photos/500/300?image=15"></v-img>
    <v-img src="https://picsum.photos/500/300?image=20"></v-img>
  </div>
</div>

#Step 2

图片中间被留白了，因为 col 本身有内距，可以加上 pa-0 让内距为0:

<div class="col-8 pa-0">
  <v-img src="https://picsum.photos/500/300?image=10"></v-img>
</div>
<div class="col-4 pa-0">
  <v-img src="https://picsum.photos/500/300?image=15"></v-img>
  <v-img src="https://picsum.photos/500/300?image=20"></v-img>
</div>

#Step 3

这里的范例刚好都是横向图片, 如果放上直向图片就会超出高度，於是这里加上高度限制:

<div class="col-8 pa-0">
  <v-img src="https://picsum.photos/500/300?image=10" max-height="428"></v-img>
</div>
<div class="col-4 pa-0">
  <v-img src="https://picsum.photos/500/300?image=15" max-height="214"></v-img>
  <v-img src="https://picsum.photos/500/300?image=20" max-height="214"></v-img>
</div>

#Step 4

标题的部分，先使用绝对定位与图片重叠, 然後使用 d-flex 让整体定位在右下方:

<div class="restitle d-flex align-self-end justify-end">
  <div>This is Title</div>
</div>

.restitle {
  width: 100%;
  position: absolute;
}

#Step 5

接着要计算一下内容的位移(要自己算):

.restitle div {
  margin-bottom: -56px;
  margin-right: 80px;
}

最後套上设计师的CSS:

.restitle {
  width: 100%;
  position: absolute;
  font: Italic 110px/138px Rage;
  letter-spacing: 17.6px;
  color: #496146;
}

美爆了

#Step 6

接着将真实资料从 Reservation.vue 传入:

//Reservation.vue
<ReservationTop :name="room.name" :imageUrl="room.imageUrl" />

回到 ReservationTop.vue 接收:

//ReservationTop.vue
export default {
  name: "ReservationTop",
  props: ["name", "imageUrl"],
};

#Step 7

套上真实资料:

<template>
  <div class="row pa-0 ma-0">
    <div class="col-8 pa-0">
      <v-img :src="imageUrl[0]" max-height="428"></v-img>
    </div>
    <div class="col-4 pa-0">
      <v-img :src="imageUrl[1]" max-height="214"></v-img>
      <v-img :src="imageUrl[2]" max-height="214"></v-img>
    </div>
    <div class="restitle d-flex align-self-end justify-end">
      <div>{{ name }}</div>
    </div>
  </div>
</template>