feat: 主图组件开发中

components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ImageList: typeof import('./src/components/common/ImageList.vue')['default']
     ListInfo: typeof import('./src/components/list/ListInfo.vue')['default']
     ListPagination: typeof import('./src/components/list/ListPagination.vue')['default']
     MiniListItem: typeof import('./src/components/detail/MiniListItem.vue')['default']

src/components/common/ImageList.vue

+<template>
+  <div v-if="images.length" class="w-[455px]">
+    <div class="w-full">
+      <img class="h-[342px] w-full" :src="currentImage" />
+    </div>
+    <div class="relative mt-[13px]">
+      <div class="flex space-x-[10px] overflow-x-hidden">
+        <div v-for="(image, index) of images" :key="index" class="flex-none">
+          <img
+            ref="imgRef"
+            class="h-[72px] w-[90px] cursor-pointer"
+            :src="image"
+            @click="changeIndex(index)"
+          />
+        </div>
+      </div>
+      <div
+        class="image-icon-bg__left absolute left-0 top-0 flex h-[72px] w-[46px] cursor-pointer items-center"
+        @click="changeIndex(currentIndex - 1)"
+      >
+        <img class="ml-1 h-[30px] w-[30px]" src="@/assets/images/image-left.png" />
+      </div>
+      <div
+        class="image-icon-bg__right absolute right-0 top-0 flex h-[72px] w-[46px] cursor-pointer items-center"
+        @click="changeIndex(currentIndex + 1)"
+      >
+        <img class="mr-1 h-[30px] w-[30px]" src="@/assets/images/image-right.png" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    images: string[];
+  }>(),
+  {
+    images: () => [],
+  },
+);
+
+const currentIndex = ref(0);
+
+const imgRef = ref<null | HTMLImageElement[]>(null);
+
+/** 当前选中图片 */
+const currentImage = computed(() => {
+  return props.images[currentIndex.value];
+});
+
+const handleScroll = (index: number) => {
+  const el = imgRef.value?.[index];
+  if (el) {
+    el.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center',
+    });
+  }
+};
+
+watch(currentIndex, (val) => {
+  handleScroll(val);
+});
+
+const changeIndex = (index: number) => {
+  const max = props.images.length - 1;
+  let i = index;
+  if (index < 0) {
+    i = 0;
+  } else if (index > max) {
+    i = max;
+  }
+  currentIndex.value = i;
+};
+</script>
+
+<style lang="scss">
+.image-icon-bg {
+  &__left {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
+  }
+  &__right {
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
+  }
+}
+</style>

src/components/detail/DetailMain.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <div class="mt-5 flex py-5">
+    <div class="mt-5 py-5">
       <div class="flex h-10 items-center">
         <div class="font-yahei text-[32px] font-bold leading-10 text-[#333333]">
           {{ detail.name }}
@@ -43,8 +43,16 @@
           </div>
         </div>
       </div>
-      <div>
-        <img src="" alt="" />
+      <div class="mt-4">
+        <ImageList
+          :images="[
+            ...detail.imgUrlList,
+            ...detail.imgUrlList,
+            ...detail.imgUrlList,
+            ...detail.imgUrlList,
+            ...detail.imgUrlList,
+          ]"
+        ></ImageList>
       </div>
       <div>
         <slot></slot>
@@ -57,6 +65,7 @@
 import { useItemStatus } from '@/composable/useItemStatus.ts';
 import { AuthStatus, DetailType } from '@/types/enum.ts';
 import { computed } from 'vue';
+import ImageList from '@/components/common/ImageList.vue';
 
 export interface HeaderDetail {
   name: string;
@@ -64,6 +73,7 @@ export interface HeaderDetail {
   statusName?: string;
   isSuper?: number;
   isSuperName?: string;
+  imgUrlList: string[];
 }
 
 const props = withDefaults(