|
|
@@ -1,148 +1,67 @@
|
|
|
-import CoursePlanStep from '@/business-components/course-plan-step'
|
|
|
-import SectionDetail from '@/business-components/section-detail'
|
|
|
-import UserDetail from '@/business-components/user-detail'
|
|
|
-import ColSticky from '@/components/col-sticky'
|
|
|
-import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+import { Button, Cell, Icon, Image, Popup, Toast } from 'vant'
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
import request from '@/helpers/request'
|
|
|
-import { browser } from '@/helpers/utils'
|
|
|
import { state } from '@/state'
|
|
|
-import dayjs from 'dayjs'
|
|
|
-import { Button, Dialog, Toast } from 'vant'
|
|
|
-import { defineComponent } from 'vue'
|
|
|
+import shareBanner from '../images/share-banner.png'
|
|
|
+import wxImage from '../images/wx_bg.png'
|
|
|
import { shareCall } from '../share'
|
|
|
-import styles from './index.module.less'
|
|
|
-import qs from 'query-string'
|
|
|
+import { browser } from '@/helpers/utils'
|
|
|
+
|
|
|
export const getAssetsHomeFile = (fileName: string) => {
|
|
|
- const path = `../images/${fileName}`
|
|
|
- const modules = import.meta.globEager('../images/*')
|
|
|
+ const path = `../../../views/member-center/images/${fileName}`
|
|
|
+ const modules = import.meta.globEager('../../../views/member-center/images/*')
|
|
|
return modules[path].default
|
|
|
}
|
|
|
-interface IProps {
|
|
|
- courseTime: string
|
|
|
- coursePlan: string
|
|
|
- videoPosterUrl?: string
|
|
|
- roomUid?: string
|
|
|
- liveState?: number
|
|
|
- id?: number | string
|
|
|
-}
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
- name: 'LiveDetail',
|
|
|
+ name: 'MemberCenter',
|
|
|
data() {
|
|
|
const query = this.$route.query
|
|
|
return {
|
|
|
- recomUserId: query.recomUserId, // 分享人编号
|
|
|
- groupId: query.groupId,
|
|
|
- live: {} as any,
|
|
|
+ activityId: query.activityId,
|
|
|
+ recomUserId: query.recomUserId,
|
|
|
+ functionList: [],
|
|
|
wxStatus: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
userInfo() {
|
|
|
- const live = this.live as any
|
|
|
- const planList = live.planList || []
|
|
|
- const startTime = planList[0]?.startTime || new Date()
|
|
|
- const endTime = planList[0]?.endTime || new Date()
|
|
|
+ const users = state.user.data
|
|
|
return {
|
|
|
- headUrl: live.avatar,
|
|
|
- username: live.userName,
|
|
|
- id: live.teacherId,
|
|
|
- startTime:
|
|
|
- `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
|
|
|
- 'HH:mm'
|
|
|
- )}~${dayjs(endTime).format('HH:mm')}` || '',
|
|
|
- lessonPrice: live.coursePrice,
|
|
|
- buyNum: live.studentCount || 0,
|
|
|
- lessonNum: live.courseNum || 0, // 课时数
|
|
|
- lessonDesc: live.courseIntroduce,
|
|
|
- lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
|
|
|
- lessonName: live.courseGroupName,
|
|
|
- auditVersion:0
|
|
|
+ username: users?.username,
|
|
|
+ phone: users?.phone,
|
|
|
+ avatar: users?.heardUrl,
|
|
|
+ id: users?.userId,
|
|
|
+ memberRankSettingId: users?.memberRankSettingId,
|
|
|
+ membershipDays: users?.membershipDays,
|
|
|
+ membershipEndTime: users?.membershipEndTime
|
|
|
}
|
|
|
- },
|
|
|
- courseInfo() {
|
|
|
- const tempArr = [] as IProps[]
|
|
|
- const coursePlanList = this.live.planList || []
|
|
|
- coursePlanList.forEach((item: any) => {
|
|
|
- const startTime = item.startTime || new Date()
|
|
|
- const endTime = item.endTime || new Date()
|
|
|
- tempArr.push({
|
|
|
- courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
|
|
|
- startTime
|
|
|
- ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
|
|
|
- coursePlan: item.plan,
|
|
|
- roomUid: item.roomUid,
|
|
|
- liveState: item.liveState,
|
|
|
- id: item.courseId
|
|
|
- })
|
|
|
- })
|
|
|
- return tempArr || []
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (browser().isApp) {
|
|
|
- if (state.platformType === 'STUDENT') {
|
|
|
- // 自动跳转到学生端视频课详情购买页
|
|
|
- if (browser().ios) {
|
|
|
- window.location.replace(
|
|
|
- `${location.origin}/student/#/liveDetail??${qs.stringify(
|
|
|
- this.$route.query
|
|
|
- )}`
|
|
|
- )
|
|
|
- } else {
|
|
|
- postMessage({
|
|
|
- api: 'openWebView',
|
|
|
- content: {
|
|
|
- url: `${location.origin}/student/#/liveDetail??${qs.stringify(
|
|
|
- this.$route.query
|
|
|
- )}`,
|
|
|
- orientation: 1,
|
|
|
- isHideTitle: false
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- postMessage({ api: 'back' })
|
|
|
- }
|
|
|
- } else if (state.platformType === 'TEACHER') {
|
|
|
- Dialog.alert({
|
|
|
- title: '提示',
|
|
|
- message: '请使用酷乐秀学生端扫码打开',
|
|
|
- confirmButtonColor: '#2dc7aa'
|
|
|
- }).then(() => {
|
|
|
- postMessage({ api: 'back' })
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 如果不在app里面则不需要唤起操作
|
|
|
- this.reCall()
|
|
|
}
|
|
|
},
|
|
|
async mounted() {
|
|
|
try {
|
|
|
- const res = await request.post('/api-teacher/open/liveShareProfit', {
|
|
|
- data: {
|
|
|
- bizId: this.groupId,
|
|
|
- userId: this.recomUserId
|
|
|
+ const res = await request.post(
|
|
|
+ `/api-teacher/open/memberPriceSettings/vipPermissions`
|
|
|
+ )
|
|
|
+ const result = res.data || []
|
|
|
+ this.functionList = result.map((item: any) => {
|
|
|
+ return {
|
|
|
+ title: item.paramName,
|
|
|
+ icon: getAssetsHomeFile(`${item.paramValue}.png`)
|
|
|
}
|
|
|
})
|
|
|
- this.live = res.data.liveCourseGroup || {}
|
|
|
} catch {
|
|
|
//
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- locationReplace(url: string) {
|
|
|
- if (history.replaceState) {
|
|
|
- history.replaceState(null, document.title, url)
|
|
|
- window.location.reload()
|
|
|
- } else {
|
|
|
- location.replace(url)
|
|
|
- }
|
|
|
- },
|
|
|
reCall() {
|
|
|
const { origin } = location
|
|
|
- let str = origin + '/student/#/liveDetail'
|
|
|
+ let str = origin + '/student/#/memberCenter'
|
|
|
const params = this.$route.query
|
|
|
- str += `?recomUserId=${this.recomUserId}&groupId=${params.groupId}`
|
|
|
+ str += `?recomUserId=${this.recomUserId}&activityId=${params.activityId}`
|
|
|
shareCall(str, {})
|
|
|
},
|
|
|
onShare() {
|
|
|
@@ -158,28 +77,42 @@ export default defineComponent({
|
|
|
},
|
|
|
render() {
|
|
|
return (
|
|
|
- <div class={[styles['live-detail'], 'mb12']}>
|
|
|
- <UserDetail userInfo={this.userInfo} showBuy={false} />
|
|
|
- <SectionDetail border>
|
|
|
- <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
|
|
|
- </SectionDetail>
|
|
|
-
|
|
|
- <SectionDetail
|
|
|
- title="课程列表"
|
|
|
- icon="courseList"
|
|
|
- border
|
|
|
- // contentStyle={{ paddingTop: '0' }}
|
|
|
- >
|
|
|
- <CoursePlanStep courseInfo={this.courseInfo} />
|
|
|
- </SectionDetail>
|
|
|
-
|
|
|
- <ColSticky position="bottom">
|
|
|
- <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
|
|
|
- <Button block round type="primary" onClick={this.onShare}>
|
|
|
- 下载酷乐秀进入课程
|
|
|
- </Button>
|
|
|
+ <div class={styles['member-center']}>
|
|
|
+ <Image src={shareBanner} class={styles.shareBanner} />
|
|
|
+ <div class={styles.memberContainer}>
|
|
|
+ <div class={[styles.intro]}>
|
|
|
+ <p>
|
|
|
+ 酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
|
|
|
+ <b>小酷Ai</b>
|
|
|
+ ”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </ColSticky>
|
|
|
+ {this.functionList.length > 0 && (
|
|
|
+ <div class={styles.memberItem}>
|
|
|
+ <div class={styles.title}>会员功能</div>
|
|
|
+
|
|
|
+ <div class={styles.member_function}>
|
|
|
+ {this.functionList.map((item: any) => (
|
|
|
+ <div class={styles.function_item}>
|
|
|
+ <Icon name={item.icon} size={34} />
|
|
|
+ <div class={styles.function_text} v-html={item.title}></div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
|
|
|
+ <Button
|
|
|
+ block
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ onClick={this.onShare}
|
|
|
+ color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
|
|
|
+ >
|
|
|
+ 下载小酷Ai开始练习吧！
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
|
|
|
{this.wxStatus && (
|
|
|
<div
|
|
|
@@ -188,7 +121,7 @@ export default defineComponent({
|
|
|
this.wxStatus = false
|
|
|
}}
|
|
|
>
|
|
|
- <img src={getAssetsHomeFile('wx_bg.png')} alt="" />
|
|
|
+ <img src={wxImage} alt="" />
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
