180 lines
5.0 KiB
Vue
180 lines
5.0 KiB
Vue
<template>
|
||
<view class="dateReport">
|
||
<view class="pd20">
|
||
<uni-segmented-control
|
||
:current="curSub"
|
||
class="subsection"
|
||
active-color="#376cf3"
|
||
:values="subsectionList"
|
||
@clickItem="sectionChange"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 申请报表 -->
|
||
<view v-if="curSub == 0">
|
||
<!-- apply -->
|
||
<Apply :navHeight="navHeight"/>
|
||
</view>
|
||
|
||
<!-- 申请记录 -->
|
||
<view v-if="curSub == 1">
|
||
<view
|
||
class="record event-list"
|
||
v-if="eventList.length != 0"
|
||
:style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
|
||
>
|
||
<!-- 循环渲染事件项 -->
|
||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
|
||
<view class="title" :class="item.status == 1 ? 'completed' : 'incomplete'">
|
||
<view> {{ item.status == 1 ? '已完成' : '未完成' }} </view>
|
||
</view>
|
||
<!-- 头部：图标 + 信息 + 操作 -->
|
||
<view class="event-header">
|
||
<view class="event-info">
|
||
<view class="event-title">
|
||
<text class="event-id">{{ item.id }}</text>
|
||
<text class="event-tags">{{ item.tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 详情区域 -->
|
||
<view class="event-detail">
|
||
<text>申请人：xxx</text>
|
||
<text>电话号码：18888888888</text>
|
||
</view>
|
||
<view class="downloadReport">
|
||
<!-- <u-icon :name="item.status == 1 ? 'download' : 'upload'" color="#376cf3" size="40"></u-icon> -->
|
||
<uni-icons
|
||
:type="item.status == 1 ? 'download' : 'upload'"
|
||
size="16"
|
||
color="#376cf3"
|
||
></uni-icons>
|
||
|
||
{{ item.status == 1 ? '下载报告' : '生成报告' }}
|
||
</view>
|
||
</uni-card>
|
||
<uni-load-more :status="status"></uni-load-more>
|
||
</view>
|
||
<Cn-empty v-else></Cn-empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import Apply from './apply.vue'
|
||
export default {
|
||
components: { Apply },
|
||
props: {
|
||
indexList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
total: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
// status: {
|
||
// type: String,
|
||
// default: 'more',
|
||
// },
|
||
navHeight: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
value: ['0'],
|
||
content: 123,
|
||
curSub: 0,
|
||
subsectionList: ['申请报表', '申请记录'],
|
||
form: {
|
||
type: 0,
|
||
lindId: '',
|
||
},
|
||
status: 'noMore',
|
||
eventList: [
|
||
{
|
||
id: '测试监测点',
|
||
tag: '2026-01-23至2026-01-23',
|
||
status: '1',
|
||
},
|
||
{
|
||
id: '测试监测点',
|
||
tag: '2026-01-23至2026-01-23',
|
||
status: '0',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
computed: {},
|
||
methods: {
|
||
scrolltolower() {
|
||
this.$emit('scrolltolower')
|
||
},
|
||
getHeight() {},
|
||
|
||
sectionChange(index) {
|
||
this.curSub = index.currentIndex
|
||
},
|
||
},
|
||
watch: {},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/pages/message1/index.scss';
|
||
.event-title {
|
||
justify-content: space-between;
|
||
}
|
||
.event-tags {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.event-detail {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.downloadReport {
|
||
width: 100%;
|
||
background: #376cf320;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
color: #376cf3;
|
||
font-weight: 600;
|
||
border-radius: 15rpx;
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 0px;
|
||
width: calc(100% - 36rpx);
|
||
// margin: 0 10px;
|
||
top: 0;
|
||
border-radius: 4px 4px 0 0;
|
||
padding: 2px 10px;
|
||
font-size: 24rpx;
|
||
font-weight: 600px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 700;
|
||
}
|
||
.completed {
|
||
background: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
.incomplete {
|
||
background: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
/deep/ .record {
|
||
.uni-card__content {
|
||
padding: 55rpx 20rpx 20rpx !important;
|
||
}
|
||
}
|
||
</style>
|