ys-app/src/pages/business/CRM/marketInformation.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 market-con">
                <view class="nav-list">
                    <view class="nav-item" :class="{active:index==activeTab}"
                        v-for="(item,index) in tabList" :key="index"
                        @click="handleNav(index)"
                    >{{ item }}</view>
                </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}">
                    <!-- 市场机会信息 -->
                    <block v-if="activeTab === 0">
                        市场机会信息内容
                    </block>
                    <!-- 重大事项信息 -->
                    <block v-if="activeTab === 1">
                        <view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index">
                            <view class="report-list">
                                <view class="title r-list">
                                    <view class="r-left" style="font-size:38rpx;">{{ item.title }}</view>
                                    <view class="r-right btn-gray flex-auto" :class="{'btn-blue':item.status==2}" size="mini">{{ item.statusName }}</view>
                                </view>
                                <view style="padding:0rpx 0 10rpx">
                                    <view class="font-bold" style="padding-bottom:10rpx">产生影响</view>
                                    <view class="font-gray">{{ item.desc }}</view>
                                </view>
                            </view>
                        </view>
                    </block>
                </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 { mattersList } from '@/api/business.js'

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

const activeTab = ref(1);// 默认重大事项信息
const tabList = ['市场机会信息', '重大事项信息', '竞争对手信息', '人员变动信息','多标签效果','多标签效果'];
let handleNav = (index)=>{
    console.log(index)
    activeTab.value = index;
}

// 新增
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 getMattersList(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 getMattersList(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 getMattersList = (pageIndex, pageSize) => {
    return new Promise(async (resolve) => {
        let param = {
            pageIndex,
            pageSize
        }

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

}

</script>

<style scoped>
.all-body{
    /* #ifdef APP-PLUS */
    top:88rpx;
    height: calc(100vh - 44px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:100rpx;
    height: calc(100vh - 48px);
    /* #endif */
   
}
/*.market-con{

} */

.nav-list{
    display: flex;
    flex-wrap: wrap;
    /* #ifdef APP-PLUS */
    padding:80rpx 30rpx 0;
    /* #endif */
    /* #ifndef APP-PLUS */
    padding:20rpx 30rpx 0;
    /* #endif */
}
.nav-list .nav-item{
    background-color:#05A3F4;
    border-radius: 10rpx;
    color:#FFFFFF;
    font-size:28rpx;
    text-align: center;
    padding:10rpx 25rpx;
    margin-right:15rpx;
    margin-bottom:20rpx;
}
.nav-list .nav-item:nth-child(3n){
    margin-right:0;
}

.nav-list .nav-item.active{
    background-color: #fff;
    color:#3384DF;
    font-weight: bold;

}

.report-list .r-list{
    align-items:flex-start;
}


.scroll-h {
    /* #ifdef APP-PLUS */
    height: calc(100vh - 155px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 135px);
    /* #endif */
}

.white-bg {
    padding-top:10rpx;
    padding-bottom: 10rpx;
}
.report-list .title{
    display: flex;
}
</style>