增加过期弹窗提醒

src/pages/questionnaire.vue

@@ -3,7 +3,7 @@
  * @Author: Fengyu
  * @Date: 2025-12-12 10:12:59
  * @LastEditors: Fengyu
- * @LastEditTime: 2025-12-17 11:12:47
+ * @LastEditTime: 2025-12-17 14:29:31
 -->
 <template>
   <view class="questionnaire-container">
@@ -38,7 +38,7 @@
             <view class="grid-title">1.您所在的服务区</view>
             <view class="grid-desc">
               <u-select v-model="parkSelectShow" :list="parkList" @confirm="confirm"></u-select>
-              <span @click="parkSelectShow = true">{{ parkName || '请选择' }}&nbsp;﹥</span>
+              <span @click="parkSelectShow = true">{{ parkName || '请选择' }}&nbsp;<span style="position: relative; top: -2px;">⌵</span></span>
             </view>
           </view>
         </view>
@@ -91,6 +91,18 @@
         </view>
       </view>
     </view>
+    <!-- 过了填报日期，弹窗提醒 -->
+    <u-mask :show="!isFormAvailable" :mask-click-able="false">
+      <view class="warp">
+        <view class="rect" @tap.stop>
+          <view class="rect-content">
+            <view class="rect-title">提示</view>
+            <view class="rect-desc">当前时间已超过截止时间，无法填写</view>
+            <view class="rect-btn" @click="goHome">去首页</view>
+          </view>
+        </view>
+      </view>
+	  </u-mask>
   </view>
 </template>
 
@@ -215,6 +227,38 @@
     type: 0
   })
 
+  // 是否超时，超时显示弹窗
+  const isFormAvailable = ref(true)
+
+  /**
+   * 验证问卷截止时间
+   * @param {string} endAt 截止时间字符串，格式为"YYYY-MM-DD HH:MM:SS"
+   */
+  const validateEndTime = (endAt) => {
+    try {
+      // 将字符串转换为日期对象（兼容不同浏览器）
+      const endDate = new Date(endAt.replace(/-/g, '/'))
+      const currentDate = new Date()
+      
+      // 比较当前时间与截止时间
+      if (currentDate <= endDate) {
+        isFormAvailable.value = true
+      } else {
+        isFormAvailable.value = false
+      }
+    } catch (error) {
+      console.error('时间验证失败:', error)
+      // 如果时间格式解析失败，默认允许填写
+      isFormAvailable.value = true
+    }
+  }
+
+  const goHome = () => {
+    uni.switchTab({
+      url: '/pages/index'
+    })
+  }
+
   // 根据页面参数获取问卷详情
   onMounted(() => {
     getParkListApi()
@@ -233,6 +277,7 @@
     getQuestionnaireDetailApi(questionnaireId).then(res => {
       if (res.code === 200) {
         questionnaireInfo.value = res.data
+        validateEndTime(questionnaireInfo.value.endAt)
         // 如果questionnaireInfo.value.type == 2,不显示‘车辆维修站’
         if (questionnaireInfo.value.type == 2) {
           dataFilledIn.value = dataList.value.filter(item => item.id != 6)
@@ -522,4 +567,39 @@
     display: flex;
     justify-content: center;
   }
+  .warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.rect {
+		width: 60vw;
+    max-width: 400px;
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 30rpx 30rpx;
+
+    .rect-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 20rpx;
+      text-align: center;
+    }
+
+    .rect-btn {
+      width: 100%;
+      height: 80rpx;
+      line-height: 80rpx;
+      text-align: center;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #fff;
+      background: linear-gradient(to bottom, #7EBBF5, #4B9EF6);
+      border-radius: 10rpx;
+      margin-top: 40rpx;
+    }
+	}
 </style>