|
|
@@ -25,18 +25,17 @@
|
|
|
<div class="learn-preview-data" >
|
|
|
<div class="data-item" >
|
|
|
<div class="staticsc" >
|
|
|
- <!-- <span>{{ state.report?.totalStudyDays}}</span> -->
|
|
|
- <span>1</span>
|
|
|
+ <span>{{state.report?.totalDuration ? Math.floor( state.report?.totalDuration! / 60) : 0 }}</span>
|
|
|
<div class="unit" >分钟</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<div class="data-item-desc" >
|
|
|
累计时长
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-item" >
|
|
|
<div class="staticsc" >
|
|
|
- <!-- <span>{{state.report?.totalStars}}</span> -->
|
|
|
- <span>12</span>
|
|
|
+ <span>{{state.report?.totalStars}}</span>
|
|
|
+
|
|
|
<div class="unit" >颗</div>
|
|
|
</div>
|
|
|
<div class="data-item-desc" >
|
|
|
@@ -45,8 +44,7 @@
|
|
|
</div>
|
|
|
<div class="data-item" >
|
|
|
<div class="staticsc" >
|
|
|
- <!-- <span>{{state.report?.totalQuantity}}</span> -->
|
|
|
- <span>7</span>
|
|
|
+ <span>{{state.report?.accuracy}}</span>
|
|
|
<div class="unit" >%</div>
|
|
|
</div>
|
|
|
<div class="data-item-desc" >
|
|
|
@@ -57,8 +55,9 @@
|
|
|
<div class="decator" >
|
|
|
<img :src="staticImg.decator" alt="">
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="audio-play-container" :style="{background: `url(${state.report?.task3Image}) no-repeat top left`}" >
|
|
|
+ <div class="audio-play-container"
|
|
|
+ :style="{backgroundImage: `url(${state.report?.task3Image}`}"
|
|
|
+ >
|
|
|
<div v-if="!fco.playing" class="audio-time-total" >
|
|
|
{{fco.duration}}
|
|
|
</div>
|
|
|
@@ -66,8 +65,9 @@
|
|
|
<img :src="staticImg.playButton" alt="">
|
|
|
</div>
|
|
|
|
|
|
- <div class="play-process" v-show="fco.playing" >
|
|
|
+ <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"
|
|
|
@@ -93,27 +93,27 @@
|
|
|
<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 in state.report?.exerciseCardResultList"
|
|
|
+ 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>
|
|
|
+ <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 - 1 )"
|
|
|
+ v-for="item in state.report?.teachDescription.split('\n').splice(0, state.report?.teachDescription.split('\n').length)"
|
|
|
:key="item"
|
|
|
>
|
|
|
<div class="dot" ></div>
|
|
|
@@ -149,44 +149,44 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <van-overlay :show="posterShowState" :lock-scroll="false" :z-index="10" @click="posterShowState = false">
|
|
|
- <div class="wrapper" >
|
|
|
- <div class="poster-container" ref="learnReportRef" ></div>
|
|
|
- <!-- 点击晒报告 晒报告 -->
|
|
|
- <van-action-sheet :overlay="false" v-model:show="shareShowState" :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>
|
|
|
- <div class="share-item" @click.stop="shareWx">
|
|
|
- <img :src="staticImg.wechat" alt="">
|
|
|
- <span>微信好友</span>
|
|
|
- </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>
|
|
|
+ </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>
|
|
|
- <div class="cancel-butuon" @click="shareShowState = false" >
|
|
|
- 取消
|
|
|
+ <div class="share-item" @click.stop="shareWx">
|
|
|
+ <img :src="staticImg.wechat" alt="">
|
|
|
+ <span>微信好友</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </van-action-sheet>
|
|
|
- </div>
|
|
|
-
|
|
|
- </van-overlay>
|
|
|
-
|
|
|
+ <div class="cancel-butuon" @click="closeModal" >
|
|
|
+ 取消
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ActionSheet>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, nextTick, onMounted, computed, watch, reactive } from 'vue'
|
|
|
-import { useAudioManager } from '@/hook/index'
|
|
|
+
|
|
|
+import { ref, nextTick, onMounted, computed, watch, reactive, getCurrentInstance } from 'vue'
|
|
|
+import { useAudioManager, useSchedulerOnce } 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'
|
|
|
|
|
|
export interface QueryParams {
|
|
|
i: string,
|
|
|
@@ -213,12 +213,12 @@ const [fco, atx] = useAudioManager({
|
|
|
|
|
|
const queryParams = useRoute().query as unknown as QueryParams
|
|
|
|
|
|
-// queryParams.i = "1630466274125459458"
|
|
|
-// queryParams.u = "1430026961974345730"
|
|
|
+queryParams.i = "1630466274125459458"
|
|
|
+queryParams.u = "1430026961974345730"
|
|
|
|
|
|
-console.log(window.location.href);
|
|
|
+const posterScaleRate = ref(window.screen.width / window.screen.height > 0.7 ? 0.22 : 0.3)
|
|
|
|
|
|
-console.log("queryParams:", queryParams);
|
|
|
+const userId = ref(queryParams.u)
|
|
|
|
|
|
const appRouter = useAppRouter()
|
|
|
|
|
|
@@ -230,18 +230,61 @@ const posterShowState = ref(false)
|
|
|
|
|
|
const shareShowState = ref(false)
|
|
|
|
|
|
-const learnReportRef = ref()
|
|
|
+const playProcessRef = ref('')
|
|
|
+
|
|
|
+const learnReportRef = ref('')
|
|
|
|
|
|
const posterblob = ref('')
|
|
|
|
|
|
-const playAudio = () => fco.play()
|
|
|
+const playAudio = () => {
|
|
|
+ console.log(Array.from(document.getElementsByClassName('van-progress__pivot'))[0].getBoundingClientRect());
|
|
|
+
|
|
|
+ fco.play()
|
|
|
+}
|
|
|
|
|
|
const state = reactive<Partial<API.LearnPlan.Task>>({})
|
|
|
|
|
|
+const closeModal = () => {
|
|
|
+
|
|
|
+ posterShowState.value = false
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const initAudioDragEvent = () => {
|
|
|
+ let element = Array.from(document.getElementsByClassName('van-progress__pivot'))[0]
|
|
|
+
|
|
|
+ let start = 0;
|
|
|
+
|
|
|
+ let distance = 0;
|
|
|
+
|
|
|
+ element.addEventListener("touchstart", function(event) {
|
|
|
+ start = event.touches[0].clientX;
|
|
|
+ fco.pause()
|
|
|
+ });
|
|
|
+
|
|
|
+ element.addEventListener("touchmove", function(event) {
|
|
|
+ distance = event.touches[0].clientX - start + 11;
|
|
|
+ console.log(distance);
|
|
|
+ if (distance < 0) {
|
|
|
+ fco.setPercentage(0)
|
|
|
+ } else if (distance > playProcessRef.value.clientWidth) {
|
|
|
+ fco.setPercentage( 1)
|
|
|
+ } else {
|
|
|
+ fco.setPercentage( distance / playProcessRef.value.clientWidth)
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ element.addEventListener('touchend', function(e) {
|
|
|
+ fco.play()
|
|
|
+ }, false);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
const openModal = () => {
|
|
|
posterShowState.value = true
|
|
|
- shareShowState.value = true
|
|
|
- _shareUserReport()
|
|
|
+ createPoster()
|
|
|
}
|
|
|
|
|
|
const savePoster = () => {
|
|
|
@@ -249,47 +292,69 @@ const savePoster = () => {
|
|
|
}
|
|
|
|
|
|
const _shareUserReport = async () => {
|
|
|
- const data = await shareUserReport({ "itemId": queryParams.i, "userId": queryParams.u! })
|
|
|
- console.log(data);
|
|
|
- createPoster()
|
|
|
+ await shareUserReport({ "itemId": queryParams.i, "userId": queryParams.u! })
|
|
|
+}
|
|
|
+
|
|
|
+const updatePercentage = (e) => {
|
|
|
+
|
|
|
+ const percentage = (e.layerX / playProcessRef.value.clientWidth)
|
|
|
+
|
|
|
+ fco.setPercentage(percentage)
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 分享海报到微信
|
|
|
const shareWx = () => {
|
|
|
appFunc.shareWx(posterblob.value)
|
|
|
+ _shareUserReport()
|
|
|
}
|
|
|
|
|
|
// 获取用户报告信息
|
|
|
const _getReportByUser = async () => {
|
|
|
- console.log('获取用户报告信息', useTokenStore().get());
|
|
|
-
|
|
|
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 () => {
|
|
|
- posterShowState.value = true
|
|
|
+ console.log(posterScaleRate.value);
|
|
|
+
|
|
|
nextTick(async () => {
|
|
|
- if (Array.from(learnReportRef.value.children).length === 0) {
|
|
|
+ console.log(learnReportRef.value);
|
|
|
+ const target = document.getElementById('learnReportRef')!
|
|
|
+ if (Array.from(target!.children).length === 0) {
|
|
|
const posterEl = await screenShot('learn-report')
|
|
|
- console.log('posterEl.src:', posterEl.src);
|
|
|
posterblob.value = posterEl.src
|
|
|
- posterEl.style.transform = 'scale(0.8)'
|
|
|
- learnReportRef.value.append(posterEl)
|
|
|
+ posterEl.style.width = window.screen.width * posterScaleRate.value + 'px'
|
|
|
+ target.append(posterEl)
|
|
|
+ state.shared = 1
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
}
|
|
|
|
|
|
const getQrcodeUrl = async () => {
|
|
|
- qrcode.value = await createQrcode(window.location.href)
|
|
|
+ qrcode.value = await createQrcode(queryParams.u ? window.location.href : `${window.location.href}&u=${userId.value}`)
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- await appRouter.getToken()
|
|
|
+
|
|
|
+ // fco.src = 'https://app-resources-luojigou.luojigou.vip/61b092e0-ed4d-11ed-b1c6-f74dbdb881ba'
|
|
|
+ // console.log(fco.src);
|
|
|
|
|
|
- getQrcodeUrl()
|
|
|
- _getReportByUser()
|
|
|
+ if (queryParams.u) {
|
|
|
+ _getReportByUser()
|
|
|
+ } else {
|
|
|
+ await appRouter.getToken()
|
|
|
+ _getReportByUser()
|
|
|
+ }
|
|
|
+
|
|
|
+ initAudioDragEvent()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
@@ -311,13 +376,14 @@ onMounted(async () => {
|
|
|
display: block;
|
|
|
position: relative;
|
|
|
top: -20px;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
.title-img {
|
|
|
width: 146px;
|
|
|
height: 39px;
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
- top: 78px;
|
|
|
+ top: 98px;
|
|
|
left: 17px;
|
|
|
}
|
|
|
.user-name {
|
|
|
@@ -326,7 +392,7 @@ onMounted(async () => {
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
position: absolute;
|
|
|
- top: 126px;
|
|
|
+ top: 146px;
|
|
|
left: 20px;
|
|
|
}
|
|
|
}
|
|
|
@@ -412,7 +478,7 @@ onMounted(async () => {
|
|
|
.data-item {
|
|
|
.staticsc {
|
|
|
display: flex;
|
|
|
- align-items: end;
|
|
|
+ align-items: flex-end;
|
|
|
span {
|
|
|
font-size: 36px;
|
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
|
@@ -425,6 +491,9 @@ onMounted(async () => {
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #999999;
|
|
|
+ height: 41px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
}
|
|
|
.data-item-desc {
|
|
|
@@ -452,12 +521,11 @@ onMounted(async () => {
|
|
|
.audio-play-container {
|
|
|
width: 262px;
|
|
|
height: 277px;
|
|
|
-
|
|
|
// background-color: #F5F5F5;
|
|
|
border-radius: 20px;
|
|
|
margin-top: 30px;
|
|
|
position: relative;
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-size: cover;
|
|
|
.audio-time-total {
|
|
|
width: 56px;
|
|
|
height: 24px;
|
|
|
@@ -657,7 +725,7 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
.create-poster {
|
|
|
- width: 375px;
|
|
|
+ width: 100vw;
|
|
|
height: 88px;
|
|
|
background: #FEFEFE;
|
|
|
position: fixed;
|
|
|
@@ -691,14 +759,22 @@ onMounted(async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.van-overlay {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0,0,0,0.4);
|
|
|
+ z-index: 11;
|
|
|
+}
|
|
|
.wrapper {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
overflow-y: scroll;
|
|
|
z-index: 40;
|
|
|
.poster-container {
|
|
|
- margin-top: -100px;
|
|
|
- padding-bottom: 300px;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 6%;
|
|
|
+ transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -715,12 +791,14 @@ onMounted(async () => {
|
|
|
.share-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
margin-top: 18px;
|
|
|
+ align-items: center;
|
|
|
img {
|
|
|
width: 51px;
|
|
|
height: 51px;
|
|
|
display: block;
|
|
|
- margin-bottom: 3px;
|
|
|
+ margin-bottom: 6px;
|
|
|
}
|
|
|
}
|
|
|
}
|
lvkun996
