问卷调查

.gitignore

@@ -13,6 +13,7 @@ dist
 *.local
 unpackage
 .env.development
+.history
 
 # Editor directories and files
 .idea

src/api/investigation.ts

@@ -0,0 +1,33 @@
+/*
+ * @Page: 文件描述
+ * @Author: Fengyu
+ * @Date: 2025-12-12 14:00:09
+ * @LastEditors: Fengyu
+ * @LastEditTime: 2025-12-15 17:16:22
+ */
+import { http } from '@/utils/http'
+
+/**
+ * @description: 问卷调查详情
+ * @param {*} data
+ * @return {*}
+ */
+export const getQuestionnaireDetailApi = (id: string) => {
+  return http({
+    method: 'GET',
+    url: '/questionnaire/' + id
+  })
+}
+
+/**
+ * @description: 问卷调查提交
+ * @param {*} data
+ * @return {*}
+ */
+export const submitQuestionnaireApi = (data: any) => {
+  return http({
+    method: 'POST',
+    url: '/questionnaire/answer',
+    data
+  })
+}

src/api/login.ts

@@ -1,4 +1,11 @@
 /*
+ * @Page: 文件描述
+ * @Author: Fengyu
+ * @Date: 2025-12-11 16:03:49
+ * @LastEditors: Fengyu
+ * @LastEditTime: 2025-12-12 14:00:41
+ */
+/*
  * @Author: wyd
  * @Date: 2024-02
  * @LastEditors: wyd

src/manifest.json

@@ -52,10 +52,11 @@
     },
     /* 快应用特有相关 */
     "quickapp" : {},
-    "h5": {
-      "router": {
-        "base": "./"
-      }
+    "h5" : {
+        "router" : {
+            "base" : "./",
+            "mode" : "history"
+        }
     },
     /* 小程序特有相关 */
     "mp-weixin" : {

src/pages.json

@@ -22,7 +22,15 @@
         "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
-    }
+    },
+    {
+      "path": "pages/questionnaire",
+      "style": {
+        "navigationBarTitleText": "问卷调查",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
   ],
   "subPackages": [
     {

src/pages/questionnaire.vue

@@ -0,0 +1,424 @@
+<!--
+ * @Page: 问卷调查
+ * @Author: Fengyu
+ * @Date: 2025-12-12 10:12:59
+ * @LastEditors: Fengyu
+ * @LastEditTime: 2025-12-15 17:14:50
+-->
+<template>
+  <view class="questionnaire-container">
+    <!-- 顶部导航栏 -->
+    <!-- <view class="nav-bar">
+      <view class="nav-left">
+        <uni-icons type="left" size="32" color="#333" @click="goBack"></uni-icons>
+      </view>
+      <view class="nav-title">调查问卷</view>
+      <view class="nav-right">
+        <uni-icons type="ellipsis" size="32" color="#333"></uni-icons>
+        <uni-icons type="eye" size="32" color="#333" class="ml10"></uni-icons>
+      </view>
+    </view> -->
+
+    <!-- 问卷引导区域 -->
+    <view class="guide-section">
+      <view class="guide-content">
+        <view class="guide-text">
+          <view class="guide-title">问卷引导</view>
+          <view class="guide-desc">欢迎您对我们服务区提出建议反馈，我们会对您的问题进行全程跟踪</view>
+        </view>
+        <view class="guide-image"></view>
+      </view>
+    </view>
+
+    <!-- 网格选择区域 -->
+    <view class="grid-section">
+      <view class="grid-container">
+        <view v-for="(item, index) in dataFilledIn" :key="item.id" class="grid-item">
+          <view class="grid-content">
+            <view class="grid-title">{{ index + 1 }}. {{ item.name }}</view>
+            <view class="grid-desc">
+              <u-radio-group v-model="item.value">
+                <u-radio
+                  v-for="(t, i) in options" :key="i" 
+                  :name="t.value"
+                  :disabled="t.disabled"
+                >
+                  {{t.name}}
+                </u-radio>
+              </u-radio-group>
+            </view>
+          </view>
+        </view>
+        <!-- 最好的高速 -->
+        <view class="grid-item">
+          <view class="grid-content">
+            <view class="grid-title">{{ dataFilledIn.length + 1 }}. 您认为本服务区的最好的高速是？</view>
+            <view class="grid-desc">
+              <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 + 2 }}. 您认为本服务区的最好的服务区是？</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="submit-btn" @click="submitForm">
+          提 交
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { getQuestionnaireDetailApi, submitQuestionnaireApi } from '@/api/investigation'
+
+  const dataList = ref([
+    {
+      id: 1,
+      name: '公共卫生间',
+      value: ''
+    },
+    {
+      id: 2,
+      name: '公共区域',
+      value: ''
+    },
+    {
+      id: 3,
+      name: '餐饮',
+      value: ''
+    },
+    {
+      id: 4,
+      name: '便利店',
+      value: ''
+    },
+    {
+      id: 5,
+      name: '加油(加气、充电)站',
+      value: ''
+    },
+    {
+      id: 6,
+      name: '车辆维修站',
+      value: ''
+    },
+    {
+      id: 7,
+      name: '对本服务区总体评价',
+      value: ''
+    }
+  ])
+
+  const options = ref([
+    {
+      name: '满意',
+      value: 1
+    },
+    {
+      name: '比较满意',
+      value: 2
+    },
+    {
+      name: '一般',
+      value: 3
+    },
+    {
+      name: '不满意',
+      value: 4
+    }
+  ])
+
+  // 最好的高速
+  const bestWay = ref('')
+
+  // 最好的服务区
+  const bestService = ref('')
+
+  // 动态的判断是否需要显示‘车辆维修站’
+  const dataFilledIn = ref([])
+
+  // 问卷信息
+  const questionnaireInfo = ref({
+    id: '',
+    name: '',
+    endAt: '',
+    fileId: 0,
+    type: 0
+  })
+
+  // 根据页面参数获取问卷详情
+  onMounted(() => {
+    // 使用URLSearchParams正确解析URL参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const questionnaireId = urlParams.get('id');
+    
+    if (!questionnaireId) {
+      uni.showToast({
+        title: '问卷ID参数缺失',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    getQuestionnaireDetailApi(questionnaireId).then(res => {
+      if (res.code === 200) {
+        questionnaireInfo.value = res.data
+        // 如果questionnaireInfo.value.type == 2,不显示‘车辆维修站’
+        if (questionnaireInfo.value.type == 2) {
+          dataFilledIn.value = dataList.value.filter(item => item.id != 6)
+        } else {
+          dataFilledIn.value = dataList.value
+        }
+      } else {
+        uni.showToast({
+          title: res.message || '获取问卷详情失败',
+          icon: 'none'
+        });
+      }
+    }).catch(err => {
+      console.error('获取问卷详情失败:', err);
+      uni.showToast({
+        title: '网络错误，请重试',
+        icon: 'none'
+      });
+    });
+  });
+  
+    // 提交表单
+    const submitForm = () => {
+      // 检查是否所有项都有选择
+      const isComplete = dataFilledIn.value.every(item => item.value !== '');
+      if (!isComplete) {
+        uni.showToast({
+          title: '请完成所有项',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      // 解析URL参数
+      const urlParams = new URLSearchParams(window.location.search);
+      const questionnaireId = parseInt(questionnaireInfo.value.id) || 0;
+      // const parkid = parseInt(urlParams.get('parkid')) || 0; // 与API参数名保持一致
+      const mobile = urlParams.get('m') || '';
+      
+      // 验证必需参数
+      if (!questionnaireId || !mobile) {
+        uni.showToast({
+          title: '参数错误，请重新进入页面',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      // 验证手机号格式
+      // const mobileRegex = /^1[3-9]\d{9}$/;
+      // if (!mobileRegex.test(mobile)) {
+      //   uni.showToast({
+      //     title: '手机号格式不正确',
+      //     icon: 'none'
+      //   });
+      //   return;
+      // }
+      
+      // 转换评分数据为targetA-G格式，确保为整数类型
+      const scoreData = {
+        targetA: parseInt(dataFilledIn.value.find(item => item.id === 1)?.value) || 0, // 公共卫生间
+        targetB: parseInt(dataFilledIn.value.find(item => item.id === 2)?.value) || 0, // 公共区域
+        targetC: parseInt(dataFilledIn.value.find(item => item.id === 3)?.value) || 0, // 餐饮
+        targetD: parseInt(dataFilledIn.value.find(item => item.id === 4)?.value) || 0, // 便利店
+        targetE: parseInt(dataFilledIn.value.find(item => item.id === 5)?.value) || 0, // 加油(加气、充电)站
+        targetF: parseInt(dataFilledIn.value.find(item => item.id === 6)?.value) || 0, // 车辆维修站
+        targetG: parseInt(dataFilledIn.value.find(item => item.id === 7)?.value) || 0, // 总体评价
+        bestWay: bestWay.value, // 最好的高速
+        bestService: bestService.value // 最好的服务区
+      };
+      
+      // 构建完整参数对象，确保与API要求一致
+      let params = {
+        questionnaireId,
+        // parkid, // 使用API要求的参数名
+        mobile,
+        ...scoreData
+      };
+
+      console.log('提交参数:', params);
+      
+      // 调用API提交表单
+      submitQuestionnaireApi(params).then(res => {
+        if (res.code === 200) {
+          uni.showToast({
+            title: '感谢您的反馈！',
+            icon: 'success'
+          });
+        } else {
+          uni.showToast({
+            title: res.message || '提交失败，请重试',
+            icon: 'none'
+          });
+        }
+      }).catch(err => {
+        console.error('提交失败:', err);
+        uni.showToast({
+          title: err.data.msg || '操作失败',
+          icon: 'none'
+        });
+      });
+    }
+</script>
+
+<style lang="scss" scoped>
+  .questionnaire-container {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+  }
+
+  /* 导航栏 */
+  .nav-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+  }
+
+  .nav-left,
+  .nav-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  /* 问卷引导区域 */
+  .guide-section {
+    width: 100%;
+    height: 100vh;
+    /* 从上到下渐变样式 */
+    background: linear-gradient(to bottom, #9ED9FC, #F0F8FB 40%);
+    padding: 40rpx 30rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    margin-bottom: 40rpx;
+  }
+  
+  .guide-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .guide-text {
+    flex: 1;
+    /* color: #fff; */
+  }
+  
+  .guide-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    margin-bottom: 20rpx;
+  }
+
+  .guide-desc {
+    font-size: 24rpx;
+    line-height: 36rpx;
+  }
+  
+  .guide-image {
+    width: 300rpx;
+    height: 300rpx;
+    background: url('@/static/images/wenjuan.png') no-repeat center center;
+    background-size: 100%;
+  }
+  
+  .guide-image image {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* 网格选择区域 */
+  .grid-section {
+    width: 90%;
+    /* height: 80vh; */
+    margin: 0 auto;
+    background-color: #fff;
+    position: relative;
+    top: 24vh;
+    z-index: 3;
+    border-radius: 20rpx;
+  }
+
+  .grid-container {
+    /* display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 30rpx; */
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 40rpx;
+
+    .grid-content {
+
+      .grid-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        margin-bottom: 20rpx;
+      }
+    }
+
+    // 提交按钮
+    .submit-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;
+      // position: absolute;
+      // bottom: 0;
+      // left: 0;
+      // z-index: 3;
+    }
+  }
+
+  .grid-item {
+    width: 100%;
+    background-color: #fff;
+    padding: 10px;
+    /* border: 2rpx solid #e4e7ed; */
+    border-radius: 10rpx;
+    box-sizing: border-box;
+    position: relative;
+    transition: all 0.3s ease;
+  }
+
+  .grid-item-selected {
+    background-color: #479bfa;
+    border-color: #479bfa;
+  }
+
+  /* 换一换按钮 */
+  .refresh-btn {
+    display: flex;
+    justify-content: center;
+  }
+</style>

vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig(({ command, mode }) => {
   if (mode === 'development' || mode === 'sandbox') {
     // 测试环境配置
     return {
+      base: '/',
       plugins: [uni()],
       // envDir: resolve(__dirname, 'env'),
       define: {