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

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="'业务中心'" 
            :leftFlag="false" :rightFlag="false" 
        ></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

         <!-- 搜索 -->
         <view class="search">
            <uni-search-bar class="custom-search" radius="28" 
                placeholder="请输入您想查询的内容或服务"
                clearButton="auto" cancelButton="none" 
                bgColor="#6FA2F8" textColor="#ffffff"
                @confirm="handleSearch"  
            />
        </view>

        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h"
        >
            <!-- 首页日常服务 -->
            <view class="white-bg">
                <view class="w-b-title">
                    首页日常服务
                    <view type="primary" @click="handleEdit" class="btn-edit">编 辑</view>
                </view>
            </view>

            <!-- 企业日常 -->
            <view class="white-bg">
                <view class="w-b-title" @click="handleExpand">企业日常
                    <text>{{expandFlag?'展开':'收起'}}<i :class="{iconfont:true,'icon-up':!expandFlag,'icon-down':expandFlag}"></i></text>
                </view>
                <view class="logo-list" v-if="!expandFlag">
                    <view  v-for="(item,index) in list1" class="l-l-item" :key="index">
                        <img :src="item.imgSrc" />
                        <text class="font-gray">{{ item.name }}</text>
                    </view>
                </view>
            </view>

            <!-- CRM系统 -->
            <view class="white-bg">
                <view class="w-b-title" @click="handleExpand2">CRM系统
                    <text>{{expandFlag2?'展开':'收起'}}<i :class="{iconfont:true,'icon-up':!expandFlag2,'icon-down':expandFlag2}"></i></text>
                </view>
                <view class="logo-list" v-if="!expandFlag2">
                    <view  v-for="(item,index) in list2" class="l-l-item" :key="index" @click="handleJump(item.url)">
                        <uni-badge :text="item.badgeCount" size="small"></uni-badge>
                        <img :src="item.imgSrc" />
                        <text class="font-gray">{{ item.name }}</text>
                    </view>
                </view>
            </view>

            <!-- 供应链采纳 -->
            <view class="white-bg">
                <view class="w-b-title">供应链采纳
                    <text>展开<i :class="{iconfont:true,'icon-down':true}"></i></text>
                </view>
            </view>

            <!-- PLM系统 -->
            <view class="white-bg">
                <view class="w-b-title">PLM系统
                    <text>展开<i :class="{iconfont:true,'icon-down':true}"></i></text>
                </view>
            </view>

            <!-- 底部加高度来避免tabbar遮挡 -->
            <view class="bottom-height"></view>
        </mescroll-uni>
    </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 { businessDaily,businessCRMList } from '@/api/business.js';

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

// 查询搜索跳转
let handleSearch = ()=>{

}

// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
    mescrollRef.value = mescroll;
};
const downOption = ref({
    auto: true,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            // mescroll.resetUpScroll();
        },500);
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}

// 日常服务编辑
let handleEdit=()=>{

}

// 图标查询处理
// 1.企业日常
let list1 = ref([])
let getBusinessDailyList= async ()=>{
    let busRes = await businessDaily({});
    list1.value = busRes.list || [];
}
getBusinessDailyList();
// 企业日常-右侧展开
let expandFlag=ref(false);
let handleExpand = ()=>{
    expandFlag.value = !expandFlag.value;
}

// 2.CRM系统
let list2 = ref([])
let getBusinessCRMList= async ()=>{
    let busRes = await businessCRMList({});
    list2.value = busRes.list || [];
}
getBusinessCRMList();
// 企业日常-右侧展开
let expandFlag2=ref(false);
let handleExpand2 = ()=>{
    expandFlag2.value = !expandFlag2.value;
}

// 跳转
let handleJump=(url)=>{
    console.log(url)
    if(url){
        uni.navigateTo({ url })
    }
}

</script>

<style scope>
.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 120px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 140px) !important;
    /* #endif */
}
:deep(.mescroll-upwarp){
  display:none
}
</style>