From d79805a59bc89a28a92812c5654d12536fee5079 Mon Sep 17 00:00:00 2001
From: layyback <505187749@qq.com>
Date: Mon, 23 Oct 2023 12:19:35 +0800
Subject: [PATCH] :sparkles: add spm

---
 assets/data/recommend.json                    |  2 +-
 components/advertising.vue                    |  3 +
 .../index/console/index/billing/pay/index.vue |  4 +-
 .../index/console/index/dashboard/index.vue   |  3 +
 pages/index/aigc/components/tab.vue           | 34 ++++++++---
 pages/index/index.vue                         | 57 +++++++++++++------
 6 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/assets/data/recommend.json b/assets/data/recommend.json
index be86208..50bb79e 100644
--- a/assets/data/recommend.json
+++ b/assets/data/recommend.json
@@ -191,7 +191,7 @@
       "id": "1"
     },
     {
-      "name": "5折banner",
+      "name": "5折活动-banner",
       "imgUrl": "https://devbit-static.oss-cn-beijing.aliyuncs.com/ai100/icon/banner/1697714511964.jpg",
       "destUrl": "/dev/console/billing/pay",
       "id": "2"
diff --git a/components/advertising.vue b/components/advertising.vue
index 6ffdede..3db36e0 100644
--- a/components/advertising.vue
+++ b/components/advertising.vue
@@ -6,6 +6,9 @@
     </div>
     <a
       href="/dev/console/billing/pay"
+      v-view="{
+        el: '5折活动-悬浮广告'
+      }"
       v-click="{
         el: '5折活动-悬浮广告'
       }"
diff --git a/pages/dev/index/console/index/billing/pay/index.vue b/pages/dev/index/console/index/billing/pay/index.vue
index 38cb6f9..26d4c0a 100644
--- a/pages/dev/index/console/index/billing/pay/index.vue
+++ b/pages/dev/index/console/index/billing/pay/index.vue
@@ -3,7 +3,7 @@
     <div class="max-w-6xl m-auto">
       <div class="sm:rounded-lg px-4 sm:px-10 py-4 pb-10 bg-white">
         <h2 class="text-lg font-medium text-gray-600 py-2">逻辑电量充能</h2>
-        <div class="py-2 grid grid-cols-1 gap-2 sm:gap-4 sm:grid-cols-4">
+        <div class="py-2 flex flex-wrap gap-x-4 gap-y-4">
           <div
             v-for="item in goods"
             :key="item.name"
@@ -17,7 +17,7 @@
             :class="{
               'ring-[#EBB305] ring-2': item.id === payGood.id
             }"
-            class="relative rounded-lg border border-gray-200 px-2 sm:px-6 py-4 sm:py-4 shadow-sm flex justify-center items-center space-x-3 hover:border-yellow-400 focus-within:ring-2 focus-within:ring-yellow-500"
+            class="relative rounded-lg w-full sm:w-[236px] border border-gray-200 px-2 sm:px-6 py-4 sm:py-4 shadow-sm flex justify-center items-center space-x-3 hover:border-yellow-400 focus-within:ring-2 focus-within:ring-yellow-500"
           >
             <div class="flex-shrink-0">
               <img
diff --git a/pages/dev/index/console/index/dashboard/index.vue b/pages/dev/index/console/index/dashboard/index.vue
index 4f40ce1..f80f778 100644
--- a/pages/dev/index/console/index/dashboard/index.vue
+++ b/pages/dev/index/console/index/dashboard/index.vue
@@ -12,6 +12,9 @@
         <div class="h-[30px] flex items-center m-8 rounded-full">
           <div
             class="notice-main"
+            v-view="{
+              el: '5折活动-dashboard顶部广告'
+            }"
             v-click="{
               el: '5折活动-dashboard顶部广告'
             }"
diff --git a/pages/index/aigc/components/tab.vue b/pages/index/aigc/components/tab.vue
index 4684f9c..bc491bd 100644
--- a/pages/index/aigc/components/tab.vue
+++ b/pages/index/aigc/components/tab.vue
@@ -6,8 +6,15 @@
       :class="store.switchcheck ? 'bg-[#efefef] text-black' : 'bg-black'"
       :style="props.wrapStyle"
     >
-      <div class="inline-flex relative" :class="store.switchcheck ? 'tab-item' : 'notab-item'">
-        <div v-for="(item, index) in tabs" :key="index" @click="changeTab(item, index)">
+      <div
+        class="inline-flex relative"
+        :class="store.switchcheck ? 'tab-item' : 'notab-item'"
+      >
+        <div
+          v-for="(item, index) in tabs"
+          :key="index"
+          @click="changeTab(item, index)"
+        >
           <nuxt-link
             v-if="item.path"
             :to="item.path"
@@ -16,7 +23,8 @@
             }"
             class="text-sm lg:w-24 w-20 h-7 flex items-center justify-center z-10 rounded-full lg:mx-0 mx-0.5"
             :class="store.switchcheck ? 'text-black ' : 'text-white'"
-          >{{ item.name }}</nuxt-link>
+            >{{ item.name }}</nuxt-link
+          >
           <div
             :style="
               props.itemStyle + `${curTab == index ? props.activeStyle : ''}`
@@ -25,19 +33,31 @@
               curTab == index ? 'router-link-active bg-indigo-600' : ''
             } `"
             v-else
-          >{{ item.name }}</div>
+          >
+            {{ item.name }}
+          </div>
         </div>
       </div>
     </div>
     <div class="lg:block hidden" v-if="isShow">
       <div class="h-12 relative flex items-center">
-        <img src="@/assets/imgs/Adhorn.png" class="w-[34px] h-[34px] absolute ml-3" alt />
+        <img
+          src="@/assets/imgs/Adhorn.png"
+          class="w-[34px] h-[34px] absolute ml-3"
+          alt
+        />
         <div
           class="bg-gradient-to-b from-yellow-200 via-white to-white float-right flex items-center m-8 rounded-full"
         >
-          <div class="notice-main" v-click="{
+          <div
+            class="notice-main"
+            v-click="{
+              el: '5折活动-小喇叭广告'
+            }"
+            v-view="{
               el: '5折活动-小喇叭广告'
-            }">
+            }"
+          >
             <span class="notice text-sm text-red-800">
               <a href="/dev/console/billing/pay">
                 <span>电量充值限时低至5折，所有工具全部适用！</span>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f59ea8c..0084d88 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -100,12 +100,18 @@
     <div class="h-full lg:block hidden">
       <div>
         <el-carousel :interval="3000" :loop="true" height="32vw">
-          <el-carousel-item v-for="(item, index) in recommendData.pcindex" :key="index">
+          <el-carousel-item
+            v-for="(item, index) in recommendData.pcindex"
+            :key="index"
+            v-click="{
+              el: item.name
+            }"
+          >
             <a :href="item.destUrl">
               <img
                 class="cursor-pointer w-full h-full"
                 :src="item.imgUrl"
-                style="width:100%;height: 100%;object-fit:contain"
+                style="width: 100%; height: 100%; object-fit: contain"
               />
             </a>
           </el-carousel-item>
@@ -117,12 +123,15 @@
     <div class="h-full lg:hidden block">
       <div>
         <el-carousel :interval="3000" :loop="true" height="45vw">
-          <el-carousel-item v-for="(item, index) in recommendData.appindex" :key="index">
+          <el-carousel-item
+            v-for="(item, index) in recommendData.appindex"
+            :key="index"
+          >
             <a :href="item.destUrl">
               <img
                 class="cursor-pointer w-full h-full"
                 :src="item.imgUrl"
-                style="width:100%;height: 100%;object-fit:contain"
+                style="width: 100%; height: 100%; object-fit: contain"
               />
             </a>
           </el-carousel-item>
@@ -137,12 +146,12 @@
       >
         <div
           class="w-[205px] flex items-center flex-col justify-center cursor-pointer h-24 text-[14px] font-bold font-AlimamaShuHeiTi-Bold font-AlimamaShuHeiTi text-white opacity-60 leading-6"
-          v-for="(item,index) in newIntList"
+          v-for="(item, index) in newIntList"
           :class="[
-                  { selestyle: cationflag == index },
-                  { nostyle: cationflag !== index }
-                ]"
-          @click="intclick(item,index)"
+            { selestyle: cationflag == index },
+            { nostyle: cationflag !== index }
+          ]"
+          @click="intclick(item, index)"
           :key="index"
         >
           <img :src="item.destImg" class="w-[48px] h-[47px] mb-2" alt />
@@ -158,8 +167,8 @@
       <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-6 sm:pb-8 p-4">
         <div
           class="flex items-center flex-col justify-center cursor-pointer h-[190px] text-[16px] font-bold font-AlimamaShuHeiTi-Bold font-AlimamaShuHeiTi bg-gradient-to-b from-white/5 to-white/[.01] text-white leading-10 py-3 rounded-md mt-5"
-          v-for="(item,index) in newIntList"
-          @click="intclick(item,index)"
+          v-for="(item, index) in newIntList"
+          @click="intclick(item, index)"
           :key="index"
         >
           <img :src="item.destImg" class="w-[50px] h-[50px] mb-2" alt />
@@ -176,7 +185,7 @@
       <el-dialog
         v-model="showAd"
         class="my-dialog"
-        style="background-color: rgba(0,0,0,0); box-shadow:none;"
+        style="background-color: rgba(0, 0, 0, 0); box-shadow: none"
         width="35%"
         @close="dialogfn"
         center
@@ -196,11 +205,17 @@
       <el-dialog
         v-model="showAd"
         class="my-dialog"
-        style="background-color: rgba(0,0,0,0); box-shadow:none;"
+        style="background-color: rgba(0, 0, 0, 0); box-shadow: none"
         width="100%"
         center
       >
-        <img :src="adListData.imgUrl" alt />
+        <img
+          v-view="{
+            el: '5折活动-弹窗广告'
+          }"
+          :src="adListData.imgUrl"
+          alt
+        />
         <a :href="adListData.destUrl">
           <img src="@/assets/imgs/popbutton.png" alt />
         </a>
@@ -238,6 +253,7 @@ import aigcImgIcon from "@/assets/imgs/aigcImgIcon.svg";
 import aigcPromptIcon from "@/assets/imgs/aigcPromptIcon.svg";
 import recommendData from "@/assets/data/recommend.json";
 const store = useStore();
+const route = useRoute();
 
 const showAd = ref<any>(false);
 const isadver = ref<any>();
@@ -281,6 +297,15 @@ const Adopen = () => {
 const dialogfn = () => {
   console.log("触发关闭");
   localStorage.setItem("eject", "1");
+  const utm_source = route?.query?.utm_source || "默认渠道";
+  window._czc &&
+    window._czc.push([
+      "_trackEvent",
+      "点击",
+      "5折活动-弹窗广告",
+      0,
+      utm_source
+    ]);
 };
 
 // 控制动画
@@ -296,13 +321,13 @@ const Adsus = () => {
 
   for (let index = 0; index < classList.length; index++) {
     const element = classList[index];
-    element.addEventListener("mouseover", function() {
+    element.addEventListener("mouseover", function () {
       for (let index2 = 0; index2 < classList.length; index2++) {
         const element = classList.item(index2) as any;
         element.style.animationPlayState = "paused";
       }
     });
-    element.addEventListener("mouseout", function() {
+    element.addEventListener("mouseout", function () {
       for (let index2 = 0; index2 < classList.length; index2++) {
         const element = classList.item(index2) as any;
         element.style.animationPlayState = "running";
-- 
GitLab