我的预约

src/components/TabbarSmall.vue

@@ -52,8 +52,11 @@ export default {
       font-size: 3.2vw;
       font-weight: 600;
       color: #333333;
+      &:last-of-type {
+        margin-right: initial;
+      }
       &.active {
-        font-weight: bold;
+        color: #FE6E69;
         &::after {
           content: '';
           display: absolute;

src/router/index.js

@@ -231,6 +231,15 @@ const routes = [{
         },
         component: () => import('../views/My/Feedback.vue')
       },
+      {
+        path: '/layout/my/my-bookings',
+        name: 'MyBookings',
+        meta: {
+          myInd: 4,
+          myTitle: '我的预约',
+        },
+        component: () => import('../views/My/MyBookings.vue')
+      },
     ]
   },
 ]

src/views/My/MyBookings.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="my-bookings">
+    <TabbarSmall :tabList="['全部', '活动中', '未开始', '已结束']" @change="onTabbarChange"></TabbarSmall>
+    <div class="booking-list">
+      <article
+        v-for="(item, index) in bookingList"
+        :key="index"
+        :class="{
+          disabled: !item.isActive,
+        }"
+      >
+        <div class="top-bar">
+          <div class="first-line">
+            <h2>{{item.name}}</h2>
+            <button><span>查看</span><span>→</span></button>
+          </div>
+          <div class="time-line">
+            申请时间：{{item.date}} {{item.time}}
+          </div>
+        </div>
+        <div class="rest">
+          <div class="line">
+            <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
+            <div class="text">
+              <span class="key">参观日期：</span>
+              <span class="value">{{item.date}}</span>
+            </div>
+          </div>
+          <div class="line">
+            <img class="icon" src="@/assets/img/service/time.png" alt="" draggable="false">
+            <div class="text">
+              <span class="key">参观时段：</span>
+              <span class="value">{{item.time}}</span>
+            </div>
+          </div>
+          <div class="line">
+            <img class="icon" src="@/assets/img/service/people.png" alt="" draggable="false">
+            <div class="text">
+              <span class="key">参观人数：</span>
+              <span class="value">{{item.peopleNum}}人</span>
+            </div>
+          </div>
+          <button class="submit">
+            {{item.isActive ? '取消预约' : '已结束'}}
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabbarSmall from "@/components/TabbarSmall.vue";
+
+export default {
+  components: {
+    TabbarSmall,
+  },
+  data() {
+    return {
+      activeTabbarIdx: 0,
+      bookingList: [
+        {
+          name: '赭山风景区',
+          date: '2022-05-04 周六',
+          time: '10:00-11:00',
+          peopleNum: 1,
+          isActive: true,
+        },
+        {
+          name: '赭山风景区',
+          date: '2022-05-04 周六',
+          time: '10:00-11:00',
+          peopleNum: 1,
+          isActive: false,
+        },
+        {
+          name: '赭山风景区',
+          date: '2022-05-04 周六',
+          time: '10:00-11:00',
+          peopleNum: 1,
+          isActive: true,
+        },
+      ],
+    }
+  },
+  methods: {
+    onTabbarChange(idx) {
+      this.activeTabbarIdx = idx
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.my-bookings {
+  background: #F5F5F5;
+  height: calc(100% - 80px);
+  overflow: auto;
+  position: relative;
+  padding: 0 4.5vw;
+  /deep/.tabbar-small {
+    > ul {
+      justify-content: space-between;
+    }
+  }
+
+  .booking-list {
+    > article.disabled {
+      > .top-bar {
+        background: #8E8E8E;
+      }
+      > .rest {
+        > button.submit {
+          background: #8E8E8E;
+        }
+      }
+    }
+    > article {
+      margin-top: 5vw;
+      margin-bottom: 5vw;
+      height: 56.8vw;
+      background: #FFFFFF;
+      box-shadow: 0px 16px 36px 0px rgba(0,0,0,0.1);
+      border-radius: 1.3vw;
+      overflow: hidden;
+      position: relative;
+      .line {
+        display: flex;
+        align-items: flex-end;
+        margin-top: 4.5vw;
+        .icon {
+          width: 4.3vw;
+          height: 4.3vw;
+          margin-right: 2.4vw;
+        }
+        .key {
+          font-size: 3.2vw;
+          font-weight: bold;
+          color: #222222;
+        }
+        .value {
+          font-size: 3.2vw;
+          color: #222222;
+        }
+      }
+
+      > .top-bar {
+        background: linear-gradient(130deg, #FF615C 0%, #FF9877 100%);
+        padding: 5.1vw 3.7vw 5.1vw;
+        > .first-line {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          > h2 {
+            font-size: 4.8vw;
+            font-weight: 600;
+            color: #FFFFFF;
+          }
+          > button {
+            padding-top: 1vw;
+            padding-bottom: 1vw;
+            font-size: 4vw;
+            color: #FFFFFF;
+            > span:nth-of-type(2) {
+              vertical-align: 0.2vw;
+            }
+          }
+        }
+        > .time-line {
+          margin-top: 2.7vw;
+          font-size: 3.2vw;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+      > .rest {
+        padding-left: 3.7vw;
+        padding-right: 3.7vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        > .line {
+          > img.icon {
+          }
+          > .text {
+            > .key {
+            }
+            > .value {
+            }
+          }
+        }
+        > button.submit {
+          position: absolute;
+          width: 21.6vw;
+          height: 6.4vw;
+          background: linear-gradient(130deg, #FF615C 0%, #FF9877 100%);
+          border-radius: 0.5vw;
+          bottom: 5.6vw;
+          right: 4vw;
+          font-size: 3.2vw;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/My/index.vue

@@ -69,11 +69,12 @@ data() {
       {
         icon: require('@/assets/img/service/mail.png'),
         name: '投诉建议',
+        fn: this.onClickFeedback,
       },
       {
         icon: require('@/assets/img/service/booking-check.png'),
         name: '我的预约',
-        fn: this.onClickFeedback,
+        fn: this.onClickMyBookings,
       },
     ]
   }
@@ -83,6 +84,9 @@ watch: {},
 methods: {
   onClickFeedback() {
     this.$router.push({name: 'Feedback'})
+  },
+  onClickMyBookings() {
+    this.$router.push({name: 'MyBookings'})
   }
 },
 created() {