增加 常用服务查询及修改

src/pages/business/editDaily.vue

@@ -0,0 +1,189 @@
+<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>