|
@@ -2,30 +2,77 @@ import CourseVideoItem from "@/business-components/course-video-item";
|
|
|
import SectionDetail from "@/business-components/section-detail";
|
|
|
import UserDetail from "@/business-components/user-detail";
|
|
|
import UserList from "@/business-components/user-list";
|
|
|
-import { Tab, Tabs } from "vant";
|
|
|
+import { List, Tab, Tabs } from "vant";
|
|
|
import { defineComponent } from "vue";
|
|
|
-import { createState } from "./createState";
|
|
|
import { state } from "@/state";
|
|
|
import styles from './video-detail.module.less';
|
|
|
-
|
|
|
+import request from "@/helpers/request";
|
|
|
+import { group } from "console";
|
|
|
+import ColResult from "@/components/col-result";
|
|
|
export default defineComponent({
|
|
|
name: 'VideoDetail',
|
|
|
- computed: {
|
|
|
- userInfo() {
|
|
|
- const videoDetail = createState.lessonGroup;
|
|
|
+ data() {
|
|
|
+ console.log(this.$route.query.groupId)
|
|
|
+ const query = this.$route.query
|
|
|
+ return {
|
|
|
+ userInfo: {} as any,
|
|
|
+ detailList: [],
|
|
|
+ buyUserList: [], // 购买学生数
|
|
|
+ dataShow: true, // 判断是否有数据
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ params: {
|
|
|
+ groupId: query.groupId,
|
|
|
+ page: 1,
|
|
|
+ rows: 20
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ try {
|
|
|
+ const res = await request.get('/api-teacher/videoLessonGroup/selectVideoLesson', {
|
|
|
+ params: {
|
|
|
+ groupId: this.params.groupId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const result = res.data || {}
|
|
|
const users = state.user.data || {};
|
|
|
- return {
|
|
|
+ this.userInfo = {
|
|
|
username: users.username,
|
|
|
headUrl: users.headUrl,
|
|
|
- lessonName: videoDetail.lessonName,
|
|
|
buyNum: 0,
|
|
|
- lessonDesc: videoDetail.lessonDesc,
|
|
|
- lessonPrice: videoDetail.lessonPrice,
|
|
|
- lessonCoverUrl: videoDetail.lessonCoverUrl
|
|
|
+ lessonName: result.lessonGroup.lessonName,
|
|
|
+ lessonDesc: result.lessonGroup.lessonDesc,
|
|
|
+ lessonPrice: result.lessonGroup.lessonPrice,
|
|
|
+ lessonCoverUrl: result.lessonGroup.lessonCoverUrl
|
|
|
}
|
|
|
- },
|
|
|
+ this.detailList = result.detailList || []
|
|
|
+
|
|
|
+ this.getList()
|
|
|
+ } catch { }
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getList() {
|
|
|
+ try {
|
|
|
+ let params = this.params
|
|
|
+ const res = await request.post('/api-teacher/videoLesson/pageStudent', {
|
|
|
+ data: {
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const result = res.data || {}
|
|
|
+ // 处理重复请求数据
|
|
|
+ if (this.buyUserList.length > 0 && result.pageNo === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.buyUserList = this.buyUserList.concat(result.list || [])
|
|
|
+ this.finished = result.pageNo >= result.totalPage
|
|
|
+ this.params = result.pageNo + 1
|
|
|
+ this.dataShow = this.buyUserList.length > 0
|
|
|
+
|
|
|
+ this.userInfo.buyNum = result.totalCount || 0
|
|
|
+ } catch { }
|
|
|
+ },
|
|
|
onPlay(detail: any) {
|
|
|
console.log(detail);
|
|
|
}
|
|
@@ -33,27 +80,29 @@ export default defineComponent({
|
|
|
render() {
|
|
|
return (
|
|
|
<div class={[styles['video-detail'], 'mb12']}>
|
|
|
- {this.userInfo && <UserDetail userInfo={this.userInfo} />}
|
|
|
+ <UserDetail userInfo={this.userInfo} />
|
|
|
<SectionDetail>
|
|
|
- <p class={styles.introduction}>小酷老师带您零基础学习竖笛,通过4节课的学习掌握竖笛演奏的基本方式,培养娘好的吐息习惯。</p>
|
|
|
+ <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
|
|
|
</SectionDetail>
|
|
|
|
|
|
<SectionDetail title="课程列表" icon="courseList" titleShow={false} contentStyle={{ paddingTop: '0' }}>
|
|
|
<Tabs color="var(--van-primary)" lineWidth={20} sticky>
|
|
|
- <Tab title="全部课程" titleClass="van-hairline--bottom">
|
|
|
- {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
|
|
|
+ <Tab title="课程" titleClass="van-hairline--bottom">
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
<CourseVideoItem class={'mb12'} detail={{
|
|
|
- id: 1,
|
|
|
- title: "竖笛演奏基础",
|
|
|
- content: "使学生初步了解竖笛的构造,学会吹奏姿势掌握基本呼吸掌握基本呼吸掌握基本呼吸方法。",
|
|
|
- imgUrl: 'https://daya.ks3-cn-beijing.ksyun.com/202201/SvB6tqR.png'
|
|
|
+ id: item.id,
|
|
|
+ title: item.videoTitle,
|
|
|
+ content: item.videoContent,
|
|
|
+ imgUrl: item.coverUrl
|
|
|
}} onPlay={this.onPlay} />
|
|
|
))}
|
|
|
</Tab>
|
|
|
- <Tab title="已购课程" titleClass="van-hairline--bottom">
|
|
|
- {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
|
|
|
- <UserList class="mb12" />
|
|
|
- ))}
|
|
|
+ <Tab title="学员列表" titleClass="van-hairline--bottom">
|
|
|
+ {this.dataShow ? <List v-model:loading={this.loading} finished={this.finished} finishedText='没有更多了' onLoad={this.getList}>
|
|
|
+ {this.buyUserList.map(item => (
|
|
|
+ <UserList class="mb12" />
|
|
|
+ ))}
|
|
|
+ </List> : <ColResult btnStatus={false} tips='暂无学生购买' />}
|
|
|
</Tab>
|
|
|
</Tabs>
|
|
|
</SectionDetail>
|