|
@@ -1,176 +1,176 @@
|
|
|
<template>
|
|
|
<div class="learn-report-container" >
|
|
|
<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 class="user-name" >{{state.report?.userNickName || '逻辑狗'}}</div>
|
|
|
- </div>
|
|
|
+ <div class="learn-report-bg">
|
|
|
+ <img class="bg" :src="staticImg.learnReportBg" alt="">
|
|
|
+ <img class="title-img" :src="staticImg.titleImg" alt="">
|
|
|
+ <div class="user-name" >{{state.report?.userNickName || '逻辑狗'}}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="learn-report-content" >
|
|
|
- <!-- 学习天数 -->
|
|
|
- <div class="learn-day" v-if="posterShowState" >
|
|
|
- <div class="user-ava" >
|
|
|
- <img :src="staticImg.learnReportBg" alt="">
|
|
|
- </div>
|
|
|
- <div class="user-name" >{{state.report?.userNickName}}</div>
|
|
|
- <div class="learn-day-desc" >
|
|
|
- <div>我家宝贝已经连续学习<span>{{state.report?.totalStudyDays}}</span>天了</div>
|
|
|
- <div>快来一起学习吧</div>
|
|
|
+ <div class="learn-report-content" >
|
|
|
+ <!-- 学习天数 -->
|
|
|
+ <div class="learn-day" v-if="posterShowState" >
|
|
|
+ <div class="user-ava" >
|
|
|
+ <img :src="staticImg.learnReportBg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="user-name" >{{state.report?.userNickName}}</div>
|
|
|
+ <div class="learn-day-desc" >
|
|
|
+ <div>我家宝贝已经连续学习<span>{{state.report?.totalStudyDays}}</span>天了</div>
|
|
|
+ <div>快来一起学习吧</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 学习展示 -->
|
|
|
- <div class="learn-preview" :style="{marginTop: posterShowState ? '16px' : '-16px'}" >
|
|
|
- <div class="learn-preview-data" >
|
|
|
- <div class="data-item" >
|
|
|
- <div class="staticsc" >
|
|
|
- <span>{{state.report?.totalDuration ? Math.floor( state.report?.totalDuration! / 60) : 0 }}</span>
|
|
|
- <div class="unit" >分钟</div>
|
|
|
- </div>
|
|
|
- <div class="data-item-desc" >
|
|
|
- 累计时长
|
|
|
+ <!-- 学习展示 -->
|
|
|
+ <div class="learn-preview" :style="{marginTop: posterShowState ? '16px' : '-16px'}" >
|
|
|
+ <div class="learn-preview-data" >
|
|
|
+ <div class="data-item" >
|
|
|
+ <div class="staticsc" >
|
|
|
+ <span>{{state.report?.totalDuration ? Math.floor( state.report?.totalDuration! / 60) : 0 }}</span>
|
|
|
+ <div class="unit" >分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item-desc" >
|
|
|
+ 累计时长
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="data-item" >
|
|
|
- <div class="staticsc" >
|
|
|
- <span>{{state.report?.totalStars}}</span>
|
|
|
-
|
|
|
- <div class="unit" >颗</div>
|
|
|
+ <div class="data-item" >
|
|
|
+ <div class="staticsc" >
|
|
|
+ <span>{{state.report?.totalStars}}</span>
|
|
|
+ <div class="unit" >颗</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item-desc" >
|
|
|
+ 获得星数
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="data-item-desc" >
|
|
|
- 获得星数
|
|
|
+ <div class="data-item" >
|
|
|
+ <div class="staticsc" >
|
|
|
+ <span>{{state.report?.accuracy}}</span>
|
|
|
+ <div class="unit" >%</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item-desc" >
|
|
|
+ 正确率
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="data-item" >
|
|
|
- <div class="staticsc" >
|
|
|
- <span>{{state.report?.accuracy}}</span>
|
|
|
- <div class="unit" >%</div>
|
|
|
+ <div class="decator" >
|
|
|
+ <img :src="staticImg.decator" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="audio-play-container"
|
|
|
+ :style="{backgroundImage: `url(${state.report?.task3Image}`}"
|
|
|
+ >
|
|
|
+ <div v-if="!fco.playing" class="audio-time-total" >
|
|
|
+ {{fco.duration}}
|
|
|
</div>
|
|
|
- <div class="data-item-desc" >
|
|
|
- 正确率
|
|
|
+ <div class="play-button" @click="playAudio" v-if="!fco.playing">
|
|
|
+ <img :src="staticImg.playButton" alt="">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="decator" >
|
|
|
- <img :src="staticImg.decator" alt="">
|
|
|
- </div>
|
|
|
- <div class="audio-play-container"
|
|
|
- :style="{backgroundImage: `url(${state.report?.task3Image}`}"
|
|
|
- >
|
|
|
- <div v-if="!fco.playing" class="audio-time-total" >
|
|
|
- {{fco.duration}}
|
|
|
- </div>
|
|
|
- <div class="play-button" @click="playAudio" v-if="!fco.playing">
|
|
|
- <img :src="staticImg.playButton" alt="">
|
|
|
- </div>
|
|
|
|
|
|
- <div class="play-process" ref="playProcessRef" v-show="fco.playing" >
|
|
|
- <van-progress
|
|
|
- @click="updatePercentage"
|
|
|
- class="van-progress"
|
|
|
- :percentage="Number(fco.percentage.toFixed(2)) * 100"
|
|
|
- pivot-color="#FF8024"
|
|
|
- color="#FF8024"
|
|
|
- pivot-text=" "
|
|
|
- track-color="#EDEDED"
|
|
|
- />
|
|
|
- <div class="play-time-process" >
|
|
|
- {{fco.updateTime}}/{{fco.duration}}
|
|
|
+ <div class="play-process" ref="playProcessRef" v-show="fco.playing" >
|
|
|
+ <van-progress
|
|
|
+ @click="updatePercentage"
|
|
|
+ class="van-progress"
|
|
|
+ :percentage="Number(fco.percentage.toFixed(2)) * 100"
|
|
|
+ pivot-color="#FF8024"
|
|
|
+ color="#FF8024"
|
|
|
+ pivot-text=" "
|
|
|
+ track-color="#EDEDED"
|
|
|
+ />
|
|
|
+ <div class="play-time-process" >
|
|
|
+ {{fco.updateTime}}/{{fco.duration}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="learn-preview-desc" v-if="posterShowState" >
|
|
|
- 长按扫描二维码,一起查看~
|
|
|
- </div>
|
|
|
+ <div class="learn-preview-desc" v-if="posterShowState" >
|
|
|
+ 长按扫描二维码,一起查看~
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
- <!-- v-if="state.report?.exerciseCardResultList" -->
|
|
|
- <!-- 练习分析 -->
|
|
|
- <div class="learn-any learn-modle" >
|
|
|
- <div class="learn-modle-title" >
|
|
|
- <img :src="staticImg.learnAny" alt="">
|
|
|
- <div class="learn-title" >今日练习分析</div>
|
|
|
- </div>
|
|
|
- <div class="able-any" >
|
|
|
- <able-chart
|
|
|
- style="margin-bottom: 12px;"
|
|
|
- :title="item.capability"
|
|
|
- :index="index"
|
|
|
- :count="item.correctQuantity"
|
|
|
- v-for="(item, index) in state.report?.exerciseCardResultList"
|
|
|
- :key="item.capability"
|
|
|
- />
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 家园共育策略 -->
|
|
|
- <div class="home-strategy learn-modle" >
|
|
|
- <div class="learn-modle-title" >
|
|
|
- <img :src="staticImg.strategy" alt="">
|
|
|
- <div class="learn-title" >亲子游戏策略</div>
|
|
|
+ <!-- v-if="state.report?.exerciseCardResultList" -->
|
|
|
+ <!-- 练习分析 -->
|
|
|
+ <div class="learn-any learn-modle" >
|
|
|
+ <div class="learn-modle-title" >
|
|
|
+ <img :src="staticImg.learnAny" alt="">
|
|
|
+ <div class="learn-title" >今日练习分析</div>
|
|
|
+ </div>
|
|
|
+ <div class="able-any" >
|
|
|
+ <able-chart
|
|
|
+ style="margin-bottom: 12px;"
|
|
|
+ :title="item.capability"
|
|
|
+ :index="index"
|
|
|
+ :count="item.correctQuantity"
|
|
|
+ v-for="(item, index) in state.report?.exerciseCardResultList"
|
|
|
+ :key="item.capability"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="strategy" >
|
|
|
- <div class="strategy-item"
|
|
|
- v-for="item in state.report?.teachDescription.split('\n').splice(0, state.report?.teachDescription.split('\n').length)"
|
|
|
- :key="item"
|
|
|
- >
|
|
|
- <div class="dot" ></div>
|
|
|
- <div class="text-content" >
|
|
|
- {{item}}
|
|
|
+
|
|
|
+ <!-- 家园共育策略 -->
|
|
|
+ <div class="home-strategy learn-modle" >
|
|
|
+ <div class="learn-modle-title" >
|
|
|
+ <img :src="staticImg.strategy" alt="">
|
|
|
+ <div class="learn-title" >亲子游戏策略</div>
|
|
|
+ </div>
|
|
|
+ <div class="strategy" >
|
|
|
+ <div class="strategy-item"
|
|
|
+ v-for="item in state.report?.teachDescription.split('\n').splice(0, state.report?.teachDescription.split('\n').length)"
|
|
|
+ :key="item"
|
|
|
+ >
|
|
|
+ <div class="dot" ></div>
|
|
|
+ <div class="text-content" >
|
|
|
+ {{item}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="qrcode" v-show="posterShowState">
|
|
|
- <div class="qrcode-img" >
|
|
|
- <img :src="qrcode" alt="">
|
|
|
+ <div class="qrcode" v-show="posterShowState">
|
|
|
+ <div class="qrcode-img" >
|
|
|
+ <img :src="qrcode" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="qrcode-info" >
|
|
|
+ <div class="qrcode-title"> 逻辑狗·一起成长 </div>
|
|
|
+ <div class="qrcode-desc">识别二维码,让你家宝贝也来体验吧 </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="qrcode-info" >
|
|
|
- <div class="qrcode-title"> 逻辑狗·一起成长 </div>
|
|
|
- <div class="qrcode-desc">识别二维码,让你家宝贝也来体验吧 </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 生成报告 -->
|
|
|
+ <div class="create-poster" v-if="!posterShowState" >
|
|
|
+ <open-app v-if="queryParams.share == 1" />
|
|
|
+ <div v-else class="create-button" @click="openModal">
|
|
|
+ <div class="text" >晒报告 <span v-if="!state.shared" >+5</span> </div>
|
|
|
+ <img v-if="!state.shared" :src="staticImg.dogCoin" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 生成报告 -->
|
|
|
- <div class="create-poster" v-if="!posterShowState" >
|
|
|
- <div class="create-button" @click="openModal">
|
|
|
- <div class="text" >晒报告 <span v-if="!state.shared" >+5</span> </div>
|
|
|
- <img v-if="!state.shared" :src="staticImg.dogCoin" alt="">
|
|
|
+ <!-- 底部图片 -->
|
|
|
+ <div class="learn-report-decator" v-if="posterShowState" >
|
|
|
+ <img :src="staticImg.learnReportDecator" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 底部图片 -->
|
|
|
- <div class="learn-report-decator" v-if="posterShowState" >
|
|
|
- <img :src="staticImg.learnReportDecator" alt="">
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
|
|
|
<Overlay :show="posterShowState" class="van-overlay" :lock-scroll="false" :z-index="10" @click="posterShowState = false">
|
|
|
- <div class="wrapper">
|
|
|
- <div class="poster-container" id="learnReportRef"></div>
|
|
|
- </div>
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="poster-container" id="learnReportRef"></div>
|
|
|
+ </div>
|
|
|
</Overlay>
|
|
|
|
|
|
<ActionSheet :overlay="false" :show="posterShowState" :closeable="false" :z-index="11" title="晒报告">
|
|
|
- <div class="share-dialog" >
|
|
|
- <div class="share-content" >
|
|
|
- <div class="share-item" @click.stop="savePoster">
|
|
|
- <img :src="staticImg.photo" alt="">
|
|
|
- <span>保存海报</span>
|
|
|
+ <div class="share-dialog" >
|
|
|
+ <div class="share-content" >
|
|
|
+ <div class="share-item" @click.stop="savePoster">
|
|
|
+ <img :src="staticImg.photo" alt="">
|
|
|
+ <span>保存海报</span>
|
|
|
+ </div>
|
|
|
+ <div class="share-item" @click.stop="shareWx">
|
|
|
+ <img :src="staticImg.wechat" alt="">
|
|
|
+ <span>微信好友</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="share-item" @click.stop="shareWx">
|
|
|
- <img :src="staticImg.wechat" alt="">
|
|
|
- <span>微信好友</span>
|
|
|
+ <div class="cancel-butuon" @click="closeModal" >
|
|
|
+ 取消
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="cancel-butuon" @click="closeModal" >
|
|
|
- 取消
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</ActionSheet>
|
|
|
</div>
|
|
|
|
|
@@ -178,19 +178,21 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
-import { ref, nextTick, onMounted, computed, watch, reactive, getCurrentInstance } from 'vue'
|
|
|
-import { useAudioManager, useSchedulerOnce } from '@/hook/index'
|
|
|
+import { ref, nextTick, onMounted, reactive } from 'vue'
|
|
|
+import { useAudioManager } from '@/hook/index'
|
|
|
import AbleChart from '../../components/AbleChart.vue'
|
|
|
import { screenShot, createQrcode } from '@/utils/utils'
|
|
|
import { getReportByUser, shareUserReport } from "@/api/learnPlan"
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import { useAppRouter, useAppFunc } from '@/hook/appHook'
|
|
|
-import { useTokenStore } from '@/store'
|
|
|
-import { Button, Overlay, ActionSheet } from 'vant'
|
|
|
+import { Overlay, ActionSheet } from 'vant'
|
|
|
+import OpenApp from '@/components/OpenApp/index.vue'
|
|
|
+import { registerWxopenButton } from '@/utils/utils'
|
|
|
|
|
|
export interface QueryParams {
|
|
|
i: string,
|
|
|
- u?: string
|
|
|
+ u?: string,
|
|
|
+ share?: number
|
|
|
}
|
|
|
|
|
|
const staticImg = {
|
|
@@ -213,8 +215,14 @@ const [fco, atx] = useAudioManager({
|
|
|
|
|
|
const queryParams = useRoute().query as unknown as QueryParams
|
|
|
|
|
|
-queryParams.i = "1630466274125459458"
|
|
|
-queryParams.u = "1430026961974345730"
|
|
|
+console.log('timeStamp');
|
|
|
+
|
|
|
+
|
|
|
+console.log('queryParams:', queryParams);
|
|
|
+
|
|
|
+
|
|
|
+// queryParams.i = "1630466274125459458"
|
|
|
+// queryParams.u = "1430026961974345730"
|
|
|
|
|
|
const posterScaleRate = ref(window.screen.width / window.screen.height > 0.7 ? 0.22 : 0.3)
|
|
|
|
|
@@ -237,8 +245,6 @@ const learnReportRef = ref('')
|
|
|
const posterblob = ref('')
|
|
|
|
|
|
const playAudio = () => {
|
|
|
- console.log(Array.from(document.getElementsByClassName('van-progress__pivot'))[0].getBoundingClientRect());
|
|
|
-
|
|
|
fco.play()
|
|
|
}
|
|
|
|
|
@@ -311,18 +317,18 @@ const shareWx = () => {
|
|
|
|
|
|
// 获取用户报告信息
|
|
|
const _getReportByUser = async () => {
|
|
|
+
|
|
|
const { data } = await getReportByUser({ "itemId": queryParams.i, "userId": queryParams.u! })
|
|
|
+
|
|
|
fco.src = data.report.userLearnShareAudio
|
|
|
state.report = data.report
|
|
|
userId.value = data.userId
|
|
|
+
|
|
|
getQrcodeUrl()
|
|
|
}
|
|
|
|
|
|
const createPoster = async () => {
|
|
|
- console.log(posterScaleRate.value);
|
|
|
-
|
|
|
nextTick(async () => {
|
|
|
- console.log(learnReportRef.value);
|
|
|
const target = document.getElementById('learnReportRef')!
|
|
|
if (Array.from(target!.children).length === 0) {
|
|
|
const posterEl = await screenShot('learn-report')
|
|
@@ -331,19 +337,18 @@ const createPoster = async () => {
|
|
|
target.append(posterEl)
|
|
|
state.shared = 1
|
|
|
}
|
|
|
- })
|
|
|
+ })
|
|
|
|
|
|
}
|
|
|
|
|
|
const getQrcodeUrl = async () => {
|
|
|
- qrcode.value = await createQrcode(queryParams.u ? window.location.href : `${window.location.href}&u=${userId.value}`)
|
|
|
+
|
|
|
+ qrcode.value = await createQrcode(queryParams.u ? window.location.href + `&share=1` : `${window.location.href}&u=${userId.value}&share=1`)
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
|
- // fco.src = 'https://app-resources-luojigou.luojigou.vip/61b092e0-ed4d-11ed-b1c6-f74dbdb881ba'
|
|
|
- // console.log(fco.src);
|
|
|
-
|
|
|
+
|
|
|
if (queryParams.u) {
|
|
|
_getReportByUser()
|
|
|
} else {
|
|
@@ -351,9 +356,9 @@ onMounted(async () => {
|
|
|
_getReportByUser()
|
|
|
}
|
|
|
|
|
|
- initAudioDragEvent()
|
|
|
-
|
|
|
+ registerWxopenButton()
|
|
|
|
|
|
+ initAudioDragEvent()
|
|
|
|
|
|
})
|
|
|
|
|
@@ -734,6 +739,9 @@ onMounted(async () => {
|
|
|
z-index: 3;
|
|
|
padding-top: 9px;
|
|
|
box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
.create-button {
|
|
|
width: 334px;
|
|
|
height: 52px;
|