Просмотр исходного кода

feat(课程详情): 添加教学班选择功能并优化返回逻辑

新增教学班选择对话框组件,允许用户在课程详情页选择不同的教学班
修改返回按钮逻辑,统一跳转到首页
优化课程状态判断逻辑,移除不必要的条件判断
添加教学班管理相关接口调用方法
lsc 6 дней назад
Родитель
Сommit
dcc28199e0

+ 3 - 2
src/components/courseDetail.vue

@@ -1974,8 +1974,9 @@ export default {
         }
       }
 
-      if(this.courseDetail.state == 7 && this.tType == 2){
-        this.goToStudyRate('')
+      if(this.courseDetail.state == 7){ //  && this.tType == 2
+        // this.goToStudyRate('')
+        this.addUserRate('');
       }
       const element = document.getElementsByClassName("pb_body")[0];
       if (element) {

+ 303 - 0
src/components/dialog/selectTeachingClassDialog2.vue

@@ -0,0 +1,303 @@
+<template>
+	<div>
+		<el-dialog
+			:center="true"
+			:visible.sync="show"
+			:close-on-click-modal="false"
+			:modal="true"
+			width="auto"
+			height="auto"
+			:append-to-body="true"
+			class="dialog"
+		>
+			<div class="box">
+				<div class="b_head">
+					<span>{{ lang.ssSelectTeachingClass }}</span>
+					<svg
+						@click="close()"
+						t="1748587270371"
+						class="icon"
+						viewBox="0 0 1024 1024"
+						version="1.1"
+						xmlns="http://www.w3.org/2000/svg"
+						p-id="5023"
+						width="200"
+						height="200"
+					>
+						<path
+							d="M0 0h1024v1024H0z"
+							fill="#FF0033"
+							fill-opacity="0"
+							p-id="5024"
+						></path>
+						<path
+							d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z"
+							fill="#fff"
+							p-id="5025"
+						></path>
+					</svg>
+				</div>
+				<div class="b_main" v-loading="loading">
+          <template v-for="item in classList">
+            <div class="b_m_classItem" :class="{'b_m_classItem_active':selectId == item.id}" :key="item.id" v-if="item.name" @click="selectId == item.id ? selectId = '' : selectId = item.id" >
+            <div>{{ item.name }}</div>
+            <span v-if="item.studentNum>=0">{{ lang.ssStudentNum.replace(/\*/g, item.studentNum) }}</span>
+          </div>
+          </template>
+
+          <div class="b_m_classItem" @click="editClass" v-if="courseDetail.userid == userId">
+              <div>
+                <span>+</span>
+                <svg t="1756867649445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" width="200" height="200"><path d="M417.664 921.6l317.184-824.32h-63.616L353.152 921.6z" fill="#999999" p-id="10275"></path></svg>
+                <span>-</span>
+              </div>
+            <div>{{ lang.ssAddOrModifyClass }}</div>
+          </div>
+
+          <div class="b_m_noClassMsg" v-if="classList.length<=0 && courseDetail.userid != userId">
+            <span>{{ lang.ssCreatorNotAddedClass }}</span>
+          </div>
+				</div>
+				<div class="b_bottom">
+					<!-- <div @click="close()">{{ lang.ssCancel }}</div> -->
+          <div class="b_b_submit" @click="submit()">{{selectId ? lang.ssConfirm : lang.ssEnterDirectly}}</div>
+				</div>
+			</div>
+		</el-dialog>
+    <addClassDialog ref="addClassDialogRef" @success="addClassSuccess" :courseDetail="courseDetail"/>
+	</div>
+</template>
+
+<script>
+import addClassDialog from './addClassDialog.vue';
+export default {
+  props:{
+    courseDetail:{
+      type:Object,
+      default:()=>{return {}}
+    },
+    userId:{
+      type:String,
+      default:""
+    }
+  },
+  components:{
+    addClassDialog
+  },
+	data() {
+		return {
+			loading: false,
+			show: false,
+			data: null,
+      classList:[],
+      selectId:"",
+		};
+	},
+	computed: {},
+	methods: {
+		open(data, tcid2) {
+			console.log(data, tcid2);
+			
+			this.data = JSON.parse(JSON.stringify(data));
+			this.classList = this.data.classList;
+			if(this.classList.length>0){
+				this.selectId = this.classList[0].id;
+			}
+			this.loading = false;
+			this.selectId = tcid2 ? tcid2 : this.selectId;
+			this.show = true;
+		},
+		close() {
+			this.show = false;
+			this.init();
+		},
+		init() {
+			this.data = null;
+      this.classList = [];
+      this.selectId = "";
+			this.loading = false;
+		},
+    submit(){
+      // console.log(this.selectId)
+      this.$emit("success",this.selectId)
+    },
+    editClass(){
+      this.$refs.addClassDialogRef.open({classList:this.classList});
+    },
+    addClassSuccess(data){
+      this.classList = data;
+      this.$emit("changeClassList",this.classList);
+      this.$refs.addClassDialogRef.close();
+
+    },
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog {
+	width: 900px !important;
+	border-radius: 8px;
+	padding: 0;
+	background-color: #fff;
+	overflow: hidden;
+}
+
+.dialog >>> .el-dialog__body {
+	width: 900px !important;
+	height: auto;
+	flex-shrink: 0;
+	padding: 0;
+	box-sizing: border-box;
+	overflow: auto;
+}
+
+.dialog >>> .el-dialog__header {
+	display: none !important;
+}
+
+.box {
+	width: 900px;
+	height: auto;
+	background: #fafafa;
+	border-radius: 15px;
+	box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+		0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+}
+
+.b_head {
+	width: 100%;
+	height: 50px;
+	/* border-radius: 15px 15px 0 0; */
+	background: #1A1A1A;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	padding: 0 20px;
+  color: #fff;
+}
+
+.b_head > span {
+	font-size: 18px;
+	font-weight: bold;
+	color: #fff;
+}
+
+.b_head > img {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
+.b_head > svg {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
+.b_main {
+	width: 100%;
+	height: 400px;
+	background: #fafafa;
+	padding: 20px 20px 20px 20px;
+	box-sizing: border-box;
+  overflow: auto;
+}
+
+.b_bottom {
+	width: 100%;
+	height: 70px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	box-sizing: border-box;
+	padding: 0 20px;
+}
+
+.b_bottom>div{
+  padding: 10px 25px;
+  background: #fff;
+  color: #000;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px #EEEEEE;
+  margin-left: 15px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.b_bottom>.b_b_submit{
+  background: #1A1A1A;
+  color: #D4D4D4;
+  border-color: #1A1A1A;
+}
+
+.b_m_classItem{
+  width: 32%;
+  height: 85px;
+  float: left;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+		0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.b_m_classItem>div{
+  color: #5F5F5F;
+  font-size: 16px;
+  margin: 4px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+}
+
+.b_m_classItem>div>span{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25px;
+  height: 25px;
+  border-radius: 4px;
+  border: solid 1px #B0B0B0;
+}
+
+.b_m_classItem>div>svg{
+  width: 20px;
+  height: 25px;
+  margin: 0 5px;
+}
+
+.b_m_classItem>span{
+  color: #A3A3A3;
+  font-size: 14px;
+}
+
+.b_main > div:nth-child(3n-1) {
+  margin: 0 2%;
+}
+
+.b_m_classItem_active{
+  /* box-shadow: 4px 4px 4px 0px rgba(138, 238, 138, 0.555); */
+  background: #fccf00;
+  font-weight: 600;
+  color: #000;
+}
+
+.b_m_noClassMsg{
+  width:100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

+ 121 - 35
src/components/pptEasyClass/index.vue

@@ -6,12 +6,21 @@
         v-show="false"></iframe>
       <div class="pec_header">
         <div class="pec_h_left">
-          <div @click.stop="back" class="backBtn" v-if="screenType != 2 || tType == 1">
+          <!-- || tType == 1 -->
+          <div @click.stop="back" class="backBtn" v-if="screenType != 2">
             <img src="../../assets/icon/newIcon/return.svg" alt="" />
           </div>
           <div v-if="tcid" class="class-info-group">
             <span class="class-label">{{ lang.ssClass }}</span>
-            <span class="class-value">{{ className }}</span>
+            <span class="class-value class-value2" @click="openSelectClass">
+              {{ className }}
+              <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+                <path
+                  d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
+                  p-id="4736" fill="currentColor"></path>
+              </svg>
+            </span>
           </div>
           <div v-if="tcid" class="class-info-group">
             <span class="class-label" v-if="inviteCode">{{ lang.ssInviteCode }}</span>
@@ -91,13 +100,19 @@
       <iframe v-if="showObserveDialog" :src="observeDialogUrl" frameborder="0"
         style="width: 100%; height: 85vh; border: none;"></iframe>
     </el-dialog>
+    <selectTeachingClassDialog :courseDetail="courseDetail" :userId="userid" ref="selectTeachingClassDialogRef" @success="selectClassSuccess" @changeClassList="changeClassList"/>
+
   </div>
 </template>
 
 <script>
 import { myMixin } from '../../mixins/mixin';
+import selectTeachingClassDialog from "../dialog/selectTeachingClassDialog2.vue";
 
 export default {
+  components: {
+    selectTeachingClassDialog
+  },
   mixins: [myMixin],
   data() {
     return {
@@ -111,6 +126,7 @@ export default {
       courseType: this.$route.query.type,
       screenType: this.$route.query.screenType,
       tcid2: this.$route.query.tcid,
+      classList: [],
       tcid: "",
       className: "",
       showIframe: false,
@@ -164,6 +180,57 @@ export default {
     }
   },
   methods: {
+    openSelectClass(){
+      this.$refs.selectTeachingClassDialogRef.open({classList:this.classList}, this.tcid2)
+    },
+    addInviteCodeOne(cid) {
+      return new Promise((resolve)=>{
+        let params = [
+        {
+          courseId: this.id,
+          inviteCode: cid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "add_courseInviteCode2", params)
+        .then((res) => {
+          console.log(res.data)
+          resolve(res.data)
+        })
+        .catch((err) => {
+          resolve(err.messages)
+          console.error(err);
+        });
+      })
+    },
+    async selectClassSuccess(classId){
+      if(classId){
+        let data = await this.addInviteCodeOne(classId)
+        console.log("addInviteCodeOne",data)
+        this.tcid2 = classId
+        this.getClassName()
+        this.getCourseDetail();
+      }else if(this.tcid2){
+        this.ticd2 = ''
+        this.getCourseDetail();
+      }
+      // this.gotoCourse(classId);
+      this.$refs.selectTeachingClassDialogRef.close();
+    },
+    async changeClassList(data){
+      this.classList = JSON.parse(JSON.stringify(data))
+      let params = [{
+        cid:this.id,
+        juri:this.classList.map(i=>i.id).join(',')
+      }]
+      this.ajax.post(this.$store.state.api+"update_CourseJuriById",params).then(res=>{
+        if(res.data==1){
+          console.log(this.lang.ssModifySuccess)
+        }
+      })
+
+      //this.inviteCodeFn();
+    },
     goTo(path) {
       this.$router.push(path);
     },
@@ -543,6 +610,8 @@ export default {
             this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
             this.tcid2 ? this.tcid2.split(",") : []
           )[0] || "";
+          console.log('tcid', this.tcid)
+          console.log('tcid2', this.tcid2)
           if (this.tcid && res.data[1].length) {
             let _inviteA = [];
             for (var ik = 0; ik < res.data[1].length; ik++) {
@@ -564,6 +633,10 @@ export default {
             }
           }
           this.setPptIframe()
+          this.classList = res.data[2]
+          if(!this.tcid2 && this.tType == '1'){
+            this.$refs.selectTeachingClassDialogRef.open({classList:this.classList})
+          }
           this.pageLoading = false;
         })
         .catch(err => {
@@ -613,39 +686,39 @@ export default {
       this.className = courseGrade.data[0][0].grade;
     },
     back() {
-      if (this.tType != 2) {
-        this.goTo(
-          '/courseDetail?userid=' +
-          this.userid +
-          '&oid=' +
-          this.oid +
-          '&org=' +
-          this.org +
-          '&cid=' +
-          this.classId +
-          '&courseId=' +
-          this.id +
-          '&tType=' +
-          this.tType +
-          '&screenType=' +
-          this.screenType
-        )
-      } else {
-        this.goTo(
-          '/index?userid=' +
-          this.userid +
-          '&oid=' +
-          this.oid +
-          '&org=' +
-          this.org +
-          '&cid=' +
-          this.classId +
-          '&tType=' +
-          this.tType +
-          '&screenType=' +
-          this.screenType
-        )
-      }
+      // if (this.tType != 2) {
+      //   this.goTo(
+      //     '/courseDetail?userid=' +
+      //     this.userid +
+      //     '&oid=' +
+      //     this.oid +
+      //     '&org=' +
+      //     this.org +
+      //     '&cid=' +
+      //     this.classId +
+      //     '&courseId=' +
+      //     this.id +
+      //     '&tType=' +
+      //     this.tType +
+      //     '&screenType=' +
+      //     this.screenType
+      //   )
+      // } else {
+      this.goTo(
+        '/index?userid=' +
+        this.userid +
+        '&oid=' +
+        this.oid +
+        '&org=' +
+        this.org +
+        '&cid=' +
+        this.classId +
+        '&tType=' +
+        this.tType +
+        '&screenType=' +
+        this.screenType
+      )
+      // }
     },
     afterClass() {
       if (this.recordedForm.status == 1) {
@@ -1011,6 +1084,19 @@ export default {
   text-align: center;
   display: inline-block;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.class-value2 {
+  cursor: pointer;
+  background: #fff;
+}
+
+.class-value > svg{
+  width: 13px;
+  height: 13px;
+  margin-left: 8px;
 }
 
 .pec_content {