feat: 新增用户预约表

src/pages/home/detailList/index.vue

@@ -1,6 +1,5 @@
 <template>
   <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>
@@ -11,7 +10,11 @@
         <div class="project"
           v-for="(projectItem, index) in orderListItem.list" 
           :key="index"
-
+          :style="{
+            color: orderStatusStyle(projectItem).color,
+            borderLeft: '1px solid',
+            backgroundColor: orderStatusStyle(projectItem).backgroundColor
+          }"
         >
           <span class="name">{{projectItem.nickname}}</span>
           <div class="project-time">
@@ -22,24 +25,6 @@
         </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>
 
@@ -49,20 +34,9 @@ import api from '@/server/home'
 export default {
   data() {
     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',} ] },
-      ],
+      orderList: [],
       timeList: [],
       rowHeightList: [],
-      // 订单状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，5已取消
       colorStyleList: [
         { orderStatus: [3, 5], color: '#A3A3A3', backgroundColor: '#F0F0F0' },
         { orderStatus: [2], color: '#FA7D22', backgroundColor: '#FEF4ED' },
@@ -83,7 +57,30 @@ export default {
       })
     }
   },
-  computed: {}
+  methods: {
+    orderStatusStyle (orderSource) {
+      let style = null
+      // 订单状态，0已预约，未支付，1已支付，待使用，2正在使用，3已结算，5已取消
+      switch(orderSource.status) {
+        case 0:
+          style = this.colorStyleList[2]
+        break;
+        case 1:
+          style = this.colorStyleList[2]
+        break;
+        case 2:
+          style = this.colorStyleList[1]
+        break;
+        case 3:
+          style = this.colorStyleList[0]
+        break;
+        case 5:
+          style = this.colorStyleList[0]
+        break;
+      }
+      return style
+    }
+  }
 };
 </script>