course_resource/src/components/dialog/selectTeachingClassDialog.vue

<template>
	<div class="opkDialogHeader">
		<el-dialog v-model="show" :show-close="false">
			<template #header>
				<div class="b_head">
					<span>{{ lang.ssSelTeachClass }}</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>
			</template>
			<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.ssStuCount.replace(/\*/g, item.studentNum) }}
							</span>
						</div>
					</template>

					<div
						class="b_m_classItem"
						@click="editClass"
					>
						<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.ssAddEditClass }}</div>
					</div>
				</div>
				<div class="b_bottom">
					<div @click="close()">{{ lang.ssCancel }}</div>
          <div class="b_b_submit" @click="selectClassSuccess()">{{selectId ? lang.ssConfirm : lang.ssEnterDirect}}</div>
				</div>

		</el-dialog>
		
	</div>
	<addClassDialog
			ref="addClassDialogRef"
			:courseDetail="courseDetail"
			@success="getCourseList"
		/>

</template>

<script setup>
import { ref, inject } from "vue";
import { userInfoStore } from "../../stores/counter";
import addClassDialog from "./addClassDialog.vue";
const emit = defineEmits(["success", "changeClassList", "openCourse"]);
import axios from '@/services/config'
import { addOp3 } from '@/mixins/mixin'
const lang = inject('lang')
const checkStage = ref('0');

const courseDetail = ref({});
const loading = ref(false);
const show = ref(false);
const classList = ref([]);
const selectId = ref("");
const userInfo = userInfoStore();
console.log('userInfo',userInfo.user)
const addClassDialogRef = ref(null);

const getClasslist = (options) => {
	courseDetail.value = JSON.parse(JSON.stringify(options));
	getCourseList();
	loading.value = true;
	show.value = true;
};
const getCourseList = () => {
	axios.get('https://pbl.cocorobo.cn/api/pbl/selectCourseDetail2',{
        params: { courseId: courseDetail.value.courseId }
    })
    .then(res => {
        console.log(res);
        classList.value = res[3]        
		    selectId.value = classList.value.length > 0 ? classList.value[0].id : ''
        loading.value = false
    })
    .catch(err=>{
        console.log(err);
        loading.value = false
    })
};
async function selectClassSuccess(){
      let data = await addInviteCodeOne(selectId.value)
      console.log("addInviteCodeOne",data)
      gotoCourse(selectId.value);
      close();
}
const gotoCourse = (id) => {
    // 埋点
			if(!id){
				insertMemorandum(`开始为<span class='variable'>全部班级</span>授课`)
			}else{
				let _classData = classList.value.find(item=>item.id == id)
				insertMemorandum(`开始为<span class='variable'>${_classData.name}</span>授课`,id)
			}

      addOp3('1', "", { courseid: courseDetail.value.courseId,classIdL: !id ? 'ssAll' : id ,type: "course_class_open" }, "success")

      let url = '';
      if (lang.lang == 'hk') {
        url = "https://pbl.cocorobo.hk"
      }else if (lang.lang == 'en') {
        url = "https://pbl.cocorobo.com"
      }else{
        url = "https://pbl.cocorobo.cn"
      }

      if (courseDetail.value.state == 1) {
        if (classList.value.length) {
          goto(
             url + "/pbl-student-table/dist/#/studyStudent?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1' +
              "&tcid=" +
              id
          );
        } else {
          goto(
              url + "/pbl-student-table/dist/#/studyStudent?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1'
          );
        }
      } else if (courseDetail.value.state == 2 || courseDetail.value.state == 5) {
        if (classList.value.length) {
          goto(
             url + "/pbl-student-table/dist/#/studystudentE2?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1' +
              "&tcid=" +
              id
          );
        } else {
          goto(
            url + "/pbl-student-table/dist/#/studystudentE2?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1'
          );
        }
      } else if (courseDetail.value.state == 3 || courseDetail.value.state == 4) {
        if (classList.value.length) {
          goto(
            url + "/pbl-student-table/dist/#/studystudentE3?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1' +
              "&tcid=" +
              id
          );
        } else {
          goto(
            url + "/pbl-student-table/dist/#/studystudentE3?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1'
          );
        }
      } else if (courseDetail.value.state == 6) {
        if (classList.value.length) {
          goto(
            url + "/pbl-student-table/dist/#/studySutdentClass?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1' +
              "&tcid=" +
              id
          );
        } else {
          goto(
            url + "/pbl-student-table/dist/#/studySutdentClass?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '1'
          );
        }
      }  else if (courseDetail.value.state == 7) {
        if(classList.value.length){
          goto(
            url + "/pbl-student-table/dist/#/pptEasyClass?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '2' +
              "&tcid=" +
              id
          );
        }else {
          goto(
            url + "/pbl-student-table/dist/#/pptEasyClass?type=" +
              checkStage.value +
              "&courseId=" +
              courseDetail.value.courseId +
              "&userid=" +
              userInfo.user.userid +
              "&oid=" +
              userInfo.user.organizeid +
              "&org=" +
              userInfo.user.org +
              "&cid=" +
              id +
              "&tType=" +
              userInfo.user.type +
              "&screenType=" +
              '2'
          );
        }
      }

    let params = [
      {
        courseId: courseDetail.value.courseId,
      },
    ];
	  axios.post("https://pbl.cocorobo.cn/api/pbl/addOpenCoursenum", params)
        .then((res) => {})
        .catch((err) => {
          console.error(err);
        });
}
const goto = (val) => {
  emit('openCourse', val)
}

const insertMemorandum = (_html,tcid="") => {//保存行为操作
    //variable
    //btn
    let params = [{
      uid:userInfo.user.userid,
      courseId:courseDetail.value.courseId + tcid,
      content:_html
    }]
    // console.log('params',params);
    

    axios.post("https://pbl.cocorobo.cn/api/pbl/insert_systemOperation_countdownBehavior", params).then(res=>{
      console.log('res',res);
      if(res == 1){
        console.log("保存行为操作成功")
      }else{
        console.log("保存行为操作失败")
      }
    }).catch(e=>{
      console.log("保存行为操作失败")
      console.log(e)
    })
  }
const close = () => {
    show.value = false;
}
 // 添加随机码接口
async function addInviteCodeOne(cid) {
    return new Promise((resolve)=>{
      let params = [
      {
        courseId: courseDetail.value.courseId,
        inviteCode: cid,
      },
    ];

    axios.post("https://pbl.cocorobo.cn/api/pbl/add_courseInviteCode2", params)
        .then((res) => {
          console.log(res.data)
          resolve(res.data)
        })
        .catch((err) => {
          resolve(err.messages)
          console.error(err);
        });
      })
}
const editClass = () => {
	addClassDialogRef.value.open({ classList: classList.value });
};

defineExpose({
	getClasslist,
});

</script>
<style scoped>
.opkDialogHeader >>> .el-dialog {
	width: 900px !important;
	border-radius: 8px;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
	border-radius: 8px !important;
}
.opkDialogHeader >>> .el-dialog__body {
	padding: 0 !important;
	background: #fafafa !important;
}
.opkDialogHeader >>> .el-dialog__header {  /* 注意这里没有 :deep，因为是全局 */
  /* background: #2575fc !important; */
  padding: 0 !important;margin: 0 !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: 0.2s;
}

.b_m_classItem > div {
	color: #000;
	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 {
  background-color: #FCCF00;
  color: #000 !important;
	/* box-shadow: 4px 4px 4px 0px rgba(138, 238, 138, 0.555); */
}

.b_m_noClassMsg {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.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;
}
</style>