Prechádzať zdrojové kódy

feat: 接口调用初步完成

longyang 2 týždňov pred
rodič
commit
5d9a4bf03d

+ 22 - 17
src/App.vue

@@ -35,6 +35,7 @@ export default {
       transitionName: "",
       isGray: false,
       visible:true,
+      firstLoginChecked: false,
     };
   },
   created(){
@@ -43,22 +44,6 @@ export default {
     // setInterval(() => {
     //   useInfo();
     // }, 600000);
-
-    // 判断是否初次登录,决定是否显示新手指引
-    checkFirstLogin().then(res => {
-      const isFirst = res.data && res.data.data && res.data.data.isFirstLogin
-      if (isFirst) {
-        this.$nextTick(() => {
-          setTimeout(() => {
-            if (this.$refs.guide) {
-              this.$refs.guide.show();
-            }
-          }, 800);
-        });
-      }
-    }).catch(() => {
-      // 接口异常时不显示引导,避免影响用户正常使用
-    });
     this.$nextTick(() => {
       // 1.禁用右键菜单
       document.oncontextmenu = new Function("event.returnValue=false");
@@ -125,7 +110,27 @@ export default {
     window.removeEventListener('scroll', this.handleScroll)
   },
   watch: {
-    //使用watch 监听$router的变化
+    // 监听用户信息,拿到 userId 后判断是否初次登录
+    '$store.getters.userInfo'(newVal) {
+      if (this.firstLoginChecked) return
+      const userId = newVal && newVal.loginId
+      if (userId) {
+        this.firstLoginChecked = true
+        checkFirstLogin({ userId }).then(res => {
+          const isFirst = res.data && res.data.data && res.data.data.isFirstLogin
+          if (isFirst) {
+            setTimeout(() => {
+              if (this.$refs.guide) {
+                this.$refs.guide.show();
+              }
+            }, 800);
+          }
+        }).catch(() => {
+          // 接口异常时不显示引导,避免影响用户正常使用
+        });
+      }
+    },
+  //使用watch 监听$router的变化
     $route(to, from) {
       //如果to索引大于from索引,判断为前进状态,反之则为后退状态
       console.log(to, "to");

+ 21 - 3
src/api/allApi.js

@@ -540,11 +540,29 @@ export function winningList(query) {
   })
 }
 
-// 判断是否初次登录(后端从 token 解析 userId,无需传参)
-export function checkFirstLogin() {
+// 判断是否初次登录
+export function checkFirstLogin(params) {
   return request({
     url: '/entry-period/check-first-login',
     method: 'get',
-    timeout: 50000,
+    params,
+  })
+}
+
+// 是否领用过入职积分
+export function hasClaimedEntryIntegral(params) {
+  return request({
+    url: '/entry-period/has-claimed-entry-integral',
+    method: 'get',
+    params,
+  })
+}
+
+// 领用入职积分
+export function claimEntryIntegral(params) {
+  return request({
+    url: '/entry-period/claim-entry-integral',
+    method: 'post',
+    params,
   })
 }

+ 38 - 4
src/components/NewUserGuide/steps/RewardGuide.vue

@@ -26,11 +26,14 @@
       </div>
     </div>
 
-    <div class="guide-footer">
-      <button class="btn-finish" @click="$emit('next')">
-        <span>{{ isReplay ? '🚀' : '🎁' }}</span> {{ isReplay ? '开始探索' : '立即领取' }}
+    <div class="guide-footer" v-if="hasClaimed !== null">
+      <button class="btn-finish" v-if="hasClaimed" @click="$emit('next')">
+        <span>🚀</span> 开始探索
       </button>
-      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+      <button class="btn-finish" v-else @click="handleClaim">
+        <span>🎁</span> 立即领取
+      </button>
+      <button class="btn-prev" @click="$emit('prev')">
         上一步
       </button>
     </div>
@@ -38,6 +41,9 @@
 </template>
 
 <script>
+import { Message } from 'element-ui'
+import { hasClaimedEntryIntegral, claimEntryIntegral } from '@/api/allApi'
+
 export default {
   name: 'RewardGuide',
   props: {
@@ -47,6 +53,7 @@ export default {
   },
   data() {
     return {
+      hasClaimed: null,
       rewards: [
         { id: 1, icon: '💰', name: '积分奖励', value: '+200 积分' },
         { id: 2, icon: '🏅', name: '引导完成成就徽章', value: '新手成就解锁' },
@@ -54,6 +61,33 @@ export default {
       ],
     }
   },
+  created() {
+    const userId = this.$store.getters.userInfo.loginId
+    if (userId) {
+      hasClaimedEntryIntegral({ userId }).then(res => {
+        if (res.data && res.data.data) {
+          this.hasClaimed = !!res.data.data.hasClaimed
+        }
+      }).catch(() => {
+        // 接口异常默认已领过,显示「开始探索」
+        this.hasClaimed = true
+      })
+    }else {
+        this.hasClaimed = true
+    }
+  },
+  methods: {
+    handleClaim() {
+      const userId = this.$store.getters.userInfo.loginId
+      claimEntryIntegral({ userId }).then(() => {
+        Message.success('奖励领取成功!')
+        this.hasClaimed = true
+        this.$emit('next')
+      }).catch(() => {
+        Message.error('领取失败,请稍后重试')
+      })
+    },
+  },
 }
 </script>