|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <div class="classdetail">
|
|
|
+ <MHeader :isBack="false" />
|
|
|
+
|
|
|
+ <div class="header van-hairline--bottom">
|
|
|
+ <h3>{{ dataInfo.groupName }}</h3>
|
|
|
+ <p>{{ dataInfo.courseStartDate | getMonthDay }}—{{ dataInfo.courseEndDate | getMonthDay }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="teahcerInfo van-hairline--bottom">
|
|
|
+ <div class="logo">
|
|
|
+ <img v-if="dataInfo.avatar" :src="dataInfo.avatar" alt="">
|
|
|
+ <img v-else src="../../assets/images/app/icon_teacher.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <p class="name van-ellipsis">{{ dataInfo.teacherName }}-{{ dataInfo.subjectNames }}</p>
|
|
|
+ <p class="memo van-multi-ellipsis--l2">简介:{{ dataInfo.introduction }}</p>
|
|
|
+ <p class="times">授课次数:{{ dataInfo.lectureNum ? dataInfo.lectureNum : 0 }}次</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="classdetails">
|
|
|
+ <h3>课时安排</h3>
|
|
|
+ <p class="detail"><i class="books"></i>线下课{{ dataInfo.offlineClassesTimes }}次+线上课{{ dataInfo.onlineClassesTimes }}次<span>总{{ dataInfo.totalClassesTimes }}次</span></p>
|
|
|
+
|
|
|
+ <div class="detaillist">
|
|
|
+ <div class="detailitem" v-for="(item, index) in courseList" :key="index">
|
|
|
+ <span class="time">第{{ ++index }}节</span>
|
|
|
+ <i class="icon_prossess"></i>
|
|
|
+ <span class="content">{{ item.classDate | getMonthDay}} {{ item.startClassTime | getHourMinute }}-{{ item.endClassTime | getHourMinute }} {{ item.status == 'FINISH' ? '(已结束)' : '' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pay_btn" @click="onJoin">确认加入</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import MHeader from '@/components/MHeader'
|
|
|
+import { browser, getSTD } from '@/common/common'
|
|
|
+import { getGroupDetail, buyCourseGroup } from '@/api/app'
|
|
|
+export default {
|
|
|
+ name: 'classdetail',
|
|
|
+ components: { MHeader },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dataInfo: {},
|
|
|
+ courseList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let params = this.$route.query
|
|
|
+ if(params.Authorization) {
|
|
|
+ localStorage.setItem('Authorization', decodeURI(params.Authorization))
|
|
|
+ localStorage.setItem('userInfo', decodeURI(params.Authorization))
|
|
|
+ }
|
|
|
+ // 判断是否在app里面
|
|
|
+ if(!browser().android && !browser().iPhone) {
|
|
|
+ this.headerStatus = true
|
|
|
+ } else {
|
|
|
+ document.title = 'VIP课堂详情'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.__init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ __init() {
|
|
|
+ let params = this.$route.query
|
|
|
+ this.$toast.loading({
|
|
|
+ duration: 0,
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ loadingType: 'spinner'
|
|
|
+ })
|
|
|
+ getGroupDetail({ groupId: params.groupId }).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ this.$toast.clear()
|
|
|
+ if(result.code == 200) {
|
|
|
+ if(result.data) {
|
|
|
+ this.dataInfo = result.data
|
|
|
+ this.courseList = result.data.courseSchedules
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$toast(result.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onJoin() {
|
|
|
+ //
|
|
|
+ let params = this.$route.query
|
|
|
+ this.$dialog.confirm({
|
|
|
+ message: '是否确定加入该课程'
|
|
|
+ }).then(() => {
|
|
|
+ this.$toast.loading({
|
|
|
+ duration: 0,
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ loadingType: 'spinner'
|
|
|
+ })
|
|
|
+ buyCourseGroup({ courseGroupId: params.groupId }).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ this.$toast.clear()
|
|
|
+ if(result.code == 200) {
|
|
|
+ this.$dialog.alert({
|
|
|
+ message: '恭喜你,加入成功此课程组'
|
|
|
+ }).then(() => {
|
|
|
+ this.$router.push('/studentDownLoad')
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$toast(result.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ // on cancel
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getMonthDay(time) {
|
|
|
+ let tempDate = time || new Date()
|
|
|
+ if(typeof(tempDate) == 'string') {
|
|
|
+ tempDate = new Date(time.replace(/-/ig, '/'))
|
|
|
+ }
|
|
|
+ let month = getSTD(tempDate.getMonth() + 1)
|
|
|
+ let day = getSTD(tempDate.getDate())
|
|
|
+ return month + '月' + day + '日'
|
|
|
+ },
|
|
|
+ getHourMinute(time) {
|
|
|
+ let tempDate = time || new Date()
|
|
|
+ if(typeof(tempDate) == 'string') {
|
|
|
+ tempDate = new Date(time.replace(/-/ig, '/'))
|
|
|
+ }
|
|
|
+ let hour = getSTD(tempDate.getHours())
|
|
|
+ let minute = getSTD(tempDate.getMinutes())
|
|
|
+ return hour + ':' + minute
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import url("../../assets/commonLess/variable.less");
|
|
|
+.classdetail {
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ padding: .2rem .16rem .15rem;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #444444;
|
|
|
+ h3 {
|
|
|
+ font-size: .18rem;
|
|
|
+ color: #444444;
|
|
|
+ padding-bottom: .05rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.teahcerInfo {
|
|
|
+ padding: .16rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ p {
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ width: .72rem;
|
|
|
+ height: .72rem;
|
|
|
+ margin-right: .16rem;
|
|
|
+ img {
|
|
|
+ border-radius: .04rem;
|
|
|
+ width: .72rem;
|
|
|
+ height: .72rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: .12rem;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ .memo {
|
|
|
+ padding: .05rem 0;
|
|
|
+ }
|
|
|
+ .times {
|
|
|
+ color: #F97215;
|
|
|
+ }
|
|
|
+}
|
|
|
+.classdetails {
|
|
|
+ padding: .13rem .16rem;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #444444;
|
|
|
+ h3 {
|
|
|
+ font-size: .18rem;
|
|
|
+ color: #444444;
|
|
|
+ padding-bottom: .05rem;
|
|
|
+ }
|
|
|
+ .books {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: .05rem;
|
|
|
+ width: .11rem;
|
|
|
+ height: .11rem;
|
|
|
+ background: url('../../assets/images/app/icon_b.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detaillist {
|
|
|
+ margin-top: .12rem;
|
|
|
+ margin-left: .75rem;
|
|
|
+ border-left: 1px solid #B6D3BD;
|
|
|
+ }
|
|
|
+ .detailitem {
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 0.1rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: -.61rem;
|
|
|
+ .time {
|
|
|
+ width: .45rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon_prossess {
|
|
|
+ display: inline-block;
|
|
|
+ width: .16rem;
|
|
|
+ height: .16rem;
|
|
|
+ background: url('../../assets/images/app/icon_step.png') no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ margin: 0 .15rem 0 .08rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.pay_btn {
|
|
|
+ margin: .25rem .3rem .2rem;
|
|
|
+ background: #14928A;
|
|
|
+ line-height: .45rem;
|
|
|
+ color: #fff;
|
|
|
+ font-size: .18rem;
|
|
|
+ border-radius:.5rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.van-hairline--bottom::after {
|
|
|
+ color: #414141;
|
|
|
+}
|
|
|
+</style>
|