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

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'业务中心'" 
                :leftFlag="false" :rightFlag="false"   v-if="!searchShow"
            ></customHeader>
            <customHeader v-else ref="customHeaderRef" :title="'搜索'" 
                :leftFlag="true" :rightFlag="false"
                @back="handleBack" :searchType="1"
            ></customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 搜索  @confirm="handleSearch"  -->
            <customSearch v-if="searchShow"   
                :searchKeywords="searchText" 
                :searchType="searchTypeObj" 
                @confirm="handleSearchConfirm"
            ></customSearch>
            <view class="search"  v-else>
                <uni-search-bar class="custom-search" radius="28" 
                    placeholder="请输入您想查询的内容或服务"
                    clearButton="auto" cancelButton="none" 
                    bgColor="#6FA2F8" textColor="#ffffff"
                    @focus="handleSearchFocus"
                    v-model="searchText"
                />
            </view>

            <!-- 下拉刷新 -->
            <mescroll-uni  v-if="!searchShow" 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,onShow } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import customSearch from '@/components/customSearch.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 searchShow = ref(false);
let searchText = ref(undefined);
let searchTypeObj = ref({typeId:2});

// 搜索返回操作
const handleBack=()=>{
    searchShow.value=false;
}
// 获取input 焦点跳转
const handleSearchFocus=()=>{
    searchShow.value = true;
}

// 搜索完返回处理
const handleSearchConfirm = (param1,param2)=>{
    // console.log(param1,param2)
    searchText.value=param2.value;;
    searchShow.value=false;
}

// 查询列表
let list = ref([]);
let getList = async()=>{
    let searchValue = searchText.value?searchText.value:undefined;
    let res = await businessList({searchValue});//查询所有业务
    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;
}

// 下拉刷新
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>