beautifier-web/src/views/store/index.vue

<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键词" prop="keyword">
                    <el-select v-model="queryParams.store_id" placeholder="请选择门店" style="width: 100%">
                        <el-option v-for="item in storeLists" :key="item.store_id" :label="`${item.account}`"
                            :value="item.store_id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="handleQuery">
                        搜索
                    </el-button>
                    <el-button :icon="Refresh" @click="resetQuery">
                        重置
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="userList" border stripe style="width: 100%">
                <el-table-column prop="account" label="用户账号" align="center" />
                <el-table-column prop="username" label="用户名" align="center" />
                <el-table-column prop="nickname" label="昵称" align="center" />
                <!--头像可点击查看大图-->
                <el-table-column prop="avatar" label="头像" align="center" width="80">
                    <template #default="{ row }">
                        <el-image v-if="row.avatar" :src="row.avatar" :preview-src-list="[row.avatar]"
                            preview-teleported fit="cover" class="avatar-thumb" hide-on-click-modal />
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center" />
                <el-table-column prop="district_text" label="地区" align="center" />
                <el-table-column prop="gender_text" label="性别" align="center" />
                <el-table-column prop="birthday" label="生日" align="center" />
                <el-table-column prop="age" label="年龄" align="center" />
                <el-table-column prop="validity_time" label="授权到期时间" align="center" />
            </el-table>

            <pagination v-if="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
                @pagination="handleQuery" />
        </el-card>

        <!-- 用户档案弹窗 -->
        <el-dialog v-model="archiveDialogVisible" title="用户档案" width="640px">
            <el-table v-loading="archiveLoading" :data="archiveList" border stripe style="width: 100%">
                <el-table-column label="图片" align="center" width="120">
                    <template #default="{ row }">
                        <el-image v-if="row.cover" :src="row.cover" :preview-src-list="[row.cover]" preview-teleported
                            fit="cover" class="archive-cover" hide-on-click-modal />
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" align="center" min-width="160" />
                <el-table-column label="操作" align="center" width="150">
                    <template #default="{ row }">
                        <el-button text @click="archiveDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-if="archiveTotal > 0" :total="archiveTotal" v-model:page="archiveParams.page"
                v-model:limit="archiveParams.size" @pagination="loadArchive" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { getUserList, getUserarchive, getUserarchiveDetail } from '@/api/user';
import { getStoreAccountList, getStoreUserList } from '@/api/store/index';
import { ElMessage } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
const storeLists = ref<any[]>([]);
const getStoreLists = async () => {
    const { data } = await getStoreAccountList({});
    storeLists.value = data || [];
    console.log(data, '门店账号列表')
};
getStoreLists();

const loading = ref(false);
const total = ref(0);
const userList = ref<any[]>([]);
const queryFormRef = ref();

// 档案弹窗相关
const archiveDialogVisible = ref(false);
const archiveLoading = ref(false);
const archiveTotal = ref(0);
const archiveList = ref<any[]>([]);
const currentUserId = ref<number | null>(null);
const archiveParams = reactive({
    page: 1,
    size: 10
});

// 打开档案弹窗
function openArchiveDialog(row: any) {
    currentUserId.value = row.id;
    archiveDialogVisible.value = true;
    archiveParams.page = 1;
    archiveParams.size = 10;
    loadArchive();
}

// 加载档案列表
function loadArchive() {
    if (!currentUserId.value) return;
    archiveLoading.value = true;
    getUserarchive({ user_id: currentUserId.value, ...archiveParams })
        .then(({ data }: any) => {
            const list = Array.isArray(data) ? data : data?.data ?? data?.list ?? [];
            archiveList.value = list;
            archiveTotal.value =
                typeof data?.total === 'number' ? data.total : Array.isArray(data) ? data.length : list.length;
        })
        .catch((err: any) => {
            ElMessage.error(err.message || '获取用户档案失败');
        })
        .finally(() => {
            archiveLoading.value = false;
        });
}

const queryParams = reactive({
    page: 1,
    size: 10,
    store_id: 128
});

function handleQuery() {
    loading.value = true;
    getStoreUserList(queryParams)
        .then(({ data }: any) => {
            userList.value = data;
        })
        .catch((err: any) => {
            ElMessage.error(err.message || '获取授权列表');
        })
        .finally(() => {
            loading.value = false;
        });
}
//用户档案详情
const archiveDetail = async (row) => {
    const res = await getUserarchiveDetail({ id: row.id });
    console.log(res, 'res用户档案详情')
}
function resetQuery() {
    queryFormRef.value?.resetFields();
    queryParams.page = 1;
    handleQuery();
}

function handleSizeChange(size: number) {
    queryParams.size = size;
    queryParams.page = 1;
    handleQuery();
}

function handleCurrentChange(page: number) {
    queryParams.page = page;
    handleQuery();
}

onMounted(() => {
    handleQuery();
});
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}

.avatar-thumb {
    cursor: pointer;
}

.archive-cover {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    cursor: pointer;
}
</style>