feat(埋点): 添加点赞和登录的埋点记录功能

在点赞和登录功能中添加aplus_queue埋点记录，分别记录点赞/取消点赞和登录事件

src/components/comment/index.vue

@@ -1,50 +1,36 @@
 <template>
   <view class="comment">
-    <Tips v-if="messageShow" />
-    <view class="comment-input">
-      <input
-        type="text"
-        confrim-type="done"
-        placeholder="输入评论内容……"
-        class="input-field"
-        v-model="comment"
-        @confirm="handleSubmit"
-      />
 
-      <!-- <view class="input-field">输入评论内容……</view> -->
-    </view>
     <view class="comment-count">
       <view class="count" @click="handleClickLike">
-        <image :src="props.data.isLike ? IconLikeActive : IconLike" class="icon" />
+        <image
-        <text class="num">{{ props.data.likeNums }}</text>
+          :src="props.data.isLike ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_normal%402x.png'"
+          class="icon" />
+        <text class="num">点赞</text>
       </view>
-      <view class="count" @click="handleClickStar">
+      <!-- <view class="count" @click="handleClickStar">
-        <image :src="props.data.isFav ? IconStarActive : IconStar" class="icon" />
+        <image
-        <text class="num">{{ props.data.favNums }}</text>
+          :src="props.data.isFav ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_normal%402x.png'"
+          class="icon" />
+        <text class="num">收藏</text>
       </view>
-      <!-- <view class="count">
+      <button class="count" style="background-color: transparent;" open-type="share">
-        <image src="@/static/icon_message.png" class="icon" />
+        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png" class="icon" />
-        <text class="num">{{
+        <text class="num">分享</text>
-          props.data.comment > 1000 ? "999+" : props.data.comment
+      </button> -->
-        }}</text>
-      </view> -->
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
-// import { likeNews } from "@/api";
+
-import IconLike from "@/static/icon_like.png";
-import IconStar from "@/static/icon_star.png";
-import IconLikeActive from "@/static/icon_like_active.png";
-import IconStarActive from "@/static/icon_star_active.png";
 const emit = defineEmits(["handleClickLike", "handleClickStar"]);
 const messageShow = ref(false);
 const props = defineProps({
   data: {
     type: Object,
-    default: () => {},
+    default: () => { },
   },
 });
 
@@ -54,6 +40,7 @@ const comment = ref("");
 
 // 用户点赞
 const handleClickLike = () => {
+
   emit("handleClickLike");
 };
 // 用户收藏
@@ -78,7 +65,7 @@ const handleSubmit = () => {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 112rpx;
+  height: 160rpx;
   background-color: #fff;
   box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.3);
   display: flex;
@@ -89,6 +76,7 @@ const handleSubmit = () => {
 
   .comment-input {
     width: 100%;
+
     .input-field {
       height: 72rpx;
       background-color: #f5f5f5;
@@ -100,6 +88,7 @@ const handleSubmit = () => {
       display: flex;
       align-items: center;
     }
+
     .input-placeholder {
       color: rgba(51, 51, 51, 0.6);
     }
@@ -107,12 +96,16 @@ const handleSubmit = () => {
 
   .comment-count {
     display: flex;
-    justify-content: flex-end;
+    width: 100vw;
-    align-items: center;
+
+
     .count {
       display: flex;
+      text-align: center;
+      justify-content: center;
       align-items: center;
       margin-left: 24rpx;
+      width: 100%;
 
       .num {
         margin-left: 12rpx;
@@ -128,4 +121,9 @@ const handleSubmit = () => {
     }
   }
 }
+
+
+button::after {
+  border: 0;
+}
 </style>

src/components/loginPopup/index.vue

@@ -1,56 +1,29 @@
 <template>
   <!-- <view class="loginPopup"> -->
-  <u-popup
+  <u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
-    class="loginPopup"
+    @close="handlePopupClose">
-    :show="props.show"
-    closeable
-    :mode="props.mode"
-    round="12"
-    :closeOnClickOverlay="false"
-    @close="handlePopupClose"
-  >
     <view class="loginPopupContent">
       <view class="loginTitle">登录后掌握更多优质财经内容</view>
 
       <!-- 登录表单 -->
       <view class="loginForm">
         <u--form :model="state.loginForm" ref="uForm">
-          <u-form-item
+          <u-form-item style="padding: 0" class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
-            style="padding: 0"
+            <u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
-            class="loginFormItem"
+              border="none"></u--input>
-            prop="userInfo.name"
-            borderBottom
-            ref="item1"
-          >
-            <u--input
-              class="loginFormInput"
-              placeholder="请输入您的手机号"
-              v-model="state.loginForm.phone"
-              border="none"
-            ></u--input>
           </u-form-item>
-          <u-form-item
+          <u-form-item class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
-            class="loginFormItem"
+            <u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
-            prop="userInfo.name"
+              border="none"></u--input>
-            borderBottom
-            ref="item1"
-          >
-            <u--input
-              class="loginFormInput"
-              placeholder="请输入短信验证码"
-              v-model="state.loginForm.code"
-              border="none"
-            ></u--input>
             <view class="getCode" @click="captcha">{{ codeText }}</view>
           </u-form-item>
         </u--form>
         <u-button class="loginFormBtn" text="登录" @click="Login"></u-button>
       </view>
       <!-- 用户协议 -->
-      <view class="tips"
+      <view class="tips">登录即代表已经阅读并同意
-        >登录即代表已经阅读并同意
+        <view class="userAgreement">《用户协议》</view>
-        <view class="userAgreement">《用户协议》</view></view
+      </view>
-      >
     </view>
   </u-popup>
   <!-- </view> -->
@@ -130,6 +103,8 @@ const handlePopupSuccessCallback = () => {
 const handlePopupErrorCallback = () => {
   emit("handlePopupErrorCallback");
 };
+const { aplus_queue } = window;
+
 // 登录
 const Login = async () => {
   if (!validatePhoneNumber(state.loginForm.phone)) {
@@ -155,6 +130,14 @@ const Login = async () => {
   });
   console.log(code, "<=== code");
   if (code === 200) {
+    aplus_queue.push({
+      action: 'aplus.record',
+      arguments: ['login', 'CLK', {
+        phone: data.phone,
+      }]
+    });
+
+
     uni.hideLoading();
     Session.set("token", data.token);
     Session.set("userPhone", data.phone);
@@ -163,6 +146,7 @@ const Login = async () => {
       icon: "success",
     });
     handlePopupSuccessCallback();
+
   } else {
     console.log(msg, "<=== msg");
     handlePopupErrorCallback();
@@ -188,6 +172,7 @@ const handlePopupClose = () => {
       width: 100%;
       height: 786rpx;
     }
+
     .u-popup__content__close {
       margin-top: 30rpx;
     }
@@ -223,11 +208,13 @@ const handlePopupClose = () => {
         &:nth-child(2) {
           margin: 32rpx 0;
         }
+
         ::v-deep {
           .u-form-item__body {
             padding: 0;
           }
         }
+
         .loginFormInput {
           width: 100%;
           height: 100rpx !important;
@@ -244,6 +231,7 @@ const handlePopupClose = () => {
           font-size: var(--h1-font-size);
           color: rgba(51, 51, 51, 0.6);
           position: relative;
+
           &::before {
             content: "";
             display: block;
@@ -263,6 +251,7 @@ const handlePopupClose = () => {
         border: none;
         background-color: #e7303f;
         color: #fff;
+
         ::v-deep {
           .u-button__text {
             font-size: var(--h1-font-size) !important;
@@ -277,6 +266,7 @@ const handlePopupClose = () => {
       display: flex;
       justify-content: center;
       color: #717171;
+
       .userAgreement {
         color: #333;
       }

src/pages/detail/indexNewsInfo.vue

@@ -90,6 +90,28 @@ const newList = async (columnId: number) => {
 
 // 点赞
 const handleClickLike = async () => {
+  console.log("🚀 ~ handleClickLike ~ data.value.isLike:", data.value.isLike)
+  if (data.value.isLike == 1) {
+    // 取消点赞
+    aplus_queue.push({
+      action: 'aplus.record',
+      arguments: ['canncelLike', 'CLK', {
+        param1: data.value.id,
+        param2: data.value.title,
+      }]
+    });
+
+  } else {
+    // 点赞
+    aplus_queue.push({
+      action: 'aplus.record',
+      arguments: ['doLike', 'CLK', {
+        param1: data.value.id,
+        param2: data.value.title,
+      }]
+    });
+  }
+
   // console.log("=== 点赞 ===")
   const res = await fetchArticleLike({
     id: data.value.id,
@@ -182,8 +204,8 @@ onMounted(() => {
   aplus_queue.push({
     action: 'aplus.record',
     arguments: ['goDetail', 'CLK', {
-      param1: data.value.id,
+      id: data.value.id,
-      param2: data.value.title,
+      title: data.value.title,
     }]
   });