963 lines
33 KiB
Vue
963 lines
33 KiB
Vue
<template>
|
||
<view class="service-skills-page">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar :title="navTitle" :showBack="true"></custom-navbar>
|
||
|
||
<!-- 页面内容容器 -->
|
||
<view class="page-content" :style="{ paddingBottom: buttonAreaHeight + 'px' }">
|
||
<!-- 服务技能选择区域 -->
|
||
<view class="skills-container box-cont">
|
||
<view class="skills-header">
|
||
<view class="title-bar"></view>
|
||
<text class="skills-title">服务技能（多选）</text>
|
||
</view>
|
||
<view class="skills-subtitle" v-if="editable">请选择服务技能</view>
|
||
|
||
<!-- 显示当前生效的服务技能 -->
|
||
<view class="skills-list" v-if="!showPendingSkills">
|
||
<view class="skill-item" v-for="(skill, index) in serviceList" :key="skill.id"
|
||
:class="{ disabled: true }" v-if="isCurrentSkillSelected(skill.id)">
|
||
<view class="checkbox-wrapper">
|
||
<view class="checkbox" :class="{ checked: isCurrentSkillSelected(skill.id) }">
|
||
<image class="check-icon"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6948baf3-aad9-4d87-9483-9db0e462a3f7.png"
|
||
mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<text class="skill-name">{{ skill.title }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 显示待审核的服务技能 -->
|
||
<view class="skills-list" v-else>
|
||
<view class="skill-item" v-for="(skill, index) in serviceList" :key="skill.id"
|
||
@click="toggleSkillSelect(index)" :class="{ disabled: !editable }">
|
||
<view class="checkbox-wrapper">
|
||
<view class="checkbox" :class="{ checked: skill.checked }">
|
||
<image v-if="skill.checked" class="check-icon"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6948baf3-aad9-4d87-9483-9db0e462a3f7.png"
|
||
mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<text class="skill-name">{{ skill.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box-cont" style="padding: 0;">
|
||
<view class="form-item-two" @click="editable ? openExperiencePicker() : null">
|
||
<text class="label required">专业经验：</text>
|
||
<view class="picker-content">
|
||
<text :class="displayMajor ? 'picker-value' : 'placeholder'">
|
||
{{ displayExperienceText || '请选择' }}
|
||
</text>
|
||
<image v-if="editable"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
|
||
class="arrow-right" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-actions" ref="buttonArea">
|
||
<!-- 驳回原因提示 -->
|
||
<view class="reject-reason" v-if="shouldShowRejectReason">
|
||
<view class="reject-title">您的提交已驳回</view>
|
||
<view class="reject-detail">驳回原因：{{ backText }}</view>
|
||
</view>
|
||
<!-- 审核中提示 -->
|
||
<view class="audit-tip" v-if="showAuditTip && !showPendingSkills">
|
||
<text class="audit-text">您的提交变更正在审核中...</text>
|
||
</view>
|
||
|
||
<!-- 去变更信息按钮 -->
|
||
<view class="action-btn change-info-btn" v-if="buttonType === 'change'" @click="startChange">
|
||
<text class="btn-text">去变更信息</text>
|
||
</view>
|
||
|
||
<!-- 取消和提交按钮 -->
|
||
<view class="action-buttons-row" v-if="buttonType === 'edit'">
|
||
<view class="action-btn cancel-btn" @click="cancelChange">
|
||
<text class="btn-text cancel-text">取消</text>
|
||
</view>
|
||
<view class="action-btn submit-btn" @click="submitChange">
|
||
<text class="btn-text">提交</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 查看我的变更按钮 -->
|
||
<view class="action-btn view-change-btn" v-if="buttonType === 'view'" @click="togglePendingSkills">
|
||
<text class="btn-text">{{ showPendingSkills ? '返回' : '查看我的变更' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
sjInformation: {},
|
||
serviceList: [], // 服务技能列表
|
||
selectedSkills: [], // 已选中的技能ID（待审核的）
|
||
originalSkills: [], // 原始选中的技能ID（当前生效的）
|
||
|
||
// 新增：专业经验数据流
|
||
originalMajor: null, // 当前生效的经验
|
||
pendingMajor: null, // 待审核的经验
|
||
displayMajor: null, // 页面展示的经验
|
||
|
||
editable: false, // 是否可编辑
|
||
buttonType: 'change', // 按钮类型: change-去变更信息, edit-取消/提交, view-查看我的变更
|
||
showAuditTip: false, // 是否显示审核中提示
|
||
auditStatus: null, // 审核状态
|
||
applyId: null, // 申请ID
|
||
isLoading: true, // 添加加载状态
|
||
showPendingSkills: false, // 是否显示待审核的技能
|
||
currentSkills: [], // 当前生效的技能ID
|
||
navTitle: '服务技能', // 导航栏标题
|
||
buttonAreaHeight: 120, // 按钮区域高度，用于计算底部padding
|
||
backText: '', // 驳回原因
|
||
identity: '', // 用户身份
|
||
lastApplyTime: null, //记录最后申请时间
|
||
}
|
||
},
|
||
computed: {
|
||
selectedSkillsText() {
|
||
const selectedTitles = this.serviceList
|
||
.filter(item => item.checked)
|
||
.map(item => item.title);
|
||
return selectedTitles.join('、');
|
||
},
|
||
// 新增：将 major 数值转换为文字
|
||
displayExperienceText() {
|
||
return this.getExperienceText(this.displayMajor);
|
||
},
|
||
hasChanges() {
|
||
// 检查是否有变更 (合并技能和经验检查)
|
||
const currentSorted = [...this.currentSkills].sort().join(',');
|
||
const selectedSorted = [...this.selectedSkills].sort().join(',');
|
||
const skillsChanged = currentSorted !== selectedSorted;
|
||
const majorChanged = String(this.displayMajor || '') !== String(this.originalMajor || '');
|
||
return skillsChanged || majorChanged;
|
||
},
|
||
// 控制驳回提示是否显示
|
||
shouldShowRejectReason() {
|
||
// 只有在审核驳回状态、不显示待审核技能、且技能未变更时才显示驳回提示
|
||
return this.auditStatus === 3 &&
|
||
!this.showPendingSkills &&
|
||
!this.hasChanges &&
|
||
this.backText;
|
||
// 检查是否有待处理的申请（基于时间）
|
||
!this.hasPendingApply();
|
||
},
|
||
// 检查是否有待处理的申请（基于时间）
|
||
hasPendingApply() {
|
||
if (!this.lastApplyTime) return false;
|
||
// 如果最后申请时间在驳回时间之后，说明有新的申请
|
||
return true;
|
||
}
|
||
},
|
||
async onLoad() {
|
||
this.sjInformation = await request.post('/sj/user/getUser');
|
||
await this.initPage();
|
||
// 如果没有技能和经验信息，直接进入编辑模式
|
||
if (this.currentSkills.length === 0 && !this.originalMajor) {
|
||
this.startChange();
|
||
}
|
||
},
|
||
onReady() {
|
||
// 获取按钮区域高度，用于设置页面内容padding
|
||
this.getButtonAreaHeight();
|
||
},
|
||
methods: {
|
||
// 初始化页面
|
||
async initPage() {
|
||
this.isLoading = true;
|
||
try {
|
||
this.originalMajor = this.sjInformation?.data?.major ? Number(this.sjInformation.data.major) : null;
|
||
this.displayMajor = this.originalMajor;
|
||
|
||
// 先加载服务技能列表
|
||
await this.loadServiceSkills();
|
||
// 然后加载申请详情
|
||
await this.loadApplyDetails();
|
||
} catch (error) {
|
||
console.error('初始化页面失败:', error);
|
||
} finally {
|
||
this.isLoading = false;
|
||
}
|
||
},
|
||
|
||
// 转换专业经验为文字
|
||
getExperienceText(major) {
|
||
const experiences = ['', '实习', '1-3年', '3-5年', '5-10年', '10年以上'];
|
||
return experiences[major] || '';
|
||
},
|
||
|
||
// 打开专业经验选择器
|
||
openExperiencePicker() {
|
||
if (!this.editable) return;
|
||
uni.showActionSheet({
|
||
itemList: ['实习', '1-3年', '3-5年', '5-10年', '10年以上'],
|
||
success: (res) => {
|
||
this.displayMajor = res.tapIndex + 1;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 清理驳回技能存储的逻辑
|
||
async cleanupRejectedSkillsIfNeeded() {
|
||
try {
|
||
const rejectedSkills = uni.getStorageSync('rejectedSkills');
|
||
const rejectedMajor = uni.getStorageSync('rejectedMajor');
|
||
const lastApplyTime = uni.getStorageSync('lastApplyTime');
|
||
|
||
if (rejectedSkills && rejectedSkills.length > 0) {
|
||
// 获取当前生效技能
|
||
const params = {
|
||
type: 3
|
||
};
|
||
const res = this.sjInformation;
|
||
|
||
if (res.state === 1 && res.data && res.data.servers_kill) {
|
||
let currentSkillIds = [];
|
||
if (Array.isArray(res.data.servers_kill)) {
|
||
currentSkillIds = res.data.servers_kill.map(id => parseInt(id)).filter(id => !isNaN(
|
||
id));
|
||
} else if (typeof res.data.servers_kill === 'string') {
|
||
currentSkillIds = res.data.servers_kill.split(',').map(id => parseInt(id.trim()))
|
||
.filter(id => !isNaN(id));
|
||
}
|
||
|
||
const currentSorted = [...currentSkillIds].sort().join(',');
|
||
const rejectedSorted = [...rejectedSkills].sort().join(',');
|
||
const currentMajor = res.data.major;
|
||
|
||
// 如果当前生效技能与被驳回技能不一致，说明有新的申请已生效
|
||
if (currentSorted !== rejectedSorted || String(currentMajor) !== String(rejectedMajor)) {
|
||
console.log('检测到技能已变更，清理驳回相关存储');
|
||
uni.removeStorageSync('rejectedSkills');
|
||
uni.removeStorageSync('rejectedMajor');
|
||
uni.removeStorageSync('lastRejectTime');
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('清理驳回技能存储失败:', error);
|
||
}
|
||
},
|
||
|
||
// 获取按钮区域高度
|
||
getButtonAreaHeight() {
|
||
// 使用setTimeout确保DOM已渲染
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.bottom-actions').boundingClientRect(data => {
|
||
if (data) {
|
||
this.buttonAreaHeight = data.height + 20; // 增加一些边距
|
||
}
|
||
}).exec();
|
||
}, 100);
|
||
},
|
||
|
||
// 更新导航栏标题
|
||
updateNavTitle() {
|
||
if (this.editable || this.showPendingSkills) {
|
||
this.navTitle = '服务技能变更';
|
||
} else {
|
||
this.navTitle = '服务技能';
|
||
}
|
||
},
|
||
|
||
// 加载服务技能列表
|
||
async loadServiceSkills() {
|
||
try {
|
||
const res = await request.post('/sj/firstclass');
|
||
this.serviceList = res.data.map(item => ({
|
||
...item,
|
||
checked: false
|
||
}));
|
||
console.log('服务技能列表:', this.serviceList);
|
||
} catch (error) {
|
||
console.error('加载服务技能失败:', error);
|
||
uni.showToast({
|
||
title: '加载服务技能失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 加载申请详情
|
||
async loadApplyDetails() {
|
||
try {
|
||
console.log('开始加载申请详情...');
|
||
const res = await request.post('/sj/userSjAuth/details', {
|
||
apply_type: 2 // 服务技能变更
|
||
});
|
||
|
||
console.log('申请详情接口返回:', res);
|
||
|
||
if (res.code === 200 && res.data) {
|
||
const detail = res.data;
|
||
this.applyId = detail.id;
|
||
this.auditStatus = detail.apply_state;
|
||
this.backText = detail.back_text || ''; // 获取驳回原因
|
||
|
||
console.log('审核状态:', this.auditStatus);
|
||
console.log('原始servers_kill数据:', detail.servers_kill);
|
||
|
||
// 处理服务技能数据
|
||
if (detail.servers_kill) {
|
||
let skillIds = [];
|
||
|
||
if (Array.isArray(detail.servers_kill)) {
|
||
skillIds = detail.servers_kill.map(id => {
|
||
const num = parseInt(id);
|
||
return isNaN(num) ? null : num;
|
||
}).filter(id => id !== null);
|
||
} else if (typeof detail.servers_kill === 'string') {
|
||
skillIds = detail.servers_kill.split(',').map(id => {
|
||
const num = parseInt(id.trim());
|
||
return isNaN(num) ? null : num;
|
||
}).filter(id => id !== null);
|
||
}
|
||
|
||
console.log('解析后的技能ID:', skillIds);
|
||
|
||
this.pendingMajor = detail.major || this.originalMajor;
|
||
|
||
// 根据审核状态正确处理数据
|
||
if (this.auditStatus === 1) { // 审核中
|
||
this.selectedSkills = [...skillIds];
|
||
this.displayMajor = this.pendingMajor;
|
||
console.log('审核中，待审核技能:', this.selectedSkills);
|
||
// 记录申请时间
|
||
uni.setStorageSync('lastApplyTime', new Date().getTime());
|
||
} else if (this.auditStatus === 3) { // 审核驳回
|
||
// 检查驳回数据是否是最新的
|
||
await this.handleRejectedData(skillIds, detail.major);
|
||
}
|
||
|
||
this.updateCheckedStatus();
|
||
}
|
||
|
||
// 无论审核状态如何，都加载当前生效的技能
|
||
await this.loadCurrentEffectiveSkills();
|
||
|
||
} else {
|
||
console.log('申请详情返回数据为空或code不为200:', res);
|
||
// 清理可能的驳回存储
|
||
uni.removeStorageSync('rejectedSkills');
|
||
uni.removeStorageSync('rejectedMajor');
|
||
uni.removeStorageSync('lastRejectTime');
|
||
await this.loadCurrentEffectiveSkills();
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('加载申请详情失败:', error);
|
||
// 出错时也尝试加载当前生效的技能
|
||
await this.loadCurrentEffectiveSkills();
|
||
}
|
||
},
|
||
|
||
// 处理驳回技能逻辑
|
||
async handleRejectedData(rejectedSkillIds, rejectedMajor) {
|
||
const storedRejectedSkills = uni.getStorageSync('rejectedSkills');
|
||
const storedRejectedMajor = uni.getStorageSync('rejectedMajor');
|
||
const lastRejectTime = uni.getStorageSync('lastRejectTime');
|
||
|
||
// 获取当前生效技能进行比较
|
||
const currentSkills = await this.getCurrentEffectiveSkillIds();
|
||
const currentMajor = this.sjInformation?.data?.major || null;
|
||
|
||
const rejectedSorted = [...rejectedSkillIds].sort().join(',');
|
||
const storedSorted = storedRejectedSkills ? [...storedRejectedSkills].sort().join(',') : '';
|
||
const currentSorted = [...currentSkills].sort().join(',');
|
||
|
||
// 如果驳回的技能与当前生效技能相同，说明驳回数据过时
|
||
if (rejectedSorted === currentSorted && String(rejectedMajor || '') === String(currentMajor || '')) {
|
||
console.log('驳回数据与当前生效技能相同，可能数据过时，忽略本次驳回数据');
|
||
this.selectedSkills = [...currentSkills];
|
||
this.displayMajor = currentMajor;
|
||
// 清理驳回存储
|
||
uni.removeStorageSync('rejectedSkills');
|
||
uni.removeStorageSync('rejectedMajor');
|
||
uni.removeStorageSync('lastRejectTime');
|
||
this.backText = ''; // 清空驳回原因
|
||
return;
|
||
}
|
||
|
||
// 如果驳回技能与存储的驳回技能不同，更新存储
|
||
if (rejectedSorted !== storedSorted || String(rejectedMajor) !== String(storedRejectedMajor)) {
|
||
console.log('发现新的驳回数据，更新存储:', rejectedSkillIds);
|
||
uni.setStorageSync('rejectedSkills', rejectedSkillIds);
|
||
uni.setStorageSync('rejectedMajor', rejectedMajor);
|
||
uni.setStorageSync('lastRejectTime', new Date().getTime());
|
||
}
|
||
|
||
this.selectedSkills = [...rejectedSkillIds];
|
||
this.displayMajor = rejectedMajor || currentMajor;
|
||
console.log('审核驳回，被驳回技能:', this.selectedSkills);
|
||
},
|
||
|
||
// 获取当前生效技能ID
|
||
async getCurrentEffectiveSkillIds() {
|
||
try {
|
||
const params = {
|
||
type: 3
|
||
};
|
||
const res = this.sjInformation;
|
||
|
||
if (res.state === 1 && res.data && res.data.servers_kill) {
|
||
let skillIds = [];
|
||
if (Array.isArray(res.data.servers_kill)) {
|
||
skillIds = res.data.servers_kill.map(id => parseInt(id)).filter(id => !isNaN(id));
|
||
} else if (typeof res.data.servers_kill === 'string') {
|
||
skillIds = res.data.servers_kill.split(',').map(id => parseInt(id.trim())).filter(id => !
|
||
isNaN(id));
|
||
}
|
||
return skillIds;
|
||
}
|
||
return [];
|
||
} catch (error) {
|
||
console.error('获取当前生效技能失败:', error);
|
||
return [];
|
||
}
|
||
},
|
||
|
||
|
||
// 加载当前生效的服务技能
|
||
async loadCurrentEffectiveSkills() {
|
||
try {
|
||
console.log('开始加载当前生效的服务技能...');
|
||
const currentSkills = await this.getCurrentEffectiveSkillIds();
|
||
|
||
this.currentSkills = [...currentSkills];
|
||
this.originalSkills = [...currentSkills];
|
||
|
||
this.originalMajor = this.sjInformation?.data?.major || null;
|
||
|
||
console.log('当前生效的技能ID:', this.currentSkills);
|
||
|
||
// 只有在无申请状态或审核通过状态时，才用当前技能更新选中技能
|
||
if (this.auditStatus === null || this.auditStatus === 2) {
|
||
this.selectedSkills = [...currentSkills];
|
||
this.displayMajor = this.originalMajor;
|
||
}
|
||
// 审核中状态保持原有的selectedSkills不变
|
||
// 审核驳回状态已经在handleRejectedSkills中处理
|
||
|
||
this.updateCheckedStatus();
|
||
this.updatePageStatus();
|
||
|
||
} catch (error) {
|
||
console.error('加载当前生效技能失败:', error);
|
||
this.currentSkills = [];
|
||
this.originalSkills = [];
|
||
if (this.auditStatus !== 1) {
|
||
this.selectedSkills = [];
|
||
}
|
||
this.updateCheckedStatus();
|
||
this.updatePageStatus();
|
||
}
|
||
},
|
||
|
||
|
||
|
||
// 检查技能是否在当前生效的技能中
|
||
isCurrentSkillSelected(skillId) {
|
||
return this.currentSkills.includes(skillId);
|
||
},
|
||
|
||
// 更新选中状态（用于待审核的技能）
|
||
updateCheckedStatus() {
|
||
console.log('更新选中状态，当前服务技能列表:', this.serviceList);
|
||
console.log('要选中的技能ID:', this.selectedSkills);
|
||
this.serviceList.forEach(item => {
|
||
item.checked = this.selectedSkills.includes(item.id);
|
||
});
|
||
},
|
||
|
||
// 根据审核状态更新页面状态
|
||
updatePageStatus() {
|
||
console.log('更新页面状态，审核状态:', this.auditStatus);
|
||
|
||
// 检查是否有变更
|
||
const currentSorted = [...this.currentSkills].sort().join(',');
|
||
const selectedSorted = [...this.selectedSkills].sort().join(',');
|
||
const hasChanges = currentSorted !== selectedSorted;
|
||
|
||
console.log('技能变更检查 - 当前生效:', this.currentSkills, '选中:', this.selectedSkills, '是否变更:', hasChanges);
|
||
|
||
if (this.auditStatus === 1) { // 审核中
|
||
this.showAuditTip = true;
|
||
this.buttonType = 'view';
|
||
this.editable = false;
|
||
this.showPendingSkills = false;
|
||
} else if (this.auditStatus === 3) { // 审核驳回
|
||
// 检查驳回数据是否无效
|
||
const rejectedSkills = uni.getStorageSync('rejectedSkills');
|
||
const rejectedMajor = uni.getStorageSync('rejectedMajor');
|
||
const rejectedSorted = rejectedSkills ? [...rejectedSkills].sort().join(',') : '';
|
||
const currentSorted = [...this.currentSkills].sort().join(',');
|
||
|
||
// 如果驳回技能与当前技能相同，说明驳回数据无效
|
||
if (rejectedSorted === currentSorted && String(rejectedMajor || '') === String(this.originalMajor || '')) {
|
||
console.log('驳回数据无效，按无申请状态处理');
|
||
this.showAuditTip = false;
|
||
this.buttonType = 'change';
|
||
this.editable = false;
|
||
this.showPendingSkills = false;
|
||
this.backText = ''; // 清空驳回原因
|
||
} else {
|
||
this.showAuditTip = false;
|
||
this.buttonType = 'change';
|
||
this.editable = false;
|
||
this.showPendingSkills = false;
|
||
}
|
||
} else { // 无申请或审核通过
|
||
this.showAuditTip = false;
|
||
this.buttonType = 'change';
|
||
this.editable = false;
|
||
this.showPendingSkills = false;
|
||
}
|
||
|
||
this.updateNavTitle();
|
||
|
||
console.log('最终页面状态:', {
|
||
showAuditTip: this.showAuditTip,
|
||
buttonType: this.buttonType,
|
||
editable: this.editable,
|
||
showPendingSkills: this.showPendingSkills,
|
||
currentSkills: this.currentSkills,
|
||
selectedSkills: this.selectedSkills,
|
||
backText: this.backText
|
||
});
|
||
},
|
||
|
||
// 切换技能选择状态（仅用于编辑模式）
|
||
toggleSkillSelect(index) {
|
||
if (!this.editable) return;
|
||
|
||
this.$set(this.serviceList[index], 'checked', !this.serviceList[index].checked);
|
||
|
||
// 更新选中的技能ID数组
|
||
this.selectedSkills = this.serviceList
|
||
.filter(item => item.checked)
|
||
.map(item => item.id);
|
||
|
||
console.log('当前选中的技能ID:', this.selectedSkills);
|
||
},
|
||
|
||
// 切换显示待审核的技能
|
||
togglePendingSkills() {
|
||
this.showPendingSkills = !this.showPendingSkills;
|
||
if (this.showPendingSkills) {
|
||
this.displayMajor = this.pendingMajor;
|
||
} else {
|
||
this.displayMajor = this.originalMajor;
|
||
}
|
||
// 更新导航栏标题
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 开始变更
|
||
startChange() {
|
||
this.editable = true;
|
||
this.buttonType = 'edit';
|
||
// 进入编辑模式时，显示待审核的技能
|
||
this.showPendingSkills = true;
|
||
this.displayMajor = this.pendingMajor || this.originalMajor;
|
||
// 更新导航栏标题
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 取消变更
|
||
cancelChange() {
|
||
// 恢复原始选择
|
||
this.selectedSkills = [...this.originalSkills];
|
||
this.displayMajor = this.originalMajor;
|
||
this.updateCheckedStatus();
|
||
|
||
this.editable = false;
|
||
this.buttonType = 'change';
|
||
this.showPendingSkills = false; // 取消后显示当前生效的技能
|
||
// 更新导航栏标题
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 提交变更 - 修改为传递数组格式
|
||
async submitChange() {
|
||
if (this.selectedSkills.length === 0) {
|
||
uni.showToast({
|
||
title: '请至少选择一个服务技能',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.displayMajor) {
|
||
uni.showToast({ title: '请选择专业经验', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
if (!this.hasChanges) {
|
||
uni.showToast({
|
||
title: '未检测到变更',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
});
|
||
const params = {
|
||
apply_type: 2, // 服务技能变更
|
||
servers_kill: this.selectedSkills, // 直接传递数组
|
||
major: this.displayMajor
|
||
};
|
||
|
||
console.log('提交的数据:', params);
|
||
|
||
const res = await request.post('/sj/userSjAuth/apply', params);
|
||
|
||
uni.hideLoading();
|
||
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'none'
|
||
// icon: 'success'
|
||
});
|
||
|
||
// 清理驳回相关存储
|
||
uni.removeStorageSync('rejectedSkills');
|
||
uni.removeStorageSync('rejectedMajor');
|
||
uni.removeStorageSync('lastRejectTime');
|
||
|
||
// 记录申请时间
|
||
uni.setStorageSync('lastApplyTime', new Date().getTime());
|
||
this.pendingMajor = this.displayMajor;
|
||
|
||
// 更新页面状态为审核中
|
||
this.showAuditTip = true;
|
||
this.editable = false;
|
||
this.buttonType = 'view';
|
||
this.auditStatus = 1; // 审核中
|
||
this.showPendingSkills = false; // 提交后默认显示当前生效的技能
|
||
// 更新导航栏标题
|
||
this.updateNavTitle();
|
||
|
||
// 重新加载申请详情获取最新状态
|
||
setTimeout(() => {
|
||
this.loadApplyDetails();
|
||
}, 1000);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('提交变更失败:', error);
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.service-skills-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 页面内容区域 */
|
||
.page-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 审核中提示 */
|
||
.audit-tip {
|
||
margin: 20rpx 24rpx 20rpx 24rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.audit-text {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
|
||
/* 驳回原因样式 */
|
||
.reject-reason {
|
||
background: transparent;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.reject-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.reject-detail {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-top: 12rpx;
|
||
|
||
}
|
||
|
||
.skills-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background-color: #FF4767;
|
||
margin-right: 10rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.skills-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #1D2129;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.skills-subtitle {
|
||
margin-left: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.box-cont {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 0 24rpx 24rpx 24rpx;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.skills-container {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.skills-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 -16rpx;
|
||
}
|
||
|
||
.skill-item {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.checkbox-wrapper {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #DDDDDD;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.checkbox.checked {
|
||
background-color: #FF4767;
|
||
border-color: #FF4767;
|
||
}
|
||
|
||
.check-icon {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.skill-name {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 迁移的专业经验表单样式 */
|
||
.form-item-two {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 24rpx;
|
||
}
|
||
|
||
.form-item-two>text.label {
|
||
flex-shrink: 0;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.required::before {
|
||
content: '*';
|
||
color: #FF0000;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.picker-content {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.picker-value,
|
||
.placeholder {
|
||
font-size: 28rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.picker-value {
|
||
color: #333333;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999999;
|
||
}
|
||
|
||
.arrow-right {
|
||
width: 9rpx;
|
||
height: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0rpx 24rpx 40rpx 24rpx;
|
||
background: #ffffff;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* 单个按钮样式 */
|
||
.action-btn {
|
||
height: 88rpx;
|
||
border-radius: 43rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.change-info-btn {
|
||
background: linear-gradient(180deg, #ff8e9d 0%, #FF4767 100%);
|
||
}
|
||
|
||
.view-change-btn {
|
||
background: linear-gradient(180deg, #ff8e9d 0%, #FF4767 100%);
|
||
}
|
||
|
||
/* 双按钮行样式 */
|
||
.action-buttons-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.action-buttons-row .action-btn {
|
||
width: 270rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #E5E5E5;
|
||
border-radius: 43rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(180deg, #ff8e9d 0%, #FF4767 100%);
|
||
border-radius: 43rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.btn-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.cancel-text {
|
||
color: #666666;
|
||
}
|
||
|
||
/* 响应式适配 */
|
||
/* @media (max-width: 375px) {
|
||
.skill-item {
|
||
width: 100%;
|
||
}
|
||
|
||
.action-buttons-row .action-btn {
|
||
width: 260rpx;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 750px) {
|
||
.skill-item {
|
||
width: 33.333%;
|
||
}
|
||
} */
|
||
</style> |