Merge remote-tracking branch 'origin/master'

罗广辉

2026-01-12 b4e65062f0dad8e62ac689e5ce484c2cf267c443

 uniapps/work-wx/src/subPackages/flightApplication/index.vue

@@ -1,40 +1,44 @@
<template>
<view class="flightApplication">
    <u-grid :col="2" :border="true" class="grid" @click="gridClick">
        <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
            <u-image :src="baseListItem.src" :width="26" :height="26"></u-image>
            <text class="grid-text">{{baseListItem.title}}</text>
        </u-grid-item>
    </u-grid>
    <u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
    <view class="title">
        审批记录
    </view>
    <view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex">
        <view class="name-status">
            <view>{{approvalRecord.name}}</view>
            <view>{{approvalRecord.status}}</view>
    <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>飞行设备：{{approvalRecord.device}}</view>
        <view>行政区划：{{approvalRecord.area}}</view>
        <view>飞行时间：{{approvalRecord.time}}</view>
    </view>
    <u-search :bgColor="'white'" :show-action="true" actionText="搜索" :animation="true"></u-search>
    <view class="content">
        <view class="sp-title">
            审批记录
        </view>
        <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>
    </view>
</view>
</template>
<script setup>
    import lbPng from '@/static/images/lb.png'
    import spSvg from '@/static/images/sp.svg'
    import { flightPlanPageInfoApi } from '@/api/index.js'
    import fxsqSvg from '@/static/images/fly-apply.svg'
    import mysbSvg from '@/static/images/my-sb.svg'
import { ref } from 'vue'

const baseList = ref([
    {
        src: lbPng,
        title: '飞行申请',
    },
    {
        src: lbPng,
        title: '我的设备',
    },
])

function gridClick(index) {
    // 跳转设备管理 /pages/equipmentManagement/index
@@ -42,56 +46,205 @@
        uni.switchTab({
            url: '/pages/equipmentManagement/index',
        })
        return
    } else {
        uni.navigateTo({
            url: '/subPackages/flightApplication/add',
        })
    }
}

// 审批记录是很多条
const approvalRecords = ref([
    {
        name: '飞行需求名称',
        status: '申请中',
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
])
// 申请审批列表
const getApprovalRecords = async () => {
    try {
        const res = await flightPlanPageInfoApi({
            current: 1,
            size: 10,
        })
        approvalRecords.value = res.data.data.records || []
    } catch (error) {
        uni.showToast({
            title: error.message,
            icon: 'none',
            duration: 2000,
        })
    }
}
onMounted(() => {
    getApprovalRecords()
})
</script>
<style scoped>
.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #1D6FE9;
    margin: 32rpx 0 24rpx 0;
}
.approvalRecord {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 24rpx;
}
.name-status {
    display: flex;
    justify-content: space-between;
<style scoped lang="scss">
.flightApplication {
    .header-top {
        width: 100%;
        height: 350rpx;
        background: url('@/static/images/fxsq-bg.png') no-repeat center center;
        background-size: 100% 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;
                }
            }
        }
    }
     .u-search {
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        top: 340rpx !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>