<template>
|
<view class="flightApplication">
|
<view class="header-top">
|
<view class="ht-content">
|
<view class="item" @click="gridClick(0)">
|
<image :src="fxsqSvg" class="icon"></image>
|
<view class="txt">飞行申请</view>
|
</view>
|
<view class="item" @click="gridClick(1)">
|
<image :src="mysbSvg" class="icon"></image>
|
<view class="txt">我的设备</view>
|
</view>
|
</view>
|
</view>
|
<u-search v-model="formParams.flightPlanName" :bgColor="'white'" :show-action="true" actionText="搜索" :animation="true" @custom="handleSearch"></u-search>
|
<view class="content">
|
<view class="sp-title">
|
审批记录
|
</view>
|
<u-list :style="{ height: 'calc(100vh - 240rpx)' }" @scrolltolower="scrolltolower" :lower-threshold="50">
|
<view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex">
|
<view class="name-status">
|
<view class="name-image">
|
<u-image :src="spSvg" class="icon" width="16" height="16"></u-image>
|
<view class="name">{{approvalRecord.flightPlanName}}</view>
|
</view>
|
<view class="status">{{approvalRecord.planStatus || '无状态'}}</view>
|
</view>
|
<view class="txt">飞行设备：{{approvalRecord.device || '无设备'}}</view>
|
<view class="txt">行政区划：{{approvalRecord.area || '无行政区划'}}</view>
|
<view class="txt">飞行时间：{{approvalRecord.time || '无飞行时间'}}</view>
|
</view>
|
</u-list>
|
</view>
|
</view>
|
</template>
|
<script setup>
|
import spSvg from '@/static/images/sp.png'
|
import { flightPlanPageInfoApi } from '@/api/index.js'
|
import fxsqSvg from '@/static/images/fly-apply.png'
|
import mysbSvg from '@/static/images/my-sb.png'
|
import { ref } from 'vue'
|
|
|
function gridClick(index) {
|
// 跳转设备管理 /pages/equipmentManagement/index
|
if (index === 1) { // '我的设备'是第二个网格项，索引为1
|
uni.switchTab({
|
url: '/pages/equipmentManagement/index',
|
})
|
} else {
|
uni.navigateTo({
|
url: '/subPackages/flightApplication/add',
|
})
|
}
|
}
|
|
// 审批记录是很多条
|
const approvalRecords = ref([])
|
const formParams = ref({
|
current: 1,
|
size: 10,
|
flightPlanName: '',
|
})
|
// 申请审批列表
|
const getApprovalRecords = async () => {
|
try {
|
const res = await flightPlanPageInfoApi(formParams.value)
|
const newData = res.data.data.records || []
|
// 如果是第一页，直接替换数据；否则追加数据
|
if (formParams.value.current === 1) {
|
approvalRecords.value = newData
|
} else {
|
approvalRecords.value = approvalRecords.value.concat(newData)
|
}
|
} catch (error) {
|
uni.showToast({
|
title: error.message,
|
icon: 'none',
|
duration: 2000,
|
})
|
}
|
}
|
// 搜索处理
|
const handleSearch = () => {
|
// 搜索时重置为第一页
|
formParams.value.current = 1
|
formParams.value.flightPlanName = formParams.value.flightPlanName.trim()
|
getApprovalRecords()
|
}
|
// 触底加载
|
function scrolltolower() {
|
formParams.value.current++
|
// 停止不刷新
|
if (approvalRecords.value.length < formParams.value.size) {
|
return
|
}
|
getApprovalRecords()
|
}
|
onMounted(() => {
|
getApprovalRecords()
|
})
|
</script>
|
<style scoped lang="scss">
|
.flightApplication {
|
.header-top {
|
width: 100%;
|
height: 280rpx;
|
background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/fxsq-bg.png") no-repeat ;
|
background-size: 100%;
|
position: fixed;
|
top: 0;
|
.ht-content {
|
position: absolute;
|
bottom: -40rpx;
|
width: 100%;
|
height: 166rpx;
|
padding: 0 40rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 60rpx;
|
box-sizing: border-box;
|
.item {
|
flex: 1;
|
max-width: 350rpx;
|
height: 166rpx;
|
background: rgba(251,253,255,0.39);
|
box-shadow: inset 0px 0px 7px 0px rgba(64,156,230,0.14), 0px 1px 3px 0px rgba(35,49,96,0.11);
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-sizing: border-box;
|
.icon {
|
width: 128rpx;
|
height: 128rpx;
|
}
|
.txt {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 16px;
|
color: #222324;
|
}
|
}
|
}
|
}
|
:deep(.u-search) {
|
position: absolute;
|
width: 90%;
|
left: 50%;
|
transform: translateX(-50%);
|
top: 350rpx !important;
|
height: 68rpx;
|
flex: 0;
|
}
|
.content {
|
position: absolute;
|
top: 450rpx !important;
|
bottom: 0;
|
background: white;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #FFFFFF;
|
padding: 0 40rpx 40rpx 40rpx;
|
overflow-y: auto;
|
box-sizing: border-box;
|
border-radius: 12px 12px 6px 6px;
|
.sp-title {
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #222324;
|
padding: 40rpx 0 0rpx 0;
|
}
|
}
|
.approvalRecord {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
// display: flex;
|
// justify-content: space-between;
|
border-bottom: 1px solid #EBEEF3;
|
padding: 40rpx 0 20rpx 0;
|
// margin-bottom: 20rpx;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.name-status {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
.name-image {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.u-image {
|
width: 32rpx;
|
height: 32rpx;
|
}
|
.name {
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #1D2129;
|
margin-left: 6rpx;
|
}
|
}
|
.status {
|
width: 100rpx;
|
text-align: center;
|
line-height: 40rpx;
|
background: #FF9604;
|
border-radius: 2px 2px 2px 2px;
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
}
|
}
|
.txt {
|
font-weight: 400;
|
font-size: 12px;
|
color: #86909C;
|
margin-bottom: 14rpx;
|
}
|
}
|
</style>
|
