feat:更新保存

wlzboy

2025-09-22 fe95f471666d93e7822a4886c1c69dafbd6b2a1e

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

@@ -20,11 +20,41 @@
        <!-- 客户信息 -->
        <div class="form-section">
          <h3>客户信息</h3>
          
          <!-- 微信授权信息显示 -->
          <div v-if="evaluationForm.wechatOpenid" class="wechat-info">
            <div class="wechat-user">
              <img v-if="evaluationForm.wechatAvatar" :src="evaluationForm.wechatAvatar" class="wechat-avatar" />
              <div class="wechat-details">
                <div class="wechat-nickname">{{ evaluationForm.wechatNickname }}</div>
                <div class="wechat-openid">已授权微信登录</div>
              </div>
            </div>
          </div>
          
          <!-- 微信授权按钮 -->
          <div v-if="isWechatBrowser() && !evaluationForm.wechatOpenid" class="wechat-auth-section">
            <el-button 
              type="primary" 
              size="small" 
              @click="redirectToWechatAuth" 
              icon="el-icon-user"
              :loading="wechatAuthLoading"
            >
              {{ wechatAuthLoading ? '正在跳转...' : '微信一键登录' }}
            </el-button>
            <div class="wechat-tip">点击可自动获取您的微信信息</div>
          </div>
          
          <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>

@@ -118,7 +148,7 @@
</template>

<script>
import { getEvaluationDimensions, submitEvaluation, getWechatUserInfo } from "@/api/evaluation";
import { getEvaluationDimensions, submitEvaluation, getWechatUserInfo, getWechatAuthUrl } from "@/api/evaluation";

export default {
  name: "Evaluation",
@@ -147,7 +177,8 @@
      },
      submitting: false,
      showResult: false,
      resultMessage: ''
      resultMessage: '',
      wechatAuthLoading: false
    };
  },
  created() {
@@ -178,7 +209,10 @@
    // 处理微信授权
    async handleWechatAuth() {
      const code = this.$route.query.code;
      const state = this.$route.query.state;
      
      if (code) {
        // 有授权码，获取用户信息
        try {
          const response = await getWechatUserInfo(code);
          if (response.code === 200) {
@@ -187,10 +221,59 @@
            this.evaluationForm.wechatNickname = userInfo.nickname;
            this.evaluationForm.wechatAvatar = userInfo.headimgurl;
            this.evaluationForm.wechatPhone = userInfo.phone || '';
            
            // 如果获取到了微信昵称，自动填充到姓名字段
            if (userInfo.nickname && !this.evaluationForm.customerName) {
              this.evaluationForm.customerName = userInfo.nickname;
            }
            
            this.$message.success('微信授权成功，已自动获取您的信息');
          } else {
            this.$message.error(response.msg || '获取微信用户信息失败');
          }
        } catch (error) {
          console.error('获取微信用户信息失败:', error);
          this.$message.error('获取微信用户信息失败，请重试');
        }
      } else {
        // 没有授权码，检查是否需要跳转到微信授权
        const hasWechatInfo = this.evaluationForm.wechatOpenid;
        if (!hasWechatInfo) {
          await this.redirectToWechatAuth();
        }
      }
    },

    // 跳转到微信授权
    async redirectToWechatAuth() {
      this.wechatAuthLoading = true;
      try {
        // 构建当前页面的完整URL作为回调地址
        const currentUrl = window.location.origin + window.location.pathname;
        const params = new URLSearchParams(window.location.search);
        params.delete('code'); // 移除可能存在的code参数
        params.delete('state'); // 移除可能存在的state参数
        const redirectUri = currentUrl + (params.toString() ? '?' + params.toString() : '');
        
        console.log('准备生成微信授权URL，回调地址:', redirectUri);
        
        const response = await getWechatAuthUrl(redirectUri, 'evaluation');
        if (response.code === 200) {
          console.log('微信授权URL生成成功:', response.data);
          console.log('原始回调地址:', response.data.originalRedirectUri);
          console.log('微信AppID:', response.data.appId);
          
          // 跳转到微信授权页面
          window.location.href = response.data.authUrl;
        } else {
          console.error('生成微信授权URL失败:', response.msg);
          this.$message.error('微信授权服务暂时不可用，请手动填写信息');
        }
      } catch (error) {
        console.error('跳转微信授权失败:', error);
        this.$message.error('微信授权失败，请手动填写信息');
      } finally {
        this.wechatAuthLoading = false;
      }
    },

@@ -465,6 +548,72 @@
  min-height: 60px !important;
}

/* 微信授权相关样式 */
.wechat-info {
  background: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.wechat-user {
  display: flex;
  align-items: center;
}

.wechat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #409EFF;
}

.wechat-details {
  flex: 1;
}

.wechat-nickname {
  font-weight: bold;
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
}

.wechat-openid {
  color: #666;
  font-size: 12px;
}

.wechat-auth-section {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 16px;
  border: 1px dashed #ddd;
}

.wechat-tip {
  color: #666;
  font-size: 12px;
  margin-top: 8px;
}

.phone-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}

.phone-tip i {
  margin-right: 4px;
  color: #409EFF;
}

/* 优化表单项间距 */
.el-form-item {
  margin-bottom: 12px;
@@ -628,6 +777,41 @@
    padding: 8px 24px;
    font-size: 13px;
  }
  
  /* 移动端微信授权样式 */
  .wechat-info {
    padding: 10px;
    margin-bottom: 12px;
  }
  
  .wechat-avatar {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
  
  .wechat-nickname {
    font-size: 13px;
  }
  
  .wechat-openid {
    font-size: 11px;
  }
  
  .wechat-auth-section {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .wechat-tip {
    font-size: 11px;
    margin-top: 6px;
  }
  
  .phone-tip {
    font-size: 11px;
    margin-top: 3px;
  }
}

/* 超小屏幕适配 */