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>

         <!-- 搜索  @confirm="handleSearch"  -->
         <view class="search">
            <uni-search-bar class="custom-search" radius="28" 
                placeholder="请输入您想查询的内容或服务"
                clearButton="auto" cancelButton="none" 
                bgColor="#6FA2F8" textColor="#ffffff"
                @focus="handleFocus"
            />
        </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="handleJump('/pages/business/editDaily')" class="btn-edit">编 辑</view>
                </view>
            </view>

            <!-- 业务列表 -->
            <view class="white-bg" v-for="(item,index) in list" :key="index">
                <view class="w-b-title" @click="handleExpand(item)">{{ item.bizName }}
                    <text>{{item.expandFlag?'展开':'收起'}}<i :class="{iconfont:true,'icon-up':!item.expandFlag,'icon-down':item.expandFlag}"></i></text>
                </view>
                <block  v-if="!item.expandFlag">
                    <view class="logo-list" v-if="item.children&&item.children.length>0">
                        <block v-for="(item2,index2) in item.children">
                            <view  class="l-l-item"
                                @click="handleJump(item2.bizUrl)">
                                <img :src="'static/images/business/'+item2.icon+'.png'" />
                                <text class="font-gray">{{ item2.bizName }}</text>
                            </view>
                        </block>
                    </view>
                </block>
            </view>

            <!-- 底部加高度来避免tabbar遮挡 -->
            <view class="bottom-height"></view>
        </mescroll-uni>
    </view>
</view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop} from '@/utils/system.js'
import { businessList } from '@/api/business.js';
import {showLoading,hideLoading} from '@/utils/message.js'
import { initTree } from '@/utils/common.js'

onLoad(async(opt) => {
    uni.setStorageSync('page_cache',true);
    try {
        showLoading("加载中...")
        getList();
        hideLoading();
    } catch (error) {
        hideLoading();
    }
})

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

// 查询列表
let list = ref([]);
let getList = async()=>{
   
    let res = await businessList({});//查询所有业务
    let arr = res || [];
    let bizList = initTree(arr,0,'bizId');//递归获取数组处理
    bizList.forEach(item => {
        item.expandFlag = false;
    });
    list.value = bizList;
}

// 右侧展开
let handleExpand = (item)=>{
    item.expandFlag = !item.expandFlag;
}

// 获取input 焦点跳转
let handleFocus=()=>{
    uni.navigateTo({url:'/pages/search/search?type=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 {
        getList();
        // setTimeout(async ()=>{
        //     // mescroll.resetUpScroll();
        // },500);
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}

// 跳转
let handleJump=(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>