必填星号变红；预约页面各时段状态考虑当前时刻。

yfyc/src/views/My/Feedback.vue

@@ -2,7 +2,7 @@
   <div class="feedback">
     <div class="text-card card">
       <div class="title-bar bar">
-        <div class="key" maxlength="20">* 主题：</div>
+        <div class="key" maxlength="20"><span class="star">*</span>&nbsp;主题：</div>
         <input v-model="title" type="text">
       </div>
       <textarea name="" id="" rows="8" maxlength="150"
@@ -51,7 +51,7 @@
 
 
       <div class="phone-bar bar">
-        <div class="key">* 联系方式</div>
+        <div class="key"><span class="star">*</span>&nbsp;</span>联系方式</div>
         <input v-model="contact" type="text" placeholder="手机号 / 邮箱"
           maxlength="50"
         >
@@ -180,6 +180,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.star {
+  color: red;
+}
 .feedback {
   background: #F5F5F5;
   height: calc(100% - 80px);

yfyc/src/views/Serve/Booking.vue

@@ -21,14 +21,14 @@
             :key="index"
           >
             <button
-              :disabled="!item.remain"
+              :disabled="item.status !== 0 || !item.remain"
               :class="{
                 active: index === timeIdx,
               }"
               @click="handleClickTime(index)"
             >
               <span>{{item.time}}</span><br>
-              <span>{{item.remain !== null ? `剩余${item.remain}` : ``}}</span>
+              <span>{{item.status === 2 ? '已结束' : item.status === 1 ? '进行中' : item.remain !== null ? `剩余${item.remain}` : ``}}</span>
             </button>
           </div>
         </div>
@@ -43,23 +43,23 @@
     <div class="card info-card">
       <h2>个人信息</h2>
       <div class="item">
-        <span class="key">* 姓&emsp;&emsp;名</span>
+        <span class="key"><span class="star">*</span>&nbsp;姓&emsp;&emsp;名</span>
         <input type="text" v-model="name">
       </div>
       <div class="item">
-        <span class="key">* 身份证号</span>
+        <span class="key"><span class="star">*</span>&nbsp;身份证号</span>
         <input type="text" v-model="idCard">
       </div>
       <div class="item">
-        <span class="key">* 手机号码</span>
+        <span class="key"><span class="star">*</span>&nbsp;手机号码</span>
         <input type="text" v-model="phone">
       </div>
       <div class="item">
-        <span class="key">&nbsp;&ensp;年&emsp;&emsp;龄</span>
+        <span class="key">&nbsp;&nbsp;年&emsp;&emsp;龄</span>
         <input type="text" v-model="age">
       </div>
       <div class="item">
-        <span class="key">* 人&emsp;&emsp;数</span>
+        <span class="key"><span class="star">*</span>&nbsp;人&emsp;&emsp;数</span>
         <input type="text" v-model="number">
       </div>
     </div>
@@ -106,6 +106,8 @@ export default {
   },
   data() {
     return {
+      now: null,
+
       attractionId: 1,
       year: null,
       month: null,
@@ -115,10 +117,12 @@ export default {
         {
           time: '8:30-12:00',
           remain: null,
+          status: null,
         },
         {
           time: '12:00-18:30',
           remain: null,
+          status: null,
         },
       ],
       timeIdx: null,
@@ -174,6 +178,26 @@ export default {
       console.log(res);
       this.timeList[1].remain = res.data
     })
+
+    this.now = new Date()
+
+    const targetTimeAM = new Date(`${this.year}-${this.month}-${this.day} 10:00`)
+    if (this.now.getTime() - targetTimeAM.getTime() < 0) {
+      this.timeList[0].status = 0 // 未开始
+    } else if ((this.now.getTime() - targetTimeAM.getTime() >= 0) && (this.now.getTime() - targetTimeAM.getTime() < 2 * 60 * 60 *1000)) {
+      this.timeList[0].status = 1 // 进行中
+    } else {
+      this.timeList[0].status = 2 // 已结束
+    }
+
+    const targetTimePM = new Date(`${this.year}-${this.month}-${this.day} 12:00`)
+    if (this.now.getTime() - targetTimePM.getTime() < 0) {
+      this.timeList[1].status = 0 // 未开始
+    } else if ((this.now.getTime() - targetTimePM.getTime() >= 0) && (this.now.getTime() - targetTimePM.getTime() < 6.5 * 60 * 60 *1000)) {
+      this.timeList[1].status = 1 // 进行中
+    } else {
+      this.timeList[1].status = 2 // 已结束
+    }
   },
   methods: {
     onConfirmDate(date) {
@@ -200,6 +224,26 @@ export default {
         console.log(res);
         this.timeList[1].remain = res.data
       })
+
+      this.now = new Date()
+
+      const targetTimeAM = new Date(`${this.year}-${this.month}-${this.day} 10:00`)
+      if (this.now.getTime() - targetTimeAM.getTime() < 0) {
+        this.timeList[0].status = 0 // 未开始
+      } else if ((this.now.getTime() - targetTimeAM.getTime() >= 0) && (this.now.getTime() - targetTimeAM.getTime() < 2 * 60 * 60 *1000)) {
+        this.timeList[0].status = 1 // 进行中
+      } else {
+        this.timeList[0].status = 2 // 已结束
+      }
+
+      const targetTimePM = new Date(`${this.year}-${this.month}-${this.day} 12:00`)
+      if (this.now.getTime() - targetTimePM.getTime() < 0) {
+        this.timeList[1].status = 0 // 未开始
+      } else if ((this.now.getTime() - targetTimePM.getTime() >= 0) && (this.now.getTime() - targetTimePM.getTime() < 6.5 * 60 * 60 *1000)) {
+        this.timeList[1].status = 1 // 进行中
+      } else {
+        this.timeList[1].status = 2 // 已结束
+      }
     },
     handleClickTime(index) {
       this.timeIdx = index
@@ -241,7 +285,9 @@ export default {
 
 <style lang="less" scoped>
 @import "../../assets/libs/swiper.css";
-
+.star {
+  color: red;
+}
 .booking {
   background: #f1eff2;
   height: calc(100% - 80px);