|
|
@@ -0,0 +1,521 @@
|
|
|
+<template>
|
|
|
+ <view class="pr">
|
|
|
+ <image class="pr-gift" :src="STATIC_IMAGES.gift" mode="aspectFit" @click="jumpGift"></image>
|
|
|
+ <view class="pr-score">
|
|
|
+ <view class="pr-score-top" :style="{backgroundImage: `url(${STATIC_IMAGES.topBGI})`}">
|
|
|
+ 答对{{ state.practice?.rightCount }}题，共{{ state.practice?.totalCount }}题
|
|
|
+ </view>
|
|
|
+ <image class="pr-score-cloud" :src="STATIC_IMAGES.cloud" mode="aspectFit"></image>
|
|
|
+ <image class="pr-score-dog" :src="STATIC_IMAGES.dog" mode="aspectFit"></image>
|
|
|
+ <view class="pr-score-content" :style="{backgroundImage: `url(${STATIC_IMAGES.contentBGI})`}">
|
|
|
+ <view class="pr-score-content-num">{{ state.practice?.rightCount }}/</view>
|
|
|
+ <view class="pr-score-content-total">{{ state.practice?.totalCount }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-score-bottom">
|
|
|
+ <view class="pr-score-bottom-item" v-for="item in INFO_LIST" :key="item.id">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ <text class="high">{{handleInfo(item.key)}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-card" v-for="(item, index) in state.practice.userAnswer">
|
|
|
+ <view class="pr-card-top">
|
|
|
+ <view class="pr-card-top-title">{{ item.title }}</view>
|
|
|
+ <view class="pr-card-top-desc">卡片{{ index + 1 }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-card-info">
|
|
|
+ <view class="pr-card-info-label">{{item.ableVar }}</view>
|
|
|
+ <view class="pr-card-info-time">
|
|
|
+ <image :src="STATIC_IMAGES.timer" mode="aspectFit"></image>
|
|
|
+ <text>{{item.takeTime }}s</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-card-star">
|
|
|
+ <image
|
|
|
+ v-for="star in item.rightOptionCount"
|
|
|
+ :key="star"
|
|
|
+ :src="STATIC_IMAGES.highStar"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ v-for="star in item.totalOptionCount - item.rightOptionCount"
|
|
|
+ :key="star"
|
|
|
+ :src="STATIC_IMAGES.star"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-recommend">
|
|
|
+ <view class="pr-recommend-title">提升推荐</view>
|
|
|
+ <image :src="STATIC_IMAGES.recommend" mode="aspectFit" @click="openMiniProgram"></image>
|
|
|
+ </view>
|
|
|
+ <view class="pr-more">
|
|
|
+ <view class="pr-more-title">更多宝宝学习计划</view>
|
|
|
+ <view class="pr-more-content">
|
|
|
+ <view class="pr-more-content-left">
|
|
|
+ <view class="pr-more-content-left-title">更多宝贝启蒙福利</view>
|
|
|
+ <view class="welfare">
|
|
|
+ <view v-for="item in WELFARE_LIST" :key="item.id" class="welfare-item">
|
|
|
+ <image :src="STATIC_IMAGES.mark" mode="aspectFit"></image>
|
|
|
+ <view>{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="pr-more-content-left-btn" :src="STATIC_IMAGES.btn" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="pr-more-content-code"
|
|
|
+ :src="STATIC_IMAGES.code"
|
|
|
+ mode="aspectFill"
|
|
|
+ show-menu-by-longpress
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pr-share">
|
|
|
+ <image :src="STATIC_IMAGES.share"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {computed, reactive} from "vue";
|
|
|
+import {onLoad} from "@dcloudio/uni-app";
|
|
|
+import {getPracticeDetailByScoreId} from '@/api/practice'
|
|
|
+interface QueryParams {
|
|
|
+ id: string,
|
|
|
+}
|
|
|
+
|
|
|
+interface State {
|
|
|
+ scoreId: string,
|
|
|
+ practice: Partial<API.Practice> | null
|
|
|
+}
|
|
|
+
|
|
|
+const STATIC_IMAGES = {
|
|
|
+ gift: "https://img.luojigou.vip/FmwR1PujFE7gzFVB9zZWgI0B9Y_K",
|
|
|
+ topBGI: "https://img.luojigou.vip/FhkO2X4z8dq2pCWROrSTtvp74RrA",
|
|
|
+ cloud: "https://img.luojigou.vip/Fralw2fXHmSbe6dMmAAXvpHjwQpe",
|
|
|
+ dog: "https://img.luojigou.vip/FqS0G4tJfwStzaB0q9kLHGmBTmM2",
|
|
|
+ contentBGI: "https://img.luojigou.vip/FpshEMbGAig57gJLl_XowZ9-_d2O",
|
|
|
+ timer: "https://img.luojigou.vip/Fujv5BArFDJ2AtQ8an5LzNxindbL",
|
|
|
+ highStar: "https://img.luojigou.vip/Fu3EQtCfehtiO5VwZ1vu7QCrP1Kw",
|
|
|
+ star: "https://img.luojigou.vip/FoY0UunWCZTmvoJNPyJgon9E3Vji",
|
|
|
+ recommend: "https://img.luojigou.vip/FlcTV-wuDWfUh4p9vU1UjCaSR8RA",
|
|
|
+ code: "https://img.luojigou.vip/FkUhmOKcaNSP4HGER7-xBbnGspLw",
|
|
|
+ mark: "https://img.luojigou.vip/Fty-uqpNksTTJnJkhDNPNPsFXsRa",
|
|
|
+ btn: "https://img.luojigou.vip/FiKBJMkl2ZGwJCz-u77bWDi2GVKX",
|
|
|
+ share: "https://img.luojigou.vip/FrmMXUNh4aLXV1XlPFHtRNFKUqs4"
|
|
|
+}
|
|
|
+
|
|
|
+const INFO_LIST = [
|
|
|
+ {id: 0, name: '总时间：', key: 'totalTime'},
|
|
|
+ {id: 1, name: '正确率：', key: 'accuracy'},
|
|
|
+ {id: 2, name: '时间：', key: 'createTime'},
|
|
|
+]
|
|
|
+
|
|
|
+const WELFARE_LIST = [
|
|
|
+ {id: 0, name: '免费课程'},
|
|
|
+ {id: 1, name: '干货资料'},
|
|
|
+ {id: 2, name: '大额折扣'},
|
|
|
+ {id: 3, name: '专属答疑'},
|
|
|
+]
|
|
|
+
|
|
|
+onLoad(query => {
|
|
|
+ const options = query as QueryParams
|
|
|
+ state.scoreId = options.id
|
|
|
+ getDetail()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const state = reactive<State>({
|
|
|
+ scoreId: '',
|
|
|
+ practice: {
|
|
|
+ accuracy: 0,
|
|
|
+ answerItems: [],
|
|
|
+ createTime: '',
|
|
|
+ id: '',
|
|
|
+ rightCount: 0,
|
|
|
+ scoreId: '',
|
|
|
+ totalCount: 0,
|
|
|
+ totalTime: 0,
|
|
|
+ userAnswer: [],
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const handleInfo = computed(() => {
|
|
|
+ return (key: string) => {
|
|
|
+ if(key === 'totalTime' && state.practice?.totalTime) {
|
|
|
+ return state.practice?.totalTime + 's'
|
|
|
+ } else if(key === 'accuracy' && state.practice?.accuracy) {
|
|
|
+ return state.practice.accuracy * 100 + '%'
|
|
|
+ } else if(key === 'createTime' && state.practice?.createTime) {
|
|
|
+ return state.practice?.createTime.split(' ')[0]
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const getDetail = async () => {
|
|
|
+ const {result} = await getPracticeDetailByScoreId(state.scoreId)
|
|
|
+ state.practice = result
|
|
|
+}
|
|
|
+
|
|
|
+const openMiniProgram = () => {
|
|
|
+ uni.navigateToMiniProgram({
|
|
|
+ appId: 'wx01e79cb36b9436ee',
|
|
|
+ success(res) {
|
|
|
+ // 打开成功
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const jumpGift = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/Practice/course'
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.pr {
|
|
|
+ padding-bottom: 240rpx;
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+
|
|
|
+ image {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ >view {
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-gift {
|
|
|
+ margin: 30rpx auto 0;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 162rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-score {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 64rpx;
|
|
|
+ padding-top: 54rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 484rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0 4rpx 20rpx 0 #E9E9EA;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ position: absolute;
|
|
|
+ top: -32rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ padding-top: 54rpx;
|
|
|
+ width: 416rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FF862B;
|
|
|
+ line-height: 34rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-cloud {
|
|
|
+ position: absolute;
|
|
|
+ top: 86rpx;
|
|
|
+ left: 18rpx;
|
|
|
+ width: 192rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-dog {
|
|
|
+ position: absolute;
|
|
|
+ right: 56rpx;
|
|
|
+ bottom: 88rpx;
|
|
|
+ width: 82rpx;
|
|
|
+ height: 116rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 98rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 306rpx;
|
|
|
+ height: 306rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ font-size: 172rpx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FF8024;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-total {
|
|
|
+ margin-top: 100rpx;
|
|
|
+ margin-left: -20rpx;
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #DBDCDB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 26rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 628rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C0C1C3;
|
|
|
+ line-height: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .high {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FF8024;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-card {
|
|
|
+ padding: 42rpx 44rpx 78rpx;
|
|
|
+ margin-top: 26rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 370rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 4rpx 20rpx 0rpx #E9E9EA;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333330;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-desc {
|
|
|
+ height: 34rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #A7A7B2;
|
|
|
+ line-height: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 18rpx;
|
|
|
+ border-bottom: 1rpx solid #EDEFED;
|
|
|
+
|
|
|
+ &-label {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 52rpx;
|
|
|
+ border: 1rpx solid #FF8024;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FF8024;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-right: 14rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ margin-right: 16rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF8024;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-star {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 34rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 98rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-recommend {
|
|
|
+ margin-top: 80rpx;
|
|
|
+ width: 722rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333330;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 722rpx;
|
|
|
+ height: 388rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-more {
|
|
|
+ margin-top: 62rpx;
|
|
|
+ width: 702rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333330;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 292rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 4rpx 20rpx 0rpx #E9E9EA;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ margin-left: 38rpx;
|
|
|
+ width: 360rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333330;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .welfare {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view {
|
|
|
+ height: 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .welfare-item:nth-child(2n+1) {
|
|
|
+ margin-right: 38rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .welfare-item:nth-child(-n+2) {
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ width: 270rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-code {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 284rpx;
|
|
|
+ height: 276rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-share {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 208rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx -8rpx 68rpx 0rpx rgba(0,0,0,0.1);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin: 36rpx auto 0;
|
|
|
+ width: 694rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
