forestry-wx/src/tools/select-cpy-member/index.vue

<template>
    <z-paging ref="paging" safe-area-inset-bottom v-model="list" @query="query">
        <template #top>
            <ut-navbar title="选择企业负责人" :fixed="false" border></ut-navbar>
            <view class="pd-20">
                <ut-search margin="0" height="68rpx" fontSize="26rpx" placeholder="请输入企业负责人姓名" border v-model="form.keyword" @search="onRefresh"></ut-search>
            </view>
        </template>
        <view class="base-content pd-20">
            <view :class="{ active: item.id === checkedId }" v-for="(item, index) in list" :key="item.id" @click="clickItem(item)" class="bg-fff mb-10 pd-20 select-item-card d-flex">
                <view class="mr-20">
                    <ut-image :src="item.userInfo?.avatar" width="100rpx" height="100rpx"></ut-image>
                </view>
                <view class="flex1">
                    <view class="f-s-30 c-#333 f-w-600">{{ item?.userInfo?.name }}</view>
                    <view class="f-s-28 c-#999">手机号：{{ item.userInfo?.phone }}</view>
                </view>
            </view>
        </view>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const paging = ref<any>(null);
const list = ref<any[]>([]);
const form = ref({
    keyword: '',
});
const query = async (pageNum: number, pageSize: number) => {
    const res = await useClientRequest.get('/app/company/members', {
        ...form.value,
        pageNum: pageNum,
        pageSize: pageSize,
    });
    if (res.code == 200) {
        paging.value.complete(res.rows || []);
    }
};
const checkedId = ref(null);
const clickItem = (item: any) => {
    checkedId.value = item.id;
    uni.$emit('selectCpyMember', item);
    uni.navigateBack();
};
const onRefresh = () => {
    try {
        paging.value?.reload();
    } catch (e) {
        console.error('Error refreshing address list:', e);
    }
};
</script>
<style lang="scss" scoped>
.select-item-card {
    box-shadow: 0rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
    border: 1rpx solid #e8e8e8;

    &.active {
        border-color: #4456fb;
    }
}
</style>