|
|
@@ -0,0 +1,224 @@
|
|
|
+<!-- 库存图片查看弹窗 -->
|
|
|
+<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 v-if="total > 10" class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :page-sizes="[12, 24, 48, 96]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <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 {
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.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 {
|
|
|
+ transform: scale(1.05);
|
|
|
+ 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 {
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 20px 0;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+</style>
|
