client-app/pages/ledger/components/user-list.vue

<template>
    <view class="hc-all-user-list">
        <view class="hc-user-bar" v-for="item in dataList" :key="item.id" @click="checkChange(item.id)">
            <view class="check-box">
                <text class="i-material-symbols-check-box-rounded icon" v-if="modelData.indexOf(item.id) > -1"/>
                <text class="i-material-symbols-check-box-outline-blank icon check" v-else/>
            </view>
            <view class="content-bar">
                <view class="avatar">{{item.avatarName}}</view>
                <view class="content">
                    <view class="name">{{item.createUserName}}</view>
                    <view class="text">{{item.recordTime}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from "vue";

//参数
const props = defineProps({
    modelValue: {
        type: Array,
        default: () => ([]),
    },
    data: {
        type: Array,
        default: () => ([]),
    },
})

//基础变量
const modelData = ref(props.modelValue)
const dataList = ref(props.data)

//监听选中项
watch(() => [
    props.modelValue
], ([val]) => {
    modelData.value = val
}, {deep: true})

//监听列表数据
watch(() => [
    props.data
], ([val]) => {
    dataList.value = val
}, {deep: true})

//事件
const emit = defineEmits(['update:modelValue', 'change'])

//选择数据改变
const checkChange = (id) => {
    const data = modelData.value, index = data.indexOf(id);
    if (index > -1) {
        modelData.value.splice(index, 1)
    } else {
        modelData.value.push(id)
    }
    emit('update:modelValue', modelData.value)
    emit('change', modelData.value)
}

//获取选中的数据
const getCheckData = () => {
    return modelData.value
}

//导出
defineExpose({
    getCheckData
})
</script>

<style lang="scss" scoped>
.hc-all-user-list {
    position: relative;
    margin-top: 8rpx;
    margin-bottom: 10rpx;
    .hc-user-bar {
        position: relative;
        background: white;
        display: flex;
        align-items: center;
        padding: 9rpx 0;
        .check-box {
            width: 40rpx;
            height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 25rpx;
            .icon {
                width: 38rpx;
                height: 38rpx;
                color: #007aff;
            }
            .icon.check {
                color: #c8c9cc;
            }
        }
        .content-bar {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 18rpx;
            flex: 1;
            .avatar {
                position: relative;
                margin-right: 24rpx;
                height: 66rpx;
                width: 66rpx;
                background: #2b8cf5;
                border-radius: 8rpx;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 26rpx;
            }
            .content {
                position: relative;
                padding-right: 18rpx;
                flex: 1;
                .text {
                    font-size: 25rpx;
                    color: #7A7B7C;
                    margin-top: 3rpx;
                }
            }
        }
    }
    .hc-user-bar + .hc-user-bar {
        .content-bar::before{
            content: "";
            position: absolute;
            top: -10rpx;
            height: 2rpx;
            width: 100%;
            background: #eee;
        }
    }
}
</style>