修正多处问题

gym-manage-uniapp/components/index/BannerSwiper.vue

@@ -45,9 +45,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { getActiveBanners } from '@/api/main.js'
 
-const banners = [
+// 默认静态数据（后端无数据时作为兜底）
+const fallbackBanners = [
   {
     image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800&q=80',
     title: '突破自我',
@@ -68,9 +70,49 @@ const banners = [
   }
 ]
 
+// 先用回退数据初始化，确保 swiper 立即可见
+const banners = ref([...fallbackBanners])
+
 const currentIndex = ref(0)
-// 记录每张图片的加载状态
-const imageLoaded = ref(banners.map(() => false))
+const imageLoaded = ref(fallbackBanners.map(() => false))
+const isFetching = ref(false)
+
+async function fetchBanners() {
+  isFetching.value = true
+  try {
+    // 禁用缓存，确保每次获取最新数据
+    const res = await getActiveBanners({ cache: false })
+    // 处理后端返回数据：可能是数组或 { data: [...] }
+    const data = Array.isArray(res) ? res : (res?.data || [])
+
+    if (data.length > 0) {
+      // 映射后端字段到组件字段，替换回退数据
+      banners.value = data.map(item => ({
+        image: item.imageUrl || '',
+        title: item.title || '',
+        subtitle: item.subtitle || '',
+        desc: item.description || ''
+      }))
+      // 更新 imageLoaded 状态
+      imageLoaded.value = banners.value.map(() => false)
+      console.log('[BannerSwiper] 轮播图数据加载成功，共', data.length, '条')
+    } else {
+      console.log('[BannerSwiper] 后端无轮播图数据，使用回退数据')
+      // 保持已有的 fallbackBanners，无需重新赋值
+      imageLoaded.value = banners.value.map(() => false)
+    }
+  } catch (err) {
+    console.error('[BannerSwiper] 轮播图数据加载失败，使用回退数据:', err)
+    // 保持已有的 fallbackBanners，无需重新赋值
+    imageLoaded.value = banners.value.map(() => false)
+  } finally {
+    isFetching.value = false
+  }
+}
+
+onMounted(() => {
+  fetchBanners()
+})
 
 const onSwiperChange = (e) => {
   currentIndex.value = e.detail.current
@@ -86,30 +128,28 @@ const previewImage = (index) => {
   })
 }
 
-// 图片加载成功回调
 const onImageLoad = (index) => {
   imageLoaded.value[index] = true
   console.log(`图片 ${index} 加载完成`)
 }
 
-// 图片加载失败回调
 const onImageError = (index) => {
   console.error(`图片 ${index} 加载失败`)
-  // 可选：设置默认占位图
-  // banners[index].image = '默认图片URL'
 }
 </script>
 
 <style lang="scss" scoped>
 .banner-container {
-  position: relative;
-  z-index: 2;
   width: 100%;
+  padding: 0 24rpx;
+  box-sizing: border-box;
 }
 
 .banner-swiper {
   width: 100%;
-  height: 480rpx;
+  height: 360rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
 }
 
 .banner-content {
@@ -124,7 +164,6 @@ const onImageError = (index) => {
   height: 100%;
 }
 
-/* 添加图片占位符样式 */
 .image-placeholder {
   position: absolute;
   top: 0;
@@ -158,10 +197,10 @@ const onImageError = (index) => {
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 2; /* 确保遮罩层在占位符上面 */
+  background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.25) 100%);
+  z-index: 2;
 }
 
-/* 其余样式保持不变 */
 .banner-text {
   position: absolute;
   left: 36rpx;
@@ -198,9 +237,7 @@ const onImageError = (index) => {
   display: flex;
   justify-content: center;
   gap: 16rpx;
-  margin-top: -100rpx;
-  position: relative;
-  z-index: 3;
+  padding: 20rpx 0 8rpx;
 }
 
 .dot {