|
@@ -1,172 +1,173 @@
|
|
-import CourseVideoItem from '@/business-components/course-video-item'
|
|
|
|
-import SectionDetail from '@/business-components/section-detail'
|
|
|
|
-import UserDetail from '@/business-components/user-detail'
|
|
|
|
-import { Sticky, Button, Dialog } from 'vant'
|
|
|
|
-import { defineComponent } from 'vue'
|
|
|
|
-import styles from './video-detail.module.less'
|
|
|
|
-import request from '@/helpers/request'
|
|
|
|
-import ColHeader from '@/components/col-header'
|
|
|
|
-import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
|
-import { tradeOrder } from '../trade/tradeOrder'
|
|
|
|
-export default defineComponent({
|
|
|
|
- name: 'VideoDetail',
|
|
|
|
- data() {
|
|
|
|
- const query = this.$route.query
|
|
|
|
- return {
|
|
|
|
- userInfo: {} as any,
|
|
|
|
- detailList: [],
|
|
|
|
- recomUserId: query.recomUserId, // 推荐人id
|
|
|
|
- params: {
|
|
|
|
- groupId: query.groupId
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- async mounted() {
|
|
|
|
- try {
|
|
|
|
- const res = await request.get(
|
|
|
|
- '/api-student/videoLesson/selectVideoLesson',
|
|
|
|
- {
|
|
|
|
- params: {
|
|
|
|
- groupId: this.params.groupId
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- const result = res.data || {}
|
|
|
|
- const lessonGroup = result.lessonGroup || {}
|
|
|
|
- this.userInfo = {
|
|
|
|
- alreadyBuy: result.alreadyBuy,
|
|
|
|
- username: lessonGroup.username || `游客${lessonGroup.teacherId || ''}`,
|
|
|
|
- headUrl: lessonGroup.avatar,
|
|
|
|
- buyNum: lessonGroup.countStudent,
|
|
|
|
- id: lessonGroup.id,
|
|
|
|
- lessonNum: lessonGroup.lessonCount,
|
|
|
|
- lessonName: lessonGroup.lessonName,
|
|
|
|
- lessonDesc: lessonGroup.lessonDesc,
|
|
|
|
- lessonPrice: lessonGroup.lessonPrice,
|
|
|
|
- teacherId: lessonGroup.teacherId,
|
|
|
|
- lessonCoverUrl: lessonGroup.lessonCoverUrl
|
|
|
|
- }
|
|
|
|
- this.detailList = result.detailList || []
|
|
|
|
- } catch {}
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- onPlay(detail: any) {
|
|
|
|
- this.$router.push({
|
|
|
|
- path: '/videoClassDetail',
|
|
|
|
- query: {
|
|
|
|
- groupId: this.params.groupId,
|
|
|
|
- classId: detail.id
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- async onBuy() {
|
|
|
|
- try {
|
|
|
|
- const res = await request.post(
|
|
|
|
- '/api-student/userOrder/getPendingOrder',
|
|
|
|
- {
|
|
|
|
- data: {
|
|
|
|
- goodType: 'VIDEO',
|
|
|
|
- bizId: this.params.groupId
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- const userInfo = this.userInfo
|
|
|
|
- orderStatus.orderObject.orderType = 'VIDEO'
|
|
|
|
- orderStatus.orderObject.orderName = '视频课购买'
|
|
|
|
- orderStatus.orderObject.orderDesc = '视频课购买'
|
|
|
|
- orderStatus.orderObject.actualPrice = userInfo.lessonPrice
|
|
|
|
- orderStatus.orderObject.recomUserId = this.recomUserId
|
|
|
|
- orderStatus.orderObject.orderNo = ''
|
|
|
|
- orderStatus.orderObject.orderList = [
|
|
|
|
- {
|
|
|
|
- orderType: 'VIDEO',
|
|
|
|
- goodsName: '视频课购买',
|
|
|
|
- courseGroupId: userInfo.id,
|
|
|
|
- courseGroupName: userInfo.lessonName,
|
|
|
|
- coursePrice: userInfo.lessonPrice,
|
|
|
|
- teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
|
|
|
|
- teacherId: userInfo.teacherId,
|
|
|
|
- avatar: userInfo.headUrl,
|
|
|
|
- courseInfo: this.detailList,
|
|
|
|
- recomUserId: this.recomUserId
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
-
|
|
|
|
- const result = res.data
|
|
|
|
- if (result) {
|
|
|
|
- Dialog.confirm({
|
|
|
|
- title: '提示',
|
|
|
|
- message: '您有一个未支付的订单,是否继续支付?',
|
|
|
|
- confirmButtonColor: '#269a93',
|
|
|
|
- cancelButtonText: '取消订单',
|
|
|
|
- confirmButtonText: '继续支付'
|
|
|
|
- })
|
|
|
|
- .then(async () => {
|
|
|
|
- tradeOrder(result, this.routerTo)
|
|
|
|
- })
|
|
|
|
- .catch(() => {
|
|
|
|
- Dialog.close()
|
|
|
|
- // 只用取消订单,不用做其它处理
|
|
|
|
- this.cancelPayment(result.orderNo)
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.routerTo()
|
|
|
|
- }
|
|
|
|
- } catch {}
|
|
|
|
- },
|
|
|
|
- routerTo() {
|
|
|
|
- this.$router.push({
|
|
|
|
- path: '/orderDetail',
|
|
|
|
- query: {
|
|
|
|
- orderType: 'VIDEO',
|
|
|
|
- courseGroupId: this.params.groupId
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- async cancelPayment(orderNo: string) {
|
|
|
|
- try {
|
|
|
|
- await request.post('/api-student/userOrder/orderCancel', {
|
|
|
|
- data: {
|
|
|
|
- orderNo
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- } catch {}
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- render() {
|
|
|
|
- return (
|
|
|
|
- <div class={[styles['video-detail']]}>
|
|
|
|
- <ColHeader />
|
|
|
|
- <UserDetail userInfo={this.userInfo} />
|
|
|
|
- <SectionDetail>
|
|
|
|
- <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
|
|
|
|
- </SectionDetail>
|
|
|
|
-
|
|
|
|
- <SectionDetail title="课程列表" icon="courseList" class="mb12">
|
|
|
|
- {this.detailList.map((item: any) => (
|
|
|
|
- <CourseVideoItem
|
|
|
|
- class={'mb12'}
|
|
|
|
- detail={{
|
|
|
|
- id: item.id,
|
|
|
|
- title: item.videoTitle,
|
|
|
|
- content: item.videoContent,
|
|
|
|
- imgUrl: item.coverUrl
|
|
|
|
- }}
|
|
|
|
- onPlay={this.onPlay}
|
|
|
|
- />
|
|
|
|
- ))}
|
|
|
|
- </SectionDetail>
|
|
|
|
-
|
|
|
|
- {this.userInfo.id && !this.userInfo.alreadyBuy && (
|
|
|
|
- <Sticky offsetBottom={0} position="bottom">
|
|
|
|
- <div class={['btnGroup', styles.btnMore]}>
|
|
|
|
- <Button block round type="primary" onClick={this.onBuy}>
|
|
|
|
- 立即购买
|
|
|
|
- </Button>
|
|
|
|
- </div>
|
|
|
|
- </Sticky>
|
|
|
|
- )}
|
|
|
|
- </div>
|
|
|
|
- )
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
|
|
+import CourseVideoItem from '@/business-components/course-video-item'
|
|
|
|
+import SectionDetail from '@/business-components/section-detail'
|
|
|
|
+import UserDetail from '@/business-components/user-detail'
|
|
|
|
+import { Sticky, Button, Dialog } from 'vant'
|
|
|
|
+import { defineComponent } from 'vue'
|
|
|
|
+import styles from './video-detail.module.less'
|
|
|
|
+import request from '@/helpers/request'
|
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
|
+import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
|
+import { tradeOrder } from '../trade/tradeOrder'
|
|
|
|
+export default defineComponent({
|
|
|
|
+ name: 'VideoDetail',
|
|
|
|
+ data() {
|
|
|
|
+ const query = this.$route.query
|
|
|
|
+ return {
|
|
|
|
+ userInfo: {} as any,
|
|
|
|
+ detailList: [],
|
|
|
|
+ recomUserId: query.recomUserId, // 推荐人id
|
|
|
|
+ params: {
|
|
|
|
+ groupId: query.groupId
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async mounted() {
|
|
|
|
+ try {
|
|
|
|
+ const res = await request.get(
|
|
|
|
+ '/api-student/videoLesson/selectVideoLesson',
|
|
|
|
+ {
|
|
|
|
+ params: {
|
|
|
|
+ groupId: this.params.groupId
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ const result = res.data || {}
|
|
|
|
+ const lessonGroup = result.lessonGroup || {}
|
|
|
|
+ this.userInfo = {
|
|
|
|
+ alreadyBuy: result.alreadyBuy,
|
|
|
|
+ username: lessonGroup.username || `游客${lessonGroup.teacherId || ''}`,
|
|
|
|
+ headUrl: lessonGroup.avatar,
|
|
|
|
+ buyNum: lessonGroup.countStudent,
|
|
|
|
+ id: lessonGroup.id,
|
|
|
|
+ lessonNum: lessonGroup.lessonCount,
|
|
|
|
+ lessonName: lessonGroup.lessonName,
|
|
|
|
+ lessonDesc: lessonGroup.lessonDesc,
|
|
|
|
+ lessonPrice: lessonGroup.lessonPrice,
|
|
|
|
+ teacherId: lessonGroup.teacherId,
|
|
|
|
+ lessonCoverUrl: lessonGroup.lessonCoverUrl,
|
|
|
|
+ auditVersion:lessonGroup.auditVersion
|
|
|
|
+ }
|
|
|
|
+ this.detailList = result.detailList || []
|
|
|
|
+ } catch {}
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onPlay(detail: any) {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/videoClassDetail',
|
|
|
|
+ query: {
|
|
|
|
+ groupId: this.params.groupId,
|
|
|
|
+ classId: detail.id
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ async onBuy() {
|
|
|
|
+ try {
|
|
|
|
+ const res = await request.post(
|
|
|
|
+ '/api-student/userOrder/getPendingOrder',
|
|
|
|
+ {
|
|
|
|
+ data: {
|
|
|
|
+ goodType: 'VIDEO',
|
|
|
|
+ bizId: this.params.groupId
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ const userInfo = this.userInfo
|
|
|
|
+ orderStatus.orderObject.orderType = 'VIDEO'
|
|
|
|
+ orderStatus.orderObject.orderName = '视频课购买'
|
|
|
|
+ orderStatus.orderObject.orderDesc = '视频课购买'
|
|
|
|
+ orderStatus.orderObject.actualPrice = userInfo.lessonPrice
|
|
|
|
+ orderStatus.orderObject.recomUserId = this.recomUserId
|
|
|
|
+ orderStatus.orderObject.orderNo = ''
|
|
|
|
+ orderStatus.orderObject.orderList = [
|
|
|
|
+ {
|
|
|
|
+ orderType: 'VIDEO',
|
|
|
|
+ goodsName: '视频课购买',
|
|
|
|
+ courseGroupId: userInfo.id,
|
|
|
|
+ courseGroupName: userInfo.lessonName,
|
|
|
|
+ coursePrice: userInfo.lessonPrice,
|
|
|
|
+ teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
|
|
|
|
+ teacherId: userInfo.teacherId,
|
|
|
|
+ avatar: userInfo.headUrl,
|
|
|
|
+ courseInfo: this.detailList,
|
|
|
|
+ recomUserId: this.recomUserId
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+
|
|
|
|
+ const result = res.data
|
|
|
|
+ if (result) {
|
|
|
|
+ Dialog.confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ message: '您有一个未支付的订单,是否继续支付?',
|
|
|
|
+ confirmButtonColor: '#269a93',
|
|
|
|
+ cancelButtonText: '取消订单',
|
|
|
|
+ confirmButtonText: '继续支付'
|
|
|
|
+ })
|
|
|
|
+ .then(async () => {
|
|
|
|
+ tradeOrder(result, this.routerTo)
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ Dialog.close()
|
|
|
|
+ // 只用取消订单,不用做其它处理
|
|
|
|
+ this.cancelPayment(result.orderNo)
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.routerTo()
|
|
|
|
+ }
|
|
|
|
+ } catch {}
|
|
|
|
+ },
|
|
|
|
+ routerTo() {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/orderDetail',
|
|
|
|
+ query: {
|
|
|
|
+ orderType: 'VIDEO',
|
|
|
|
+ courseGroupId: this.params.groupId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ async cancelPayment(orderNo: string) {
|
|
|
|
+ try {
|
|
|
|
+ await request.post('/api-student/userOrder/orderCancel', {
|
|
|
|
+ data: {
|
|
|
|
+ orderNo
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } catch {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ render() {
|
|
|
|
+ return (
|
|
|
|
+ <div class={[styles['video-detail']]}>
|
|
|
|
+ <ColHeader />
|
|
|
|
+ <UserDetail userInfo={this.userInfo} />
|
|
|
|
+ <SectionDetail>
|
|
|
|
+ <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
|
|
|
|
+ </SectionDetail>
|
|
|
|
+
|
|
|
|
+ <SectionDetail title="课程列表" icon="courseList" class="mb12">
|
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
|
+ <CourseVideoItem
|
|
|
|
+ class={'mb12'}
|
|
|
|
+ detail={{
|
|
|
|
+ id: item.id,
|
|
|
|
+ title: item.videoTitle,
|
|
|
|
+ content: item.videoContent,
|
|
|
|
+ imgUrl: item.coverUrl
|
|
|
|
+ }}
|
|
|
|
+ onPlay={this.onPlay}
|
|
|
|
+ />
|
|
|
|
+ ))}
|
|
|
|
+ </SectionDetail>
|
|
|
|
+
|
|
|
|
+ {this.userInfo.id && !this.userInfo.alreadyBuy && (
|
|
|
|
+ <Sticky offsetBottom={0} position="bottom">
|
|
|
|
+ <div class={['btnGroup', styles.btnMore]}>
|
|
|
|
+ <Button block round type="primary" onClick={this.onBuy}>
|
|
|
|
+ 立即购买
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+ </Sticky>
|
|
|
|
+ )}
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+})
|