|
@@ -1,280 +1,288 @@
|
|
|
<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="classdetail">
|
|
|
+ <MHeader :isBack="false" />
|
|
|
|
|
|
- <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">
|
|
|
- <!-- -{{ dataInfo.subjectNames }} -->
|
|
|
- <p class="name van-ellipsis">{{ dataInfo.teacherName }}</p>
|
|
|
- <p class="memo van-multi-ellipsis--l2">简介:{{ dataInfo.introduction }}</p>
|
|
|
- <p class="times">授课次数:{{ dataInfo.lectureNum ? dataInfo.lectureNum : 0 }}次</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="header van-hairline--bottom">
|
|
|
+ <h3>{{ dataInfo.groupName }}</h3>
|
|
|
+ <p>{{ dataInfo.courseStartDate | getMonthDay }}—{{ dataInfo.courseEndDate | getMonthDay }}</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="classdetails">
|
|
|
- <h3>课时安排</h3>
|
|
|
- <!-- 线下课{{ dataInfo.offlineClassesTimes }}次+线上课{{ dataInfo.onlineClassesTimes }}次 -->
|
|
|
- <p class="detail"><i class="books"></i><span>总计:{{ dataInfo.totalClassesTimes }}节</span></p>
|
|
|
+ <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">
|
|
|
+ <!-- -{{ dataInfo.subjectNames }} -->
|
|
|
+ <p class="name van-ellipsis">{{ dataInfo.teacherName }}</p>
|
|
|
+ <p class="memo van-multi-ellipsis--l2">简介:{{ dataInfo.introduction }}</p>
|
|
|
+ <p class="times">授课次数:{{ dataInfo.lectureNum ? dataInfo.lectureNum : 0 }}次</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <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="classdetails">
|
|
|
+ <h3>课时安排</h3>
|
|
|
+ <!-- 线下课{{ dataInfo.offlineClassesTimes }}次+线上课{{ dataInfo.onlineClassesTimes }}次 -->
|
|
|
+ <p class="detail">
|
|
|
+ <i class="books"></i><span>总计:{{ dataInfo.totalClassesTimes }}节</span>
|
|
|
+ </p>
|
|
|
|
|
|
- <div class="pay_btn" @click="onJoin">确认加入</div>
|
|
|
+ <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'
|
|
|
+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
|
|
|
+ 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 = "课堂详情";
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 if (result.code == 403) {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/appLogin",
|
|
|
+ query: {
|
|
|
+ groupId: params.groupId,
|
|
|
+ },
|
|
|
+ });
|
|
|
} else {
|
|
|
- document.title = '课堂详情'
|
|
|
+ this.$toast(result.msg);
|
|
|
}
|
|
|
-
|
|
|
- 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 if(result.code == 403) {
|
|
|
- this.$router.push({
|
|
|
- path: '/appLogin',
|
|
|
- query: {
|
|
|
- groupId: params.groupId
|
|
|
- }
|
|
|
- })
|
|
|
- } 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'
|
|
|
+ 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: "恭喜您已完成课程报名,<br />请关注课程时间,准时上课。",
|
|
|
})
|
|
|
- buyCourseGroup({ courseGroupId: params.groupId }).then(res => {
|
|
|
- let result = res.data
|
|
|
- this.$toast.clear()
|
|
|
- if(result.code == 200) {
|
|
|
- this.$dialog.alert({
|
|
|
- message: '恭喜您已完成课程报名,<br />请关注课程时间,准时上课。'
|
|
|
- }).then(() => {
|
|
|
- // this.$router.push('/studentDownLoad')
|
|
|
- // window.location.href = 'https://mstuonline.dayaedu.com/#/studentDownload'
|
|
|
- if(this.checkUrl()) {
|
|
|
- window.location.href = 'https://mstuonline.dayaedu.com/#/transfer'
|
|
|
- } else {
|
|
|
- window.location.href = 'http://mstudev.dayaedu.com/#/transfer'
|
|
|
- }
|
|
|
- });
|
|
|
- } else if(result.code == 302) {
|
|
|
- this.onSubmitStatus = true
|
|
|
- this.$dialog.alert({
|
|
|
- title: '课程冲突',
|
|
|
- message: result.msg,
|
|
|
- messageAlign: 'left'
|
|
|
- }).then(() => {
|
|
|
- // on close
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$toast(result.msg)
|
|
|
- }
|
|
|
+ .then(() => {
|
|
|
+ // this.$router.push('/studentDownLoad')
|
|
|
+ if (this.checkUrl()) {
|
|
|
+ window.location.href = "https://gym.lexiaoya.cn/mdaya/#/transfer";
|
|
|
+ } else {
|
|
|
+ window.location.href = "https://test.gym.lexiaoya.cn/mdaya/#/transfer";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (result.code == 302) {
|
|
|
+ this.onSubmitStatus = true;
|
|
|
+ this.$dialog
|
|
|
+ .alert({
|
|
|
+ title: "课程冲突",
|
|
|
+ message: result.msg,
|
|
|
+ messageAlign: "left",
|
|
|
})
|
|
|
- }).catch(() => {
|
|
|
- // on cancel
|
|
|
- });
|
|
|
- },
|
|
|
- checkUrl() {
|
|
|
- let url = window.location.href
|
|
|
- if(/mteaonline/ig.test(url)) {
|
|
|
- return true
|
|
|
+ .then(() => {
|
|
|
+ // on close
|
|
|
+ });
|
|
|
} else {
|
|
|
- return false
|
|
|
+ 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
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ checkUrl() {
|
|
|
+ let url = window.location.href;
|
|
|
+ if (/mteaonline/gi.test(url)) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getMonthDay(time) {
|
|
|
+ let tempDate = time || new Date();
|
|
|
+ if (typeof tempDate == "string") {
|
|
|
+ tempDate = new Date(time.replace(/-/gi, "/"));
|
|
|
+ }
|
|
|
+ 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(/-/gi, "/"));
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
- padding: .2rem .16rem .15rem;
|
|
|
- font-size: .14rem;
|
|
|
+ padding: 0.2rem 0.16rem 0.15rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #444444;
|
|
|
+ h3 {
|
|
|
+ font-size: 0.18rem;
|
|
|
color: #444444;
|
|
|
- h3 {
|
|
|
- font-size: .18rem;
|
|
|
- color: #444444;
|
|
|
- padding-bottom: .05rem;
|
|
|
- }
|
|
|
+ padding-bottom: 0.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;
|
|
|
+ padding: 0.16rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ p {
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ width: 0.72rem;
|
|
|
+ height: 0.72rem;
|
|
|
+ margin-right: 0.16rem;
|
|
|
+ img {
|
|
|
+ border-radius: 0.04rem;
|
|
|
+ width: 0.72rem;
|
|
|
+ height: 0.72rem;
|
|
|
}
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: 0.12rem;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ .memo {
|
|
|
+ padding: 0.05rem 0;
|
|
|
+ }
|
|
|
+ .times {
|
|
|
+ // color: #F97215;
|
|
|
+ }
|
|
|
}
|
|
|
.classdetails {
|
|
|
- padding: .13rem .16rem;
|
|
|
- font-size: .14rem;
|
|
|
+ padding: 0.13rem 0.16rem;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ color: #444444;
|
|
|
+ h3 {
|
|
|
+ font-size: 0.18rem;
|
|
|
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;
|
|
|
- }
|
|
|
+ padding-bottom: 0.05rem;
|
|
|
+ }
|
|
|
+ .books {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.05rem;
|
|
|
+ width: 0.11rem;
|
|
|
+ height: 0.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;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
+ .detaillist {
|
|
|
+ margin-top: 0.12rem;
|
|
|
+ margin-left: 0.75rem;
|
|
|
+ border-left: 1px solid #b6d3bd;
|
|
|
+ }
|
|
|
+ .detailitem {
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 0.1rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: -0.61rem;
|
|
|
+ .time {
|
|
|
+ width: 0.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;
|
|
|
+ &:last-child {
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
+ }
|
|
|
+ .icon_prossess {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.16rem;
|
|
|
+ height: 0.16rem;
|
|
|
+ background: url("../../assets/images/app/icon_step.png") no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ margin: 0 0.15rem 0 0.08rem;
|
|
|
+ }
|
|
|
}
|
|
|
.pay_btn {
|
|
|
- margin: .25rem .3rem .2rem;
|
|
|
- background: @mColor;
|
|
|
- line-height: .45rem;
|
|
|
- color: #fff;
|
|
|
- font-size: .18rem;
|
|
|
- border-radius:.5rem;
|
|
|
- text-align: center;
|
|
|
+ margin: 0.25rem 0.3rem 0.2rem;
|
|
|
+ background: @mColor;
|
|
|
+ line-height: 0.45rem;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.18rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.van-hairline--bottom::after {
|
|
|
- color: #414141;
|
|
|
+ color: #414141;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|