feat:学情报告

.vscode/settings.json

@@ -51,6 +51,7 @@
   "cSpell.words": [
     "dcloudio",
     "iconfont",
+    "JSAPI",
     "persistedstate",
     "pinia",
     "VITE",

package.json

@@ -2,12 +2,13 @@
   "name": "xuexiaole-mobile",
   "version": "0.1.0",
   "scripts": {
+    "dev": "uni --mode dev",
+    "dev:h5": "uni --mode dev",
+    "dev:mp": "uni --mode mp",
     "dev:app": "uni -p app",
     "dev:app-android": "uni -p app-android",
     "dev:app-ios": "uni -p app-ios",
     "dev:custom": "uni -p",
-    "dev:h5": "uni --mode dev",
-    "dev:h5-mp": "uni --mode mp",
     "dev:h5:ssr": "uni --ssr",
     "dev:mp-alipay": "uni -p mp-alipay",
     "dev:mp-baidu": "uni -p mp-baidu",

src/components/manual-bind-child/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { manualBindApi } from '@/api'
+import hud from '@/utils/hud'
+import { computed, ref } from 'vue'
+
+defineOptions({ name: 'ManualBindChild' })
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'finished'): void
+}>()
+
+const show = computed({
+  get: () => props.modelValue,
+  set: val => {
+    emit('update:modelValue', val)
+    if (val) {
+      childAccount.value = ''
+    }
+  },
+})
+const childAccount = ref('')
+
+// 确认手动绑定
+function confirmHandBind() {
+  if (!childAccount.value.trim()) {
+    hud.error('请输入孩子账号')
+    return
+  }
+
+  hud.load({
+    task: async () => {
+      const res = Number(await manualBindApi(childAccount.value))
+      if (res === 1) {
+        hud.success('绑定成功')
+      } else if (res === 0) {
+        hud.error('绑定失败')
+      } else if (res === 2) {
+        hud.success('已向管理员发送绑定请求')
+      }
+      emit('update:modelValue', false)
+      emit('finished')
+    },
+    option: '绑定',
+  })
+}
+</script>
+
+<template>
+  <mj-dialog v-model="show" title="手动绑定孩子账号" okText="绑定" :ok="confirmHandBind">
+    <input v-model="childAccount" class="single-input" placeholder="请输入孩子账号" type="text" />
+  </mj-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/academic-report/components/exerciseStatistics.vue

@@ -100,25 +100,24 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue'
-import DateFilter from './dateFilter.vue';
+import DateFilter from './dateFilter.vue'
-import RingChart from './Echart/RingChart.vue';
+import RingChart from './Echart/RingChart.vue'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
-import '../index.scss';
+import { studyErrorStatApi } from '@/api'
-import { studyErrorStatApi } from '@/api';
 const props = withDefaults(
   defineProps<{
-    subjectId: number | string;
+    subjectId: number | string
-    userId: string;
+    userId: string
   }>(),
   {
     subjectId: 0,
     userId: '',
   },
-);
+)
 
-const OSS_URL = import.meta.env.VITE_OSS_HOST;
+const OSS_URL = import.meta.env.VITE_OSS_HOST
-const empty = ref(false);
+const empty = ref(false)
 const opts = ref({
   padding: [15, 20, 0, 15],
   enableScroll: false,
@@ -153,9 +152,9 @@ const opts = ref({
       labelBgOpacity: 1,
     },
   },
-});
+})
-const loading = ref(false);
+const loading = ref(false)
-const dateType = ref(0);
+const dateType = ref(0)
 const showData = ref({
   correctRate: '',
   correctedNum: 0,
@@ -173,7 +172,7 @@ const showData = ref({
   ],
   totalNum: 0,
   totalRatioNum: 0,
-});
+})
 // 刷题统计
 const ringDate = ref({
   series: [
@@ -181,7 +180,7 @@ const ringDate = ref({
       data: [],
     },
   ],
-});
+})
 const exerciseStatistics = ref({
   categories: [],
   series: [
@@ -197,22 +196,22 @@ const exerciseStatistics = ref({
     },
     { name: '订正错题数', data: [], color: 'rgba(60, 195, 223, 1)' },
   ],
-});
+})
 
 async function fetchChartData() {
   if (props.subjectId === 0) {
-    empty.value = true;
+    empty.value = true
-    return;
+    return
   }
-  empty.value = false;
+  empty.value = false
   try {
-    loading.value = true;
+    loading.value = true
     const data = await studyErrorStatApi({
       dateType: dateType.value,
       subjectId: props.subjectId,
       userId: props.userId,
-    });
+    })
-    showData.value = data;
+    showData.value = data
     ringDate.value.series[0].data = [
       {
         name: '',
@@ -227,12 +226,12 @@ async function fetchChartData() {
         color: '#e2e2e2',
         labelShow: false,
       },
-    ];
+    ]
-    exerciseStatistics.value.categories = [];
+    exerciseStatistics.value.categories = []
     for (let i in data.recordVoList) {
       exerciseStatistics.value.categories[i] = dayjs(data.recordVoList[i].studyDate).format(
         'YYYY/MM/DD',
-      );
+      )
       exerciseStatistics.value.series = [
         {
           name: '做题数',
@@ -249,23 +248,23 @@ async function fetchChartData() {
           data: showData.value.recordVoList.map(item => item.correctedErrors),
           color: 'rgba(60, 195, 223, 1)',
         },
-      ];
+      ]
     }
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 function handleFilterDate(i) {
-  dateType.value = i.value;
+  dateType.value = i.value
-  fetchChartData();
+  fetchChartData()
 }
 watch(
   () => props.subjectId,
   val => {
-    dateType.value = 0;
+    dateType.value = 0
-    fetchChartData();
+    fetchChartData()
   },
-);
+)
 </script>
 <style lang="scss" scoped>
 .title2 {

src/pages/academic-report/components/knowledgeChart.vue

@@ -23,29 +23,28 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue'
-import DateFilter from './dateFilter.vue';
+import DateFilter from './dateFilter.vue'
-import RingChart from './Echart/RingChart.vue';
+import RingChart from './Echart/RingChart.vue'
-import ColumnChart from './Echart/ColumnChart.vue';
+import ColumnChart from './Echart/ColumnChart.vue'
-import LearningGraspTable from './learningGraspTable.vue';
+import LearningGraspTable from './learningGraspTable.vue'
 
-import '../index.scss';
+import { knowledgeStudyStatApi } from '@/api'
-import { knowledgeStudyStatApi } from '@/api';
 
 const props = withDefaults(
   defineProps<{
-    subjectId: number | string;
+    subjectId: number | string
-    userId: string;
+    userId: string
   }>(),
   {
     subjectId: 0,
     userId: '',
   },
-);
+)
-const emits = defineEmits(['change']);
+const emits = defineEmits(['change'])
-const loading = ref(false);
+const loading = ref(false)
-const dateType = ref(0);
+const dateType = ref(0)
-const empty = ref(false);
+const empty = ref(false)
 const showData = ref({
   bar: {
     studyDate: '',
@@ -81,14 +80,14 @@ const showData = ref({
       totalCount: '',
     },
   ],
-});
+})
 const ringDate = ref({
   series: [
     {
       data: [],
     },
   ],
-});
+})
 const knowledgeAcquisition = ref({
   categories: ['陌生数', '熟悉数', '掌握数'],
   series: [
@@ -96,23 +95,23 @@ const knowledgeAcquisition = ref({
       data: [],
     },
   ],
-});
+})
 
 async function fetchChartData() {
   if (props.subjectId === 0) {
-    empty.value = true;
+    empty.value = true
-    return;
+    return
   }
-  empty.value = false;
+  empty.value = false
   try {
-    loading.value = true;
+    loading.value = true
     const data = await knowledgeStudyStatApi({
       dateType: dateType.value,
       subjectId: props.subjectId,
       userId: props.userId,
-    });
+    })
 
-    showData.value = data;
+    showData.value = data
     knowledgeAcquisition.value.series[0].data = [
       {
         color:
@@ -133,7 +132,7 @@ async function fetchChartData() {
             : 'rgba(69, 203, 70, 1)',
         value: Math.abs(showData.value.bar.masteredChangeNum),
       },
-    ];
+    ]
     ringDate.value.series[0].data = [
       {
         name: '熟悉',
@@ -155,22 +154,22 @@ async function fetchChartData() {
         value: showData.value.ringList.find(item => Number(item.masteryDegree) === 0)?.count || 0,
         color: '#e2e2e2',
       },
-    ];
+    ]
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 function handleFilterDate(i) {
-  dateType.value = i.value;
+  dateType.value = i.value
-  fetchChartData();
+  fetchChartData()
 }
 watch(
   () => props.subjectId,
   val => {
-    dateType.value = 0;
+    dateType.value = 0
-    fetchChartData();
+    fetchChartData()
   },
-);
+)
 </script>
 <style lang="scss" scoped>
 .chart_show {

src/pages/academic-report/components/languageStatistics.vue

@@ -70,24 +70,23 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue'
-import DateFilter from './dateFilter.vue';
+import DateFilter from './dateFilter.vue'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
-import '../index.scss';
+import { englishLanguageStatApi } from '@/api'
-import { englishLanguageStatApi } from '@/api';
 
 const props = withDefaults(
   defineProps<{
-    show: boolean;
+    show: boolean
-    userId: string;
+    userId: string
   }>(),
   {
     show: false,
     userId: '',
   },
-);
+)
 
-const OSS_URL = import.meta.env.VITE_OSS_HOST;
+const OSS_URL = import.meta.env.VITE_OSS_HOST
 const opts = ref({
   padding: [15, 20, 0, 15],
   enableScroll: false,
@@ -122,10 +121,10 @@ const opts = ref({
       labelBgOpacity: 1,
     },
   },
-});
+})
-const loading = ref(false);
+const loading = ref(false)
-const empty = ref(false);
+const empty = ref(false)
-const dateType = ref(0);
+const dateType = ref(0)
 const showData = ref({
   beforeSentenceCount: 0,
   beforeSentenceWordCount: 0,
@@ -142,7 +141,7 @@ const showData = ref({
     },
   ],
   statTime: '',
-});
+})
 // 语感统计
 const languageStatistics = ref({
   categories: [],
@@ -158,17 +157,17 @@ const languageStatistics = ref({
       color: 'rgba(255, 168, 161, 1)',
     },
   ],
-});
+})
 
 async function fetchChartData() {
   try {
-    loading.value = true;
+    loading.value = true
     const data = await englishLanguageStatApi({
       dateType: dateType.value,
       userId: props.userId,
-    });
+    })
-    showData.value = data;
+    showData.value = data
-    languageStatistics.value.categories = [];
+    languageStatistics.value.categories = []
     languageStatistics.value.series = [
       {
         name: '句子练习数',
@@ -180,12 +179,12 @@ async function fetchChartData() {
         data: [],
         color: 'rgba(255, 168, 161, 1)',
       },
-    ];
+    ]
     if (dateType.value === 1 || dateType.value === 2)
       for (let i in data.statList) {
         languageStatistics.value.categories[i] = dayjs(data.statList[i].statTime).format(
           'YYYY/MM/DD',
-        );
+        )
         languageStatistics.value.series = [
           {
             name: '句子练习数',
@@ -197,25 +196,25 @@ async function fetchChartData() {
             data: showData.value.statList.map(item => item.sentenceWordCount),
             color: 'rgba(255, 168, 161, 1)',
           },
-        ];
+        ]
       }
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 function handleFilterDate(i) {
-  dateType.value = i.value;
+  dateType.value = i.value
-  fetchChartData();
+  fetchChartData()
 }
 watch(
   () => props.show,
   nv => {
     if (nv) {
-      dateType.value = 0;
+      dateType.value = 0
-      fetchChartData();
+      fetchChartData()
     }
   },
-);
+)
 </script>
 <style lang="scss" scoped>
 .chart_show {

src/pages/academic-report/components/studyTime.vue

@@ -35,7 +35,6 @@ import DateFilter from './dateFilter.vue'
 import BarChart from './Echart/BarChart.vue'
 
 import type { SubjectType, StudyTimeType } from '../interface'
-import '../index.scss'
 import { studyTimeStatApi } from '@/api'
 
 const props = withDefaults(

src/pages/academic-report/components/subjectFilter.vue

@@ -56,39 +56,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
-import type { SubjectType } from '../interface';
+import type { SubjectType } from '../interface'
-import { watch } from 'vue';
+import { watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    tabsList: SubjectType[];
+    tabsList: SubjectType[]
-    userId?: number | string;
+    userId?: number | string
   }>(),
   {
     tabsList: () => [],
   },
-);
+)
-const emits = defineEmits(['handleFilter']);
+const emits = defineEmits(['handleFilter'])
-const OSS_URL = import.meta.env.VITE_OSS_HOST;
+const OSS_URL = import.meta.env.VITE_OSS_HOST
 
-const xzIndex = ref(0);
+const xzIndex = ref(0)
-const showEvery = ref(false);
+const showEvery = ref(false)
 
 function selectFun(e, i) {
-  xzIndex.value = i;
+  xzIndex.value = i
-  emits('handleFilter', e);
+  emits('handleFilter', e)
 }
 
 function tapShowEvery() {
-  showEvery.value = !showEvery.value;
+  showEvery.value = !showEvery.value
 }
 watch(
   () => props.userId,
   val => {
-    xzIndex.value = 0;
+    xzIndex.value = 0
   },
-);
+)
 </script>
 
 <style lang="scss" scoped>

src/pages/academic-report/components/videoTime.vue

@@ -73,7 +73,6 @@
 import { ref, reactive, onMounted, watch } from 'vue'
 import DateFilter from './dateFilter.vue'
 
-import '../index.scss'
 import { videoStudyStatApi } from '@/api'
 import dayjs from 'dayjs'
 

src/pages/academic-report/index.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
+import { onShow } from '@dcloudio/uni-app'
-import Empty from '@/components/Empty/index.vue'
+import dayjs from 'dayjs'
-import ChildrenBox from './components/childrenBox.vue'
 
 import type { ChildrenType } from '@/pages/mine/interface'
-import './index.scss'
 import { storeToRefs } from 'pinia'
 import { useBadgeStore } from '@/store/badge'
 import { useChildStore } from '@/store/child'
@@ -17,24 +15,115 @@ const { getChildren } = childStore
 const { children } = storeToRefs(childStore)
 const { refreshBadge } = useBadgeStore()
 
-const empty = ref(false)
 const showChild = ref<ChildrenType>() // 展示的孩子
 
+const OSS_URL = import.meta.env.VITE_OSS_HOST
+const arrow = `${OSS_URL}/iconfont/down_arrow.png`
+
+const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
+const showAllChildren = ref(false)
+const checkedId = ref<string>()
+function handleShowChild(i: ChildrenType) {
+  checkedId.value = i.child?.id
+  showChild.value = i
+}
+
+const otherChildrenList = computed(() =>
+  children.value.filter(i => i.child?.id !== checkedId.value),
+)
+
+// 数据类型
+const dataTypeSum = 1
+const dataTypeWord = 2
+const dataTypeSubject = 3
+const dataTypeOptions = [
+  {
+    label: '综合',
+    value: dataTypeSum,
+  },
+  {
+    label: '单词句子',
+    value: dataTypeWord,
+  },
+  {
+    label: '学科',
+    value: dataTypeSubject,
+  },
+]
+const dataType = ref(dataTypeOptions[0].value)
+
+// 时间类型
+const timeTypeAll = 1
+const timeTypeDay = 2
+const timeTypeOptions = [
+  {
+    label: '总计',
+    value: timeTypeAll,
+  },
+  {
+    label: '每日',
+    value: timeTypeDay,
+  },
+]
+const timeType = ref(timeTypeOptions[0].value)
+const timeDay = ref(dayjs().format('YYYY-MM-DD'))
+const timeDayRef = ref()
+
+// 学科
+const english_subject_id = 4
+const chinese_subject_id = 2
+const math_subject_id = 3
+const subjectOptions = [
+  {
+    label: '英语',
+    value: english_subject_id,
+  },
+  {
+    label: '数学',
+    value: math_subject_id,
+  },
+  {
+    label: '语文',
+    value: chinese_subject_id,
+  },
+]
+const subject = ref(subjectOptions[0].value)
+
+watch(
+  [() => dataType.value, () => timeType.value, () => timeDay.value, () => subject.value],
+  () => {
+    const params = {
+      queryType: dataType.value,
+      queryRangeFlag: timeType.value,
+    } as any
+    // 每日
+    if (timeType.value === timeTypeDay) {
+      params.queryDate = timeDay.value
+    }
+    // 学科
+    if (dataType.value === dataTypeSubject) {
+      params.subjectId = subject.value
+    }
+    getStudentStudyDataApi(params)
+  },
+  { immediate: true },
+)
+
+// 选择日期
+function selectDate(val: any) {
+  timeDay.value = val.result
+}
+
 onShow(() => {
   Promise.all([getChildren(), refreshBadge()])
     .then(() => {
       if (!children.value?.length) return
       showChild.value = children.value[0]
+      checkedId.value = children.value[0].child?.id
     })
     .finally(() => {
       hud.hide()
     })
-
-  // 查询学习数据
-  getStudentStudyDataApi({
-    queryType: 1,
-    queryRangeFlag: 1,
-  })
 })
 
 onMounted(() => {
@@ -43,8 +132,488 @@ onMounted(() => {
 </script>
 
 <template>
-  <mj-page class="page">
+  <mj-page class="container">
-    <ChildrenBox :list="children" :showItem="showChild" />
+    <view class="children-box">
-    <Empty v-if="empty" content="暂无学情报告数据哦~" />
+      <view class="children">
+        <view class="left">
+          <image
+            :src="showChild?.child?.avatar || defaultAvatar"
+            mode=""
+            class="children_avatar"
+          ></image>
+          <view>
+            <view class="name_vip">
+              <text class="name">{{ showChild?.child?.name || '未绑定账号' }}</text>
+              <image
+                v-if="showChild?.child?.currentLevel"
+                :src="`${OSS_URL}/iconfont/VIP/VIP_${showChild?.child?.currentLevel}.png`"
+                class="vip"
+              />
+            </view>
+            <view class="time">
+              <template v-if="showChild?.child?.vipEndTime">
+                有效期至：{{
+                  showChild?.child?.vipEndTime
+                    ? dayjs(showChild?.child?.vipEndTime).format('YYYY.MM.DD')
+                    : '-'
+                }}
+              </template>
+              <template v-else>请先绑定孩子账号</template>
+            </view>
+          </view>
+        </view>
+        <view v-if="children.length > 1">
+          <image
+            :class="{ icon: true, rotate: showAllChildren }"
+            :src="arrow"
+            @click="showAllChildren = !showAllChildren"
+          />
+        </view>
+      </view>
+      <template v-if="showAllChildren">
+        <view
+          v-for="(i, idx) in otherChildrenList"
+          :key="idx"
+          class="children"
+          @click="handleShowChild(i)"
+        >
+          <view class="left">
+            <image :src="i.child?.avatar || defaultAvatar" mode="" class="children_avatar"></image>
+            <view>
+              <view class="name_vip">
+                <text class="name">{{ i.child?.name || '未绑定账号' }}</text>
+                <image
+                  v-if="i.child?.currentLevel"
+                  :src="`${OSS_URL}/iconfont/VIP/VIP_${i.child?.currentLevel}.png`"
+                  class="vip"
+                />
+              </view>
+              <view class="time">
+                有效期至：{{
+                  i.child?.vipEndTime ? dayjs(i.child?.vipEndTime).format('YYYY.MM.DD') : '-'
+                }}
+              </view>
+            </view>
+          </view>
+          <image
+            class="icon checked_icon"
+            :src="
+              checkedId === i.child?.id
+                ? `${OSS_URL}/iconfont/checked.png`
+                : `${OSS_URL}/iconfont/unchecked.png`
+            "
+          />
+        </view>
+      </template>
+      <view class="children_info">
+        <view class="item">
+          乐贝：<text class="level">{{ showChild?.child?.currency || '-' }}</text>
+        </view>
+        <view class="item">
+          钻石：<text class="level">{{ showChild?.child?.diamond || '-' }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="study-data">
+      <mj-segment v-model="dataType" :options="dataTypeOptions" />
+      <view class="time-type-box">
+        <mj-segment class="time-type" v-model="timeType" :options="timeTypeOptions" />
+        <view class="time-type-text" v-if="timeType === timeTypeDay" @click="timeDayRef.show()">{{
+          timeDay
+        }}</view>
+      </view>
+      <mj-segment v-if="dataType === dataTypeSubject" v-model="subject" :options="subjectOptions" />
+      <tui-grid v-if="dataType === dataTypeSum" class="data-grid">
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">有效学习时长</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">知识点</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">错题</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">订正</text>
+        </tui-grid-item>
+      </tui-grid>
+      <tui-grid v-else-if="dataType === dataTypeWord" class="data-grid">
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词陌生</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词认识</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词熟悉</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词掌握</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词总数</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">单词闯关星星</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">语感训练句子</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">有效学习时长</text>
+        </tui-grid-item>
+      </tui-grid>
+      <tui-grid v-else-if="dataType === dataTypeSubject" class="data-grid">
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">答题正确</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">答题错误</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">知识点总数</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">知识点掌握</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">订正总数</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">订正正确</text>
+        </tui-grid-item>
+        <tui-grid-item :cell="2">
+          <view class="value">{{ 0 }}</view>
+          <text class="label">有效学习时长</text>
+        </tui-grid-item>
+      </tui-grid>
+    </view>
+    <tui-datetime ref="timeDayRef" :type="2" :setDateTime="timeDay" @confirm="selectDate" />
   </mj-page>
 </template>
+
+<style scoped lang="scss">
+.container {
+  //   padding-bottom: 186rpx;
+  padding: 30rpx;
+
+  .study-data {
+    margin-top: 30rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 30rpx;
+
+    .time-type-box {
+      display: flex;
+      align-items: center;
+      gap: 30rpx;
+
+      .time-type-text {
+        width: 36%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #333;
+        height: 50rpx;
+        border-radius: 10rpx;
+      }
+
+      .time-type {
+        flex: 1;
+      }
+    }
+
+    .data-grid {
+      .value {
+        margin: 0 auto;
+        text-align: center;
+        vertical-align: middle;
+      }
+
+      .label {
+        display: block;
+        text-align: center;
+        font-weight: 400;
+        color: #333;
+        font-size: 28rpx;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 10rpx;
+      }
+    }
+  }
+
+  .children-box {
+    background-color: #fff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 20rpx;
+  }
+
+  .title {
+    margin-bottom: 30rpx;
+    font-size: 34rpx;
+    line-height: 48rpx;
+    color: $font-color;
+    font-weight: 500;
+  }
+
+  .title2 {
+    margin: 30rpx 0 20rpx 0;
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 40rpx;
+    text-align: center;
+  }
+
+  .trend_icon {
+    margin-left: 10rpx;
+    width: 26rpx;
+    height: 26rpx;
+  }
+
+  .study_situation {
+    display: flex;
+
+    .item {
+      flex: 1;
+      padding: 42rpx 30rpx;
+      display: flex;
+      justify-content: space-between;
+      height: 119rpx;
+      border-radius: 20rpx;
+      background-color: #f7faff;
+      font-size: 26rpx;
+      font-weight: 500;
+      box-sizing: border-box;
+
+      &:first-child {
+        margin-right: 30rpx;
+      }
+
+      .date {
+        color: #3fd15f;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  .study_situation2 {
+    display: flex;
+    justify-content: space-between;
+
+    .item {
+      width: calc(50% - 15rpx);
+      text-align: center;
+      font-weight: 500;
+
+      &_label {
+        display: block;
+        height: 76rpx;
+        line-height: 76rpx;
+        background-color: #ebf2ff;
+        border-bottom: 1rpx solid #d9e1f2;
+        border-radius: 20rpx 20rpx 0 0;
+        font-size: 26rpx;
+      }
+
+      &_date {
+        display: block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 79rpx;
+        line-height: 79rpx;
+        background-color: #f7faff;
+        border-radius: 0 0 20rpx 20rpx;
+
+        font-size: 28rpx;
+        // rgba(255, 40, 40, 1)jiang rgba(255, 141, 95, 1)ping
+      }
+
+      .keep {
+        color: #ff8d5f;
+      }
+
+      .down {
+        color: #ff2828;
+      }
+
+      .up {
+        color: #21d17a;
+      }
+    }
+  }
+
+  .date_filter_box {
+    text-align: center;
+  }
+
+  .children {
+    display: flex;
+    justify-content: space-between;
+    padding: 30rpx 0 30rpx 0;
+    border-bottom: 1rpx solid $border-color;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .children_avatar {
+        margin-right: 20rpx;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+      }
+
+      .name_vip {
+        display: flex;
+        align-items: center;
+        margin-bottom: 6rpx;
+
+        .name {
+          display: inline-block;
+          max-width: 210rpx;
+          font-weight: 500;
+          font-size: 32rpx;
+          line-height: 48rpx;
+          color: $font-color;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .vip {
+          margin-left: 10rpx;
+          width: 85rpx;
+          height: 32rpx;
+        }
+      }
+
+      .time {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: $font-aux-color;
+      }
+    }
+
+    .icon {
+      width: 30rpx;
+      height: 30rpx;
+    }
+
+    .checked_icon {
+      margin: auto 0;
+    }
+
+    .rotate {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .children_info {
+    display: flex;
+    padding: 30rpx 0 0 0;
+
+    .item {
+      width: 50%;
+      font-size: 28rpx;
+      line-height: 40rpx;
+      color: $font-aux-color;
+
+      .level {
+        color: $font-color;
+      }
+    }
+  }
+
+  .filter_box {
+    padding: 30rpx 30rpx 13rpx 30rpx;
+
+    .title {
+      margin-bottom: 0;
+    }
+  }
+
+  .learning_time {
+    .date_filter_box {
+      margin: 50rpx 0 30rpx 0;
+    }
+  }
+
+  .video_learning {
+    .date_filter_box {
+      margin: 30rpx 0;
+    }
+  }
+
+  .exercise_statistics {
+    .study_situation2 {
+      margin: 30rpx 0 0 0;
+
+      .item {
+        width: 210rpx;
+      }
+    }
+  }
+
+  .language_statistics {
+    .study_situation2 {
+      margin: 30rpx 0 50rpx 0;
+    }
+  }
+
+  .knowledge_mapping {
+    .chart_label {
+      display: flex;
+      justify-content: center;
+      font-size: 26rpx;
+      color: rgba(102, 102, 102, 1);
+
+      .iden_color {
+        display: inline-block;
+        width: 30rpx;
+        height: 8rpx;
+        margin-right: 4rpx;
+      }
+
+      .increase {
+        display: flex;
+        align-items: center;
+        margin-right: 16rpx;
+
+        .iden_color {
+          background-color: rgba(69, 203, 70, 1);
+        }
+      }
+
+      .decrease {
+        display: flex;
+        align-items: center;
+
+        .iden_color {
+          background-color: rgba(248, 104, 96, 1);
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/home/index.vue

@@ -9,6 +9,7 @@ import router from '@/router/router'
 import { useBadgeStore } from '@/store/badge'
 import { manualBindApi } from '@/api'
 import { useDeviceStore } from '@/store/device'
+import ManualBindChild from '@/components/manual-bind-child/index.vue'
 
 const { getUserInfo } = useUserStore()
 const deviceStore = useDeviceStore()
@@ -25,7 +26,6 @@ const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
 
 // 手动绑定弹框相关
 const showHandBindPopup = ref(false)
-const childAccount = ref('')
 
 const functionList = reactive([
   {
@@ -72,30 +72,6 @@ function scanBind() {
 // 手动绑定
 function handBind() {
   showHandBindPopup.value = true
-  childAccount.value = ''
-}
-
-// 确认手动绑定
-function confirmHandBind() {
-  if (!childAccount.value.trim()) {
-    hud.error('请输入孩子账号')
-    return
-  }
-
-  hud.load({
-    task: async () => {
-      const res = Number(await manualBindApi(childAccount.value))
-      if (res === 1) {
-        hud.success('绑定成功')
-      } else if (res === 0) {
-        hud.error('绑定失败')
-      } else if (res === 2) {
-        hud.success('已向管理员发送绑定请求')
-      }
-      showHandBindPopup.value = false
-    },
-    option: '绑定',
-  })
 }
 
 // 底部点击
@@ -225,14 +201,7 @@ onMounted(() => {
     </view>
 
     <!-- 手动绑定弹框 -->
-    <mj-dialog
+    <manual-bind-child v-model="showHandBindPopup" />
-      v-model="showHandBindPopup"
-      title="手动绑定孩子账号"
-      okText="绑定"
-      :ok="confirmHandBind"
-    >
-      <input v-model="childAccount" class="single-input" placeholder="请输入孩子账号" type="text" />
-    </mj-dialog>
   </mj-page>
 </template>
 

src/pages/mine/Components/recharge/index.vue

@@ -57,9 +57,48 @@ async function ok() {
     return
   }
 
-  // 生成订单
+  hud.load({
+    task: async () => {
       const data = await createRechargeOrderApi(money)
-  console.log(data)
+      const params = data.prepayResponse
+      if (!params) {
+        hud.error('生成订单失败')
+        return
+      }
+      // 发起支付
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest',
+        {
+          appId: params.appId, // 公众号ID，由商户传入
+          timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
+          nonceStr: params.nonceStr, // 随机串
+          package: params.packageVal,
+          signType: params.signType, // 微信签名方式：
+          paySign: params.paySign,
+        },
+        (res: any) => {
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+            hud.success('支付成功')
+            emit('update:modelValue', false)
+          } else {
+            hud.error('支付失败: ' + res.err_msg)
+          }
+        },
+      )
+      // wxPayJSAPI({
+      //   bridge: WeixinJSBridge,
+      //   params: payParams,
+      //   success: () => {
+      //     hud.success('支付成功')
+      //     emit('update:modelValue', false)
+      //   },
+      //   error: (err: any) => {
+      //     hud.error('支付失败: ' + err)
+      //   },
+      // })
+    },
+    option: '生成订单',
+  })
 }
 </script>
 

src/pages/parents/supervisionService/buyService.vue

@@ -193,43 +193,43 @@
 </template>
 
 <script setup lang="ts">
-declare const WeixinJSBridge: any;
+declare const WeixinJSBridge: any
-import { computed, reactive, ref, watchEffect } from 'vue';
+import { computed, reactive, ref, watchEffect } from 'vue'
-import card from './components/card.vue';
+import card from './components/card.vue'
-import CustomCalender from '@/components/customCalender/index.vue';
+import CustomCalender from '@/components/customCalender/index.vue'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
-import noclassIcon from '@/static/noclass-icon.jpg';
+import noclassIcon from '@/static/noclass-icon.jpg'
-import successPng from '@/static/suc.png';
+import successPng from '@/static/suc.png'
-import { useToast } from '@/uni_modules/wot-design-uni';
+import { useToast } from '@/uni_modules/wot-design-uni'
-import { getChildList, getModelList } from '@/api/modules/parent';
+import { getChildList, getModelList } from '@/api/modules/parent'
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad } from '@dcloudio/uni-app'
-import { createInspectorPrepayOrder } from '@/api/global';
+import { createInspectorPrepayOrder } from '@/api/global'
 
-const toast = useToast();
+const toast = useToast()
-const curTab = ref('1');
+const curTab = ref('1')
-const modelList = ref([]);
+const modelList = ref([])
-let modes_data = []; // 后端原始数据
+let modes_data = [] // 后端原始数据
-let curSelectMode = ref(null);
+let curSelectMode = ref(null)
 
 const onModelChange = value => {
-  curSelectMode.value = modes_data.find(m => m.mode === Number(value.name));
+  curSelectMode.value = modes_data.find(m => m.mode === Number(value.name))
-};
+}
-const customCalenderRef = ref();
+const customCalenderRef = ref()
 
-const classCalenderList = ref([]);
+const classCalenderList = ref([])
-const allClassCalenderList = ref([]);
+const allClassCalenderList = ref([])
-const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
 const selectedDay = date => {
   // 根据当前日期向后选择 11 个 周二 周四 周六
-  const resultDay = [];
+  const resultDay = []
-  let curDay = dayjs(date.date);
+  let curDay = dayjs(date.date)
 
-  let i = 0;
+  let i = 0
   while (resultDay.length < 12) {
-    const day = curDay.add(i, 'day');
+    const day = curDay.add(i, 'day')
-    i++;
+    i++
     if (day.day() === 2 || day.day() === 4 || day.day() === 6) {
-      resultDay.push(day);
+      resultDay.push(day)
     }
   }
   allClassCalenderList.value = resultDay.map((d, idx) => {
@@ -239,67 +239,67 @@ const selectedDay = date => {
       dateParams: dayjs(d).format('YYYY-MM-DD'),
       time: '19:00-20:00',
       day: weekDays[dayjs(d).day()],
-    };
+    }
-  });
+  })
 
   if (allClassCalenderList.value.length > 5) {
-    classCalenderList.value = allClassCalenderList.value.slice(0, 5);
+    classCalenderList.value = allClassCalenderList.value.slice(0, 5)
   } else {
-    classCalenderList.value = allClassCalenderList.value;
+    classCalenderList.value = allClassCalenderList.value
+  }
 }
-};
 
 const prevTime = () => {
-  customCalenderRef.value.prevMonth();
+  customCalenderRef.value.prevMonth()
-};
+}
 const nextTime = () => {
-  customCalenderRef.value.nextMonth();
+  customCalenderRef.value.nextMonth()
-};
+}
 
 const dateStateList = ref([
   { name: '可选', bgcolor: '#FFF' },
   { name: '不可选', bgcolor: '#f9f9f9' },
   { name: '已选中', bgcolor: '#E1E0FF' },
-]);
+])
 
 // 课表更多收起
-const curClassColl = ref(0);
+const curClassColl = ref(0)
 const onCollClick = () => {
   if (curClassColl.value === 0) {
-    classCalenderList.value = allClassCalenderList.value;
+    classCalenderList.value = allClassCalenderList.value
   } else {
-    classCalenderList.value = allClassCalenderList.value.slice(0, 5);
+    classCalenderList.value = allClassCalenderList.value.slice(0, 5)
+  }
+  curClassColl.value = curClassColl.value === 0 ? 1 : 0
 }
-  curClassColl.value = curClassColl.value === 0 ? 1 : 0;
-};
 
 const buyService = () => {
   if (childrenList.value.length === 0) {
-    uni.showToast({ title: '还没绑定孩子账号，请前往扫码绑定', icon: 'none' });
+    uni.showToast({ title: '还没绑定孩子账号，请前往扫码绑定', icon: 'none' })
-    return;
+    return
   }
   if (childrenList.value.length === 1) {
-    curSelectChildren = childrenList.value;
+    curSelectChildren = childrenList.value
-    showSelectOrder.value = true;
+    showSelectOrder.value = true
-    return;
+    return
+  }
+  showSelectChild.value = true
 }
-  showSelectChild.value = true;
-};
 
-const showSelectChild = ref(false);
+const showSelectChild = ref(false)
 const onCloseSelectChild = () => {
-  showSelectChild.value = false;
+  showSelectChild.value = false
-};
+}
 
-const childrenList = ref([]);
+const childrenList = ref([])
 
-const showSelectOrder = ref(false);
+const showSelectOrder = ref(false)
 const onCloseSelectOrder = () => {
-  showSelectOrder.value = false;
+  showSelectOrder.value = false
-};
+}
 
 const getBaseInfo = async () => {
-  const data = await getChildList();
+  const data = await getChildList()
   // console.log('data', data);
   childrenList.value = data.map(child => {
     return {
@@ -308,12 +308,12 @@ const getBaseInfo = async () => {
       name: child.childName,
       expire: child.vipEndTime,
       selected: false,
-    };
+    }
-  });
+  })
 
-  const { data: models } = await getModelList();
+  const { data: models } = await getModelList()
   // console.log('models', models);
-  modes_data = models;
+  modes_data = models
   modelList.value = models.map(model => {
     return {
       mode: model.mode,
@@ -321,54 +321,54 @@ const getBaseInfo = async () => {
       url: model.promotionalMaterials,
       discountPrice: model.discountPrice,
       price: model.price,
-    };
-  });
-  curSelectMode.value = modes_data.find(mode => mode.mode === 1);
-};
-onLoad(async (options = {}) => {
-  getBaseInfo();
-});
-
-let curSelectChildren = [];
-const onConfirmSelectChild = () => {
-  curSelectChildren = childrenList.value.filter(child => child.selected);
-  if (curSelectChildren.length) {
-    showSelectChild.value = false;
-    showSelectOrder.value = true;
-  } else {
-    toast.show('请选择至少一个宝贝');
     }
-};
+  })
+  curSelectMode.value = modes_data.find(mode => mode.mode === 1)
+}
+onLoad(async (options = {}) => {
+  getBaseInfo()
+})
 
-let timer = null;
+let curSelectChildren = []
-const tipsInfo = ref();
+const onConfirmSelectChild = () => {
+  curSelectChildren = childrenList.value.filter(child => child.selected)
+  if (curSelectChildren.length) {
+    showSelectChild.value = false
+    showSelectOrder.value = true
+  } else {
+    toast.show('请选择至少一个宝贝')
+  }
+}
+
+let timer = null
+const tipsInfo = ref()
 const onConfirmSelectOrder = async () => {
   // 只处理 微信浏览器 H5 端支付
-  const ua = navigator?.userAgent?.toLowerCase();
+  const ua = navigator?.userAgent?.toLowerCase()
-  const isWechatBrowser = ua?.indexOf('micromessenger') !== -1;
+  const isWechatBrowser = ua?.indexOf('micromessenger') !== -1
   if (!isWechatBrowser) {
-    toast.show('请在微信中打开进行支付');
+    toast.show('请在微信中打开进行支付')
-    return;
+    return
   }
 
-  payLoading.value = true;
+  payLoading.value = true
-  if (timer) clearTimeout(timer);
+  if (timer) clearTimeout(timer)
   timer = setTimeout(() => {
-    payLoading.value = false;
+    payLoading.value = false
-  }, 30000);
+  }, 30000)
 
   const params = {
     inspectorCourseList: allClassCalenderList.value.map(c => {
-      return c.dateParams + ' 19:00:00';
+      return c.dateParams + ' 19:00:00'
     }),
     inspectorModeId: curSelectMode.value.id,
     money: curSelectMode.value.discountPrice,
     orderType: 1,
     paySubType: 'JSAPI',
     userId: curSelectChildren[0].id,
-  };
+  }
 
-  const data = await createInspectorPrepayOrder(params);
+  const data = await createInspectorPrepayOrder(params)
 
   const order = {
     appId: data.prepayResponse.appId,
@@ -377,7 +377,7 @@ const onConfirmSelectOrder = async () => {
     signType: data.prepayResponse.signType,
     paySign: data.prepayResponse.paySign,
     timeStamp: data.prepayResponse.timeStamp,
-  };
+  }
 
   // // 测试
   // const o = {
@@ -389,16 +389,16 @@ const onConfirmSelectOrder = async () => {
   //   timeStamp: '1724812366',
   // };
 
-  const payResult = await pay(order);
+  const payResult = await pay(order)
-  payLoading.value = false;
+  payLoading.value = false
-  buySuccessPop.value = payResult;
+  buySuccessPop.value = payResult
-  showSelectOrder.value = false;
+  showSelectOrder.value = false
-};
+}
 
-const buySuccessPop = ref(false);
+const buySuccessPop = ref(false)
 
 // -----------支付相关
-const payLoading = ref(false);
+const payLoading = ref(false)
 
 const pay = async order => {
   return new Promise((resove, reject) => {
@@ -415,25 +415,25 @@ const pay = async order => {
       res => {
         if (res.err_msg === 'get_brand_wcpay_request:ok') {
           // 支付成功后的操作
-          console.log('支付成功');
+          console.log('支付成功')
 
-          resove(true);
+          resove(true)
         } else {
           // 支付失败后的操作
-          console.log('支付失败', res.err_msg);
+          console.log('支付失败', res.err_msg)
-          resove(false);
+          resove(false)
         }
       },
-    );
+    )
-  });
+  })
-};
+}
 
 const dateDisabled = date => {
   return (
     ![2, 4, 6].includes(dayjs(date.date).day()) ||
     dayjs(date.date).isBefore(dayjs().subtract(1, 'day'))
-  );
+  )
-};
+}
 </script>
 
 <style scoped lang="scss">

src/utils/pay.ts

@@ -0,0 +1,30 @@
+type WxPayJSAPI = {
+  bridge: any
+  params: any
+  success: () => void
+  error: (err: any) => void
+}
+
+function wxPayJSAPI(data: WxPayJSAPI) {
+  const { bridge, params, success, error } = data
+  console.log('bridge', bridge)
+  console.log('params', params)
+  bridge.invoke(
+    'getBrandWCPayRequest',
+    {
+      appId: params.appId, // 公众号ID，由商户传入
+      timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
+      nonceStr: params.nonceStr, // 随机串
+      package: params.packageVal,
+      signType: params.signType, // 微信签名方式：
+      paySign: params.paySign,
+    },
+    (res: any) => {
+      if (res.err_msg === 'get_brand_wcpay_request:ok') {
+        success && success()
+      } else {
+        error && error(res.err_msg)
+      }
+    },
+  )
+}