Merge branch 'develop' of http://gogs.zlhuiyun.com/szr190/ShenhaiH5 into develop

src/pages/questionnaire.vue

@@ -3,7 +3,7 @@
  * @Author: Fengyu
  * @Date: 2025-12-12 10:12:59
  * @LastEditors: Fengyu
- * @LastEditTime: 2025-12-17 10:26:23
+ * @LastEditTime: 2025-12-17 17:32:29
 -->
 <template>
   <view class="questionnaire-container">
@@ -33,18 +33,29 @@
     <!-- 网格选择区域 -->
     <view class="grid-section">
       <view class="grid-container">
+
         <view class="grid-item">
           <view class="grid-content flex j-sb a-center">
-            <view class="grid-title">1.您所在的服务区</view>
+            <view class="grid-title">1.您的身份是：</view>
+            <view class="grid-desc">
+              <u-select v-model="userTypeShow" :list="userTypeList" @confirm="userTypeconfirm"></u-select>
+              <span @click="userTypeShow = true">{{ userTypeName || '请选择' }}&nbsp;<span style="position: relative; top: -2px;">⌵</span></span>
+            </view>
+          </view>
+        </view>
+
+        <view class="grid-item">
+          <view class="grid-content flex j-sb a-center">
+            <view class="grid-title">2.您所在的服务区</view>
             <view class="grid-desc">
               <u-select v-model="parkSelectShow" :list="parkList" @confirm="confirm"></u-select>
-              <span @click="parkSelectShow = true">{{ parkName || '请选择' }}</span>
+              <span @click="parkSelectShow = true">{{ parkName || '请选择' }}&nbsp;<span style="position: relative; top: -2px;">⌵</span></span>
             </view>
           </view>
         </view>
         <view v-for="(item, index) in dataFilledIn" :key="item.id" class="grid-item">
           <view class="grid-content">
-            <view class="grid-title">{{ index + 2 }}. {{ item.name }}</view>
+            <view class="grid-title">{{ index + 3 }}. {{ item.name }}</view>
             <view class="grid-desc">
               <u-radio-group v-model="item.value">
                 <u-radio
@@ -61,27 +72,65 @@
         <!-- 最好的高速 -->
         <view class="grid-item">
           <view class="grid-content">
-            <view class="grid-title">{{ dataFilledIn.length + 2 }}. 您认为本服务区的最好的高速是？</view>
+            <view class="grid-title">{{ dataFilledIn.length + 3 }}. 您认为途经最好的高速是？</view>
             <view class="grid-desc">
-              <u-input v-model="bestWay" type="textarea" :border="false" :height="100" :auto-height="true" placeholder="请输入您的评价" />
+              <u-input v-model="bestWay" type="textarea" :border="false" :height="100" :auto-height="true" placeholder="请输入您认为途经最好的高速" />
             </view>
           </view>
         </view>
         <!-- 最好的服务区 -->
         <view class="grid-item">
           <view class="grid-content">
-            <view class="grid-title">{{ dataFilledIn.length + 3 }}. 您认为本服务区的最好的服务区是？</view>
+            <view class="grid-title">{{ dataFilledIn.length + 4 }}. 您认为途经最好的服务区是？</view>
             <view class="grid-desc">
-              <u-input v-model="bestService" type="textarea" :border="false" :height="100" :auto-height="true" placeholder="请输入您的评价" />
+              <u-input v-model="bestService" type="textarea" :border="false" :height="100" :auto-height="true" placeholder="请输入您认为途经最好的服务区" />
             </view>
           </view>
         </view>
 
-        <view class="submit-btn" @click="submitForm">
-          提 交
+        <!-- 宝贵意见 -->
+        <view class="grid-item">
+          <view class="grid-content">
+            <view class="grid-title">{{ dataFilledIn.length + 5 }}. 宝贵意见</view>
+            <view class="grid-desc">
+              <u-input v-model="opinion" type="textarea" :border="false" :height="100" :auto-height="true" placeholder="请输入宝贵意见" />
+            </view>
+          </view>
+        </view>
+
+        <view class="grid-item">
+          <view class="grid-content">
+            <view class="grid-title">您的手机号：</view>
+            <view class="grid-desc">
+              <u-input v-model="phone" type="number" :border="false" :height="100" :maxlength="11" :auto-height="true" placeholder="请输入您的手机号" />
+            </view>
+          </view>
+        </view>
+
+        <view 
+          class="submit-btn" 
+          @click="submitForm" 
+          :class="{ 'disabled': !isFormAvailable || isSubmitting || submitCountdown > 0 }" 
+          :disabled="!isFormAvailable || isSubmitting || submitCountdown > 0"
+        >
+          <span v-if="!isSubmitting && submitCountdown === 0">提 交</span>
+          <span v-else-if="isSubmitting">提交中...</span>
+          <span v-else>稍后提交({{ submitCountdown }}s)</span>
         </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">{{ msg || '当前时间已超过截止时间，无法填写' }}</view>
+            <view class="rect-btn" @click="goHome">去首页</view>
+          </view>
+        </view>
+      </view>
+	  </u-mask>
   </view>
 </template>
 
@@ -155,6 +204,36 @@
   const parkId = ref('')
   const parkName = ref('')
 
+  const phone = ref('')
+
+  const userTypeShow = ref(false)
+  const userTypeList = ref([
+    {
+      label: '大客司机',
+      value: 1
+    },
+    {
+      label: '大客乘客',
+      value: 2
+    },
+    {
+      label: '小客司乘人员',
+      value: 3
+    },
+    {
+      label: '货车司机',
+      value: 4
+    },
+    {
+      label: '其他',
+      value: 5
+    }
+  ])
+  const userTypeName = ref('')
+  const userType = ref('')
+
+  const opinion = ref('')
+
   // 获取服务区列表
   const getParkListApi = () => {
     getParkList().then(res => {
@@ -178,6 +257,13 @@
     });
   }
 
+  // 选择用户身份
+  const userTypeconfirm = (e) => {
+    console.log(e[0].value, e[0].label)
+    userTypeName.value = e[0].label
+    userType.value = e[0].value
+  }
+
   // 选择服务区
   const confirm = (e) => {
     console.log(e[0].value, e[0].label)
@@ -204,6 +290,63 @@
     type: 0
   })
 
+  // 是否超时，超时显示弹窗
+  const isFormAvailable = ref(true)
+
+  // 提交按钮相关状态
+  const isSubmitting = ref(false) // 是否正在提交
+  const submitCountdown = ref(0) // 提交倒计时（秒）
+
+  /**
+   * 验证问卷截止时间
+   * @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'
+    })
+  }
+
+  const msg = ref('')
+
+  /**
+   * 开始提交倒计时，限制5秒内只能提交一次
+   */
+  const startSubmitCountdown = () => {
+    const countdownTime = 5; // 倒计时时间（秒）
+    submitCountdown.value = countdownTime;
+    
+    // 创建倒计时定时器
+    const timer = setInterval(() => {
+      submitCountdown.value--;
+      
+      // 倒计时结束
+      if (submitCountdown.value <= 0) {
+        clearInterval(timer);
+        submitCountdown.value = 0;
+      }
+    }, 1000);
+  }
+
   // 根据页面参数获取问卷详情
   onMounted(() => {
     getParkListApi()
@@ -222,6 +365,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)
@@ -229,24 +373,60 @@
           dataFilledIn.value = dataList.value
         }
       } else {
-        uni.showToast({
-          title: res.message || '获取问卷详情失败',
-          icon: 'none'
-        });
+        msg.value = res.msg || '获取问卷详情失败'
+        isFormAvailable.value = false
+        // uni.showToast({
+        //   title: res.message || '获取问卷详情失败',
+        //   icon: 'none'
+        // });
       }
     }).catch(err => {
-      console.error('获取问卷详情失败:', err);
-      uni.showToast({
-        title: '网络错误，请重试',
-        icon: 'none'
-      });
+      // console.error('获取问卷详情失败:', err);
+      uni.hideToast()
+      msg.value = err.data.msg || '获取问卷详情失败'
+      isFormAvailable.value = false
+      // uni.showToast({
+      //   title: '网络错误，请重试',
+      //   icon: 'none'
+      // });
     });
   });
   
     // 提交表单
     const submitForm = () => {
+      // 检查表单是否可用
+      if (!isFormAvailable.value) {
+        uni.showToast({
+          title: '当前时间已超过截止时间，无法提交',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      // 检查是否正在提交或处于倒计时状态
+      if (isSubmitting.value || submitCountdown.value > 0) {
+        return;
+      }
+      
       // 检查是否所有项都有选择
       const isComplete = dataFilledIn.value.every(item => item.value !== '');
+
+      if (!userType.value) {
+        uni.showToast({
+          title: '请选择身份',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      if (!parkId.value) {
+        uni.showToast({
+          title: '请选择服务区',
+          icon: 'none'
+        });
+        return;
+      }
+
       if (!isComplete) {
         uni.showToast({
           title: '请完成所有项',
@@ -254,10 +434,26 @@
         });
         return;
       }
+      
+      if (!phone.value) {
+        uni.showToast({
+          title: '请输入手机号',
+          icon: 'none'
+        });
+        return;
+      }
 
-      if (!parkId.value) {
+      if (!bestWay.value) {
         uni.showToast({
-          title: '请选择服务区',
+          title: '请输入最好的高速',
+          icon: 'none'
+        });
+        return;
+      }
+
+      if (!bestService.value) {
+        uni.showToast({
+          title: '请输入最好的服务区',
           icon: 'none'
         });
         return;
@@ -308,12 +504,17 @@
       let params = {
         questionnaireId,
         // parkid, // 使用API要求的参数名
-        mobile,
+        mobile: phone.value,
+        userType: userType.value,
+        opinion: opinion.value,
         ...scoreData
       };
 
       console.log('提交参数:', params);
       
+      // 设置提交状态
+      isSubmitting.value = true;
+      
       // 调用API提交表单
       submitQuestionnaireApi(params).then(res => {
         if (res.code === 200) {
@@ -321,8 +522,10 @@
             title: '感谢您的反馈！',
             icon: 'success'
           });
+          // 提交成功后开始5秒倒计时
+          startSubmitCountdown();
           setTimeout(() => {
-            uni.redirectTo({
+            uni.switchTab({
               url: '/pages/index'
             })
           }, 2000);
@@ -338,6 +541,9 @@
           title: err.data.msg || '操作失败',
           icon: 'none'
         });
+      }).finally(() => {
+        // 无论成功失败，都恢复提交状态
+        isSubmitting.value = false;
       });
     }
 </script>
@@ -437,6 +643,7 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 40rpx;
+    padding-bottom: 10px;
 
     .grid-content {
 
@@ -449,16 +656,18 @@
 
     // 提交按钮
     .submit-btn {
-      width: 100%;
-      height: 80rpx;
-      line-height: 80rpx;
+      width: calc(100% - 20px);
+      margin: auto;
+      height: 2.5rem;
+      line-height: 2.5rem;
       text-align: center;
-      font-size: 32rpx;
+      font-size: 1rem;
       font-weight: 600;
       color: #fff;
       background: linear-gradient(to bottom, #7EBBF5, #4B9EF6);
-      border-radius: 10rpx;
-      margin-top: 40rpx;
+      border-radius: 0.3125rem;
+      margin-top: 1.25rem;
+      padding: 0 10px;
       // position: absolute;
       // bottom: 0;
       // left: 0;
@@ -487,4 +696,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>