外宿申请列表页
This commit is contained in:
962704835@qq.com
@@ -1,35 +1,471 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="app-container">
|
||||
<!-- 搜索区（仅非学生角色显示） -->
|
||||
<view class="fixed-search-wrap" v-if="roleGroup != '学生'">
|
||||
<view class="search-content">
|
||||
<view class="search-card">
|
||||
<!-- 姓名搜索输入框 -->
|
||||
<view class="search-row">
|
||||
<uni-icons type="search" size="28rpx" color="#1890FF" class="search-icon"></uni-icons>
|
||||
<input v-model="queryParams.studentName" placeholder="输入学生姓名搜索" @input="handleQuery"
|
||||
class="search-input" />
|
||||
</view>
|
||||
|
||||
<!-- 筛选行：学号/学院/班级 -->
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">学号</text>
|
||||
<input class="picker-content" v-model="queryParams.studentNo" type="text"
|
||||
placeholder="请输入" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">学院</text>
|
||||
<input class="picker-content" v-model="queryParams.deptName" type="text"
|
||||
placeholder="请输入" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">班级</text>
|
||||
<input class="picker-content" v-model="queryParams.className" type="text"
|
||||
placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-row">
|
||||
<button class="reset-btn" @click="resetQuery">
|
||||
<uni-icons type="clear" size="24rpx" color="#1890FF" class="btn-icon"></uni-icons>
|
||||
重置
|
||||
</button>
|
||||
<button class="search-btn" @click="handleQuery">
|
||||
<uni-icons type="search" size="24rpx" color="#fff" class="btn-icon"></uni-icons>
|
||||
搜索
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表滚动容器 -->
|
||||
<scroll-view class="list-container" scroll-y @scrolltolower="handleLoadMore" lower-threshold="50" enhanced
|
||||
:show-scrollbar="false">
|
||||
<!-- 初始加载状态 -->
|
||||
<uni-load-more :status="loading ? 'loading' : 'done'" v-if="loading" class="loading-wrap"></uni-load-more>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view class="empty-state" v-if="!loading && !hasData">
|
||||
<uni-icons type="empty" size="80" color="#c0c4cc"></uni-icons>
|
||||
<text class="empty-text">暂无外宿申请数据</text>
|
||||
<text class="empty-tip" v-if="roleGroup.includes('学生')">点击"外宿申请"按钮提交新申请</text>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<view class="card-list" v-if="!loading && hasData">
|
||||
<view class="apply-card" v-for="(item, index) in validDataList" :key="index" hover-class="card-hover"
|
||||
:hover-stop-propagation="true">
|
||||
<!-- 卡片头部 -->
|
||||
<view class="card-header">
|
||||
<view class="apply-no">
|
||||
<text class="label-text">申请编号：</text>
|
||||
<text class="no-text">{{ getSafeValue(item, 'applyNo', '无') }}</text>
|
||||
</view>
|
||||
<view class="status-wrap">
|
||||
<view class="status-label" :class="getStatusClass(item)">
|
||||
{{ getStatusText(item) }}
|
||||
</view>
|
||||
<view class="valid-label"
|
||||
:class="getSafeValue(item, 'isValid') == 1 ? 'valid-success' : 'valid-info'">
|
||||
{{ getSafeValue(item, 'isValid') == 1 ? '有效' : '到期' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卡片主体折叠面板 -->
|
||||
<uni-collapse accordion v-model="item.activeCollapse">
|
||||
<uni-collapse-item title="基本信息" name="basic" class="collapse-item">
|
||||
<view class="info-grid">
|
||||
<view class="info-item"><text class="label">学号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentNo', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">姓名：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">性别：</text><text
|
||||
class="value">{{ getSafeValue(item, 'gender') == 1 ? '男' : getSafeValue(item, 'gender') == 0 ? '女' : '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">出生年月：</text><text
|
||||
class="value">{{ parseTime(getSafeValue(item, 'birthDate')) || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">学院：</text><text
|
||||
class="value">{{ getSafeValue(item, 'deptName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">专业：</text><text
|
||||
class="value">{{ getSafeValue(item, 'majorName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">班级：</text><text
|
||||
class="value">{{ getSafeValue(item, 'className', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">辅导员：</text><text
|
||||
class="value">{{ getSafeValue(item, 'teacherName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">原宿舍号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'originalDormitory', '-') }}</text></view>
|
||||
<view class="info-item">
|
||||
<text class="label">住宿费状态：</text>
|
||||
<text class="value">
|
||||
<view class="fee-label"
|
||||
:class="getSafeValue(item, 'accommodationFeeStatus') === 1 ? 'fee-success' : 'fee-info'">
|
||||
{{ getSafeValue(item, 'accommodationFeeStatus') === 1 ? '已交' : '未交' }}
|
||||
</view>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="外宿信息" name="outside" class="collapse-item">
|
||||
<view class="info-form">
|
||||
<view class="form-item"><text class="label">外宿原因：</text><text
|
||||
class="value">{{ getSafeValue(item, 'applyReason', '-') }}</text></view>
|
||||
<view class="form-item"><text class="label">外宿地址：</text><text
|
||||
class="value">{{ (getSafeValue(item, 'address', '') + ' ' + getSafeValue(item, 'outsideAddress', '')) || '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">外宿时间：</text>
|
||||
<text class="value">{{ parseTime(getSafeValue(item, 'startDate')) || '-' }}
|
||||
<text class="split-text">至</text>
|
||||
{{ parseTime(getSafeValue(item, 'endDate')) || '-' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">紧急联系人：</text><text
|
||||
class="value">{{ getSafeValue(item, 'emergencyContact', '-') }}
|
||||
({{ getSafeValue(item, 'emergencyPhone', '-') }})</text></view>
|
||||
<view class="form-item"><text class="label">家长意见：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentOpinion') == 1 ? '同意' : getSafeValue(item, 'parentOpinion') == 0 ? '不同意' : '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">家长联系方式：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentPhone', '-') }}</text></view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="审批记录" name="approval" class="collapse-item">
|
||||
<view class="approval-list"
|
||||
v-if="getSafeValue(item, 'outsideAccommodationApprovals', []).length > 0">
|
||||
<view class="approval-item"
|
||||
v-for="(approval, idx) in getSafeValue(item, 'outsideAccommodationApprovals', [])"
|
||||
:key="idx">
|
||||
<text
|
||||
class="approval-node">{{ getSafeValue(approval, 'approvalNode', '未知节点') }}：</text>
|
||||
<text class="approval-result"
|
||||
:class="getSafeValue(approval, 'approvalResult') == 1 ? 'result-pass' : 'result-reject'">
|
||||
{{ getSafeValue(approval, 'approvalResult') == 1 ? '通过' : '驳回' }}
|
||||
</text>
|
||||
<text class="approval-time"
|
||||
v-if="getSafeValue(approval, 'approvalTime')">{{ parseTime(getSafeValue(approval, 'approvalTime')) }}</text>
|
||||
<text class="approval-remark"
|
||||
v-if="getSafeValue(approval, 'approvalRemark')">备注：{{ getSafeValue(approval, 'approvalRemark') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-approval" v-else>暂无审批记录</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 卡片操作区 -->
|
||||
<view class="card-actions">
|
||||
<uni-button type="text" size="mini" @click="detail(item)" class="detail-btn"
|
||||
:disabled="!getSafeValue(item, 'id')">
|
||||
<uni-icons type="info" size="14" class="mr-5"></uni-icons>查看详情
|
||||
</uni-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多状态 -->
|
||||
<view class="load-more-wrap" v-if="hasData">
|
||||
<uni-load-more :status="loadingMore ? 'loading' : (hasMore ? 'more' : 'nomore')"
|
||||
:content-text="loadMoreText"></uni-load-more>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 添加外宿申请按钮 -->
|
||||
<view class="add" @click="addOutsideAccommodation">+</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listOutsideAccommodationApply
|
||||
} from "@/api/dms/outsideAccommodation/outsideAccommodationApply";
|
||||
import {
|
||||
getUserProfile
|
||||
} from '@/api/system/user';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
name: "OutsideAccommodationApplyList",
|
||||
data() {
|
||||
return {
|
||||
|
||||
// 加载状态
|
||||
loading: true,
|
||||
loadingMore: false,
|
||||
hasMore: true,
|
||||
// 总数据量
|
||||
totalCount: 0,
|
||||
// 原始数据
|
||||
outsideAccommodationApplyList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
studentNo: null,
|
||||
studentName: null,
|
||||
deptName: null,
|
||||
className: null,
|
||||
teacherName: null
|
||||
},
|
||||
// 用户角色
|
||||
roleGroup: '',
|
||||
user: {},
|
||||
// 加载更多文本
|
||||
loadMoreText: {
|
||||
contentdown: '上拉加载更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的有效数据列表
|
||||
validDataList() {
|
||||
return this.outsideAccommodationApplyList.filter(item => {
|
||||
return item !== null && item !== undefined && typeof item === 'object';
|
||||
}).map(item => {
|
||||
if (!item.hasOwnProperty('activeCollapse')) {
|
||||
item.activeCollapse = 'basic';
|
||||
}
|
||||
return item;
|
||||
});
|
||||
},
|
||||
// 是否有有效数据
|
||||
hasData() {
|
||||
return this.validDataList.length > 0;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser();
|
||||
},
|
||||
methods: {
|
||||
/** 安全取值方法 */
|
||||
getSafeValue(obj, key, defaultValue = '') {
|
||||
if (!obj || typeof obj !== 'object') return defaultValue;
|
||||
return obj[key] !== undefined && obj[key] !== null ? obj[key] : defaultValue;
|
||||
},
|
||||
|
||||
/** 获取状态样式类 */
|
||||
getStatusClass(item) {
|
||||
const rejectInfo = this.getRejectInfo(item);
|
||||
if (rejectInfo.isReject) {
|
||||
return 'status-error';
|
||||
}
|
||||
const status = this.getSafeValue(item, 'status');
|
||||
const typeMap = {
|
||||
'0': 'status-info',
|
||||
'1': 'status-warning',
|
||||
'2': 'status-warning',
|
||||
'3': 'status-warning',
|
||||
'4': 'status-warning',
|
||||
'5': 'status-success'
|
||||
};
|
||||
return typeMap[status] || 'status-default';
|
||||
},
|
||||
|
||||
/** 获取驳回信息 */
|
||||
getRejectInfo(item) {
|
||||
const approvalList = this.getSafeValue(item, 'outsideAccommodationApprovals', []);
|
||||
if (!Array.isArray(approvalList) || approvalList.length === 0) {
|
||||
return {
|
||||
isReject: false,
|
||||
rejectText: ''
|
||||
};
|
||||
}
|
||||
|
||||
const rejectItem = approvalList.find(approval => {
|
||||
return this.getSafeValue(approval, 'approvalResult') === 0;
|
||||
});
|
||||
|
||||
if (rejectItem) {
|
||||
const nodeName = this.getSafeValue(rejectItem, 'approvalNode', '未知').replace('审批', '');
|
||||
return {
|
||||
isReject: true,
|
||||
rejectText: `${nodeName}驳回`
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
isReject: false,
|
||||
rejectText: ''
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取状态文本 */
|
||||
getStatusText(item) {
|
||||
const rejectInfo = this.getRejectInfo(item);
|
||||
if (rejectInfo.isReject) {
|
||||
return rejectInfo.rejectText;
|
||||
}
|
||||
|
||||
const status = this.getSafeValue(item, 'status');
|
||||
const statusMap = {
|
||||
'0': '待提交',
|
||||
'1': '待辅导员审批',
|
||||
'2': '待学院书记审批',
|
||||
'3': '待学工处审批',
|
||||
'4': '待学校领导审批',
|
||||
'5': '审核通过'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
},
|
||||
|
||||
/** 时间格式化 */
|
||||
parseTime(time, format = '{y}-{m}-{d}') {
|
||||
if (!time) return '';
|
||||
|
||||
try {
|
||||
const date = new Date(time);
|
||||
if (isNaN(date.getTime())) return '';
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
return format.replace('{y}', year).replace('{m}', month).replace('{d}', day);
|
||||
} catch (error) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
/** 查询数据 */
|
||||
getList(isRefresh = false) {
|
||||
if (isRefresh) {
|
||||
this.loading = true;
|
||||
this.hasMore = true;
|
||||
this.queryParams.pageNum = 1;
|
||||
this.outsideAccommodationApplyList = [];
|
||||
} else {
|
||||
this.loadingMore = true;
|
||||
}
|
||||
|
||||
listOutsideAccommodationApply(this.queryParams).then(response => {
|
||||
const res = response || {};
|
||||
const newData = Array.isArray(res.rows) ? res.rows : [];
|
||||
this.totalCount = Number(res.total) || 0;
|
||||
|
||||
if (isRefresh) {
|
||||
this.outsideAccommodationApplyList = newData;
|
||||
} else {
|
||||
this.outsideAccommodationApplyList = [...this.outsideAccommodationApplyList, ...newData];
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.hasMore = this.outsideAccommodationApplyList.length < this.totalCount;
|
||||
|
||||
}).catch((error) => {
|
||||
console.error('数据加载失败:', error);
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
uni.showToast({
|
||||
title: '数据加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/** 获取用户信息 */
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
const res = response || {};
|
||||
this.user = res.data || {};
|
||||
this.roleGroup = res.roleGroup || '';
|
||||
|
||||
// 填充查询条件
|
||||
if (this.roleGroup.includes("学生")) {
|
||||
this.queryParams.studentName = this.user.nickName || '';
|
||||
} else if (this.roleGroup.includes("辅导员")) {
|
||||
this.queryParams.teacherName = this.user.nickName || '';
|
||||
} else if (this.roleGroup.includes("二级学院")) {
|
||||
this.queryParams.deptName = this.user.dept?.deptName || '';
|
||||
}
|
||||
|
||||
this.getList(true);
|
||||
}).catch((error) => {
|
||||
console.error('用户信息获取失败:', error);
|
||||
this.loading = false;
|
||||
uni.showToast({
|
||||
title: '用户信息加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/** 搜索 */
|
||||
handleQuery() {
|
||||
this.getList(true);
|
||||
},
|
||||
|
||||
/** 重置 */
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
studentNo: null,
|
||||
studentName: null,
|
||||
deptName: null,
|
||||
className: null,
|
||||
teacherName: null
|
||||
};
|
||||
|
||||
// 重新填充角色相关的默认查询条件
|
||||
if (this.roleGroup.includes("学生")) {
|
||||
this.queryParams.studentName = this.user.nickName || '';
|
||||
} else if (this.roleGroup.includes("辅导员")) {
|
||||
this.queryParams.teacherName = this.user.nickName || '';
|
||||
} else if (this.roleGroup.includes("二级学院")) {
|
||||
this.queryParams.deptName = this.user.dept?.deptName || '';
|
||||
}
|
||||
|
||||
this.getList(true);
|
||||
},
|
||||
|
||||
/** 加载更多 */
|
||||
handleLoadMore() {
|
||||
if (this.loadingMore || !this.hasMore) return;
|
||||
|
||||
this.queryParams.pageNum += 1;
|
||||
this.getList(false);
|
||||
},
|
||||
|
||||
/** 查看详情 */
|
||||
detail(item) {
|
||||
const id = this.getSafeValue(item, 'id');
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
title: '数据异常，无法查看详情',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/dormitory/outsideAccommodation/applicationForm?id=${id}`
|
||||
});
|
||||
},
|
||||
// 跳转添加页面
|
||||
addOutsideAccommodation() {
|
||||
// if (this.roleGroup === "学生") {
|
||||
// if (this.dormInfo.length > 0) {
|
||||
// uni.showToast({
|
||||
// title: '请勿重复提交',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
if (this.roleGroup === "学生") {
|
||||
if (this.outsideAccommodationApplyList.length > 0) {
|
||||
uni.showToast({
|
||||
title: '请勿重复提交',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/dormitory/outsideAccommodation/applicationForm`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -49,4 +485,434 @@
|
||||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 全局样式 */
|
||||
.app-container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* 搜索区样式 */
|
||||
.fixed-search-wrap {
|
||||
z-index: 90;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 60rpx;
|
||||
padding: 14rpx 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
min-width: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.picker-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding: 14rpx 16rpx;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 12rpx;
|
||||
height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.reset-btn,
|
||||
.search-btn {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #fff;
|
||||
color: #1890FF;
|
||||
border: 1px solid #1890FF;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background-color: #1890FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
/* 列表滚动容器 */
|
||||
.list-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 380rpx);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
/* 加载更多区域 */
|
||||
.load-more-wrap {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 空数据状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 卡片列表 */
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
/* 申请卡片 */
|
||||
.apply-card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%);
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
.apply-no {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.no-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
/* 状态标签样式 */
|
||||
.status-label {
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #e6a23c;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
.status-default {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
/* 有效/到期标签 */
|
||||
.valid-label {
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: 22rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.valid-success {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.valid-info {
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
/* 住宿费状态标签 */
|
||||
.fee-label {
|
||||
display: inline-block;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
font-size: 22rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fee-success {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.fee-info {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 折叠面板 */
|
||||
.collapse-item {
|
||||
--uni-collapse-item-header-padding: 24rpx;
|
||||
--uni-collapse-item-content-padding: 0;
|
||||
--uni-collapse-item-header-font-size: 28rpx;
|
||||
--uni-collapse-item-header-color: #303133;
|
||||
}
|
||||
|
||||
/* 信息网格 */
|
||||
.info-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.info-grid .info-item {
|
||||
width: calc(50% - 10rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 信息表单 */
|
||||
.info-form {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-form .form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-form .form-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.split-text {
|
||||
margin: 0 10rpx;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 标签和值样式 */
|
||||
.label {
|
||||
color: #606266;
|
||||
margin-right: 12rpx;
|
||||
font-weight: 500;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.info-form .label {
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 审批记录 */
|
||||
.approval-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.approval-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dashed #f2f2f2;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.approval-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.approval-node {
|
||||
color: #606266;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.approval-result {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.result-pass {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.result-reject {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.approval-time {
|
||||
color: #909399;
|
||||
font-size: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.approval-remark {
|
||||
color: #303133;
|
||||
font-size: 24rpx;
|
||||
width: 100%;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.empty-approval {
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 卡片操作区 */
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20rpx 24rpx;
|
||||
border-top: 1rpx solid #f2f2f2;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
color: #409eff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 适配小屏幕 */
|
||||
@media (max-width: 750rpx) {
|
||||
.info-grid .info-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
height: calc(100vh - 420rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user