391 lines
9.0 KiB
Vue
391 lines
9.0 KiB
Vue
<template>
|
|
<view class="certificate-page">
|
|
<!-- 证书列表 -->
|
|
<view class="certificate-list" v-if="certificates.length > 0">
|
|
<view
|
|
v-for="(cert, index) in certificates"
|
|
:key="index"
|
|
class="certificate-card"
|
|
@click="viewCertificate(cert)"
|
|
>
|
|
<view class="cert-header">
|
|
<view class="cert-icon">🏆</view>
|
|
<view class="cert-status" :class="{ 'expired': cert.status === 0 }">
|
|
{{ cert.status === 1 ? '有效' : '已过期' }}
|
|
</view>
|
|
</view>
|
|
<view class="cert-name">{{ cert.certificateName }}</view>
|
|
<view class="cert-no">证书编号：{{ cert.certificateNo }}</view>
|
|
<view class="cert-info">
|
|
<view class="info-item">
|
|
<text class="label">类型：</text>
|
|
<text class="value">{{ getCertType(cert.certificateType) }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">分数：</text>
|
|
<text class="value">{{ cert.score }}分</text>
|
|
</view>
|
|
</view>
|
|
<view class="cert-time">
|
|
<view class="time-item">
|
|
<text class="label">颁发时间：</text>
|
|
<text class="value">{{ formatDate(cert.issueTime) }}</text>
|
|
</view>
|
|
<view class="time-item">
|
|
<text class="label">有效期至：</text>
|
|
<text class="value">{{ formatDate(cert.validUntil) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cert-actions">
|
|
<button class="btn-view" @click.stop="viewCertificate(cert)">查看证书</button>
|
|
<button class="btn-download" @click.stop="downloadCertificate(cert)">下载证书</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-else>
|
|
<text class="empty-icon">🎓</text>
|
|
<view class="empty-text">暂无证书</view>
|
|
<view class="empty-tip">完成培训课程并通过考试后可获得证书</view>
|
|
<button class="btn-go-training" @click="goToTraining">去学习</button>
|
|
</view>
|
|
|
|
<!-- 证书详情弹窗 -->
|
|
<uni-popup ref="certPopup" type="center">
|
|
<view class="cert-detail">
|
|
<view class="cert-detail-bg">
|
|
<view class="cert-detail-header">
|
|
<view class="cert-detail-title">培训合格证书</view>
|
|
<view class="cert-detail-subtitle">TRAINING CERTIFICATE</view>
|
|
</view>
|
|
<view class="cert-detail-content">
|
|
<view class="cert-detail-name">{{ selectedCert.certificateName }}</view>
|
|
<view class="cert-detail-info">
|
|
<view class="detail-row">
|
|
<text class="detail-label">证书编号：</text>
|
|
<text class="detail-value">{{ selectedCert.certificateNo }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">考试分数：</text>
|
|
<text class="detail-value">{{ selectedCert.score }}分</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">颁发时间：</text>
|
|
<text class="detail-value">{{ formatDate(selectedCert.issueTime) }}</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="detail-label">有效期至：</text>
|
|
<text class="detail-value">{{ formatDate(selectedCert.validUntil) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cert-detail-seal">
|
|
<text class="seal-text">✓</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="btn-close" @click="closeCertDetail">关闭</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
certificates: [],
|
|
selectedCert: {}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadCertificates();
|
|
},
|
|
methods: {
|
|
// 加载证书列表
|
|
async loadCertificates() {
|
|
try {
|
|
const res = await this.$http.get('/api/training/certificates');
|
|
this.certificates = res.data;
|
|
} catch (error) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' });
|
|
}
|
|
},
|
|
|
|
// 获取证书类型
|
|
getCertType(type) {
|
|
const types = {
|
|
companion: '陪伴员',
|
|
manager: '管理师',
|
|
distributor: '分销员'
|
|
};
|
|
return types[type] || '';
|
|
},
|
|
|
|
// 格式化日期
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const date = new Date(dateStr);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
|
},
|
|
|
|
// 查看证书
|
|
viewCertificate(cert) {
|
|
this.selectedCert = cert;
|
|
this.$refs.certPopup.open();
|
|
},
|
|
|
|
// 关闭证书详情
|
|
closeCertDetail() {
|
|
this.$refs.certPopup.close();
|
|
},
|
|
|
|
// 下载证书
|
|
downloadCertificate(cert) {
|
|
uni.showLoading({ title: '生成中...' });
|
|
|
|
// 模拟下载
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({ title: '证书已保存到相册', icon: 'success' });
|
|
}, 1500);
|
|
},
|
|
|
|
// 前往培训
|
|
goToTraining() {
|
|
uni.navigateTo({
|
|
url: '/pages/training/course-list'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.certificate-page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.certificate-list {
|
|
.certificate-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.cert-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.cert-icon {
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.cert-status {
|
|
padding: 8rpx 20rpx;
|
|
background: #52c41a;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
|
|
&.expired {
|
|
background: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cert-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.cert-no {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.cert-info {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.info-item {
|
|
font-size: 26rpx;
|
|
|
|
.label {
|
|
color: #999;
|
|
}
|
|
|
|
.value {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cert-time {
|
|
margin-bottom: 20rpx;
|
|
|
|
.time-item {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
|
|
.label {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cert-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
button {
|
|
flex: 1;
|
|
height: 70rpx;
|
|
border-radius: 35rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
}
|
|
|
|
.btn-view {
|
|
background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-download {
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 40rpx;
|
|
|
|
.empty-image {
|
|
width: 400rpx;
|
|
height: 300rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.empty-tip {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.btn-go-training {
|
|
width: 400rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.cert-detail {
|
|
width: 650rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.cert-detail-bg {
|
|
background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
|
|
padding: 40rpx;
|
|
color: #fff;
|
|
|
|
.cert-detail-header {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.cert-detail-title {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.cert-detail-subtitle {
|
|
font-size: 24rpx;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.cert-detail-content {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
color: #333;
|
|
|
|
.cert-detail-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
color: #7dd3c0;
|
|
}
|
|
|
|
.cert-detail-info {
|
|
.detail-row {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
font-size: 26rpx;
|
|
|
|
.detail-label {
|
|
color: #999;
|
|
width: 180rpx;
|
|
}
|
|
|
|
.detail-value {
|
|
flex: 1;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cert-detail-seal {
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
|
|
.seal-image {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-close {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
border-radius: 0;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|