feat: 学习提示

package-lock.json

@@ -1027,9 +1027,9 @@
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
     },
     "@vant/use": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.0.tgz",
-      "integrity": "sha512-Dk7aMn7gLpoDew2tix/mjXpP0PoERWcxWh+pRY4xxl0MG4eeByAAyZSE6PgMpof4Yorqn7yq8KmeQcaVnxq2cg=="
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.2.tgz",
+      "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg=="
     },
     "@vue/cli-overlay": {
       "version": "4.5.19",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@rive-app/canvas": "^1.1.4",
     "@types/qrcode": "^1.5.0",
+    "@vant/use": "^1.5.2",
     "axios": "^1.3.4",
     "dayjs": "^1.11.7",
     "flicker-vue-hooks": "^1.0.10",

src/hook/index.ts

@@ -197,7 +197,6 @@ export const useDeviceDire = (): [(cb: (dire: 'H' | 'V') => void) => void ] => {
 }
 
 
-
 export const useDrag = (
   el: HTMLElement,
   options: {

src/pages/LearnPlan/views/LearnReport/index.vue

@@ -3,11 +3,15 @@
     <div class="learn-report" id="learn-report" :ref="learnReportRef" >
         <div class="learn-report-bg">
           <img class="bg" :src="staticImg.learnReportBg" alt="">
-          <img class="title-img" :src="staticImg.titleImg" alt="">
+          <div>
+            <img class="title-img" :src="staticImg.titleImg" alt="">
+            <img class="ques-img" ref="quesImgRef" @click="quesTipState = !quesTipState" :src="staticImg.quesIcon" alt="">
+          </div>
           <div class="user-name" >{{state.report?.userNickName || '逻辑狗'}}</div>
         </div>
-
       <div class="learn-report-content" >
+        <!-- 问题提示 -->
+      <img class="ques-tip" v-if="quesTipState" :src="staticImg.tip" >
         <!-- 学习天数 -->
       <div class="learn-day" v-if="posterShowState" >
         <div class="user-ava" >
@@ -30,7 +34,7 @@
               <div class="unit" >分钟</div>
             </div>
             <div class="data-item-desc" >
-              累计时长
+              累计学习
             </div>
           </div>
           <div class="data-item"  >
@@ -39,7 +43,7 @@
               <div class="unit" >颗</div>
             </div>
             <div class="data-item-desc" >
-              获得星数
+              累计获得
             </div>
           </div>
           <div class="data-item"  >
@@ -48,7 +52,7 @@
               <div class="unit" >%</div>
             </div>
             <div class="data-item-desc" >
-              正确率
+              今日正确率
             </div>
           </div>
         </div>
@@ -147,7 +151,6 @@
         <img :src="staticImg.learnReportDecator" alt="">
       </div>
       </div>
-
     </div>
 
       <Overlay :show="posterShowState" class="van-overlay" :lock-scroll="false"  :z-index="10"  @click="posterShowState = false">
@@ -174,7 +177,6 @@
           </div>
       </ActionSheet>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -186,7 +188,8 @@ import { screenShot, createQrcode } from '@/utils/utils'
 import { getReportByUser, shareUserReport } from "@/api/learnPlan"
 import { useRoute } from 'vue-router'
 import { useAppRouter, useAppFunc } from '@/hook/appHook'
-import { Overlay, ActionSheet, showToast } from 'vant'
+import { Overlay, ActionSheet, showToast, Popover } from 'vant'
+import { useClickAway } from '@vant/use'
 import OpenApp from '@/components/OpenApp/index.vue'
 import { registerWxopenButton } from '@/utils/utils'
 export interface QueryParams {
@@ -205,7 +208,9 @@ const staticImg = {
   learnReportDecator: require('@LP/assets/learn-report-decator.png'),
   dogCoin: require('@LP/assets/dog-coin.png'),
   photo: require('@/assets/component/common/photo.png'),
-  wechat: require('@/assets/component/common/wechat.png')
+  wechat: require('@/assets/component/common/wechat.png'),
+  quesIcon: require('@LP/assets/ques.png'),
+  tip: require('@LP/assets/tip.png'),
 }
 
 const [fco, atx] = useAudioManager({
@@ -214,6 +219,10 @@ const [fco, atx] = useAudioManager({
 })
 
 const queryParams = useRoute().query as unknown as QueryParams
+const quesImgRef = ref()
+
+
+useClickAway(quesImgRef, () => quesTipState.value = false)
 
 // queryParams.i = "1630466274125459458"
 // queryParams.u = "1430026961974345730"
@@ -228,6 +237,8 @@ const appFunc = useAppFunc()
 
 const qrcode = ref('')
 
+
+
 const posterShowState = ref(false)
 
 const shareShowState = ref(false)
@@ -238,6 +249,8 @@ const learnReportRef = ref('')
 
 const posterblob = ref('')
 
+const quesTipState = ref<boolean>(false)
+
 const playAudio = () => {
   fco.play()
 }
@@ -395,6 +408,14 @@ onMounted(async () => {
       top: 98px;
       left: 17px;
     }
+    .ques-img {
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      top: 98px;
+      left: 167px;
+    }
+
     .user-name {
       font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
@@ -408,6 +429,14 @@ onMounted(async () => {
 
   .learn-report-content {
     margin-top: -70px;
+    .ques-tip {
+      width: 255px;
+      height: 193px;
+      position: absolute;
+      top: 110px;
+      left: 50px;
+      z-index: 100;
+    }
   }
 
   .learn-day {