fix:优化评价

wlzboy

2025-09-27 c1147646b9ef1d713a202d7ab8cf3ea8d677f142

 ruoyi-ui/src/views/evaluation/index.vue

@@ -3,7 +3,7 @@
    <!-- 页面头部 -->
    <div class="evaluation-header">
      <h1>服务评价</h1>
      <p>感谢您使用我们的服务，请对本次服务进行评价</p>
      <p>感谢您使用我们的非120急救医疗转运服务，请对本次服务进行评价！</p>
    </div>

    <!-- 车辆信息 -->
@@ -19,7 +19,7 @@
      <el-form ref="evaluationForm" :model="evaluationForm" :rules="rules" label-width="80px" size="small">
        <!-- 客户信息 -->
        <div class="form-section">
          <h3>客户信息</h3>
          <h3>客户信息:</h3>
          
          <!-- 微信授权信息显示 -->
          <div v-if="evaluationForm.wechatOpenid" class="wechat-info">
@@ -46,14 +46,13 @@
            <div class="wechat-tip">点击可自动获取您的微信信息</div>
          </div>
          
          <el-form-item label="姓名" prop="customerName">
          <el-form-item label="称呼" prop="customerName">
            <el-input v-model="evaluationForm.customerName" placeholder="请输入您的姓名" />
          </el-form-item>
          <el-form-item label="手机号" prop="customerPhone">
            <el-input v-model="evaluationForm.customerPhone" placeholder="请输入您的手机号" />
            <div v-if="evaluationForm.wechatOpenid" class="phone-tip">
              <i class="el-icon-info"></i>
              微信授权无法直接获取手机号，请手动输入
             
            </div>
          </el-form-item>
        </div>
@@ -65,17 +64,16 @@
            <!-- 星级评价 - 标题和评分在同一行 -->
            <div v-if="dimension.dimensionType === 'star'" class="star-rating-inline">
              <div class="dimension-title-inline">
                <span>{{ dimension.dimensionName }}</span>
                <span class="dimension-name-fixed">{{ dimension.dimensionName }}</span>
                <span v-if="dimension.isRequired === '1'" class="required">*</span>
              </div>
              <div class="star-rating-content">
                <el-rate
                  :value="getDimensionScore(dimension.dimensionId)"
                  :max="5"
                  show-text
                  :texts="['很差', '较差', '一般', '满意', '非常满意']"
                  @change="updateDimensionScore(dimension.dimensionId, $event)"
                  size="small"
                  :aria-label="`评价${dimension.dimensionName}`"
                />
              </div>
            </div>
@@ -90,8 +88,16 @@
                {{ dimension.dimensionDesc }}
              </div>
              <div class="select-rating">
                <el-radio-group :value="getDimensionOption(dimension.dimensionId)" @change="updateDimensionOption(dimension.dimensionId, $event)" size="small">
                  <el-radio v-for="option in getDimensionOptions(dimension)" :key="option.value" :label="option.value">
                <el-radio-group 
                  v-model="selectedOptions[dimension.dimensionId]"
                  @change="(value) => handleOptionChange(dimension.dimensionId, value)"
                  size="small"
                  :aria-label="`选择${dimension.dimensionName}`">
                  <el-radio 
                    v-for="option in getDimensionOptions(dimension)" 
                    :key="option.value" 
                    :label="option.value"
                    :aria-label="option.label">
                    {{ option.label }}
                  </el-radio>
                </el-radio-group>
@@ -115,6 +121,7 @@
                  placeholder="请输入您的意见或建议"
                  @input="updateDimensionText(dimension.dimensionId, $event)"
                  size="small"
                  :aria-label="`${dimension.dimensionName}评价意见`"
                />
              </div>
            </div>
@@ -166,6 +173,8 @@
        wechatPhone: '',
        evaluationDetails: []
      },
      // 用于存储选择类型的评价选项
      selectedOptions: {},
      rules: {
        customerName: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
@@ -303,13 +312,37 @@
        detail = { dimensionId, score: 0 };
        this.evaluationForm.evaluationDetails.push(detail);
      }
      detail.score = score;
      // 使用Vue.set确保响应式更新
      this.$set(detail, 'score', score);
    },

    // 获取维度选项
    getDimensionOption(dimensionId) {
      const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
      return detail ? detail.optionValue : '';
    },

    // 获取维度选项值（用于v-model）
    getDimensionOptionValue(dimensionId) {
      const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
      if (!detail) {
        // 如果不存在，创建一个新的detail对象
        const newDetail = { dimensionId, optionValue: '' };
        this.evaluationForm.evaluationDetails.push(newDetail);
        return newDetail;
      }
      return detail;
    },

    // 获取维度选项的v-model对象
    getDimensionOptionModel(dimensionId) {
      const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
      if (!detail) {
        const newDetail = { dimensionId, optionValue: '' };
        this.evaluationForm.evaluationDetails.push(newDetail);
        return newDetail;
      }
      return detail;
    },

    // 更新维度选项
@@ -319,7 +352,16 @@
        detail = { dimensionId, optionValue: '' };
        this.evaluationForm.evaluationDetails.push(detail);
      }
      detail.optionValue = optionValue;
      // 使用Vue.set确保响应式更新
      this.$set(detail, 'optionValue', optionValue);
    },

    // 处理选项变化
    handleOptionChange(dimensionId, value) {
      // 更新selectedOptions
      this.$set(this.selectedOptions, dimensionId, value);
      // 同时更新evaluationDetails
      this.updateDimensionOption(dimensionId, value);
    },

    // 获取维度文本
@@ -335,7 +377,8 @@
        detail = { dimensionId, textContent: '' };
        this.evaluationForm.evaluationDetails.push(detail);
      }
      detail.textContent = textContent;
      // 使用Vue.set确保响应式更新
      this.$set(detail, 'textContent', textContent);
    },

    // 获取维度选项配置
@@ -344,6 +387,7 @@
      try {
        return JSON.parse(dimension.options);
      } catch (error) {
        console.error('Error parsing options for', dimension.dimensionName, ':', error);
        return [];
      }
    },
@@ -372,7 +416,7 @@
        // 提交评价
        const response = await submitEvaluation(this.evaluationForm);
        if (response.code === 200) {
          this.resultMessage = response.msg;
          this.resultMessage = "感谢您的反馈，您的反馈将促使我们不断进步，我们将继续提供更好的服务";
          this.showResult = true;
        } else {
          this.$message.error(response.msg || '提交失败，请重试');
@@ -391,6 +435,7 @@
      this.evaluationForm.customerName = '';
      this.evaluationForm.customerPhone = '';
      this.evaluationForm.evaluationDetails = [];
      this.selectedOptions = {};
      this.$refs.evaluationForm.resetFields();
    }
  }
@@ -513,6 +558,15 @@
  flex-shrink: 0;
}

.dimension-name-fixed {
  display: inline-block;
  width: 100px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-rating-content {
  flex: 1;
  min-width: 200px;
@@ -540,6 +594,69 @@

.select-rating .el-radio__label {
  font-size: 13px;
}

/* 改善无障碍访问 */
.select-rating .el-radio__original {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.select-rating .el-radio__input {
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: none;
  line-height: 1;
}

.select-rating .el-radio__inner {
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

.select-rating .el-radio__inner:hover {
  border-color: #409eff;
}

.select-rating .el-radio.is-checked .el-radio__inner {
  border-color: #409eff;
  background: #409eff;
}

.select-rating .el-radio.is-checked .el-radio__inner::after {
  transform: translate(-50%, -50%) scale(1);
}

.select-rating .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #fff;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease-in;
}

/* 优化文本评价显示 */
@@ -736,6 +853,11 @@
    font-size: 13px;
  }
  
  .dimension-name-fixed {
    width: 120px;
    font-size: 13px;
  }
  
  .star-rating-content {
    min-width: auto;
    width: 100%;