774 lines
19 KiB
Vue
774 lines
19 KiB
Vue
|
<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>
|