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

这周要来将 [预约页面] 最後的 房间详细资讯 完成!!

[标题] (已完成)
[预约功能] (已完成)
[房间详细]
[Footer] (已完成)

黄色框的部分:

#房间详细

开启 ReservationInfo.vue 先用假资料生成画面

#Step 1

先塞满假资料:

<div>
  <div>预约房间:</div>
  <div>Single Room</div>
  <div>
    Single Room is only reserved for one guest. There is a bedroom with a
    single size bed and a private bathroom. Everything you need prepared for
    you: sheets and blankets, towels, soap and shampoo, hairdryer are
    provided. In the room there is AC and of course WiFi.
  </div>
  <div>
    <span>房间限制人数:</span>
    <span>1</span>
    <span>人</span>
  </div>
  <div>
    <span>房间大小:</span>
    <span>18</span>
    <span>平方公尺</span>
  </div>
  <div>1张single床,1间独立卫浴</div>
  <div>wifi , 早餐 , 电话 , 空调 , 冰箱 , 禁止吸烟 , 可带宠物</div>
  <div>
    <div>
      <div>checkIn 时间</div>
      <div>15:00~21:00</div>
    </div>
    <div>
      <div>平日(一~四)</div>
      <div>$1380</div>
    </div>
    <div>
      <div>最晚checkout 时间</div>
      <div>10:00</div>
    </div>
    <div>
      <div>假日(五~日)</div>
      <div>$1500</div>
    </div>
  </div>
</div>

#Step 2

接着全部套上CSS，并加上内外距:

<div class="resinfo">
  <div class="resinfotitle">预约房间:</div>
  <div class="resinfotitle">Single Room</div>
  <div class="ml-1 mt-8 resinfocontent">
    Single Room is only reserved for one guest. There is a bedroom with a
    single size bed and a private bathroom. Everything you need prepared for
    you: sheets and blankets, towels, soap and shampoo, hairdryer are
    provided. In the room there is AC and of course WiFi.
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>房间限制人数:</span>
    <span>1</span>
    <span>人</span>
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>房间大小:</span>
    <span>18</span>
    <span>平方公尺</span>
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>1张single床,1间独立卫浴</span>
  </div>
  <div class="pa-4 mt-11 resinfoamenities">
    <div>wifi , 早餐 , 电话 , 空调 , 冰箱 , 禁止吸烟 , 可带宠物</div>
  </div>
  <div class="resinfocontent3">
    <div>
      <div>checkIn 时间</div>
      <div>15:00~21:00</div>
    </div>
    <div>
      <div>平日(一~四)</div>
      <div>$1380</div>
    </div>
    <div>
      <div>最晚checkout 时间</div>
      <div>10:00</div>
    </div>
    <div>
      <div>假日(五~日)</div>
      <div>$1500</div>
    </div>
  </div>
</div>

.resinfo {
  margin-top: 80px;
  margin-left: 64px;
  margin-right: 112px;
}
.resinfotitle {
  text-align: left;
  letter-spacing: 4.16px;
  color: #707070;
  font-size: 26px;
  font-family: Adobe Hebrew Regular;
}
.resinfocontent {
  text-align: left;
  letter-spacing: 0px;
  color: #496146;
  font-size: 16px;
  font-family: Adobe Hebrew Regular;
}
.resinfocontent2 {
  text-align: left;
  letter-spacing: 0px;
  color: #496146;
  font-size: 16px;
  font-family: Microsoft JhengHei;
}
.resinfoamenities {
  background: #e3eae2 0% 0% no-repeat padding-box;
}
.resinfoamenities div {
  text-align: center;
  letter-spacing: 0px;
  color: #496146;
  font-size: 16px;
  font-family: Microsoft JhengHei;
}
.resinfocontent3 div div:nth-child(1) {
  text-align: left;
  letter-spacing: 0px;
  color: #496146;
  font-size: 12px;
  font-family: Microsoft JhengHei;
}
.resinfocontent3 div div:nth-child(2) {
  text-align: left;
  letter-spacing: 0px;
  color: #496146;
  font-size: 24px;
  font-family: Adobe Hebrew Regular;
}

这边因为套上已经有的css就好~所以都很简单

#Step 3

接着下方时间与价格使用 d-flex 来切分
checkIn 时间 & 平日(一~四) 为一个群组
最晚checkout 时间 & 假日(五~日) 为一个群组
加上外距後会是这样:

<div class="ml-12 mr-12 mt-8 d-flex justify-space-between resinfocontent3">
  <div>
    <div>
      <div>checkIn 时间</div>
      <div>15:00~21:00</div>
    </div>
    <div class="mt-4">
      <div>平日(一~四)</div>
      <div>$1380</div>
    </div>
  </div>
  <div>
    <div>
      <div>最晚checkout 时间</div>
      <div>10:00</div>
    </div>
    <div class="mt-4">
      <div>假日(五~日)</div>
      <div>$1500</div>
    </div>
  </div>
</div>

#Step 4

画面完成了~再来把假资料替换成真实资料
首先开启 Reservation.vue 把 room 传入:

<ReservationInfo :room="room" />

回到 ReservationInfo.vue 接收:

export default {
  name: "ReservationInfo",
  props: ["room"],
};

可以开启chrome工具检查资料确实有传进来:

#Step 5

接着一个一个把真实资料改上去:

<div class="resinfo">
  <div class="resinfotitle">预约房间:</div>
  <div class="resinfotitle">{{ room.name }}</div>
  <div class="ml-1 mt-8 resinfocontent">
    {{ room.description }}
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>房间限制人数:</span>
    <span class="ml-3">{{
      room.descriptionShort.GuestMax === room.descriptionShort.GuestMin
        ? room.descriptionShort.GuestMin
        : `${room.descriptionShort.GuestMin}~${room.descriptionShort.GuestMax}`
    }}</span>
    <span>人</span>
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>房间大小:</span>
    <span class="ml-3">{{ room.descriptionShort.Footage }}</span>
    <span>平方公尺</span>
  </div>
  <div class="ml-1 mt-4 resinfocontent2">
    <span>{{ myContent2 }}</span>
  </div>
  <div class="pa-4 mt-11 resinfoamenities">
    <div>{{ myAmenities }}</div>
  </div>
  <div class="ml-12 mr-12 mt-8 d-flex justify-space-between resinfocontent3">
    <div>
      <div>
        <div>checkIn 时间</div>
        <div>
          {{ room.checkInAndOut.checkInEarly }}
          ~
          {{ room.checkInAndOut.checkInLate }}
        </div>
      </div>
      <div class="mt-4">
        <div>平日(一~四)</div>
        <div>${{ room.normalDayPrice }}</div>
      </div>
    </div>
    <div>
      <div>
        <div>最晚checkout 时间</div>
        <div>{{ room.checkInAndOut.checkOut }}</div>
      </div>
      <div class="mt-4">
        <div>假日(五~日)</div>
        <div>${{ room.holidayPrice }}</div>
      </div>
    </div>
  </div>
</div>

这边用到了两个 computed

myAmenities: 这是之前在 RoomCard.vue 写的 roomAmenities，内容复制贴上就好
myContent2: 这是在计算床的数量跟名称，计算後组合出要呈现的字串，程序码长这样:

computed: {
  myContent2() {
    /* 计算床数 */
    let bedgroups = {}; //床的群组, 放 '床名': 数量
    //将每个床都跑一次, 如果名称已经在bedgroups就把值+1, 不在bedgroups就塞进去并让值为1
    this.room.descriptionShort.Bed.forEach(function(item) {
      if (Object.keys(bedgroups).indexOf(item) < 0) {
        bedgroups[`${item}`] = 1;
      } else {
        bedgroups[`${item}`] = bedgroups[`${item}`] + 1;
      }
    });

    let str = ""; //初始化回传字串

    //把bedgroups每个项目都转成字串
    Object.keys(bedgroups).forEach(function(item) {
      str += `${bedgroups[`${item}`]}张${item}床`;
    });

    //如果有独立卫浴就加上这段
    if (this.room.descriptionShort["Private-Bath"] > 0) {
      str += `, ${this.room.descriptionShort["Private-Bath"]}间独立卫浴`;
    }

    return str;
  },
},