feat: 商品详情轮播通知修复、极光推送测试对接

env/.env

@@ -1,7 +1,7 @@
 VITE_APP_TITLE = 'BandhuBuy'
 VITE_APP_PORT = 9000
 
-VITE_UNI_APPID = '__UNI__3065F51'
+VITE_UNI_APPID = '__UNI__D38110B'
 VITE_WX_APPID = 'wxa2abb91f64032a2b'
 
 # h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base

manifest.config.ts

@@ -31,7 +31,10 @@ export default defineManifestConfig({
   'fallbackLocale': 'en',
   'h5': {
     router: {
-      // base: VITE_APP_PUBLIC_BASE,
+      base: VITE_APP_PUBLIC_BASE,
+    },
+    uniStatistics: {
+      enable: false,
     },
   },
   /* 5+App特有相关 */
@@ -49,7 +52,11 @@ export default defineManifestConfig({
       delay: 0,
     },
     /* 模块配置 */
-    modules: {},
+    modules: {
+      Share: {},
+      Camera: {},
+      Push: {},
+    },
     /* 应用发布信息 */
     distribute: {
       /* android打包配置 */
@@ -113,9 +120,177 @@ export default defineManifestConfig({
         },
       },
     },
+    uniStatistics: {
+      enable: true,
+    },
+    nativePlugins: {
+      'EL-MTPush': {
+        MTPUSH_ADVERTISINGID_IOS: '',
+        MTPUSH_APPKEY_ANDROID: '474b121831f9c027f15d6d32',
+        MTPUSH_APPKEY_IOS: '',
+        MTPUSH_CHANNEL_ANDROID: '',
+        MTPUSH_CHANNEL_IOS: '',
+        MTPUSH_DEFAULTINIT_IOS: '',
+        MTPUSH_GOOGLE_API_KEY: '',
+        MTPUSH_GOOGLE_APP_ID: '',
+        MTPUSH_GOOGLE_PROJECT_ID: '',
+        MTPUSH_GOOGLE_PROJECT_NUMBER: '',
+        MTPUSH_GOOGLE_STORAGE_BUCKET: '',
+        MTPUSH_HONOR_APPID: '',
+        MTPUSH_HUAWEI_APPID: '',
+        MTPUSH_ISPRODUCTION_IOS: '',
+        MTPUSH_MEIZU_APPID: '',
+        MTPUSH_MEIZU_APPKEY: '',
+        MTPUSH_OPPO_APPID: '',
+        MTPUSH_OPPO_APPKEY: '',
+        MTPUSH_OPPO_APPSECRET: '',
+        MTPUSH_PROCESS_ANDROID: '',
+        MTPUSH_VIVO_APPID: '',
+        MTPUSH_VIVO_APPKEY: '',
+        MTPUSH_XIAOMI_APPID: '',
+        MTPUSH_XIAOMI_APPKEY: '',
+        __plugin_info__: {
+          name: 'EngageLab MTPush 官方SDK',
+          description: 'EngageLab MTPush官方SDK HBuilder插件版本',
+          platforms: 'Android,iOS',
+          url: 'https://ext.dcloud.net.cn/plugin?id=10093',
+          android_package_name: 'com.bandhu.mm',
+          ios_bundle_id: '',
+          isCloud: true,
+          bought: 1,
+          pid: '10093',
+          parameters: {
+            MTPUSH_ADVERTISINGID_IOS: {
+              des: '[iOS]广告标识符（IDFA）如果不需要使用IDFA，可不填',
+              key: 'MTPush:ADVERTISINGID',
+              value: '',
+            },
+            MTPUSH_APPKEY_ANDROID: {
+              des: '[Android]EngageLab portal配置应用信息时分配的AppKey',
+              key: '',
+              value: '',
+            },
+            MTPUSH_APPKEY_IOS: {
+              des: '[iOS]EngageLab portal配置应用信息时分配的AppKey',
+              key: 'MTPush:APP_KEY',
+              value: '',
+            },
+            MTPUSH_CHANNEL_ANDROID: {
+              des: '[Android]用于统计分发渠道，不需要可填默认值developer-default',
+              key: '',
+              value: '',
+            },
+            MTPUSH_CHANNEL_IOS: {
+              des: '[iOS]用于统计分发渠道，不需要可填默认值developer-default',
+              key: 'MTPush:CHANNEL',
+              value: '',
+            },
+            MTPUSH_DEFAULTINIT_IOS: {
+              des: '[iOS]是否默认初始化，是填true，不是填false或者不填',
+              key: 'MTPush:DEFAULTINIT',
+              value: '',
+            },
+            MTPUSH_GOOGLE_API_KEY: {
+              des: '厂商google api_key,示例:G-asxa1232',
+              key: 'google_api_key',
+              value: '',
+            },
+            MTPUSH_GOOGLE_APP_ID: {
+              des: '厂商google mobilesdk_app_id,示例：G-12346578',
+              key: 'google_app_id',
+              value: '',
+            },
+            MTPUSH_GOOGLE_PROJECT_ID: {
+              des: '厂商google project_id ,示例：G-12346578',
+              key: 'project_id',
+              value: '',
+            },
+            MTPUSH_GOOGLE_PROJECT_NUMBER: {
+              des: '厂商google project_number,示例：G-12346578',
+              key: 'gcm_defaultSenderId',
+              value: '',
+            },
+            MTPUSH_GOOGLE_STORAGE_BUCKET: {
+              des: '厂商google storage_bucket,示例：G-12346578',
+              key: 'google_storage_bucket',
+              value: '',
+            },
+            MTPUSH_HONOR_APPID: {
+              des: '厂商HONOR-appId,示例：12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_HUAWEI_APPID: {
+              des: '厂商HUAWEI-appId,示例：appid=12346578',
+              key: 'com.huawei.hms.client.appid',
+              value: '',
+            },
+            MTPUSH_ISPRODUCTION_IOS: {
+              des: '[iOS]是否是生产环境，是填true，不是填false或者不填',
+              key: 'MTPush:ISPRODUCTION',
+              value: '',
+            },
+            MTPUSH_MEIZU_APPID: {
+              des: '厂商MEIZU-appId,示例：MZ-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_MEIZU_APPKEY: {
+              des: '厂商MEIZU-appKey,示例：MZ-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_OPPO_APPID: {
+              des: '厂商OPPO-appId,示例：OP-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_OPPO_APPKEY: {
+              des: '厂商OPPO-appkey,示例：OP-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_OPPO_APPSECRET: {
+              des: '厂商OPPO-appSecret,示例：OP-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_PROCESS_ANDROID: {
+              des: '[Android] Engagelab process，Engagelabsdk工作所在的进程，请填写 \':remote\', 注意:开头',
+              key: '',
+              value: '',
+            },
+            MTPUSH_VIVO_APPID: {
+              des: '厂商VIVO-appId,示例：12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_VIVO_APPKEY: {
+              des: '厂商VIVO-appkey,示例：12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_XIAOMI_APPID: {
+              des: '厂商XIAOMI-appId,示例：MI-12345678',
+              key: '',
+              value: '',
+            },
+            MTPUSH_XIAOMI_APPKEY: {
+              des: '厂商XIAOMI-appKey,示例：MI-12345678',
+              key: '',
+              value: '',
+            },
+          },
+        },
+      },
+    },
   },
   /* 快应用特有相关 */
-  'quickapp': {},
+  'quickapp': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
   /* 小程序特有相关 */
   'mp-weixin': {
     appid: VITE_WX_APPID,
@@ -129,20 +304,67 @@ export default defineManifestConfig({
       subPackages: true,
     },
     usingComponents: true,
+    uniStatistics: {
+      enable: false,
+    },
     // __usePrivacyCheck__: true,
   },
   'mp-alipay': {
     usingComponents: true,
     styleIsolation: 'shared',
+    uniStatistics: {
+      enable: false,
+    },
   },
   'mp-baidu': {
     usingComponents: true,
+    uniStatistics: {
+      enable: false,
+    },
   },
   'mp-toutiao': {
     usingComponents: true,
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'app-harmony': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-harmony': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-jd': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-kuaishou': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-lark': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-qq': {
+    uniStatistics: {
+      enable: false,
+    },
+  },
+  'mp-xhs': {
+    uniStatistics: {
+      enable: false,
+    },
   },
   'uniStatistics': {
-    enable: true, // 全局开启
+    enable: false, // 全局开启
     version: '2', // 开启新版uni统计，值为字符串
   },
   'vueVersion': '3',

package.json

@@ -4,7 +4,7 @@
   "version": "3.2.0",
   "packageManager": "pnpm@10.10.0",
   "description": "unibest - 最好的 uniapp 开发模板",
-  "update-time": "2025-08-28",
+  "update-time": "2025-09-01",
   "author": {
     "name": "feige996",
     "zhName": "菲鸽",

src/App.vue

@@ -1,12 +1,82 @@
-<script setup lang="ts">
+<script setup>
 import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
 import { usePageAuth } from '@/hooks/usePageAuth'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
 
+const mtpushModule = uni.requireNativePlugin('EL-MTPush')
 usePageAuth()
 
 onLaunch(() => {
   console.log('App Launch')
+  if (uni.getSystemInfoSync().platform === 'ios') {
+    mtpushModule.requestNotificationAuthorization((result) => {
+      const status = result.status
+      if (status < 2) {
+        uni.showToast({
+          icon: 'none',
+          title: '您还没有打开通知权限',
+          duration: 3000,
+        })
+      }
+    })
+  }
+
+  // mtpushModule.setCountryCode("US");
+  // mtpushModule.setTcpSSL(true)
+  mtpushModule.setSiteName('Singapore')
+  mtpushModule.setLoggerEnable(true)
+  mtpushModule.initPushService()
+  mtpushModule.addConnectEventListener((result) => {
+    const connectEnable = result.connectEnable
+    uni.$emit('connectStatusChange', connectEnable)
+  })
+
+  mtpushModule.addNotificationListener((result) => {
+    const notificationEventType = result.notificationEventType
+    const messageID = result.messageID
+    const title = result.title
+    const content = result.content
+    const extras = result.extras
+
+    uni.showToast({
+      icon: 'none',
+      title: JSON.stringify(result),
+      duration: 3000,
+    })
+  })
+
+  mtpushModule.addCustomMessageListener((result) => {
+    const type = result.type
+    const messageType = result.messageType
+    const content = result.content
+    uni.showToast({
+      icon: 'none',
+      title: JSON.stringify(result),
+      duration: 3000,
+    })
+  })
+
+  mtpushModule.addTagAliasListener((result) => {
+    uni.showToast({
+      icon: 'none',
+      title: JSON.stringify(result),
+      duration: 3000,
+    })
+  })
+
+  if (uni.getSystemInfoSync().platform === 'ios') {
+    mtpushModule.addLocalNotificationListener((result) => {
+      const messageID = result.messageID
+      const title = result.title
+      const content = result.content
+      const extras = result.extras
+      uni.showToast({
+        icon: 'none',
+        title: JSON.stringify(result),
+        duration: 3000,
+      })
+    })
+  }
 })
 onShow(() => {
   console.log('App Show')

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "BandhuBuy",
-  "appid": "__UNI__3065F51",
+  "appid": "__UNI__D38110B",
   "description": "",
   "versionName": "1.0.0",
   "versionCode": "100",
@@ -15,7 +15,11 @@
       "autoclose": true,
       "delay": 0
     },
-    "modules": {},
+    "modules": {
+      "Share": {},
+      "Camera": {},
+      "Push": {}
+    },
     "distribute": {
       "android": {
         "permissions": [
@@ -79,9 +83,177 @@
     },
     "compatible": {
       "ignoreVersion": true
+    },
+    "uniStatistics": {
+      "enable": true
+    },
+    "nativePlugins": {
+      "EL-MTPush": {
+        "MTPUSH_ADVERTISINGID_IOS": "",
+        "MTPUSH_APPKEY_ANDROID": "474b121831f9c027f15d6d32",
+        "MTPUSH_APPKEY_IOS": "",
+        "MTPUSH_CHANNEL_ANDROID": "",
+        "MTPUSH_CHANNEL_IOS": "",
+        "MTPUSH_DEFAULTINIT_IOS": "",
+        "MTPUSH_GOOGLE_API_KEY": "",
+        "MTPUSH_GOOGLE_APP_ID": "",
+        "MTPUSH_GOOGLE_PROJECT_ID": "",
+        "MTPUSH_GOOGLE_PROJECT_NUMBER": "",
+        "MTPUSH_GOOGLE_STORAGE_BUCKET": "",
+        "MTPUSH_HONOR_APPID": "",
+        "MTPUSH_HUAWEI_APPID": "",
+        "MTPUSH_ISPRODUCTION_IOS": "",
+        "MTPUSH_MEIZU_APPID": "",
+        "MTPUSH_MEIZU_APPKEY": "",
+        "MTPUSH_OPPO_APPID": "",
+        "MTPUSH_OPPO_APPKEY": "",
+        "MTPUSH_OPPO_APPSECRET": "",
+        "MTPUSH_PROCESS_ANDROID": "",
+        "MTPUSH_VIVO_APPID": "",
+        "MTPUSH_VIVO_APPKEY": "",
+        "MTPUSH_XIAOMI_APPID": "",
+        "MTPUSH_XIAOMI_APPKEY": "",
+        "__plugin_info__": {
+          "name": "EngageLab MTPush 官方SDK",
+          "description": "EngageLab MTPush官方SDK HBuilder插件版本",
+          "platforms": "Android,iOS",
+          "url": "https://ext.dcloud.net.cn/plugin?id=10093",
+          "android_package_name": "com.bandhu.mm",
+          "ios_bundle_id": "",
+          "isCloud": true,
+          "bought": 1,
+          "pid": "10093",
+          "parameters": {
+            "MTPUSH_ADVERTISINGID_IOS": {
+              "des": "[iOS]广告标识符（IDFA）如果不需要使用IDFA，可不填",
+              "key": "MTPush:ADVERTISINGID",
+              "value": ""
+            },
+            "MTPUSH_APPKEY_ANDROID": {
+              "des": "[Android]EngageLab portal配置应用信息时分配的AppKey",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_APPKEY_IOS": {
+              "des": "[iOS]EngageLab portal配置应用信息时分配的AppKey",
+              "key": "MTPush:APP_KEY",
+              "value": ""
+            },
+            "MTPUSH_CHANNEL_ANDROID": {
+              "des": "[Android]用于统计分发渠道，不需要可填默认值developer-default",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_CHANNEL_IOS": {
+              "des": "[iOS]用于统计分发渠道，不需要可填默认值developer-default",
+              "key": "MTPush:CHANNEL",
+              "value": ""
+            },
+            "MTPUSH_DEFAULTINIT_IOS": {
+              "des": "[iOS]是否默认初始化，是填true，不是填false或者不填",
+              "key": "MTPush:DEFAULTINIT",
+              "value": ""
+            },
+            "MTPUSH_GOOGLE_API_KEY": {
+              "des": "厂商google api_key,示例:G-asxa1232",
+              "key": "google_api_key",
+              "value": ""
+            },
+            "MTPUSH_GOOGLE_APP_ID": {
+              "des": "厂商google mobilesdk_app_id,示例：G-12346578",
+              "key": "google_app_id",
+              "value": ""
+            },
+            "MTPUSH_GOOGLE_PROJECT_ID": {
+              "des": "厂商google project_id ,示例：G-12346578",
+              "key": "project_id",
+              "value": ""
+            },
+            "MTPUSH_GOOGLE_PROJECT_NUMBER": {
+              "des": "厂商google project_number,示例：G-12346578",
+              "key": "gcm_defaultSenderId",
+              "value": ""
+            },
+            "MTPUSH_GOOGLE_STORAGE_BUCKET": {
+              "des": "厂商google storage_bucket,示例：G-12346578",
+              "key": "google_storage_bucket",
+              "value": ""
+            },
+            "MTPUSH_HONOR_APPID": {
+              "des": "厂商HONOR-appId,示例：12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_HUAWEI_APPID": {
+              "des": "厂商HUAWEI-appId,示例：appid=12346578",
+              "key": "com.huawei.hms.client.appid",
+              "value": ""
+            },
+            "MTPUSH_ISPRODUCTION_IOS": {
+              "des": "[iOS]是否是生产环境，是填true，不是填false或者不填",
+              "key": "MTPush:ISPRODUCTION",
+              "value": ""
+            },
+            "MTPUSH_MEIZU_APPID": {
+              "des": "厂商MEIZU-appId,示例：MZ-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_MEIZU_APPKEY": {
+              "des": "厂商MEIZU-appKey,示例：MZ-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_OPPO_APPID": {
+              "des": "厂商OPPO-appId,示例：OP-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_OPPO_APPKEY": {
+              "des": "厂商OPPO-appkey,示例：OP-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_OPPO_APPSECRET": {
+              "des": "厂商OPPO-appSecret,示例：OP-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_PROCESS_ANDROID": {
+              "des": "[Android] Engagelab process，Engagelabsdk工作所在的进程，请填写 ':remote', 注意:开头",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_VIVO_APPID": {
+              "des": "厂商VIVO-appId,示例：12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_VIVO_APPKEY": {
+              "des": "厂商VIVO-appkey,示例：12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_XIAOMI_APPID": {
+              "des": "厂商XIAOMI-appId,示例：MI-12345678",
+              "key": "",
+              "value": ""
+            },
+            "MTPUSH_XIAOMI_APPKEY": {
+              "des": "厂商XIAOMI-appKey,示例：MI-12345678",
+              "key": "",
+              "value": ""
+            }
+          }
+        }
+      }
+    }
+  },
+  "quickapp": {
+    "uniStatistics": {
+      "enable": false
     }
   },
-  "quickapp": {},
   "mp-weixin": {
     "appid": "wxa2abb91f64032a2b",
     "setting": {
@@ -92,26 +264,78 @@
     "usingComponents": true,
     "optimization": {
       "subPackages": true
+    },
+    "uniStatistics": {
+      "enable": false
     }
   },
   "mp-alipay": {
     "usingComponents": true,
-    "styleIsolation": "shared"
+    "styleIsolation": "shared",
+    "uniStatistics": {
+      "enable": false
+    }
   },
   "mp-baidu": {
-    "usingComponents": true
+    "usingComponents": true,
+    "uniStatistics": {
+      "enable": false
+    }
   },
   "mp-toutiao": {
-    "usingComponents": true
+    "usingComponents": true,
+    "uniStatistics": {
+      "enable": false
+    }
   },
   "uniStatistics": {
-    "enable": true,
+    "enable": false,
     "version": "2"
   },
   "vueVersion": "3",
   "locale": "en",
   "fallbackLocale": "en",
   "h5": {
-    "router": {}
+    "router": {
+      "base": "/"
+    },
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "app-harmony": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-harmony": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-jd": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-kuaishou": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-lark": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-qq": {
+    "uniStatistics": {
+      "enable": false
+    }
+  },
+  "mp-xhs": {
+    "uniStatistics": {
+      "enable": false
+    }
   }
 }

src/pages/productDetail/components/NotificationCarousel.vue

@@ -16,70 +16,75 @@ const props = defineProps({
   },
 })
 
-const notificationIndex = ref(0)
-const prevNotificationIndex = ref(0)
-const isAnimating = ref(false)
-let notificationTimer = null
-
-// 启动通知轮播
-function startNotificationCarousel() {
-  if (props.notifications.length === 0)
+const currentIndex = ref(0)
+const isTransitioning = ref(false)
+let carouselTimer = null
+
+// 获取下一个索引
+function getNextIndex() {
+  return (currentIndex.value + 1) % props.notifications.length
+}
+
+// 切换到下一个通知
+function switchToNext() {
+  if (props.notifications.length <= 1)
     return
 
-  notificationTimer = setInterval(() => {
-    // 触发动画效果
-    isAnimating.value = true
+  isTransitioning.value = true
 
-    // 保存当前索引
-    prevNotificationIndex.value = notificationIndex.value
+  // 立即切换到下一个索引
+  currentIndex.value = getNextIndex()
 
-    // 更新为下一个索引
-    notificationIndex.value = (notificationIndex.value + 1) % props.notifications.length
+  // 动画完成后重置过渡状态
+  setTimeout(() => {
+    isTransitioning.value = false
+  }, 500)
+}
 
-    // 动画结束后重置状态
-    setTimeout(() => {
-      isAnimating.value = false
-    }, 300) // 动画持续300ms
-  }, props.interval)
+// 启动轮播
+function startCarousel() {
+  if (props.notifications.length <= 1)
+    return
+
+  carouselTimer = setInterval(switchToNext, props.interval)
 }
 
-// 停止通知轮播
-function stopNotificationCarousel() {
-  if (notificationTimer) {
-    clearInterval(notificationTimer)
-    notificationTimer = null
+// 停止轮播
+function stopCarousel() {
+  if (carouselTimer) {
+    clearInterval(carouselTimer)
+    carouselTimer = null
   }
 }
 
-// 重启轮播（当 props 变化时）
+// 重启轮播
 function restartCarousel() {
-  stopNotificationCarousel()
-  notificationIndex.value = 0
-  prevNotificationIndex.value = 0
+  stopCarousel()
+  currentIndex.value = 0
+  isTransitioning.value = false
+
   nextTick(() => {
-    startNotificationCarousel()
+    startCarousel()
   })
 }
 
-// 监听 notifications 变化
+// 监听数据变化
 watch(() => props.notifications, restartCarousel, { deep: true })
-
-// 监听 interval 变化
 watch(() => props.interval, restartCarousel)
 
 // 生命周期
 onMounted(() => {
-  startNotificationCarousel()
+  startCarousel()
 })
 
 onUnmounted(() => {
-  stopNotificationCarousel()
+  stopCarousel()
 })
 
-// 暴露方法给父组件
+// 暴露方法
 defineExpose({
-  start: startNotificationCarousel,
-  stop: stopNotificationCarousel,
+  start: startCarousel,
+  stop: stopCarousel,
   restart: restartCarousel,
 })
 </script>
@@ -92,27 +97,20 @@ defineExpose({
   >
     <view
       v-for="(notification, index) in notifications"
-      :key="notification.id"
-      class="flex items-center rounded-full bg-#000000/60 py-8rpx pl-8rpx pr-14rpx transition-all duration-500 ease-in-out"
-      :class="{
-        'animate-pulse': notifications.length === 1 && isAnimating,
-        'animate-bounce': notifications.length === 1 && isAnimating,
-      }"
+      :key="`${notification.id}-${index}`"
+      class="absolute inset-0 flex items-center justify-start rounded-full bg-#000000/60 py-8rpx pl-8rpx pr-14rpx transition-all duration-500 ease-out"
       :style="{
-        opacity: index === notificationIndex ? 1 : 0,
-        transform: notifications.length === 1
-          ? (isAnimating ? 'translateY(0) scale(1.05)' : 'translateY(0) scale(1)')
-          : (index === notificationIndex ? 'translateY(0)'
-            : (index === prevNotificationIndex ? 'translateY(-100%)' : 'translateY(100%)')),
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        zIndex: index === notificationIndex ? 2 : 1,
+        opacity: index === currentIndex ? 1 : 0,
+        transform: index === currentIndex
+          ? 'translateY(0)'
+          : (isTransitioning && index === (currentIndex - 1 + notifications.length) % notifications.length
+            ? 'translateY(-100%)'
+            : 'translateY(100%)'),
+        zIndex: index === currentIndex ? 2 : 1,
       }"
     >
       <wd-img width="40rpx" round height="40rpx" :src="notification.headPic" />
-      <text class="ml-12rpx truncate text-24rpx text-white">
+      <text class="ml-12rpx flex-1 truncate text-24rpx text-white">
         {{ t('productDetail.notification.message', {
           name: notification.name,
           action: notification.kId === 0 ? t('productDetail.notification.opened') : t('productDetail.notification.joined'),