leromro-mini/pages_home/pages/serviceManagement/list.vue

<template>
    <view>
        <view class="list-header flex_c_r">
            <view class="header-btn" v-if="isAdmin" @click="clickAdmin">
                <view class="icon-setting2"></view>
                <view>服务管理</view>
            </view>
            <view class="header-btn-close" v-else @click="clickAdmin">
                退出管理
            </view>
        </view>
        <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
            class="list-main" @scrolltolower="scrolltolower" scroll-y>
            <view>
                <view v-for="(item, index) in data" :key="index + 'lists'" class="list-item flex_c_c">
                    <view class="item-radio-box flex_c_c" v-if="!isAdmin">
                        <view :class="[activeIds.includes(item.id) ? 'item-radio-active' : 'item-radio']"
                            @click="activeDate(item)"></view>
                    </view>
                    <view class="item-main flex_c_s_l">
                        <view class="item-header flex_c_s">
                            <view class="item-title">{{ item.name }}</view>
                            <view class="item-tags">
                                <view class="item-tag-ok" v-if="item.status === '1'">已发布</view>
                                <view class="item-tag-ex" v-if="item.status === '2'">待审核</view>
                            </view>
                        </view>

                        <view class="item-text">{{ item.text }}</view>

                        <view class="item-footer flex_c_s">
                            <view class="item-price flex_c_c">
                                <view class="dor">￥</view>
                                <view class="price">{{ item.price }}/{{ item.desc }}
                                </view>
                            </view>
                            <view class="item-date">{{ item.date }}</view>
                        </view>
                    </view>

                </view>
            </view>
        </scroll-view>
        <view class="list-footer flex_s_c" v-if="!isAdmin">
           <view class="footer-radio-box flex_c_c" @click="activeAll()">
                <view :class="[activeIds.length === data.length ? 'item-radio-active' : 'item-radio']"
                ></view>
                <view class="footer-radio-text">全选</view>
           </view>
           <view class="footer-btn-add" @click="onAdd"> 新增 </view>
           <view class="footer-btn-up" @click="onUp"> 上线 </view>
           <view class="footer-btn-delete" @click="onDelete"> 删除 </view>
        </view>
    </view>

</template>

<script setup>
import { ref } from 'vue';

const isAdmin = ref(false);
const isRefreshing = ref(false)

const data = ref([
    {
        id: '1',
        name: '老人生活-健康监测',
        status: '1',
        text: '依托先进的便携式检测设备与专业检测技术，打破传统检测的时空限制，可提供上门检测服务，让客户在舒适的环境中完成健康筛查',
        price: '200',
        desc: '次',
        date: '2025-6-12 17:50'
    },
    {
        id: '2',
        name: '老人生活-健康监测',
        status: '2',
        text: '依托先进的便携式检测设备与专业检测技术，打破传统检测的时空限制，可提供上门检测服务，让客户在舒适的环境中完成健康筛查',
        price: '200',
        desc: '次',
        date: '2025-6-12 17:50'
    },
])

const activeIds = ref([])


const onCustomRefresh = () => {
    isRefreshing.value = true;

    setTimeout(() => {
        isRefreshing.value = false;
    }, 1000);
};
const scrolltolower = () => {

};

const clickAdmin = () => {
    console.log(1);

    isAdmin.value = !isAdmin.value;
};

const activeDate = async (record) => {
    try {
        if (activeIds.value.includes(record.id)) {
            activeIds.value = activeIds.value.filter(item => item !== record.id)
            return;
        }
        activeIds.value.push(record.id);
    } catch (error) {
        console.log("TCL: activeDate -> error", error)
    }
}

const activeAll = async () => { 
    try {
        if(data.value.length !== activeIds.value.length){
            activeIds.value = data.value.map(item => item.id);
                return
        }
        activeIds.value = [];
    } catch (error) {
        console.log("TCL: activeAll -> error", error)
    }
};

const onAdd =async () => {
    try {
        uni.navigateTo({
            url: `/pages_home/pages/serviceManagement/index`
        })
    } catch (error) {
		console.log("TCL: onAdd -> error", error)
        
    }
}
const onUp =async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onUp -> error", error)
        
    }
}
const onDelete =async () => {
    try {
        
    } catch (error) {
		console.log("TCL: onDelete -> error", error)
        
    }
}
</script>
<style lang="scss" scoped>
@import "./index.scss";

.list-main {
    padding: 20rpx 0;

    position: fixed;
    left: 0px;
    top: 92rpx;
    right: 0px;
    bottom: 0;
    background: #F5F5F5;

    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 176rpx;

}

.list-header {
    height: 92rpx;
    padding: 0 34rpx;

    .header-btn {
        border-radius: 6rpx;
        background: #FFF7E8;
        padding: 11.2rpx 23.9rpx;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        line-height: 32rpx;
        display: flex;
        align-items: center;
        letter-spacing: normal;
        color: #FF7D00;

        .icon-setting {
            margin-right: 6rpx;
        }
    }

    .header-btn-close {
        @extend .header-btn;
        color: #4E5969;
        background: #F2F3F5;
    }
}

.item-radio {
    width: 34rpx;
    height: 34rpx;
    border-radius: 34rpx;
    border: 4rpx solid #C4C4C4;
}

.item-radio-active {
    @extend .item-radio;
    border: none;
    @extend .whether-radio-active;
}

.list-item {
    padding: 24rpx 40rpx;
    margin-bottom: 20rpx;
    background: #fff;
    gap: 44rpx;

    .item-radio-box {
        min-width: 44rpx;
    }

    .item-main {
        flex: 1;
        gap: 22rpx;

        .item-header {
            width: 100%;

            .item-title {
                margin-top: 24rpx;
                font-family: PingFang SC;
                font-size: 36rpx;
                font-weight: normal;
                line-height: 44rpx;
                letter-spacing: normal;
                /* 外部/Neutral/10强调、正文标题 */
                color: #1D2129;
            }

            .item-tags {
                .item-tag {
                    border-radius: 4rpx;
                    padding: 4rpx 10rpx;
                    font-family: PingFang SC;
                    font-size: 30rpx;
                    font-weight: normal;
                    line-height: 40rpx;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    letter-spacing: normal;
                }

                .item-tag-ok {
                    @extend .item-tag;
                    background: #E8FFEA;
                    color: #00B42A;
                }

                .item-tag-ex {
                    @extend .item-tag;
                    background: #E8F3FF;
                    color: #165DFF;
                }
            }

        }

        .item-text {
            font-family: PingFang SC;
            font-size: 30rpx;
            font-weight: normal;
            line-height: 40rpx;
            text-align: justify;
            /* 浏览器可能不支持 */
            letter-spacing: normal;
            color: #86909C;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;

        }

        .item-footer {
            width: 100%;

            .item-price {
                font-family: PingFang SC;
                font-size: 32rpx;
                font-weight: normal;
                line-height: 42rpx;
                text-align: right;
                letter-spacing: normal;
                color: #F53F3F;

                /* ￥ */
                .dor {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    font-variation-settings: "opsz" auto;
                }

                /* 200/次 */

                .price {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 32rpx;
                    font-variation-settings: "opsz" auto;
                }



            }

            .item-date {
                font-family: PingFang SC;
                font-size: 28rpx;
                font-weight: normal;
                line-height: 40rpx;
                letter-spacing: normal;
                color: #86909C;
            }

        }
    }


}

.list-footer {
    position: fixed;
    bottom: 0rpx;
    left: 0px;
    right: 0;
    z-index: 999;
    background: #fff;
    padding-bottom: 60rpx;
    height: 176rpx;
    gap: 30rpx;

    padding: 24rpx 50rpx ;
    .footer-radio-box {
        margin-top: 28rpx;
        margin-right: 25rpx;
        .footer-radio-text{
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: normal;
            line-height: 44rpx;
            text-align: right;
            display: flex;
            align-items: center;
            letter-spacing: normal;
            /* 文字/text-5 */
            color: #1D2129;
            margin-left: 6rpx;
        }
    }
    .footer-btn {
        border-radius: 200rpx;
        box-sizing: border-box;
        /* 错误/danger-6 */
        border: 2rpx solid ;
        padding: 15rpx 32rpx;
        font-family: PingFang SC;
        font-size: 30rpx;
        font-weight: normal;
        line-height: 42rpx;
        display: flex;
        align-items: center;
        letter-spacing: normal;
    }
    .footer-btn-add {
        @extend .footer-btn;
        border-color: #F53F3F;
        color: #F53F3F;
    }
    .footer-btn-up {
        @extend .footer-btn;
        border-color: #FFECE8;
        background: #FFECE8;
        color: #F53F3F;
    }
    .footer-btn-delete { 
        @extend .footer-btn;
        border-color: #F53F3F;
        background: #F53F3F;
        color: #fff;
    }
}
</style>