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 v-if="data && data.length > 0">
                <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.volunteerServiceId) ? 'item-radio-active' : 'item-radio']"
                            @click="activeDate(item)"></view>
                    </view>
                    <view class="item-main flex_c_s_l" @click="onClick(item)">
                        <view class="item-header flex_c_s">
                            <view class="item-title">{{ item.name }}</view>
                            <view class="item-tags">

                                <!-- <view v-if="item.auditStatus === '20'"  :class="[SERVER_STYLE[item.auditStatus]]">{{
                                    SERVER[item.auditStatus] }}</view>
                                <view v-else  :class="[AUDITSTATUS_STYLE[item.auditStatus]]">{{
                                    AUDITSTATUS[item.auditStatus] }}</view> -->
                                    <dict-tag v-if="item.auditStatus === '20'" :options="volunteer_service_service_status" :value="String(item.serviceStatus)"  />
                                    <dict-tag v-else :options="volunteer_service_audit_status" :value="String(item.auditStatus)"  />

                                </view>
                        </view>

                        <view class="item-text">{{ item.serviceDescribe }}</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.unit }}
                                </view>
                            </view>
                            <view class="item-date">{{ item.applyTime }}</view>
                        </view>
                    </view>

                </view>
            </view>
            <view v-else>
                <NoneView value="暂无服务数据"></NoneView>
            </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 && activeIds.length !== 0) ? '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';
import { onShow } from '@dcloudio/uni-app';
import NoneView from '@/components/NoneView/index.vue';
import { volunteerList, volunteerServiceUp, volunteerServiceDown, volunteerServiceDelete } from '@/api/volunteer';
import { useDict } from '@/utils/dict.js'
import DictTag from '@/components/DictTag/index.vue'
const {
	volunteer_service_audit_status,//志愿者服务审核状态
    volunteer_service_service_status,//志愿者服务服务状态
} = useDict('volunteer_service_audit_status','volunteer_service_service_status');

const isAdmin = ref(true);
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 = async () => {
    isRefreshing.value = true;
    await getList();
    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.volunteerServiceId)) {
            activeIds.value = activeIds.value.filter(item => item !== record.volunteerServiceId)
            return;
        }
        activeIds.value.push(record.volunteerServiceId);
    } 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.volunteerServiceId);
            return
        }
        activeIds.value = [];
    } catch (error) {
        console.log("TCL: activeAll -> error", error)
    }
};

const clearActive = () => {
    activeIds.value = [];
    getList();
}

const onAdd = async () => {
    try {
        uni.navigateTo({
            url: `/pages_home/pages/serviceManagement/index`
        })
    } catch (error) {
        console.log("TCL: onAdd -> error", error)

    }
}
const onUp = async () => {
    try {
        const res = await volunteerServiceUp(activeIds.value);
        if (res.code === 200) {
            uni.showToast({
                title: '上线成功',
                icon: 'success'
            })
            clearActive();

            return
        }
        throw res.msg || '上线失败！';
    } catch (error) {
        console.log("TCL: onUp -> error", error)
        uni.showToast({
            title: error,
            icon: 'none'
        })
    }
}
const onDelete = async () => {
    try {
        uni.showModal({
            title: '提示',
            content: '确定要删除所选服务吗？',
            success: async (res) => {
                if (res.confirm) {
                    // 调用删除接口
                    try {
                        await volunteerServiceDelete(activeIds.value);
                        uni.showToast({ title: '删除成功' });
                        clearActive();
                    } catch (err) {
                        uni.showToast({ title: '删除失败', icon: 'none' });
                    }
                }
            }
        });
    } catch (error) {
        console.log("TCL: onDelete -> error", error)

    }
}

const onClick = async (record) => {
    console.log("TCL: onClick -> record", record)
    try {
        uni.navigateTo({
            url: `/pages_home/pages/serviceManagement/index?volunteerServiceId=${record.volunteerServiceId}`
        })
    } catch (error) {
        console.log("TCL: onAdd -> error", error)

    }
};


const getList = async () => {
    try {
        const res = await volunteerList();
        if (res.code == 200) {
            console.log("TCL: getList -> res", res)
            data.value = res.rows;
        }
    } catch (error) {
        console.log("TCL: getList -> error", error)

    } finally {
        isRefreshing.value = false;
    }
}
onShow(() => {
    getList();
})
</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-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;
            width: 100%;
        }

        .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>