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

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

        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h"
        >
            <view class="white-bg">
                <view v-for="(item,index) in list" :key="index">
                    <view class="bus-title">{{ item.bizName }}</view>
                    <view class="bus-list">
                        <view class="bus-tips" :class="{'bus-blue':item2.isDaily}" 
                            v-for="(item2,index2) in item.children" :key="index2" 
                            @click="handleCheck(item2)"
                        >
                            {{ item2.bizName }}
                            <view class="bus-icon" v-if="item2.isDaily">
                                <uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="bottom-height"></view>
            </view>
        </mescroll-uni>

        <!-- 提交按钮 -->
        <view class="bus-btn-con">
            <view class="bus-btn" @click="handleSubmit">提 交（{{count}}）</view>
        </view>
    </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';

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

// 查询列表
let list = ref([]);
let count = ref(7);
let getList = async()=>{
    let res = await businessList({});
    let arr = res.list || [];
    arr.forEach(item => {
        item.expandFlag = false;
    });
    list.value = arr;
}

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

// 选择常用
const handleCheck=(item)=>{
    item.isDaily = !item.isDaily;
    if(item.isDaily){
        count.value++;
    }else{
        count.value--;
    }
   
}

// 提交
const handleSubmit=(item)=>{

}
</script>

<style scoped>
.scroll-h{
   height: 100vh;
}

.white-bg{
    width: 690rpx;
    margin-bottom:0;
    border-radius: 8px 8px 0 0;
}

:deep(.mescroll-upwarp){
  display:none
}

.bus-title{
    font-weight: bold;
    margin:0rpx 0 30rpx;
}

.bus-list{
    display: flex;
    align-items: center;
    gap:10px;
    flex-flow:row wrap;
    margin-bottom:40rpx;
}
.bus-list .bus-tips{
    /* width:210rpx; */
    min-width: calc(100% / 3 - 30px); 
    height:60rpx;
    line-height: 60rpx;
    font-size:28rpx;
    border-radius: 5px;
    text-align: center;
    padding:0 10px;
    background-color: #fff;
    color:#333333;
    border:1px solid #E8E8E8;
}
.bus-list .bus-blue{
    border:1px solid #05A3F4;
    background-color: #05A3F4;
    color:#fff;
    position: relative;
}
.bus-list .bus-blue .bus-icon{
    position:absolute;
    right:-10rpx;
    top:-10rpx;
    background-color: #02C74C;
    width:32rpx;
    height:32rpx;
    line-height: 32rpx;
    border-radius: 50%;
    text-align: center;
}

.bus-btn-con{
    position: fixed;
    bottom:0;
    background-color: #fff;
    width:100%;
    padding:70rpx 0;
}
.bus-btn-con .bus-btn{
    background-color: #05A3F4;
    color:#fff;
    text-align: center;
    width:360rpx;
    height:80rpx;
    line-height: 80rpx;
    margin:0 auto;
    border-radius: 40rpx;
}
</style>