feat:新增新手福利页面 修改bug

src/components/AppNoviceBenefit/index.vue

@@ -1,27 +1,42 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { Button } from 'ant-design-vue'
+import { computed } from 'vue'
+import { Button, message } from 'ant-design-vue'
 import { CloseOutlined } from '@ant-design/icons-vue'
 
-// import { useUserStore } from '@/store/moules/userStore/index'
+import { useUserStore } from '@/store/moules/userStore/index'
+import { useTaskListStore } from '@/store/moules/taskListStore'
+import { receiveAward } from '@/api/task/index'
 
-const a = ref(false)
-onMounted(() => {
+const taskListStore = useTaskListStore()
+const userStore = useUserStore()
 
+const userFlag = computed(() => userStore.getChatInfo)
+
+const newFlag = computed(() => {
+  return userFlag.value?.newUserFlag && taskListStore.newUserFlag
 })
+
+// 领取积分
+function handleGetDot(id: string) {
+  receiveAward(id).then(() => {
+    message.success('领取成功')
+    userStore.getChatInfoFun()
+    taskListStore.changeNewUserFlag()
+  })
+}
 // 关闭弹窗
 function handleClose() {
-  a.value = false
+  taskListStore.changeNewUserFlag()
 }
 </script>
 
 <template>
   <transition name="modal">
-    <div v-if="a" class="modal-mask">
+    <div v-if="newFlag" class="modal-mask">
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-body">
-            <Button class="btn">
+            <Button class="btn" @click="handleGetDot('1749667461378723849')">
               领取并前往使用
             </Button>
           </div>
@@ -42,7 +57,7 @@ function handleClose() {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
+  // background-color: rgba(0, 0, 0, 0.01);
   .close {
     position: absolute;
     top: 40px;

src/components/AppUserInfo/index.vue

@@ -2,14 +2,14 @@
 <script setup lang="ts">
 import { Divider } from 'ant-design-vue'
 
+import { computed } from 'vue'
 import money from '@/assets/images/money.png'
 import { useUserStore } from '@/store/moules/userStore/index'
 import { useRechargeStore } from '@/store/moules/rechareStore'
 
 const rechargeStore = useRechargeStore()
 const userStore = useUserStore()
-const info = userStore.getChatInfo
-console.log(info, 'info')
+const info = computed(() => userStore.getChatInfo)
 
 function handleRecharge() {
   rechargeStore.rechargeOpen()
@@ -32,7 +32,7 @@ function separator(num: number | string) {
         </div>
       </div>
       <div class="num">
-        {{ (info?.questionCount ?? 0) > 0 ? info?.questionCount : 0 }}
+        {{ (info?.totalPoints ?? 0) > 0 ? separator(info?.totalPoints as number) : 0 }}
       </div>
       <div class="pay" @click="handleRecharge">
         充值

src/enums/cacheEnum.ts

@@ -7,8 +7,12 @@ export const USER_INFO_KEY = 'USER_INFO'
 // chat info key
 export const CHAT_INFO_KEY = 'CHAT_INFO'
 
+// chat newuser key
+export const NEW_USER_KEY = 'NEW_USER'
+
 export enum CatchTypeEnum {
   ACCESS_TOKEN_KEY,
   USER_INFO_KEY,
   CHAT_INFO_KEY,
+  NEW_USER_KEY,
 }

src/store/moules/taskListStore/index.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { NEW_USER_KEY } from '@/enums/cacheEnum'
 
 export const useTaskListStore = defineStore('useTaskListStore', {
   state: () => {
@@ -7,6 +8,7 @@ export const useTaskListStore = defineStore('useTaskListStore', {
       noviceTask: false,
       dailyTask: false,
       otherTask: false,
+      newUserFlag: true,
     }
   },
   actions: {
@@ -22,6 +24,15 @@ export const useTaskListStore = defineStore('useTaskListStore', {
     changeOtherTask(status: boolean) {
       this.otherTask = status
     },
+    changeNewUserFlag() {
+      this.newUserFlag = false
+    },
   },
+  persist: [
+    {
+      paths: ['newUserFlag'],
+      key: NEW_USER_KEY,
+    },
 
+  ],
 })

src/store/moules/userStore/index.d.ts

@@ -19,7 +19,9 @@ export interface UserInfoType {
 export interface ChatInfoType {
   id: string
   chatCode: string
-  questionCount: number
+  totalPoints: number
   messageCount: number
   createdDay: number
+  newUserFlag: boolean
+  inviteCode: string
 }

src/views/conversation/index.vue

@@ -9,7 +9,7 @@ import { AppUserInfo } from '@/components/AppUserInfo'
 import { SubMenuActionEnum } from '@/components/AppSubMenuList/index.d'
 import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
 import type { PictureType } from '@/components/AppPicture/index.d'
-
+import { AppNoviceBenefit } from '@/components/AppNoviceBenefit/index'
 import { AppTextarea } from '@/components/AppTextarea'
 import { AppMessage } from '@/components/AppMessage'
 import type { MessageItem } from '@/components/AppMessage/index.d'
@@ -407,6 +407,7 @@ onUnmounted(() => {
       >
       </AppSubMenuList>
       <AppUserInfo />
+      <AppNoviceBenefit />
     </template>
     <template #content>
       <Spin :spinning="spinning" wrapper-class-name="app-content-spin">

src/views/login/index.vue

@@ -5,7 +5,6 @@ import { Button, Form, FormItem, Input, message } from 'ant-design-vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { Rule } from 'ant-design-vue/es/form'
 
-import { UsergroupAddOutlined } from '@ant-design/icons-vue'
 import type { LoginForm } from './index.d'
 import { sendCode } from '@/api/base/login'
 import { useUserStore } from '@/store/moules/userStore/index'
@@ -364,7 +363,7 @@ function timer() {
     }
     .logoncontent {
       width: 90%;
-      height: 50%;
+      min-height: 50%;
       position: absolute;
       top: 50%;
       left: 50%;

src/views/task/components/BasicTask/index.d.ts

@@ -2,12 +2,12 @@ interface SignType {
   continueDays: number
   isSign: number
   signDays: number
-  totalIntegral: number
+  totalPoints: number
 }
 
 interface TaskType {
   name: string
-  score: number
+  points: number
   status: number
   id: string
 }

src/views/task/components/BasicTask/index.vue

@@ -23,7 +23,7 @@ const signData = ref<SignType>({
   continueDays: 0,
   isSign: 0,
   signDays: 0,
-  totalIntegral: 0,
+  totalPoints: 0,
 })
 
 // 签到状态
@@ -100,7 +100,7 @@ function handleInvite() {
         <div class="bottom">
           <div class="accumulate">
             <div class="three">
-              累计领取：{{ signData.totalIntegral }}点数
+              累计领取：{{ signData.totalPoints }}点数
             </div>
             <div class="ten">
               连续签到7天可得 10 点数
@@ -154,10 +154,10 @@ function handleInvite() {
                   {{ item.name }}
                 </div>
                 <div v-show="item.status === 2 " class="accomplish">
-                  已获得{{ item.score }}点数
+                  已获得{{ item.points }}点数
                 </div>
                 <div v-show="item.status !== 2 && item.name !== '邀请注册' " class="unfinished">
-                  0/{{ item.score }}
+                  {{ item.status === 1 ? 1 : 0 }}/1
                 </div>
               </div>
               <div class="earn-list-right">
@@ -165,7 +165,7 @@ function handleInvite() {
                   <div class="flex items-center">
                     <img class="add-dot-photo" :src="money" alt="">
                     <div class="add-dot-num">
-                      +{{ item.score }}
+                      +{{ item.points }}
                     </div>
                   </div>
 
@@ -176,6 +176,9 @@ function handleInvite() {
                     <div v-if="item.status !== 2" class="add-dot-btn invite" @click="handleInvite">
                       去邀请
                     </div>
+                    <div v-if="item.status === 2" class="add-dot-btn accomplish">
+                      已完成
+                    </div>
                   </div>
                   <div v-else>
                     <div v-show="item.status === 2" class="add-dot-btn accomplish">
@@ -386,7 +389,6 @@ function handleInvite() {
               width: 50%;
               .name {
                 font-size: 13px;
-                font-weight: bolder;
                 color: #000000;
                 letter-spacing: 1px;
               }

src/views/task/components/DailyTask/index.d.ts

@@ -1,6 +1,6 @@
 export interface TaskType {
   name: string
-  score: number
+  points: number
   status: number
   id: string
 }

src/views/task/components/DailyTask/index.vue

@@ -13,7 +13,7 @@ const finishedTaskCount = ref(0)
 function getTaskList() {
   dailyTask().then((res) => {
     list.value = res.taskCenterList
-    totalScore.value = res.totalScore
+    totalScore.value = res.totalPoints
     finishedTaskCount.value = res.finishedTaskCount
     taskListStore.changeDailyTask(res.existFinishedTask)
   })

src/views/task/components/InviteForm/index.vue

@@ -5,6 +5,7 @@ import {
 import { Button, Divider, QRCode } from 'ant-design-vue'
 import { ref } from 'vue'
 import { copyText } from '@/utils/copyTextToClipboard'
+import { useUserStore } from '@/store/moules/userStore/index'
 
 defineProps({
   show: {
@@ -13,7 +14,7 @@ defineProps({
   },
 })
 const emits = defineEmits(['update:show'])
-
+const userStore = useUserStore()
 // 关闭弹窗
 function handleClose() {
   emits('update:show', false)
@@ -30,7 +31,7 @@ async function dowloadChange() {
   document.body.removeChild(a)
 }
 
-const code = ref('你好啊')
+const code = userStore.getChatInfo?.inviteCode as string
 </script>
 
 <template>

src/views/task/components/NoviceTask/index.d.ts

@@ -1,6 +1,6 @@
 export interface TaskType {
   name: string
-  score: number
+  points: number
   status: number
   id: string
 }

src/views/task/components/NoviceTask/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onBeforeMount, ref } from 'vue'
 import { TaskList } from '../TaskList/index.ts'
 import type { TaskType } from './index.d'
 import { noviceTask } from '@/api/task/index'
@@ -12,18 +12,18 @@ const finishedTaskCount = ref(0)
 function getTaskList() {
   noviceTask().then((res) => {
     list.value = res.taskCenterList
-    totalScore.value = res.totalScore
+    totalScore.value = res.totalPoints
     finishedTaskCount.value = res.finishedTaskCount
     taskListStore.changeNoviceTask(res.existFinishedTask)
   })
 }
-onMounted(() => {
+onBeforeMount(() => {
   getTaskList()
 })
 </script>
 
 <template>
-  <TaskList title="新手任务" :list="list" :total-score="totalScore" :finished-task-count="finishedTaskCount" @update-list="getTaskList()" />
+  <TaskList v-if="list" title="新手任务" :list="list" :total-score="totalScore" :finished-task-count="finishedTaskCount" @update-list="getTaskList()" />
 </template>
 
 <style lang="scss" scoped>

src/views/task/components/OtherTask/index.d.ts

@@ -1,6 +1,6 @@
 export interface TaskType {
   name: string
-  score: number
+  points: number
   status: number
   id: string
 }

src/views/task/components/OtherTask/index.vue

@@ -13,7 +13,7 @@ const finishedTaskCount = ref(0)
 function getTaskList() {
   routineTask().then((res) => {
     list.value = res.taskCenterList
-    totalScore.value = res.totalScore
+    totalScore.value = res.totalPoints
     finishedTaskCount.value = res.finishedTaskCount
     taskListStore.changeOtherTask(res.existFinishedTask)
   })

src/views/task/components/TaskList/index.d.ts

@@ -1,6 +1,6 @@
 export interface TaskType {
   name: string
-  score: number
+  points: number
   status: number
   id: string
 }

src/views/task/components/TaskList/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ComputedRef } from 'vue'
 import { computed, ref } from 'vue'
 import {
   DownOutlined,
@@ -10,7 +11,7 @@ import money from '@/assets/images/task/money.png'
 import { receiveAward } from '@/api/task/index'
 import { useUserStore } from '@/store/moules/userStore/index'
 
-const { title, list, totalScore } = defineProps({
+const props = defineProps({
   title: {
     type: String,
   },
@@ -20,13 +21,14 @@ const { title, list, totalScore } = defineProps({
   finishedTaskCount: {
     type: Number,
   },
-
   list: {
     type: Array as PropType<TaskType[]>,
-    default: () => [],
+    default: (): TaskType[] => [], // 默认空数组 [],
   },
 })
 const emit = defineEmits(['updateList'])
+const reactiveList: ComputedRef<TaskType[]> = computed(() => props.list)
+
 const userStore = useUserStore()
 // 领取积分
 function handleGetDot(id: string) {
@@ -43,7 +45,7 @@ const dynamicStyle = computed(() => {
   let maxHeight
   if (isExpanded.value) {
     // 如果展开，那么高度应该是单个项目的高度乘以项目总数
-    maxHeight = singleItemHeight * list.length
+    maxHeight = singleItemHeight * reactiveList.value.length
   }
   else {
     // 如果没有展开，那么高度应该是单个项目的高度乘以默认显示的项目个数
@@ -66,22 +68,22 @@ const dynamicStyle = computed(() => {
           全部完成可获得 {{ totalScore }} 点数
         </div>
         <div class="right">
-          已完成 {{ finishedTaskCount }}/{{ list.length }}
+          已完成 {{ finishedTaskCount }}/{{ reactiveList.length }}
         </div>
       </div>
 
       <div class="content" :style="dynamicStyle">
         <div class="earn-list-box">
-          <div v-for="(item, index) in list" :key="index" class="earn-list">
+          <div v-for="(item, index) in reactiveList" :key="index" class="earn-list">
             <div class="earn-list-left">
               <div class="name">
                 {{ item.name }}
               </div>
               <div v-show="item.status === 2" class="accomplish">
-                已获得{{ item.score }}点数
+                已获得{{ item.points }}点数
               </div>
               <div v-show="item.status !== 2" class="unfinished">
-                0/{{ item.score }}
+                {{ item.status === 1 ? 1 : 0 }}/1
               </div>
             </div>
             <div class="earn-list-right">
@@ -89,7 +91,7 @@ const dynamicStyle = computed(() => {
                 <div class="flex items-center">
                   <img class="add-dot-photo" :src="money" alt="">
                   <div class="add-dot-num">
-                    +{{ item.score }}
+                    +{{ item.points }}
                   </div>
                 </div>
 
@@ -110,7 +112,7 @@ const dynamicStyle = computed(() => {
         </div>
       </div>
 
-      <div v-if="list.length > 4" class="shrink" @click="isExpanded = !isExpanded">
+      <div v-if="reactiveList.length > 4" class="shrink" @click="isExpanded = !isExpanded">
         <DownOutlined v-if="!isExpanded" />
         <UpOutlined v-else />
       </div>

src/views/task/index.vue

@@ -3,7 +3,6 @@ import { provide, ref } from 'vue'
 import { BasicTask } from './components/BasicTask'
 import { NoviceTask } from './components/NoviceTask'
 import { DailyTask } from './components/DailyTask'
-import { AppNoviceBenefit } from '@/components/AppNoviceBenefit/index'
 
 // import { OtherTask } from './components/OtherTask'
 import { AppUserInfo } from '@/components/AppUserInfo'
@@ -34,7 +33,6 @@ provide('taskContainer', taskContainer)
         <NoviceTask ref="task2" />
         <DailyTask ref="task3" />
         <!-- <OtherTask ref="task4" /> -->
-        <AppNoviceBenefit />
       </div>
     </template>
   </AppContainerBox>