ys-app/src/pages/business/CRM/visitorReport.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="'走访报告列表'" :leftFlag="true" :rightFlag="true">
            <template #right>
                <view class="head-right" @click="handleAdd">
                    <uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
                </view>
            </template>
        </customHeader>

        <!-- 高度来避免头部遮挡 -->
        <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>

        <!-- 正文内容 -->
        <view class="all-body">
            <!-- 搜索  @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"-->
            <view class="search">
                <uni-search-bar class="custom-search" radius="28" placeholder="请输入客户名称" clearButton="auto"
                    cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff"
                    v-model="searchValue"
                />
                <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
            </view>

            <!-- 分页部分  -->
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
                class="scroll-h"  :class="{'loading-scroll':cssFlag}"
            >
                <view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
                    <view class="report-list">
                        <view class="title">{{ item.title }}</view>
                        <view class="r-list">
                            <view class="r-name">{{ item.name }}</view>
                            <view class="r-right btn-orange" size="mini">{{ item.statusName }}</view>
                        </view>
                        <view class="border-bottom"></view>
                        <view class="r-list">
                            <view class="r-left">报告类型</view>
                            <view class="r-right">{{ item.reportTypeName }}</view>
                        </view>
                        <view class="border-bottom"></view>
                        <view class="r-list">
                            <view class="r-left">报告人</view>
                            <view class="r-right">{{ item.reportPeople }}</view>
                        </view>
                        <view class="border-bottom"></view>
                        <view class="r-list">
                            <view class="r-left">报告日期</view>
                            <view class="r-right">{{ item.dateStr }}</view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { getYsVisistList } from '@/api/crm/api_ys.js'

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
    console.log(searchValue.value)
}

// 新增
let handleAdd = ()=>{
    uni.navigateTo({ url:'/pages/business/CRM/visitorReportAdd' })
}

// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
    page: { num: 0, size: 10 },
    noMoreSize: 5,
    empty: {
        tip: '~ 空空如也 ~',
        icon: "../../static/images/mescroll-empty.png"
    },
    textLoading: '加载中...',
    textNoMore: '已经到底了'
});

const downOption = ref({
    auto: true,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

let cssFlag=ref(false);//控制样式
const mescrollInit = (mescroll) => {
    cssFlag.value = true;
    mescrollRef.value = mescroll;
};

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            const res = await getGetYsVisistList(1, upOption.value.page.size);
            cssFlag.value = false;
            list.value = res.list;
            mescroll.resetUpScroll();
        },500);
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}
// 上拉加载更多
const upCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            const res = await getGetYsVisistList(mescroll.num, mescroll.size);
            if (mescroll.num === 1) {
                list.value = res.list;
            } else {
                list.value.push(...res.list);
            }
            mescroll.endBySize(res.list.length, res.total);
        },500);
    } catch (error) {
        mescroll.endErr();
    }
}

// 获取数据列表
const getGetYsVisistList = (pageIndex, pageSize) => {
    return new Promise(async (resolve) => {
        let param = {
            pageIndex,
            pageSize
        }

        let res = await getYsVisistList(param);
        resolve({
            list: res.list,
            total: res.totalCount
        });
    });

}

// 跳转到详情
let handleDetail=(item)=>{
    uni.navigateTo({
        url: "/pages/business/CRM/visitorReportDetail?id="+item.id
    })
}
</script>

<style scoped>
.all-body {
    /* #ifdef APP-PLUS */
    top: 150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:120rpx;
    height: calc(100vh);
    /* #endif */
}
.search{
    display: flex;
}
.search .btn-search{
    border:none;
    background: none;
    line-height: normal;
    color:#fff;
    line-height: 56rpx !important;
    padding:10rpx 0 0;
    text-align: left;
    cursor: pointer;
}
.search .btn-search::after{
    display: none;
}
.search .custom-search{
    width:80%;

}
.search .custom-search.uni-searchbar{
    padding-right:0 !important;
}

.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 120px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 110px);
    /* #endif */
}
.white-bg{
    padding-bottom:10rpx;
}

</style>