|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div class="ai_dialog">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisibleAiD"
|
|
|
+ width="700px"
|
|
|
+ :show-close="false"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <template #title>
|
|
|
+ <div class="title_container">
|
|
|
+ <div>{{ lang.ssCourseCenter }}</div>
|
|
|
+ <div class="close_btn">×</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="course_type_container">
|
|
|
+ <div class="course_type_title">
|
|
|
+ {{ lang.ssCourseType }}
|
|
|
+ </div>
|
|
|
+ <div class="course_type_select">
|
|
|
+ <el-select v-model="courseType" :placeholder="lang.ssSelectCourseType" @change="typeChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in courseTypeList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="course_type_list">
|
|
|
+ <div v-for="item in courseList" @click="selectCourse(item)" :key="item.id" class="course_item" :class="{'selected': selectedCourseList.includes(item)}">
|
|
|
+ <img class="course_item_selected"
|
|
|
+ src="../../../../assets/stuImg/ai6dui.svg"
|
|
|
+ v-if="selectedCourseList.includes(item)"
|
|
|
+ alt="">
|
|
|
+ <img class="course_item_img" :src="item.img" alt="">
|
|
|
+ <div class="course_item_name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="course_item_footer">
|
|
|
+ <div>{{ lang.ssSelectedCourse.replace(/\*/g, selectedCourseList.length) }}</div>
|
|
|
+ <div class="confirm_btn" @click="confirmAddCourse">
|
|
|
+ <img src="../../../../assets/stuImg/ai6dui.svg" alt="">
|
|
|
+ {{ lang.ssConfirm }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'aiDialog',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisibleAiD: true,
|
|
|
+ courseType: '',
|
|
|
+ courseTypeList: [],
|
|
|
+ courseList: [],
|
|
|
+ allCourseList: [],
|
|
|
+ selectedCourseList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openDialog() {
|
|
|
+ this.dialogVisibleAiD = true;
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.dialogVisibleAiD = false;
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ selectCourse(item) {
|
|
|
+ if(this.selectedCourseList.includes(item)) {
|
|
|
+ this.selectedCourseList = this.selectedCourseList.filter(item => item.id !== item.id);
|
|
|
+ } else {
|
|
|
+ this.selectedCourseList.push(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmAddCourse() {
|
|
|
+ let courseIds = this.selectedCourseList.map(item => item.id);
|
|
|
+ console.log(courseIds);
|
|
|
+ },
|
|
|
+ getCourseTypeList() {
|
|
|
+ let params = {
|
|
|
+ cl: 1,
|
|
|
+ };
|
|
|
+ this.ajax.get(this.$store.state.api + 'selectAiExp', params).then(res => {
|
|
|
+ let data = res.data
|
|
|
+ this.courseTypeList = data[0];
|
|
|
+ this.courseTypeList.unshift({id: '', name: this.lang.ssAll});
|
|
|
+ this.courseList = data[1];
|
|
|
+ this.allCourseList = data[1];
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ typeChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ if(value === '') {
|
|
|
+ this.courseList = this.allCourseList;
|
|
|
+ } else {
|
|
|
+ this.courseList = this.allCourseList.filter(item => item.levA === value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getCourseTypeList();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.ai_dialog >>> .el-dialog {
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.title_container {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.close_btn {
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #F5F6F6;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.course_type_container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.course_type_title {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.course_type_select >>> .el-select {
|
|
|
+ width: 33%;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #F5F6F6;
|
|
|
+}
|
|
|
+.course_type_select >>> .el-select .el-input__inner {
|
|
|
+ background-color: #FAFCFE;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.ai_dialog >>> .el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+.course_type_list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ max-height: 400px;
|
|
|
+ height: 350px;
|
|
|
+ overflow-y: auto;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+.course_item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ height: 160px;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.course_item.selected {
|
|
|
+ border: 2px solid #FF9400;
|
|
|
+}
|
|
|
+.course_item_selected {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ padding: 2px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #FF9400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.course_item_img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+.course_item_footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: 1px solid #E5E5E5;
|
|
|
+}
|
|
|
+.confirm_btn {
|
|
|
+ background-color: #FF9400;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ padding: 7px 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* padding: 5px 10px; */
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.confirm_btn img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+</style>
|
11wqe1
