xgxt_sd/zhxg_app
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

外宿申请和入伍保留学籍申请移动端审批（同意的流程）完成

Browse Source
This commit is contained in:
陈
2025-12-19 17:58:09 +08:00
parent 8246da4f48
commit 8fb02b0d5d
8 changed files with 2198 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

567
pages/Approval/handleTask/processHandling/components/enlistmentReserve.vue Normal file
View File

@@ -0,0 +1,567 @@
<template>
<view class="con">
<!-- 基础信息区域 -->
<view class="form-section">
<text class="section-title">基础信息</text>
<!--学号 -->
<view class="form-item">
<text class="label">学号：</text>
<text class="uni-input">{{ form.studentNo || '-' }}</text>
</view>
<!--姓名 -->
<view class="form-item">
<text class="label">姓名：</text>
<text class="uni-input">{{ form.studentName || '-' }}</text>
</view>
<!-- 性别 -->
<view class="form-item">
<text class="label">性别：</text>
<text class="uni-input">{{ form.gender == 1 ? '男' : form.gender == 0 ? '女' : '-' }}</text>
</view>
<!--民族 -->
<view class="form-item">
<text class="label">民族：</text>
<text class="uni-input">{{ form.nation || '-' }}</text>
</view>
<!--年级 -->
<view class="form-item">
<text class="label">年级：</text>
<text class="uni-input">{{ form.grade || '-' }}</text>
</view>
<!--专业名称 -->
<view class="form-item">
<text class="label">专业名称：</text>
<text class="uni-input">{{ form.major || '-' }}</text>
</view>
<!--班级 -->
<view class="form-item">
<text class="label">班级：</text>
<text class="uni-input">{{ form.className || '-' }}</text>
</view>
<!--申请编号 -->
<view class="form-item">
<text class="label">申请编号：</text>
<text class="uni-input">{{ form.applyNo || '-' }}</text>
</view>
<!--保留学籍编号 -->
<view class="form-item">
<text class="label">保留学籍编号：</text>
<text class="uni-input">{{ form.reserveNo || '-' }}</text>
</view>
<!--辅导员 -->
<view class="form-item">
<text class="label">辅导员：</text>
<text class="uni-input">{{ form.teacherName || '-' }}</text>
</view>
<!--家庭地址 -->
<view class="form-item">
<text class="label">家庭地址：</text>
<text class="uni-input">{{ form.familyAddress || '-' }}</text>
</view>
<!--家长联系电话 -->
<view class="form-item">
<text class="label">家长联系电话：</text>
<text class="uni-input">{{ form.parentPhone || '-' }}</text>
</view>
<!--申请原因 -->
<view class="form-item form-item-auto">
<text class="label">申请原因：</text>
<text class="uni-input uni-input-text">{{ form.applyReason || '-' }}</text>
</view>
<!--申请状态 -->
<view class="form-item">
<text class="label">申请状态：</text>
<view class="uni-input status-tag" :class="getStatusClass(form.applyStatus)" style="text-align: center;">
{{ getStatusText(form.applyStatus) }}
</view>
</view>
<!--保留学籍开始时间 -->
<view class="form-item">
<text class="label" style="width: 250rpx;">保留学籍开始时间：</text>
<text class="uni-input">{{ formatDate(form.reserveStartDate) || '-' }}</text>
</view>
<!--保留学籍结束时间 -->
<view class="form-item">
<text class="label" style="width: 250rpx;">保留学籍结束时间：</text>
<text class="uni-input">{{ formatDate(form.reserveEndDate) || '-' }}</text>
</view>
<!--审批编号 -->
<view class="form-item">
<text class="label">审批编号：</text>
<text class="uni-input">{{ form.approvalNo || '-' }}</text>
</view>
</view>
<!-- 附件区域 -->
<view class="form-section" v-if="form.enlistmentReserveAttachList && form.enlistmentReserveAttachList.length">
<text class="section-title">材料附件</text>
<view class="form-item form-item-auto">
<text class="label">附件列表：</text>
<view class="uni-input file-list">
<view class="file-item" v-for="(file, index) in form.enlistmentReserveAttachList" :key="index" @click="previewFile(file, '附件')">
<uni-icons type="paper" size="24" color="#0092FF"></uni-icons>
<text class="file-name">{{ file.fileName || '-' }}</text>
<text class="file-size">{{ formatFileSize(file.fileSize) }}</text>
</view>
</view>
</view>
</view>
<!-- 审批记录区域 -->
<view class="form-section" v-if="form.enlistmentReserveApprovalList && form.enlistmentReserveApprovalList.length">
<text class="section-title">审批记录</text>
<view class="approval-list">
<view class="approval-item" v-for="(approval, index) in form.enlistmentReserveApprovalList" :key="index">
<!-- 审批节点信息 -->
<view class="approval-header">
<text class="approval-node">{{ approval.nodeName || '-' }}</text>
<view class="approval-result-tag" :class="getApprovalResultClass(approval.approvalResult)">
{{ getApprovalResultText(approval.approvalResult) }}
</view>
</view>
<!-- 审批详情 -->
<view class="approval-details">
<view class="form-item mini">
<text class="label">审批人：</text>
<text class="uni-input">{{ approval.approverName || '-' }}</text>
</view>
<view class="form-item mini">
<text class="label">审批时间：</text>
<text class="uni-input">{{ formatDate(approval.approvalTime) || '-' }}</text>
</view>
<view class="form-item mini">
<text class="label">审批意见：</text>
<text class="uni-input">{{ approval.approvalOpinion || '-' }}</text>
</view>
<!-- 审批签名 -->
<view class="form-item mini" v-if="approval.signature">
<text class="label">审批签名：</text>
<image class="signature-img" :src="baseUrl + approval.signature" mode="aspectFit" @click="previewFile(approval, '签名')"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 空数据提示 -->
<view class="empty-tip" v-if="isEmptyForm">
<uni-icons type="empty" size="60" color="#c0c4cc"></uni-icons>
<text class="empty-text">暂无相关数据</text>
</view>
</view>
</template>
<script>
import config from '@/config'
export default {
name: "enlistmentReserve",
props: {
// props类型定义（Object类型+默认空对象）
form: {
type: Object, // 正确的对象类型声明
default: () => ({}) // 函数返回空对象（避免所有实例共享同一个对象）
},
isShow: { // 修正拼写错误：isShwo → isShow
type: Boolean,
default: true
}
},
data() {
return {
// 图片基础路径
baseUrl: config.baseUrl
};
},
computed: {
// 判断是否为空表单
isEmptyForm() {
return !this.form.id && Object.keys(this.form).length === 0;
}
},
methods: {
/**
* 格式化日期
* @param {String} dateStr 日期字符串
* @returns {String} 格式化后的日期
*/
formatDate(dateStr) {
if (!dateStr) return '';
// 处理带时区的日期字符串
const date = new Date(dateStr);
if (isNaN(date.getTime())) return dateStr;
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
},
/**
* 格式化文件大小
* @param {Number} size 字节数
* @returns {String} 格式化后的大小
*/
formatFileSize(size) {
if (!size) return '0B';
if (size < 1024) return `${size}B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)}KB`;
return `${(size / (1024 * 1024)).toFixed(2)}MB`;
},
/**
* 获取申请状态文本
* @param {Number} status 状态码
* @returns {String} 状态文本
*/
getStatusText(status) {
const statusMap = {
1: '待审批',
2: '审批中',
3: '已通过',
4: '已驳回'
};
return statusMap[status] || '未知状态';
},
/**
* 获取申请状态样式类
* @param {Number} status 状态码
* @returns {String} 样式类名
*/
getStatusClass(status) {
const classMap = {
1: 'status-pending',
2: 'status-processing',
3: 'status-success',
4: 'status-reject'
};
return classMap[status] || 'status-default';
},
/**
* 获取审批结果文本
* @param {Number} result 审批结果码
* @returns {String} 审批结果文本
*/
getApprovalResultText(result) {
const resultMap = {
1: '同意',
2: '驳回',
0: '待审批'
};
return resultMap[result] || '未知结果';
},
/**
* 获取审批结果样式类
* @param {Number} result 审批结果码
* @returns {String} 样式类名
*/
getApprovalResultClass(result) {
const classMap = {
1: 'result-approve',
2: 'result-reject',
0: 'result-pending'
};
return classMap[result] || 'result-default';
},
/**
* 预览附件文件
* @param {Object} file 文件对象
*/
previewFile(file, text) {
if (text == '附件') {
if (!file.filePath) {
uni.showToast({
title: '文件路径不存在',
icon: 'none'
});
return;
}
// 拼接完整文件路径
const fullUrl = this.baseUrl + file.filePath;
// 预览图片（如果是图片文件）
if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(file.fileType)) {
uni.previewImage({
urls: [fullUrl],
current: fullUrl
});
} else {
// 非图片文件可做下载处理
uni.showToast({
title: '暂不支持预览该类型文件',
icon: 'none'
});
}
} else {
uni.previewImage({
urls: [this.baseUrl + file.signature],
current: this.baseUrl + file.signature
});
}
}
}
}
</script>
<style scoped lang="scss">
.con {
padding: 20rpx;
background-color: #f8f8f8;
min-height: 100vh;
}
// 区域标题
.form-section {
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
display: block;
padding-bottom: 10rpx;
border-bottom: 2px solid #f0f0f0;
/* 标题靠左 */
text-align: left;
}
// 表单项样式
.form-item {
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
margin-bottom: 20rpx;
/* 移除justify-content: space-between，改为靠左排列 */
// justify-content: space-between;
border-bottom: 1px solid #ededee;
&.form-item-auto {
height: auto;
min-height: 80rpx;
padding-bottom: 10rpx;
}
&.mini {
height: 60rpx;
margin-bottom: 10rpx;
}
}
.label {
/* 关键修改：移除右对齐，改为左对齐 */
// text-align: right;
text-align: left;
margin-right: 10rpx; /* 减小右边距，更紧凑 */
text-wrap: nowrap;
font-size: 28rpx;
color: #333;
width: 200rpx;
/* 标签固定宽度，内容靠左 */
display: inline-block;
}
.uni-input {
color: #666;
/* 关键修改：移除右对齐，改为左对齐 */
// text-align: right;
text-align: left;
font-size: 28rpx;
flex: 1;
&.uni-input-text {
/* 保持左对齐 */
text-align: left;
white-space: pre-wrap;
line-height: 1.5;
padding: 10rpx 0;
}
// ========== 修复：将&嵌套到.uni-input内部 ==========
&.status-tag {
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 24rpx;
/* 状态标签内文本靠左 */
text-align: left;
display: inline-block;
}
&.status-pending {
background-color: #fffbe6;
color: #ff9a2e;
}
&.status-processing {
background-color: #e8f4fd;
color: #0092ff;
}
&.status-success {
background-color: #f0f9eb;
color: #52c41a;
}
&.status-reject {
background-color: #fff2f0;
color: #ff4d4f;
}
&.status-default {
background-color: #f5f5f5;
color: #888;
}
}
// 附件列表样式
.file-list {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.file-item {
display: flex;
align-items: center;
padding: 10rpx 0;
width: 100%;
border-bottom: 1px dashed #eee;
/* 附件项整体靠左 */
justify-content: flex-start;
.file-name {
font-size: 26rpx;
color: #333;
margin: 0 10rpx;
flex: 1;
/* 文件名靠左 */
text-align: left;
}
.file-size {
font-size: 22rpx;
color: #999;
/* 文件大小靠左 */
text-align: left;
}
}
// 审批记录样式
.approval-list {
margin-top: 10rpx;
}
.approval-item {
background-color: #f9f9f9;
border-radius: 8rpx;
padding: 15rpx;
margin-bottom: 15rpx;
/* 审批项整体靠左 */
text-align: left;
}
.approval-header {
display: flex;
/* 审批头部改为靠左排列，结果标签在右侧 */
justify-content: flex-start;
align-items: center;
margin-bottom: 10rpx;
padding-bottom: 10rpx;
border-bottom: 1px dashed #eee;
.approval-node {
font-size: 28rpx;
font-weight: 500;
color: #333;
/* 审批节点名靠左 */
text-align: left;
flex: 1;
}
// ========== 修复：将&嵌套到.approval-header内部 ==========
.approval-result-tag {
padding: 6rpx 12rpx;
border-radius: 15rpx;
font-size: 24rpx;
/* 审批结果标签内文本靠左 */
text-align: left;
margin-left: 10rpx;
}
.approval-result-tag.result-approve {
background-color: #f0f9eb;
color: #52c41a;
}
.approval-result-tag.result-reject {
background-color: #fff2f0;
color: #ff4d4f;
}
.approval-result-tag.result-pending {
background-color: #fffbe6;
color: #ff9a2e;
}
.approval-result-tag.result-default {
background-color: #f5f5f5;
color: #888;
}
}
.approval-details {
padding-top: 10rpx;
/* 审批详情整体靠左 */
text-align: left;
}
// 签名图片样式
.signature-img {
width: 120rpx;
height: 60rpx;
border: 1px solid #eee;
border-radius: 4rpx;
/* 签名图片靠左 */
display: inline-block;
}
// 空数据提示
.empty-tip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #c0c4cc;
.empty-text {
margin-top: 20rpx;
font-size: 28rpx;
/* 空数据提示文本靠左 */
text-align: left;
width: 100%;
}
}
</style>

774
pages/Approval/handleTask/processHandling/components/outsideAccommodation.vue Normal file
View File

@@ -0,0 +1,774 @@
<template>
<view class="container">
<!-- 主内容区 -->
<scroll-view class="content-scroll" scroll-y enhanced :show-scrollbar="false">
<!-- 申请概览（顶部卡片） -->
<view class="card overview-card">
<view class="overview-header">
<view class="overview-left">
<text class="apply-no">申请编号：{{ form.applyNo || '-' }}</text>
<text class="student-name">{{ form.studentName || '-' }} {{ form.studentNo || '-' }}</text>
</view>
<view class="status-tag" :class="getStatusClass(form.status)">
{{ getStatusText(form.status) }}
</view>
</view>
<view class="overview-info">
<view class="overview-item">
<text class="info-label">申请时间</text>
<text class="info-value">{{ formatDate(form.createTime) || '-' }}</text>
</view>
<view class="overview-item">
<text class="info-label">外宿周期</text>
<text class="info-value">{{ formatDate(form.startDate) || '-' }} 至 {{ formatDate(form.endDate) || '-' }}</text>
</view>
<view class="overview-item">
<text class="info-label">状态有效性：</text>
<text class="info-value" :class="form.isValid == 1 ? 'text-success' : 'text-danger'">
{{ form.isValid == 1 ? '有效' : '到期' }}
</text>
</view>
</view>
</view>
<!-- 学生基础信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="contact" size="24" color="#409EFF"></uni-icons>
<text class="card-title">学生基础信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">姓名：</text>
<text class="value">{{ form.studentName || '-' }}</text>
</view>
<view class="form-item">
<text class="label">学号：</text>
<text class="value">{{ form.studentNo || '-' }}</text>
</view>
<view class="form-item">
<text class="label">性别：</text>
<text class="value">{{ form.gender == '1' ? '男' : form.gender == '0' ? '女' : '-' }}</text>
</view>
<view class="form-item">
<text class="label">班级：</text>
<text class="value">{{ form.className || '-' }}</text>
</view>
<view class="form-item">
<text class="label">辅导员：</text>
<text class="value">{{ form.teacherName || '-' }}</text>
</view>
<view class="form-item">
<text class="label">原宿舍：</text>
<text class="value">{{ form.originalDormitory || '-' }}</text>
</view>
<view class="form-item">
<text class="label">住宿费：</text>
<text class="value">
<view class="fee-tag" :class="form.accommodationFeeStatus == 1 ? 'fee-paid' : 'fee-unpaid'">
{{ form.accommodationFeeStatus == 1 ? '已交' : '未交' }}
</view>
（{{ form.accommodationFee || '-' }}）
</text>
</view>
<view class="form-item">
<text class="label">出生日期：</text>
<text class="value">{{ formatDate(form.birthDate) || '-' }}</text>
</view>
<view class="form-item">
<text class="label">身份证号：</text>
<text class="value">{{ form.idCard || '-' }}</text>
</view>
<view class="form-item">
<text class="label">联系电话：</text>
<text class="value">{{ form.studentPhone || '-' }}</text>
</view>
<view class="form-item">
<text class="label">学院/专业：</text>
<text class="value">{{ form.deptName || '-' }} / {{ form.majorName || '-' }}</text>
</view>
<!-- 学生电子签名 -->
<view class="form-item signature-item" v-if="form.studentSignature">
<text class="label">学生签名：</text>
<image class="signature-img" :src="getFullUrl(form.studentSignature)" mode="aspectFit" @click="previewImage(form.studentSignature)"></image>
</view>
</view>
</view>
<!-- 外宿信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="location" size="24" color="#409EFF"></uni-icons>
<text class="card-title">外宿信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">外宿原因：</text>
<text class="value">{{ form.applyReason || '-' }}</text>
</view>
<view class="form-item">
<text class="label">外宿地址：</text>
<text class="value">{{ form.address || '-' }} {{ form.outsideAddress || '-' }}</text>
</view>
<view class="form-item">
<text class="label">紧急联系人：</text>
<text class="value">{{ form.emergencyContact || '-' }} ({{ form.emergencyPhone || '-' }})</text>
</view>
</view>
</view>
<!-- 家长信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="people" size="24" color="#409EFF"></uni-icons>
<text class="card-title">家长信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">家长意见：</text>
<text class="value">
<view class="opinion-tag" :class="form.parentOpinion == 1 ? 'opinion-agree' : 'opinion-disagree'">
{{ form.parentOpinion == 1 ? '同意' : '不同意' }}
</view>
</text>
</view>
<view class="form-item">
<text class="label">家长电话：</text>
<text class="value">{{ form.parentPhone || '-' }}</text>
</view>
<view class="form-item">
<text class="label">家长地址：</text>
<text class="value">{{ form.parentAddress || '-' }} {{ form.parentDetailAddress || '-' }}</text>
</view>
<!-- 家长签字附件 -->
<view class="form-item signature-item" v-if="form.parentSignAttachment">
<text class="label">家长签字：</text>
<image class="signature-img" :src="getFullUrl(form.parentSignAttachment)" mode="aspectFit" @click="previewImage(form.parentSignAttachment)"></image>
</view>
</view>
</view>
<!-- 承诺书信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="checkbox-selected" size="24" color="#409EFF"></uni-icons>
<text class="card-title">外宿承诺书</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">签署日期：</text>
<text class="value">{{ formatDate(form.promiseDate) || '-' }}</text>
</view>
<view class="form-item promise-item">
<text class="label">承诺内容：</text>
<view class="value promise-content" v-html="form.promiseContent || '-'"></view>
</view>
<!-- 承诺签名 -->
<view class="form-item signature-item" v-if="form.studentPromiseSign">
<text class="label">承诺签名：</text>
<image class="signature-img" :src="getFullUrl(form.studentPromiseSign)" mode="aspectFit" @click="previewImage(form.studentPromiseSign)"></image>
</view>
</view>
</view>
<!-- 附件列表 -->
<view class="card" v-if="form.outsideAccommodationAttachments && form.outsideAccommodationAttachments.length">
<view class="card-header">
<uni-icons type="paper" size="24" color="#409EFF"></uni-icons>
<text class="card-title">佐证材料</text>
</view>
<view class="attachment-list">
<view class="attachment-item" v-for="(item, index) in form.outsideAccommodationAttachments" :key="index" @click="previewImage(item.attachmentUrl)">
<view class="file-icon">
<uni-icons type="file" size="32" color="#409EFF"></uni-icons>
</view>
<view class="file-info">
<text class="file-name">{{ item.attachmentName || '未命名文件' }}</text>
<text class="file-size">{{ formatFileSize(item.fileSize) }}</text>
</view>
<uni-icons type="right" size="24" color="#ccc"></uni-icons>
</view>
</view>
</view>
<!-- 审批记录 -->
<view class="card" v-if="form.outsideAccommodationApprovals && form.outsideAccommodationApprovals.length">
<view class="card-header">
<uni-icons type="checkbox" size="24" color="#409EFF"></uni-icons>
<text class="card-title">审批记录</text>
</view>
<view class="approval-list">
<view class="approval-item" v-for="(item, index) in form.outsideAccommodationApprovals" :key="index">
<view class="approval-line">
<view class="approval-dot" :class="item.approvalResult == 1 ? 'dot-success' : item.approvalResult == 0 ? 'dot-pending' : 'dot-danger'"></view>
<view class="approval-content">
<view class="approval-header">
<text class="approval-node">{{ item.approvalNode || '未知节点' }}</text>
<text class="approval-time">{{ formatDate(item.approvalTime) || '-' }}</text>
</view>
<view class="approval-body">
<view class="approval-info">
<text class="info-key">审批人：</text>
<text class="info-val">{{ item.approverName || '-' }}</text>
</view>
<view class="approval-info">
<text class="info-key">审批结果：</text>
<view class="approval-result-tag" :class="item.approvalResult == 1 ? 'result-approve' : item.approvalResult == 0 ? 'result-pending' : 'result-reject'">
{{ item.approvalResult == 1 ? '通过' : '驳回' }}
</view>
</view>
<view class="approval-info" v-if="item.approvalOpinion">
<text class="info-key">审批意见：</text>
<text class="info-val">{{ item.approvalOpinion }}</text>
</view>
<!-- 审批签名 -->
<view class="approval-info" v-if="item.signature">
<text class="info-key">审批签名：</text>
<!-- <image class="signature-img" :src="baseUrl + approval.signature" mode="aspectFit" @click="previewFile(approval, '签名')"></image> -->
<image style="width: 100px; height: 50px;border: 1px solid #eee" :src="getFullUrl(item.signature)" mode="aspectFit" @click="previewImage(item.signature)"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 空审批记录提示 -->
<view class="card empty-card" v-if="form.outsideAccommodationApprovals && form.outsideAccommodationApprovals.length === 0">
<view class="card-header">
<uni-icons type="checkbox" size="24" color="#409EFF"></uni-icons>
<text class="card-title">审批记录</text>
</view>
<view class="empty-tip">
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无审批记录</text>
</view>
</view>
<!-- 底部留白 -->
<view class="bottom-space"></view>
</scroll-view>
</view>
</template>
<script>
import config from '@/config'
export default {
name: "OutsideAccommodationDetail",
props: {
form: {
type: Object,
default: () => ({})
}
},
data() {
return {
// 文件服务器基础地址
baseFileUrl: config.baseUrl
};
},
methods: {
/**
* 格式化日期
* @param {String} dateStr 日期字符串
* @returns {String} 格式化后的日期
*/
formatDate(dateStr) {
if (!dateStr) return '';
try {
const date = new Date(dateStr);
if (isNaN(date.getTime())) return dateStr;
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
} catch (e) {
return dateStr;
}
},
/**
* 格式化文件大小
* @param {Number} size 字节数
* @returns {String} 格式化后的大小
*/
formatFileSize(size) {
if (!size) return '0B';
if (size < 1024) return `${size}B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)}KB`;
return `${(size / (1024 * 1024)).toFixed(2)}MB`;
},
/**
* 获取申请状态文本
* @param {Number} status 状态码
* @returns {String} 状态文本
*/
getStatusText(status) {
const statusMap = {
0: '待提交',
1: '待辅导员审批',
2: '待学院书记审批',
3: '待学工处审批',
4: '待学校领导审批',
5: '审核通过',
6: '已驳回'
};
return statusMap[status] || '未知状态';
},
/**
* 获取申请状态样式类
* @param {Number} status 状态码
* @returns {String} 样式类名
*/
getStatusClass(status) {
const classMap = {
0: 'status-pending',
1: 'status-processing',
2: 'status-processing',
3: 'status-processing',
4: 'status-processing',
5: 'status-success',
6: 'status-reject'
};
return classMap[status] || 'status-default';
},
/**
* 获取完整的文件URL
* @param {String} path 相对路径
* @returns {String} 完整URL
*/
getFullUrl(path) {
if (!path) return '';
// 如果是完整URL直接返回，否则拼接基础地址
if (path.startsWith('http')) return path;
return this.baseFileUrl + path;
},
/**
* 预览图片
* @param {String} url 图片地址
*/
previewImage(url) {
if (!url) {
uni.showToast({
title: '图片地址不存在',
icon: 'none'
});
return;
}
const fullUrl = this.getFullUrl(url);
uni.previewImage({
urls: [fullUrl],
current: fullUrl
});
}
}
};
</script>
<style scoped lang="scss">
// 全局样式
.container {
width: 100%;
min-height: 100vh;
background-color: #f8f9fa;
}
// 页面头部
.page-header {
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.page-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
// 滚动容器
.content-scroll {
width: 100%;
height: calc(100vh - 96rpx);
}
// 通用卡片样式
.card {
margin: 20rpx 30rpx;
padding: 0;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
overflow: hidden;
&.overview-card {
padding: 30rpx;
background: linear-gradient(135deg, #e8f4fd 0%, #f0f8fb 100%);
.overview-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24rpx;
.overview-left {
.apply-no {
font-size: 26rpx;
color: #666;
display: block;
margin-bottom: 8rpx;
}
.student-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
}
.overview-info {
display: flex;
flex-wrap: wrap;
gap: 16rpx 0;
.overview-item {
width: 100%;
display: flex;
align-items: center;
.info-label {
font-size: 26rpx;
color: #666;
min-width: 120rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
flex: 1;
}
}
}
}
&.empty-card {
.empty-tip {
padding: 60rpx 0;
text-align: center;
}
}
.card-header {
display: flex;
align-items: center;
padding: 24rpx 30rpx;
border-bottom: 1px solid #f5f5f5;
.card-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-left: 12rpx;
}
}
.form-list {
padding: 24rpx 30rpx;
.form-item {
display: flex;
align-items: center;
padding: 16rpx 0;
border-bottom: 1px solid #f9f9f9;
&:last-child {
border-bottom: none;
}
&.signature-item {
align-items: flex-start;
.signature-img {
width: 220rpx;
height: 88rpx;
border: 1px solid #eee;
border-radius: 8rpx;
margin-top: 4rpx;
}
}
&.promise-item {
align-items: flex-start;
.promise-content {
line-height: 1.8;
color: #333;
font-size: 26rpx;
flex: 1;
p {
margin: 8rpx 0;
}
}
}
.label {
font-size: 28rpx;
color: #666;
min-width: 120rpx;
flex-shrink: 0;
}
.value {
font-size: 28rpx;
color: #333;
flex: 1;
word-break: break-all;
}
}
}
.attachment-list {
padding: 24rpx 30rpx;
.attachment-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f9f9f9;
&:last-child {
border-bottom: none;
}
.file-icon {
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
background-color: #e8f4fd;
display: flex;
align-items: center;
justify-content: center;
}
.file-info {
flex: 1;
margin: 0 20rpx;
.file-name {
font-size: 28rpx;
color: #333;
margin-bottom: 4rpx;
display: block;
}
.file-size {
font-size: 24rpx;
color: #999;
}
}
}
}
.approval-list {
padding: 24rpx 30rpx;
.approval-item {
position: relative;
padding-left: 20rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.approval-line {
display: flex;
position: relative;
&::after {
content: '';
position: absolute;
left: 10rpx;
top: 30rpx;
bottom: -20rpx;
width: 2rpx;
background-color: #eee;
z-index: 1;
}
&:last-child::after {
display: none;
}
}
.approval-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #ddd;
z-index: 2;
flex-shrink: 0;
&.dot-success {
background-color: #67c23a;
}
&.dot-danger {
background-color: #f56c6c;
}
&.dot-pending {
background-color: #e6a23c;
}
}
.approval-content {
flex: 1;
margin-left: 20rpx;
.approval-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.approval-node {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.approval-time {
font-size: 24rpx;
color: #999;
}
}
.approval-body {
.approval-info {
display: flex;
align-items: center;
margin-bottom: 8rpx;
font-size: 26rpx;
.info-key {
color: #666;
min-width: 80rpx;
}
.info-val {
color: #333;
flex: 1;
}
}
}
}
}
}
}
// 标签样式
.status-tag, .fee-tag, .opinion-tag, .approval-result-tag {
padding: 8rpx 16rpx;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: 500;
display: inline-block;
// 申请状态
&.status-pending {
background-color: #fdf6ec;
color: #e6a23c;
}
&.status-processing {
background-color: #e8f4fd;
color: #409eff;
}
&.status-success {
background-color: #f0f9eb;
color: #67c23a;
}
&.status-reject {
background-color: #fef0f0;
color: #f56c6c;
}
&.status-default {
background-color: #f5f5f5;
color: #909399;
}
// 费用状态
&.fee-paid {
background-color: #f0f9eb;
color: #67c23a;
margin-right: 10rpx;
}
&.fee-unpaid {
background-color: #fef0f0;
color: #f56c6c;
margin-right: 10rpx;
}
// 家长意见
&.opinion-agree {
background-color: #f0f9eb;
color: #67c23a;
}
&.opinion-disagree {
background-color: #fef0f0;
color: #f56c6c;
}
// 审批结果
&.result-approve {
background-color: #f0f9eb;
color: #67c23a;
}
&.result-reject {
background-color: #fef0f0;
color: #f56c6c;
}
&.result-pending {
background-color: #fdf6ec;
color: #e6a23c;
}
}
// 文本颜色
.text-success {
color: #67c23a !important;
}
.text-danger {
color: #f56c6c !important;
}
// 空提示
.empty-tip {
empty-text {
font-size: 28rpx;
color: #ccc;
margin-top: 20rpx;
}
}
// 底部留白
.bottom-space {
height: 40rpx;
}
</style>