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