shuhi-ui/src/views/code/list/components/stock-image-modal.vue

<!-- 库存图片查看弹窗 -->
<template>
    <ele-modal form :width="900" v-model="visible" title="库存图片">
        <div class="stock-image-container">
            <!-- 图片网格 -->
            <div v-if="imageList.length > 0" class="image-grid">
                <div v-for="(imageUrl, index) in imageList" :key="index" class="image-item"
                    @click="handleImageClick(imageUrl, index)">
                    <el-image :src="imageUrl" fit="cover" class="stock-image" :preview-src-list="imageList"
                        :initial-index="index" :preview-teleported="true" @error="handleImageError" />
                </div>
            </div>

            <!-- 空状态 -->
            <div v-else-if="!loading" class="empty-state">
                <el-empty description="暂无库存图片" />
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-state">
                <el-skeleton :rows="3" animated />
            </div>
        </div>

        <template #footer>
            <!-- 分页 -->
            <div class="pagination-container" v-if="total > 10">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 100]" :total="total"
                    layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { EleMessage } from 'ele-admin-plus/es';
import request from '@/utils/request';

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 当前ISBN */
const currentIsbn = ref('');

/** 加载状态 */
const loading = ref(false);

/** 图片列表 */
const imageList = ref([]);

/** 分页信息 */
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

/** 关闭弹窗 */
const handleCancel = () => {
    visible.value = false;
};

/** 图片点击处理 */
const handleImageClick = (imageUrl, index) => {
    // Element Plus 的 el-image 组件会自动处理预览
    console.log('点击图片:', imageUrl, '索引:', index);
};

/** 图片加载错误处理 */
const handleImageError = (e) => {
    console.warn('图片加载失败:', e);
};

/** 分页大小改变 */
const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
    currentPage.value = 1;
    fetchStockImages();
};

/** 当前页改变 */
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
    fetchStockImages();
};

/** 获取库存图片 */
const fetchStockImages = async () => {
    if (!currentIsbn.value) return;

    loading.value = true;
    try {
        const response = await request.get(`/activation/bookActivationInfo/stockImgPage/${currentIsbn.value}`, {
            params: {
                pageNum: currentPage.value,
                pageSize: pageSize.value
            }
        });

        if (response.data.code === 200) {
            const data = response.data;
            imageList.value = data.rows || [];
            total.value = data.total || 0;
        } else {
            EleMessage.error(response.data.msg || '获取库存图片失败');
            imageList.value = [];
            total.value = 0;
        }
    } catch (error) {
        console.error('获取库存图片失败:', error);
        EleMessage.error('获取库存图片失败');
        imageList.value = [];
        total.value = 0;
    } finally {
        loading.value = false;
    }
};

/** 弹窗打开事件 */
const handleOpen = (isbn) => {
    if (isbn) {
        currentIsbn.value = isbn;
        visible.value = true;
        currentPage.value = 1;
        pageSize.value = 24;
        total.value = 0;
        imageList.value = [];

        nextTick(() => {
            fetchStockImages();
        });
    }
};

/** 监听弹窗关闭，清理数据 */
watch(visible, (newVal) => {
    if (!newVal) {
        currentIsbn.value = '';
        imageList.value = [];
        total.value = 0;
        currentPage.value = 1;
        loading.value = false;
    }
});

defineExpose({
    handleOpen
});
</script>

<style scoped>
.stock-image-container {
    height: 400px;
    overflow: auto;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    height: 150px;
    gap: 16px;
    margin-bottom: 20px;
}

.image-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
    height: 150px;
}

.image-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stock-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
}

.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.loading-state {
    padding: 20px;
}

.pagination-container {
    background: white;
    display: flex;
    justify-content: center;
    padding: 0 0;
    z-index: 10;
}
</style>