yn_img_tools_app/src/pages/comprehensiveQuery/index.vue

<template>
    <!-- 照片统计一级页面 -->
    <view class="comprehensive-query" :style="{ paddingTop: safeAreaInsets?.top + 44 + 'px' }">
        <NavBarModal :navBarTitle="`照片统计`" />

        <!-- 筛选框 -->
        <view class="filter-box">
            <up-input placeholder="输入标题" v-model="photoSearchValue">
                <template #prefix>
                    <up-icon name="search" size="24" @tap="onSearchPhoto" />
                </template>

                <template #suffix>
                    <text class="search-text" @tap="onHandleSeniorSearch">高级筛选</text>
                </template>
            </up-input>
        </view>

        <view class="photo-container">
            <PhotoTotal />
            <PhotoClass />
            <PhotoRecent />
        </view>

        <view class="loading-text">
            {{ finish ? '没有更多数据了~' : '正在加载...' }}
        </view>
    </view>

    <up-back-top :scroll-top="scrollTop"></up-back-top>

    <!-- 高级筛选框 -->
    <up-popup
        mode="right"
        safeAreaInsetTop
        :show="rightPopupShow"
        @close="rightPopupShow = !rightPopupShow"
    >
        <view class="senior-popup">
            <up-list>
                <view class="senior-title">
                    <up-icon name="pushpin-fill" color="#333" size="24" />
                    <text>高级筛选</text>
                </view>

                <up-form
                    labelWidth="100"
                    labelAlign="center"
                    labelPosition="left"
                    style="padding-right: 20rpx"
                    :style="{ paddingBottom: safeAreaInsets?.top + 50 + 'px' }"
                >
                    <TitleTipModal :TitleTip="`通用信息查询`" />
                    <up-form-item prop="projectName" label="搜索查询">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="开始日期">
                        <up-input placeholder="请选择">
                            <template #prefix>
                                <up-icon name="calendar" size="16" />
                            </template>
                        </up-input>
                    </up-form-item>
                    <up-form-item prop="projectName" label="结束日期">
                        <up-input placeholder="请选择">
                            <template #prefix>
                                <up-icon name="calendar" size="16" />
                            </template>
                        </up-input>
                    </up-form-item>
                    <up-form-item prop="projectName" label="工程">
                        <up-input placeholder="请选择工程名称">
                            <template #suffix>
                                <up-icon name="arrow-down" size="16" />
                            </template>
                        </up-input>
                    </up-form-item>
                    <up-form-item prop="projectName" label="专业">
                        <up-input placeholder="请选择专业">
                            <template #suffix>
                                <up-icon name="arrow-down" size="16" />
                            </template>
                        </up-input>
                    </up-form-item>
                    <up-form-item prop="projectName" label="工序">
                        <up-input placeholder="请选择工序">
                            <template #suffix>
                                <up-icon name="arrow-down" size="16" />
                            </template>
                        </up-input>
                    </up-form-item>
                    <TitleTipModal :TitleTip="`安全违章照片`" />
                    <up-form-item prop="projectName" label="类型">
                        <up-checkbox-group placement="row">
                            <up-checkbox activeColor="red" label="违章照片" />
                            <up-checkbox activeColor="green" label="整改照片" />
                        </up-checkbox-group>
                    </up-form-item>
                    <up-form-item prop="projectName" label="违章地点">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="违章描述">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="违章说明">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <TitleTipModal :TitleTip="`质量检查照片`" />
                    <up-form-item prop="projectName" label="类型">
                        <up-checkbox-group placement="row">
                            <up-checkbox activeColor="red" label="缺陷照片" />
                            <up-checkbox activeColor="green" label="整改照片" />
                        </up-checkbox-group>
                    </up-form-item>
                    <up-form-item prop="projectName" label="检查地点">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="检查描述">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="整改说明">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <TitleTipModal :TitleTip="`安全措施落实照片`" />
                    <up-form-item prop="projectName" label="检查地点">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <up-form-item prop="projectName" label="检查描述">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <TitleTipModal :TitleTip="`协调照片`" />
                    <up-form-item prop="projectName" label="类型">
                        <up-checkbox-group placement="row">
                            <up-checkbox activeColor="red" label="建设前" />
                            <up-checkbox activeColor="green" label="建设中" />
                            <up-checkbox activeColor="green" label="恢复后" />
                        </up-checkbox-group>
                    </up-form-item>
                    <up-form-item prop="projectName" label="建设地点">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                    <TitleTipModal :TitleTip="`重要事项及宣传照片`" />
                    <up-form-item prop="projectName" label="标题">
                        <up-input placeholder="请输入" />
                    </up-form-item>
                </up-form>
            </up-list>

            <!-- 按钮组 -->
            <view class="btns">
                <view>
                    <view>
                        <up-button
                            size="small"
                            type="primary"
                            icon="search"
                            text="查询"
                            @tap="onHandleSearch"
                        />
                    </view>
                    <view style="margin-left: 18rpx">
                        <up-button size="small" icon="reload" text="重置" @tap="onHandleReset" />
                    </view>
                </view>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
import NavBarModal from '@/components/NavBarModal/index'
import TitleTipModal from '@/components/TitleTipModal/index'
import PhotoTotal from './components/photo-total.vue'
import PhotoClass from './components/photo-class'
import PhotoRecent from './components/photo-recent'
import { ref } from 'vue'
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'

const scrollTop = ref(0)
const finish = ref(true)
const photoSearchValue = ref('')
const rightPopupShow = ref(false)
const { safeAreaInsets } = uni.getSystemInfoSync()

// 输入框左侧搜索图标点击
const onSearchPhoto = () => {
    console.log('onSearchPhoto')
}

// 高级搜索
const onHandleSeniorSearch = () => {
    console.log('高级搜索')
    rightPopupShow.value = true
}

// 查询
const onHandleSearch = () => {
    rightPopupShow.value = false
}

// 重置
const onHandleReset = () => {
    rightPopupShow.value = false
}

onReachBottom(() => {
    console.log('滚动触底事件--')
})

// 监听滚动事件 显示返回顶部小图标
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
})
</script>

<style lang="scss" scoped>
.comprehensive-query {
    height: 100%;
    box-sizing: border-box;
    .filter-box {
        padding: 16rpx 0;
        .search-text {
            font-size: 14px;
            letter-spacing: 1rpx;
            color: #4a6fff;
        }

        ::v-deep .u-input {
            width: 85%;
            margin: 0 auto;
            background-color: #f3f4f6;
        }
    }

    .photo-container {
        padding: 0 30rpx;
    }
}

// 高级搜索弹框样式
.senior-popup {
    width: 90vw;
    height: 100vh;
    overflow: hidden;
    .senior-title {
        padding: 24rpx 30rpx;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;

        & text {
            margin-left: 4rpx;
            letter-spacing: 2rpx;
        }
    }

    .btns {
        width: 100%;
        height: 50px;
        padding: 18rpx 0;
        position: absolute;
        bottom: 0;
        right: 0;
        border-top: 1px solid #cac6c6;
        background-color: #fff;
        box-sizing: border-box;

        & view {
            margin-right: 18rpx;
            display: flex;
            justify-content: flex-end;
        }
    }
}
::v-deep .u-checkbox {
    margin-right: 5px;
}

// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 26rpx;
    color: #8c8c8c;
    padding: 32rpx 0;
    letter-spacing: 1rpx;
}
</style>