[Human] chore(project): 初始化导入 91dj H5 客户端项目代码

从本地工程首次入库；.npmrc（含私有 npm 源 token）与 tsbuildinfo 已加入 .gitignore，不随仓库提交。
2026-10-08 14:22:35 +07:00
commit eada71e211
1421 changed files with 144498 additions and 0 deletions
@@ -0,0 +1,159 @@
+<template>
+  <div class="adv_swiper">
+    <div class="adv-container" v-if="props.list.length > 0" ref="advRef">
+      <van-swipe ref="swipeRef" :show-indicators="false" :autoplay="autoTime" class="custom-swipe" @change="onChange">
+        <van-swipe-item
+          @click="handleJumpAdv(item, props.clickType)"
+          v-for="item in props.list"
+          :key="item.id"
+          :style="{ height: props.height }"
+          class="adv-swiper-slide"
+        >
+          <DecryptImg @load="load" :src="item.cover" />
+        </van-swipe-item>
+      </van-swipe>
+      <!-- 自定义指示器 -->
+      <div class="indicator-wrapper" v-if="isShowIndicators">
+        <div class="custom-indicators">
+          <div
+            v-for="(_, index) in props.list"
+            :key="index"
+            :class="['indicator-dot', { active: currentIndex === index }]"
+            @click="swipeRef?.swipeTo(index)"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { jumpAdv } from '@/utils/index';
+import { nextTick, ref, watch } from 'vue';
+import type { SwipeInstance } from 'vant';
+import { AdImpressionType, setAdImpression } from '@/utils/eventReporter/adImpression';
+import { useRoute } from 'vue-router';
+import { reportAdClickEvent } from '@/utils/eventReporter/adClick';
+
+const route = useRoute();
+const emit = defineEmits(['load']);
+const swipeRef = ref<SwipeInstance>();
+
+const props = withDefaults(
+  defineProps<{
+    list: Types.App.AdsInfoListItem[];
+    height?: string;
+    isShowIndicators?: boolean;
+    clickType?: 'ads' | 'recreation';
+    autoTime: number;
+    adImpression?: AdImpressionType;
+  }>(),
+  {
+    list: () => [],
+    height: '156px',
+    isShowIndicators: true,
+    clickType: 'ads',
+    autoTime: 5000,
+  },
+);
+
+const currentIndex = ref(0);
+
+const onChange = (index: number) => {
+  currentIndex.value = index;
+};
+
+const load = () => {
+  emit('load');
+};
+// 广告展示埋点
+const advRef = ref();
+watch(
+  () => props.list,
+  () => {
+    if (props.list.length) {
+      nextTick(() => {
+        setAdImpression(advRef.value, props.list, {
+          page_key: props.adImpression?.page_key || (route.meta.pageKey as string) || '',
+          page_name: props.adImpression?.page_name || (route.meta.pageName as string) || '',
+          ad_type: props.adImpression?.ad_type || 'fullscreen',
+        }).setupObserver();
+      });
+    }
+  },
+  { immediate: true },
+);
+const handleJumpAdv = (item: Types.App.AdsInfoListItem, clickType?: 'ads' | 'recreation') => {
+  let params = {
+    ...item,
+    page_key: props.adImpression?.page_key || (route.meta.pageKey as string) || '',
+    page_name: props.adImpression?.page_name || (route.meta.pageName as string) || '',
+    ad_type: props.adImpression?.ad_type || 'fullscreen',
+  };
+  reportAdClickEvent(params);
+  jumpAdv(item, clickType);
+};
+</script>
+
+<style lang="scss" scoped>
+.adv_swiper {
+  overflow: hidden;
+  border-radius: 6px;
+  position: relative;
+  height: 100%;
+
+  .adv-container {
+    width: 100%;
+    position: relative;
+    height: 100%;
+    .custom-swipe {
+      height: 100%;
+      .adv-swiper-slide {
+        width: 100%;
+        border-radius: 6px;
+        overflow: hidden;
+
+        :deep(img) {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+
+    .indicator-wrapper {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40px;
+      pointer-events: none;
+      z-index: 99;
+
+      .custom-indicators {
+        position: absolute;
+        bottom: 30px;
+        right: 12px;
+        display: flex;
+        gap: 4px;
+        pointer-events: auto;
+
+        .indicator-dot {
+          width: 7px;
+          height: 7px;
+          background: rgba(255, 255, 255, 0.4);
+          border-radius: 50%;
+          transition: all 0.3s;
+          cursor: pointer;
+
+          &.active {
+            width: 17px;
+            background: #3476ff;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>