调查问卷优化

src/pages/questionnaire.vue

@@ -3,7 +3,7 @@
  * @Author: Fengyu
  * @Date: 2025-12-12 10:12:59
  * @LastEditors: Fengyu
- * @LastEditTime: 2025-12-17 14:29:31
+ * @LastEditTime: 2025-12-17 17:32:29
 -->
 <template>
   <view class="questionnaire-container">
@@ -33,9 +33,20 @@
     <!-- 网格选择区域 -->
     <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-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">1.您所在的服务区</view>
+            <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 || '请选择' }}&nbsp;<span style="position: relative; top: -2px;">⌵</span></span>
@@ -44,7 +55,7 @@
         </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,7 +72,7 @@
         <!-- 最好的高速 -->
         <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="请输入您认为途经最好的高速" />
             </view>
@@ -70,13 +81,23 @@
         <!-- 最好的服务区 -->
         <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="请输入您认为途经最好的服务区" />
             </view>
           </view>
         </view>
 
+        <!-- 宝贵意见 -->
+        <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>
@@ -86,8 +107,15 @@
           </view>
         </view>
 
-        <view class="submit-btn" @click="submitForm">
-          提 交
+        <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>
@@ -97,7 +125,7 @@
         <view class="rect" @tap.stop>
           <view class="rect-content">
             <view class="rect-title">提示</view>
-            <view class="rect-desc">当前时间已超过截止时间，无法填写</view>
+            <view class="rect-desc">{{ msg || '当前时间已超过截止时间，无法填写' }}</view>
             <view class="rect-btn" @click="goHome">去首页</view>
           </view>
         </view>
@@ -178,6 +206,34 @@
 
   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 => {
@@ -201,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)
@@ -230,6 +293,10 @@
   // 是否超时，超时显示弹窗
   const isFormAvailable = ref(true)
 
+  // 提交按钮相关状态
+  const isSubmitting = ref(false) // 是否正在提交
+  const submitCountdown = ref(0) // 提交倒计时（秒）
+
   /**
    * 验证问卷截止时间
    * @param {string} endAt 截止时间字符串，格式为"YYYY-MM-DD HH:MM:SS"
@@ -259,6 +326,27 @@
     })
   }
 
+  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()
@@ -285,32 +373,52 @@
           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 (!isComplete) {
+
+      if (!userType.value) {
         uni.showToast({
-          title: '请完成所有项',
+          title: '请选择身份',
           icon: 'none'
         });
         return;
       }
-
+      
       if (!parkId.value) {
         uni.showToast({
           title: '请选择服务区',
@@ -318,6 +426,14 @@
         });
         return;
       }
+
+      if (!isComplete) {
+        uni.showToast({
+          title: '请完成所有项',
+          icon: 'none'
+        });
+        return;
+      }
       
       if (!phone.value) {
         uni.showToast({
@@ -389,11 +505,16 @@
         questionnaireId,
         // parkid, // 使用API要求的参数名
         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) {
@@ -401,6 +522,8 @@
             title: '感谢您的反馈！',
             icon: 'success'
           });
+          // 提交成功后开始5秒倒计时
+          startSubmitCountdown();
           setTimeout(() => {
             uni.switchTab({
               url: '/pages/index'
@@ -418,6 +541,9 @@
           title: err.data.msg || '操作失败',
           icon: 'none'
         });
+      }).finally(() => {
+        // 无论成功失败，都恢复提交状态
+        isSubmitting.value = false;
       });
     }
 </script>
@@ -517,6 +643,7 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 40rpx;
+    padding-bottom: 10px;
 
     .grid-content {
 
@@ -529,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;