From c622702a7b9357a45df08361dfab4dcc690fc95c Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期一, 29 九月 2025 08:43:50 +0800
Subject: [PATCH] fix:优化index.vue支持 selected
---
ruoyi-ui/src/views/evaluation/index.vue | 348 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 333 insertions(+), 15 deletions(-)
diff --git a/ruoyi-ui/src/views/evaluation/index.vue b/ruoyi-ui/src/views/evaluation/index.vue
index 017d5af..2d58018 100644
--- a/ruoyi-ui/src/views/evaluation/index.vue
+++ b/ruoyi-ui/src/views/evaluation/index.vue
@@ -3,7 +3,7 @@
<!-- 椤甸潰澶撮儴 -->
<div class="evaluation-header">
<h1>鏈嶅姟璇勪环</h1>
- <p>鎰熻阿鎮ㄤ娇鐢ㄦ垜浠殑鏈嶅姟锛岃瀵规湰娆℃湇鍔¤繘琛岃瘎浠�</p>
+ <p>鎰熻阿鎮ㄤ娇鐢ㄦ垜浠殑闈�120鎬ユ晳鍖荤枟杞繍鏈嶅姟锛岃瀵规湰娆℃湇鍔¤繘琛岃瘎浠凤紒</p>
</div>
<!-- 杞﹁締淇℃伅 -->
@@ -19,12 +19,41 @@
<el-form ref="evaluationForm" :model="evaluationForm" :rules="rules" label-width="80px" size="small">
<!-- 瀹㈡埛淇℃伅 -->
<div class="form-section">
- <h3>瀹㈡埛淇℃伅</h3>
- <el-form-item label="濮撳悕" prop="customerName">
+ <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">
+
+ </div>
</el-form-item>
</div>
@@ -35,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>
@@ -60,8 +88,17 @@
{{ 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>
@@ -85,6 +122,7 @@
placeholder="璇疯緭鍏ユ偍鐨勬剰瑙佹垨寤鸿"
@input="updateDimensionText(dimension.dimensionId, $event)"
size="small"
+ :aria-label="`${dimension.dimensionName}璇勪环鎰忚`"
/>
</div>
</div>
@@ -118,7 +156,7 @@
</template>
<script>
-import { getEvaluationDimensions, submitEvaluation, getWechatUserInfo } from "@/api/evaluation";
+import { getEvaluationDimensions, submitEvaluation, getWechatUserInfo, getWechatAuthUrl } from "@/api/evaluation";
export default {
name: "Evaluation",
@@ -136,6 +174,8 @@
wechatPhone: '',
evaluationDetails: []
},
+ // 鐢ㄤ簬瀛樺偍閫夋嫨绫诲瀷鐨勮瘎浠烽�夐」
+ selectedOptions: {},
rules: {
customerName: [
{ required: true, message: '璇疯緭鍏ユ偍鐨勫鍚�', trigger: 'blur' }
@@ -147,7 +187,8 @@
},
submitting: false,
showResult: false,
- resultMessage: ''
+ resultMessage: '',
+ wechatAuthLoading: false
};
},
created() {
@@ -178,7 +219,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 +231,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 {
+ // 鏋勫缓褰撳墠椤甸潰鐨勫畬鏁碪RL浣滀负鍥炶皟鍦板潃
+ const currentUrl = window.location.origin + window.location.pathname;
+ const params = new URLSearchParams(window.location.search);
+ params.delete('code'); // 绉婚櫎鍙兘瀛樺湪鐨刢ode鍙傛暟
+ params.delete('state'); // 绉婚櫎鍙兘瀛樺湪鐨剆tate鍙傛暟
+ 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;
}
},
@@ -220,13 +313,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) {
+ // 濡傛灉涓嶅瓨鍦紝鍒涘缓涓�涓柊鐨刣etail瀵硅薄
+ const newDetail = { dimensionId, optionValue: '' };
+ this.evaluationForm.evaluationDetails.push(newDetail);
+ return newDetail;
+ }
+ return detail;
+ },
+
+ // 鑾峰彇缁村害閫夐」鐨剉-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;
},
// 鏇存柊缁村害閫夐」
@@ -236,7 +353,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);
},
// 鑾峰彇缁村害鏂囨湰
@@ -252,15 +378,28 @@
detail = { dimensionId, textContent: '' };
this.evaluationForm.evaluationDetails.push(detail);
}
- detail.textContent = textContent;
+ // 浣跨敤Vue.set纭繚鍝嶅簲寮忔洿鏂�
+ this.$set(detail, 'textContent', textContent);
},
// 鑾峰彇缁村害閫夐」閰嶇疆
getDimensionOptions(dimension) {
if (!dimension.options) return [];
try {
- return JSON.parse(dimension.options);
+ const options = JSON.parse(dimension.options);
+
+ // 妫�鏌ユ槸鍚︽湁榛樿閫変腑鐨勯�夐」
+ const defaultSelected = options.find(option => option.selected === true);
+ if (defaultSelected && !this.selectedOptions[dimension.dimensionId]) {
+ // 璁剧疆榛樿閫変腑
+ this.$set(this.selectedOptions, dimension.dimensionId, defaultSelected.value);
+ // 鍚屾椂鏇存柊evaluationDetails
+ this.updateDimensionOption(dimension.dimensionId, defaultSelected.value);
+ }
+
+ return options;
} catch (error) {
+ console.error('Error parsing options for', dimension.dimensionName, ':', error);
return [];
}
},
@@ -289,7 +428,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 || '鎻愪氦澶辫触锛岃閲嶈瘯');
@@ -308,6 +447,7 @@
this.evaluationForm.customerName = '';
this.evaluationForm.customerPhone = '';
this.evaluationForm.evaluationDetails = [];
+ this.selectedOptions = {};
this.$refs.evaluationForm.resetFields();
}
}
@@ -430,6 +570,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;
@@ -459,10 +608,139 @@
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;
+}
+
/* 浼樺寲鏂囨湰璇勪环鏄剧ず */
.text-rating .el-textarea__inner {
font-size: 13px;
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;
}
/* 浼樺寲琛ㄥ崟椤归棿璺� */
@@ -587,6 +865,11 @@
font-size: 13px;
}
+ .dimension-name-fixed {
+ width: 120px;
+ font-size: 13px;
+ }
+
.star-rating-content {
min-width: auto;
width: 100%;
@@ -628,6 +911,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;
+ }
}
/* 瓒呭皬灞忓箷閫傞厤 */
--
Gitblit v1.9.1