[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,147 @@
+<template>
+  <div class="headerAdv" v-if="state.advList.length" ref="advRef">
+    <!-- 5宫格广告 -->
+    <div class="fiveGrid" v-if="props.type === 'five'">
+      <div class="rectAdvBox" @click="handleJumpAdv(item)" v-for="item in state.advList" :key="item.id">
+        <lazyImg class="rectAdvIcon" :src="item.cover" />
+        <div class="rectName">{{ item.title }}</div>
+      </div>
+    </div>
+    <AdvSwiper class="swiper" v-else-if="props.type === 'swiper'" :list="state.advList" height="18.933vw"></AdvSwiper>
+    <div class="rows-adv" v-else-if="props.type === 'rows'">
+      <div class="box" @touchstart.stop @touchmove.stop @touchend.stop v-if="state.advList.length > 0">
+        <div class="rectAdvBox" @click="handleJumpAdv(item)" v-for="item in state.advList" :key="item.id">
+          <lazyImg class="rectAdvIcon" :src="item.cover" />
+          <div class="rectName">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { nextTick, reactive, ref, watch } from 'vue';
+import { getAdItem } from '@/utils/getConfig';
+import { jumpAdv } from '@/utils/index';
+import { AdImpressionType, setAdImpression } from '@/utils/eventReporter/adImpression';
+import { useRoute } from 'vue-router';
+import { reportAdClickEvent } from '@/utils/eventReporter/adClick';
+
+const route = useRoute();
+const props = withDefaults(
+  defineProps<{
+    advType?: number;
+    type?: 'five' | 'swiper' | 'rows';
+    length?: number; //广告获取长度0-不限制
+    random?: boolean; //是否随机获取
+    adImpression?: AdImpressionType;
+  }>(),
+  {
+    advType: 28,
+    type: 'five',
+    length: 5,
+  },
+);
+const state = reactive({
+  advList: <any>[], // 广告数据
+});
+const init = () => {
+  const arr = getAdItem(props.advType) || [];
+  if (props.length > 0) {
+    state.advList = arr.slice(0, props.length);
+  } else {
+    if (props.random) {
+      const shuffled = arr.slice().sort(() => 0.5 - Math.random());
+      state.advList = shuffled.slice(0, 5);
+    } else {
+      state.advList = arr;
+    }
+  }
+};
+init();
+// 广告展示埋点
+const advRef = ref();
+watch(
+  () => state.advList,
+  () => {
+    if (state.advList.length) {
+      nextTick(() => {
+        setAdImpression(advRef.value, state.advList, {
+          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 || 'small_grid',
+        }).setupObserver();
+      });
+    }
+  },
+  { immediate: true },
+);
+const handleJumpAdv = (item: Types.App.AdsInfoListItem) => {
+  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 || 'small_grid',
+  };
+  reportAdClickEvent(params);
+  jumpAdv(item);
+};
+</script>
+<style scoped lang="scss">
+.headerAdv {
+  width: 100%;
+  .fiveGrid {
+    margin: 8px 0 12px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-row-gap: 12px;
+    grid-column-gap: 10px;
+    box-sizing: border-box;
+    .rectAdvBox {
+      width: 60px;
+      .rectAdvIcon {
+        height: 60px;
+        width: 60px;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+      .rectName {
+        font-size: 12px;
+        margin-top: 4px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: center;
+      }
+    }
+  }
+  .swiper {
+    padding: 0 10px;
+  }
+  .rows-adv {
+    .box {
+      display: flex;
+      overflow-x: auto;
+      padding: 18px 0;
+      .rectAdvBox {
+        width: 60px;
+        margin-right: 6px;
+        .rectAdvIcon {
+          height: 60px;
+          width: 60px;
+          border-radius: 12px;
+          overflow: hidden;
+        }
+        .rectName {
+          font-size: 12px;
+          margin-top: 4px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-align: center;
+        }
+      }
+      .rectAdvBox:last-child {
+        margin-right: 9px;
+      }
+    }
+  }
+}
+</style>