feat:学情报告

This commit is contained in:
MJ 2025-08-08 01:31:19 +08:00
parent c44b29b11c
commit e0fc132885
14 changed files with 928 additions and 266 deletions

View File

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

View File

@ -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",

View File

@ -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>

View File

@ -100,25 +100,24 @@
</view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import RingChart from './Echart/RingChart.vue';
import dayjs from 'dayjs';
import '../index.scss';
import { studyErrorStatApi } from '@/api';
import { ref, reactive, onMounted, watch } from 'vue'
import DateFilter from './dateFilter.vue'
import RingChart from './Echart/RingChart.vue'
import dayjs from 'dayjs'
import { studyErrorStatApi } from '@/api'
const props = withDefaults(
defineProps<{
subjectId: number | string;
userId: string;
subjectId: number | string
userId: string
}>(),
{
subjectId: 0,
userId: '',
},
);
)
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const empty = ref(false);
const OSS_URL = import.meta.env.VITE_OSS_HOST
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 dateType = ref(0);
})
const loading = ref(false)
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;
return;
empty.value = true
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;
fetchChartData();
dateType.value = i.value
fetchChartData()
}
watch(
() => props.subjectId,
val => {
dateType.value = 0;
fetchChartData();
dateType.value = 0
fetchChartData()
},
);
)
</script>
<style lang="scss" scoped>
.title2 {

View File

@ -23,29 +23,28 @@
</view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import RingChart from './Echart/RingChart.vue';
import ColumnChart from './Echart/ColumnChart.vue';
import LearningGraspTable from './learningGraspTable.vue';
import { ref, reactive, onMounted, watch } from 'vue'
import DateFilter from './dateFilter.vue'
import RingChart from './Echart/RingChart.vue'
import ColumnChart from './Echart/ColumnChart.vue'
import LearningGraspTable from './learningGraspTable.vue'
import '../index.scss';
import { knowledgeStudyStatApi } from '@/api';
import { knowledgeStudyStatApi } from '@/api'
const props = withDefaults(
defineProps<{
subjectId: number | string;
userId: string;
subjectId: number | string
userId: string
}>(),
{
subjectId: 0,
userId: '',
},
);
const emits = defineEmits(['change']);
const loading = ref(false);
const dateType = ref(0);
const empty = ref(false);
)
const emits = defineEmits(['change'])
const loading = ref(false)
const dateType = ref(0)
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;
return;
empty.value = true
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;
fetchChartData();
dateType.value = i.value
fetchChartData()
}
watch(
() => props.subjectId,
val => {
dateType.value = 0;
fetchChartData();
dateType.value = 0
fetchChartData()
},
);
)
</script>
<style lang="scss" scoped>
.chart_show {

View File

@ -70,24 +70,23 @@
</view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import dayjs from 'dayjs';
import '../index.scss';
import { englishLanguageStatApi } from '@/api';
import { ref, reactive, onMounted, watch } from 'vue'
import DateFilter from './dateFilter.vue'
import dayjs from 'dayjs'
import { englishLanguageStatApi } from '@/api'
const props = withDefaults(
defineProps<{
show: boolean;
userId: string;
show: boolean
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 empty = ref(false);
const dateType = ref(0);
})
const loading = ref(false)
const empty = ref(false)
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;
languageStatistics.value.categories = [];
})
showData.value = data
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;
fetchChartData();
dateType.value = i.value
fetchChartData()
}
watch(
() => props.show,
nv => {
if (nv) {
dateType.value = 0;
fetchChartData();
dateType.value = 0
fetchChartData()
}
},
);
)
</script>
<style lang="scss" scoped>
.chart_show {

View File

@ -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(

View File

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

View File

@ -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'

View File

@ -1,11 +1,9 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import Empty from '@/components/Empty/index.vue'
import ChildrenBox from './components/childrenBox.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
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">
<ChildrenBox :list="children" :showItem="showChild" />
<Empty v-if="empty" content="暂无学情报告数据哦~" />
<mj-page class="container">
<view class="children-box">
<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>

View File

@ -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
v-model="showHandBindPopup"
title="手动绑定孩子账号"
okText="绑定"
:ok="confirmHandBind"
>
<input v-model="childAccount" class="single-input" placeholder="请输入孩子账号" type="text" />
</mj-dialog>
<manual-bind-child v-model="showHandBindPopup" />
</mj-page>
</template>

View File

@ -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>

View File

@ -193,43 +193,43 @@
</template>
<script setup lang="ts">
declare const WeixinJSBridge: any;
import { computed, reactive, ref, watchEffect } from 'vue';
import card from './components/card.vue';
import CustomCalender from '@/components/customCalender/index.vue';
import dayjs from 'dayjs';
import noclassIcon from '@/static/noclass-icon.jpg';
import successPng from '@/static/suc.png';
import { useToast } from '@/uni_modules/wot-design-uni';
import { getChildList, getModelList } from '@/api/modules/parent';
import { onLoad } from '@dcloudio/uni-app';
import { createInspectorPrepayOrder } from '@/api/global';
declare const WeixinJSBridge: any
import { computed, reactive, ref, watchEffect } from 'vue'
import card from './components/card.vue'
import CustomCalender from '@/components/customCalender/index.vue'
import dayjs from 'dayjs'
import noclassIcon from '@/static/noclass-icon.jpg'
import successPng from '@/static/suc.png'
import { useToast } from '@/uni_modules/wot-design-uni'
import { getChildList, getModelList } from '@/api/modules/parent'
import { onLoad } from '@dcloudio/uni-app'
import { createInspectorPrepayOrder } from '@/api/global'
const toast = useToast();
const curTab = ref('1');
const modelList = ref([]);
let modes_data = []; //
let curSelectMode = ref(null);
const toast = useToast()
const curTab = ref('1')
const modelList = ref([])
let modes_data = [] //
let curSelectMode = ref(null)
const onModelChange = value => {
curSelectMode.value = modes_data.find(m => m.mode === Number(value.name));
};
const customCalenderRef = ref();
curSelectMode.value = modes_data.find(m => m.mode === Number(value.name))
}
const customCalenderRef = ref()
const classCalenderList = ref([]);
const allClassCalenderList = ref([]);
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const classCalenderList = ref([])
const allClassCalenderList = ref([])
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const selectedDay = date => {
// 11
const resultDay = [];
let curDay = dayjs(date.date);
const resultDay = []
let curDay = dayjs(date.date)
let i = 0;
let i = 0
while (resultDay.length < 12) {
const day = curDay.add(i, 'day');
i++;
const day = curDay.add(i, 'day')
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' });
return;
uni.showToast({ title: '还没绑定孩子账号,请前往扫码绑定', icon: 'none' })
return
}
if (childrenList.value.length === 1) {
curSelectChildren = childrenList.value;
showSelectOrder.value = true;
return;
curSelectChildren = childrenList.value
showSelectOrder.value = true
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;
const tipsInfo = ref();
let curSelectChildren = []
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 isWechatBrowser = ua?.indexOf('micromessenger') !== -1;
const ua = navigator?.userAgent?.toLowerCase()
const isWechatBrowser = ua?.indexOf('micromessenger') !== -1
if (!isWechatBrowser) {
toast.show('请在微信中打开进行支付');
return;
toast.show('请在微信中打开进行支付')
return
}
payLoading.value = true;
if (timer) clearTimeout(timer);
payLoading.value = true
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
payLoading.value = false;
}, 30000);
payLoading.value = false
}, 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);
payLoading.value = false;
buySuccessPop.value = payResult;
showSelectOrder.value = false;
};
const payResult = await pay(order)
payLoading.value = false
buySuccessPop.value = payResult
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);
resove(false);
console.log('支付失败', res.err_msg)
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">

30
src/utils/pay.ts Normal file
View File

@ -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)
}
},
)
}