feat：新增用户预约表

src/components/common/layout/layout.vue

@@ -14,7 +14,7 @@
                alt=""></div>
         <div>
           <div class="left"
-               v-if="menuIndex==0 && $route.path === '/home'">
+              v-if="menuIndex==0 && $route.path === '/home'">
             <div class="address">{{userInfo.store_name}}</div>
           </div>
         </div>
@@ -171,6 +171,7 @@ export default {
     }
     .center {
       color: #000000;
+      font-family: PingFangSC-Medium, PingFang SC;
     }
     .right {
       float: right;

src/pages/home/detailList/index.vue

@@ -1,15 +1,158 @@
 <template>
-  <div>
-    预约详情表
+  <div class="container">
+    <!-- 预约详情表 -->
+    <div class="row" ref="row" v-for="(orderListItem, index) in orderList" :key="index">
+      <div class="time" :style="{ height: `${rowHeightList[index]}px` }">
+        <span>{{orderListItem.time.start}}</span>
+        <span>-</span>
+        <span>{{orderListItem.time.end}}</span>
+      </div>
+      <div class="project-wrapper">
+        <div class="project"
+          v-for="(projectItem, index) in orderListItem.list" 
+          :key="index"
+
+        >
+          <span class="name">{{projectItem.nickname}}</span>
+          <div class="project-time">
+            <span>{{projectItem.start}}</span>
+            <span>-</span>
+            <span>{{projectItem.end}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="left">
+      <div class="time" ref="time"
+        v-for="(orderListItem, index) in orderList" :key="index"
+        :style="{height: ``}"
+      >
+        <span>{{orderListItem.startTime}}</span>
+        <span>-</span>
+        <span>{{orderListItem.endTime}}</span>
+      </div>
+    </div>
+    <div class="right">
+      <div class="project-row" ref="projectRow" v-for="(orderListItem, index) in orderList" :key="index">
+        <div class="project-item" v-for="(projectItem, index) in orderListItem.project" :key="index">
+          <span>{{projectItem.name}}</span>
+          <span>{{projectItem.time}}</span>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import api from '@/server/home'
+
 export default {
   data() {
-    return {};
+    return {
+      orderList: [
+        // { startTime: '11:00', endTime: '12:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '张三', startTime: '11:00', endTime: '12:00',} ] },
+        // { startTime: '12:00', endTime: '13:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '李四', startTime: '11:00', endTime: '12:00',} ] },
+        // { startTime: '13:00', endTime: '14:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '李四', startTime: '11:00', endTime: '12:00',} ] },
+        // { startTime: '14:00', endTime: '15:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '李四', startTime: '11:00', endTime: '12:00',} ] },
+        // { startTime: '15:00', endTime: '16:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '李四', startTime: '11:00', endTime: '12:00',} ] },
+        // { startTime: '16:00', endTime: '17:00', project: [ {name: '张三', startTime: '11:00', endTime: '12:00',}, {name: '李四', startTime: '11:00', endTime: '12:00',},
+        //   {name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},
+        //   {name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},{name: '张三', startTime: '11:00', endTime: '12:00',},
+        //   {name: '张三', startTime: '11:00', endTime: '12:00',} ] },
+      ],
+      timeList: [],
+      rowHeightList: [],
+      // 订单状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，5已取消
+      colorStyleList: [
+        { orderStatus: [3, 5], color: '#A3A3A3', backgroundColor: '#F0F0F0' },
+        { orderStatus: [2], color: '#FA7D22', backgroundColor: '#FEF4ED' },
+        { orderStatus: [0, 1], color: '#42D351', backgroundColor: '#F5FCF5' },
+      ]
+    };
+  },
+  async created () { 
+    let resp = await api.reservedRecords()
+    if (resp.code === 200) {
+      this.orderList = resp.data
+    }
+  },
+  mounted () {
+    if (this.$refs.row) {
+      this.$refs.row.forEach((item) => {
+        this.rowHeightList.push(item.clientHeight)
+      })
+    }
   },
+  computed: {}
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .container {
+    // width: 100%;
+    // height: 100%;
+    // display: flex;
+    background-color: #FFFFFF;
+    .row {
+      display: flex;
+      // flex-wrap: wrap;
+      .time, .project-wrapper .project {
+        width: 77px;
+        height: 80px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-family: PingFangSC-Medium, PingFang SC;
+      }
+      .time {
+        border-bottom: 2px #f5f5f5 solid;
+      }
+      .project-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        .project {
+          .name {
+            font-size: 12px;
+            margin-bottom: 3px;
+          }
+          .project-time {
+            display: flex;
+            font-size: 10px;
+          }
+        }
+      }
+    }
+    // .left .time, .right .project-row .project-item {
+    //   width: 77px;
+    //   height: 80px;
+    //   display: flex;
+    //   flex-direction: column;
+    //   justify-content: center;
+    //   align-items: center;
+    //   font-family: PingFangSC-Medium, PingFang SC;
+    // }
+    // .left {
+    //   width: 77px;
+    //   display: flex;
+    //   flex-direction: column;
+    // }
+    // .right {
+    //   display: flex;
+    //   flex-direction: column;
+    //   .project-row {
+    //     display: flex;
+    //     flex-wrap: wrap;
+    //     .project-item {
+    //       span:nth-child(1) {
+    //         font-size: 12px;
+    //         margin-bottom: 3px;
+    //       }
+    //       span:nth-child(2) {
+    //         font-size: 10px;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+</style>

src/pages/home/index.vue

@@ -21,8 +21,7 @@
                   :finished="finished"
                   finished-text="没有更多了"
                   @load=" getToday ">
-          <!-- TODO: delete v-if 中的 ! -->
-          <div class="detail-list" v-if="!orderList.length"><span @click="toDetailList">客户预约表</span></div>
+          <div class="detail-list" v-if="orderList.length"><span @click="toDetailList">客户预约表</span></div>
           <div class="user-info"
                v-for="(item,index) in orderList"
                :key="index"

src/server/home.js

@@ -152,4 +152,9 @@ export default class Home {
     return $http.post(url.schemeSave, parms);
   }
 
+  // 用户预约记录
+  static reservedRecords (params) {
+    return $http.get(url.reservedRecords, params)
+  }
+
 }

src/server/urls.js

@@ -94,4 +94,7 @@ export default {
   // 创建标签
   schemeSave: '/v2/pad/scheme/save',
 
+    // 用户预约记录
+    reservedRecords: '/v2/pad/reserved/index'
+
 }