503 lines
12 KiB
Vue
503 lines
12 KiB
Vue
<template>
|
||
<view class="status-page">
|
||
<!-- 状态卡片 -->
|
||
<view class="status-card" :class="statusClass">
|
||
<view class="status-icon">{{ statusIcon }}</view>
|
||
<text class="status-title">{{ statusTitle }}</text>
|
||
<text class="status-desc">{{ statusDesc }}</text>
|
||
|
||
<!-- 进度条 -->
|
||
<view v-if="application.status === 'pending'" class="progress-bar">
|
||
<view class="progress-step" :class="{ active: currentStep >= 1 }">
|
||
<view class="step-dot"></view>
|
||
<text class="step-text">提交申请</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: currentStep >= 2 }"></view>
|
||
<view class="progress-step" :class="{ active: currentStep >= 2 }">
|
||
<view class="step-dot"></view>
|
||
<text class="step-text">审核中</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: currentStep >= 3 }"></view>
|
||
<view class="progress-step" :class="{ active: currentStep >= 3 }">
|
||
<view class="step-dot"></view>
|
||
<text class="step-text">审核完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申请信息 -->
|
||
<view class="info-card">
|
||
<view class="card-title">申请信息</view>
|
||
<view class="info-item">
|
||
<text class="info-label">申请角色：</text>
|
||
<text class="info-value">{{ roleName }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">申请时间：</text>
|
||
<text class="info-value">{{ formatTime(application.applyTime) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">联系电话：</text>
|
||
<text class="info-value">{{ application.phone }}</text>
|
||
</view>
|
||
<view v-if="application.status === 'approved' && application.approveTime" class="info-item">
|
||
<text class="info-label">审核时间：</text>
|
||
<text class="info-value">{{ formatTime(application.approveTime) }}</text>
|
||
</view>
|
||
<view v-if="application.status === 'rejected' && application.rejectReason" class="info-item">
|
||
<text class="info-label">拒绝原因：</text>
|
||
<text class="info-value reject-reason">{{ application.rejectReason }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下一步操作 -->
|
||
<view v-if="application.status === 'approved'" class="action-card">
|
||
<view class="card-title">下一步操作</view>
|
||
|
||
<!-- 陪伴员：培训和考核 -->
|
||
<view v-if="role === 'teacher'" class="action-list">
|
||
<view class="action-item" @tap="goToTraining">
|
||
<view class="action-icon">📚</view>
|
||
<view class="action-info">
|
||
<text class="action-title">线上培训</text>
|
||
<text class="action-desc">学习公司规章制度和服务流程</text>
|
||
</view>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
<view class="action-item" @tap="goToExam">
|
||
<view class="action-icon">📝</view>
|
||
<view class="action-info">
|
||
<text class="action-title">在线考核</text>
|
||
<text class="action-desc">完成培训后参加考核测试</text>
|
||
</view>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他角色：直接开始使用 -->
|
||
<view v-else class="action-list">
|
||
<view class="action-item" @tap="goToHome">
|
||
<view class="action-icon">🎉</view>
|
||
<view class="action-info">
|
||
<text class="action-title">开始使用</text>
|
||
<text class="action-desc">审核已通过，现在可以开始使用了</text>
|
||
</view>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 重新申请 -->
|
||
<view v-if="application.status === 'rejected'" class="action-card">
|
||
<button class="reapply-btn" @tap="reapply">重新申请</button>
|
||
</view>
|
||
|
||
<!-- 联系客服 -->
|
||
<view class="contact-card">
|
||
<text class="contact-text">如有疑问，请联系客服</text>
|
||
<button class="contact-btn" @tap="contactService">
|
||
<text class="contact-icon">💬</text>
|
||
<text>联系客服</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
role: '',
|
||
application: {},
|
||
currentStep: 2, // 当前进度步骤
|
||
roleNames: {
|
||
teacher: '陪伴员',
|
||
manager: '管理师',
|
||
distributor: '分销员',
|
||
serviceProvider: '专业服务商'
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
roleName() {
|
||
return this.roleNames[this.role] || '未知角色'
|
||
},
|
||
|
||
statusClass() {
|
||
return {
|
||
'status-pending': this.application.status === 'pending',
|
||
'status-approved': this.application.status === 'approved',
|
||
'status-rejected': this.application.status === 'rejected'
|
||
}
|
||
},
|
||
|
||
statusIcon() {
|
||
const icons = {
|
||
pending: '⏳',
|
||
approved: '✅',
|
||
rejected: '❌'
|
||
}
|
||
return icons[this.application.status] || '📋'
|
||
},
|
||
|
||
statusTitle() {
|
||
const titles = {
|
||
pending: '审核中',
|
||
approved: '审核通过',
|
||
rejected: '审核未通过'
|
||
}
|
||
return titles[this.application.status] || '未知状态'
|
||
},
|
||
|
||
statusDesc() {
|
||
const descs = {
|
||
pending: '您的申请正在审核中，预计1-3个工作日内完成',
|
||
approved: '恭喜您！您的申请已通过审核',
|
||
rejected: '很抱歉，您的申请未通过审核'
|
||
}
|
||
return descs[this.application.status] || ''
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.role = options.role || ''
|
||
this.loadApplication()
|
||
},
|
||
|
||
methods: {
|
||
// 加载申请信息
|
||
loadApplication() {
|
||
const storageKey = `${this.role}Application`
|
||
const application = uni.getStorageSync(storageKey)
|
||
|
||
if (application) {
|
||
this.application = application
|
||
} else {
|
||
uni.showToast({
|
||
title: '未找到申请信息',
|
||
icon: 'none',
|
||
success: () => {
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
// 格式化时间
|
||
formatTime(time) {
|
||
if (!time) return '-'
|
||
const date = new Date(time)
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||
},
|
||
|
||
// 前往培训
|
||
goToTraining() {
|
||
uni.navigateTo({
|
||
url: '/pages/teacher/training'
|
||
})
|
||
},
|
||
|
||
// 前往考核
|
||
goToExam() {
|
||
uni.navigateTo({
|
||
url: '/pages/teacher/exam-test'
|
||
})
|
||
},
|
||
|
||
// 前往首页
|
||
goToHome() {
|
||
// 保存用户信息
|
||
const userInfo = {
|
||
id: this.application.id,
|
||
phone: this.application.phone,
|
||
role: this.role,
|
||
name: this.application.name || this.application.teacherName || '用户',
|
||
nickname: this.application.name || this.application.teacherName || '用户'
|
||
}
|
||
|
||
uni.setStorageSync('token', 'mock_token_' + Date.now())
|
||
uni.setStorageSync('userInfo', userInfo)
|
||
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
|
||
// 重新申请
|
||
reapply() {
|
||
uni.showModal({
|
||
title: '重新申请',
|
||
content: '确定要重新提交申请吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 清除旧的申请信息
|
||
const storageKey = `${this.role}Application`
|
||
uni.removeStorageSync(storageKey)
|
||
|
||
// 返回申请页面
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 联系客服
|
||
contactService() {
|
||
uni.showModal({
|
||
title: '联系客服',
|
||
content: '客服电话：400-XXX-XXXX',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '拨打电话',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '400-XXX-XXXX'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.status-page {
|
||
min-height: 100vh;
|
||
background: #f0f9f7;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.status-card {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 50rpx 30rpx;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.status-card.status-pending {
|
||
border-top: 6rpx solid #ff9800;
|
||
}
|
||
|
||
.status-card.status-approved {
|
||
border-top: 6rpx solid #4caf50;
|
||
}
|
||
|
||
.status-card.status-rejected {
|
||
border-top: 6rpx solid #f44336;
|
||
}
|
||
|
||
.status-icon {
|
||
font-size: 100rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.status-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.status-desc {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.progress-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.progress-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.step-dot {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #e0e0e0;
|
||
border-radius: 50%;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.progress-step.active .step-dot {
|
||
background: #2d9687;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.progress-step.active .step-text {
|
||
color: #2d9687;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.progress-line {
|
||
flex: 1;
|
||
height: 4rpx;
|
||
background: #e0e0e0;
|
||
margin: 0 10rpx;
|
||
margin-bottom: 30rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.progress-line.active {
|
||
background: #2d9687;
|
||
}
|
||
|
||
.info-card,
|
||
.action-card,
|
||
.contact-card {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 25rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 6rpx solid #2d9687;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
width: 180rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.info-value {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.reject-reason {
|
||
color: #f44336;
|
||
}
|
||
|
||
.action-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.action-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 25rpx;
|
||
background: #f0f9f7;
|
||
border-radius: 16rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.action-item:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.action-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.action-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.action-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.action-desc {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.action-arrow {
|
||
font-size: 40rpx;
|
||
color: #2d9687;
|
||
}
|
||
|
||
.reapply-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #2d9687 0%, #1e7a6d 100%);
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border-radius: 44rpx;
|
||
border: none;
|
||
}
|
||
|
||
.contact-card {
|
||
text-align: center;
|
||
}
|
||
|
||
.contact-text {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.contact-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #ffffff;
|
||
color: #2d9687;
|
||
font-size: 30rpx;
|
||
border-radius: 44rpx;
|
||
border: 2rpx solid #2d9687;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
</style>
|