hazardousWaste_app/pages/warehousing/Declaration/my.vue

<template>
    <!-- -->
    <navigation title="我的申报单" :back-url="backUrl"></navigation>
    <view class="contentBox">
        <!-- 搜索框 -->
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :input-border="false"
                @icon-click="getList" placeholder="请输入搜索内容" />
        </view>
        <!-- 列表 -->
        <z-paging ref="pagingRef" class="containerBox" v-model="list" @query="getList">
            <uni-list class="listBox">
                <uni-list-item v-for="item in list" :key="item.id" clickable @tap="onDetail(item)">
                    <template v-slot:body>
                        <view style="display: flex; flex-direction: column; width: 100%;">
                            <view class="line title">
                                <p> 申报单号：{{ item.billNo }}</p>
                                <p>{{ getLabel(declareType, item?.status) }}</p>
                            </view>
                            <p class="line content">联系人：<text>{{ item?.contactName || '-' }}</text></p>
                            <p class="line content">联系电话：<text>{{ item?.contactPhone || '-' }}</text></p>
                            <p class="line content">地址:<text>{{ item?.address || '-' }}</text></p>
                            <p class="line content">申报时间： <text>{{ item?.createTime || '-' }}</text></p>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
    </view>
</template>

<script setup>
import _ from 'lodash';
import { ref } from 'vue';
import { onShow, onLoad } from "@dcloudio/uni-app";
import { declareList } from '@/api/declaration';
import Navigation from '../../components/Navigation.vue';
import { objectToQuery, getLabel, declareType } from '../../until';

const OPERATE_CONFIG = {
    declaration: {
        back: '/pages/warehousing/Declaration/create'
    },
    my: {
        back: 'pages/warehousing/index'
    },
}
const pagingRef = ref(null)
const list = ref([])
const backUrl = ref('')
const pathParams = ref('')
const queryParams = ref({ keyword: '' })

const onDetail = (item) => {
    const query = objectToQuery({ ...pathParams.value, billNo: item.billNo })
    uni.navigateTo({
        url: `/pages/warehousing/Declaration/components/detail${query}`,
    });
}

const getList = (pageNo, pageSize) => {
    queryParams.value.pageNum = pageNo
    declareList({ ...queryParams.value }).then(res => {
        res.rows.forEach(e => {
            e.showMore = false;
        });
        pagingRef.value.complete(res.rows)
    }).catch(() => {
        pagingRef.value.complete(false)
    })

}
// 数据：路径参数
onLoad(options => {
    pathParams.value = options;
    const { type } = options;

    let queryStr = '';
    if (type !== 'my') {
        const { billNo, ...restParams } = options;
        queryStr = objectToQuery(restParams);
    }

    const baseBackUrl = OPERATE_CONFIG?.[type]?.back;
    backUrl.value = queryStr ? `${baseBackUrl}${queryStr}` : baseBackUrl;
})
onShow(() => {
    pagingRef.value?.reload?.()
})
</script>

<style scoped lang="scss">
/* 搜索框：放在导航栏下面，不覆盖 */
.topSearch {
    position: fixed;
    top: 65rpx;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 8rpx 16rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;

}

.containerBox {
    padding-top: 125rpx !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

::v-deep .listBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #F8F8FF;

    .zp-l-text-rpx {
        font-size: 12px;
    }

    .uni-list--border-bottom {
        padding: 8px 12px 8px 15px;
    }

    .uni-list {
        background-color: #F8F8FF;
    }

    .uni-list-item {
        margin-bottom: 4rpx;
    }

    .line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
    }

    .title {
        justify-content: space-between;
        font-weight: 600;
        font-size: 13px;
    }

    .content {
        font-weight: 500;
        font-size: 13px;
        color: #696969;
    }
}
</style>