|
@@ -1,18 +1,57 @@
|
|
<template>
|
|
<template>
|
|
- <div class="c_box">
|
|
|
|
- <div class="choice_box" v-loading="isloading">
|
|
|
|
- <div class="title" style="display: flex;">
|
|
|
|
- <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
|
|
|
|
- <span>{{ checkJson.title }}</span>
|
|
|
|
|
|
+ <div class="c_box">
|
|
|
|
+ <div class="choice_box" v-loading="isloading">
|
|
|
|
+ <div class="title" style="display: flex;align-items: center;">
|
|
|
|
+ <span class="g_t_index" style="min-width: fit-content;">{{
|
|
|
|
+ tindex + 1
|
|
|
|
+ }}</span>
|
|
|
|
+ <span>{{ checkJson.title }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="detail"
|
|
|
|
+ v-if="checkJson.detail"
|
|
|
|
+ v-html="checkJson.detail"
|
|
|
|
+ style="color: #00000066;margin-top: 5px;"
|
|
|
|
+ ></div>
|
|
|
|
+ <!-- <div class="choices" v-if="!see">
|
|
|
|
+ <el-button type="primary" size="small" @click="openCourseD"
|
|
|
|
+ >选择课程</el-button
|
|
|
|
+ >
|
|
|
|
+ </div> -->
|
|
|
|
+ <div class="choices">
|
|
|
|
+ <div class="c_list">
|
|
|
|
+ <div
|
|
|
|
+ class="c_l_add1"
|
|
|
|
+ v-if="courseDetail.length == 0"
|
|
|
|
+ @click="openCourseD"
|
|
|
|
+ >
|
|
|
|
+ 点击选择课程
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="c_l_item"
|
|
|
|
+ @click="openCourse(course.courseId)"
|
|
|
|
+ v-for="(course, index) in courseDetail"
|
|
|
|
+ v-if="courseDetail.length !== 0"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <img :src="course.cover" alt="" />
|
|
|
|
+ <div>
|
|
|
|
+ <div>{{ course.title }}</div>
|
|
|
|
+ <div>{{ course.name ? course.name : "暂无" }}</div>
|
|
|
|
+ <div>创建人:{{ course.username }}</div>
|
|
|
|
+ <div>协作者:{{ course.xieName ? course.xieName : "暂无" }}</div>
|
|
</div>
|
|
</div>
|
|
- <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
|
|
|
|
- style="color: #00000099;margin-top: 5px;">
|
|
|
|
- </div>
|
|
|
|
- <div class="choices" v-if="!see">
|
|
|
|
- <el-button type="primary" size="small" @click="openCourseD">选择课程</el-button>
|
|
|
|
- </div>
|
|
|
|
- <div class="choices" v-if="checkJson.answer2.length">
|
|
|
|
- <div class="course" @click="openCourse(course.courseId)" v-for="(course, index) in courseDetail" :key="index">
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ class="c_l_add2"
|
|
|
|
+ @click="openCourseD"
|
|
|
|
+ v-if="courseDetail.length !== 0"
|
|
|
|
+ >
|
|
|
|
+ 点击选择课程
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="course" @click="openCourse(course.courseId)" v-for="(course, index) in courseDetail" :key="index">
|
|
<div class="banner">
|
|
<div class="banner">
|
|
<img :src="course.cover" alt="">
|
|
<img :src="course.cover" alt="">
|
|
</div>
|
|
</div>
|
|
@@ -34,134 +73,137 @@
|
|
<span>{{ course.xieName ? course.xieName : '暂无' }}</span>
|
|
<span>{{ course.xieName ? course.xieName : '暂无' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <!-- <div class="page" v-if="checktype == '1'">
|
|
|
|
|
|
+ </div> -->
|
|
|
|
+ <!-- <div class="page" v-if="checktype == '1'">
|
|
<el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一个</el-button>
|
|
<el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一个</el-button>
|
|
<div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkJson.courses.length }}</span>
|
|
<div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkJson.courses.length }}</span>
|
|
</div>
|
|
</div>
|
|
<el-button type="primary" size="mini" :disabled="page == (checkJson.courses.length - 1)"
|
|
<el-button type="primary" size="mini" :disabled="page == (checkJson.courses.length - 1)"
|
|
@click="setPage('1')">下一个</el-button>
|
|
@click="setPage('1')">下一个</el-button>
|
|
</div> -->
|
|
</div> -->
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <courseDilogVue :dialogVisibleCourse.sync="dialogVisibleCourse" :courses="checkJson.answer2" @setCourse="setCourse">
|
|
|
|
- </courseDilogVue>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <courseDilogVue
|
|
|
|
+ :dialogVisibleCourse.sync="dialogVisibleCourse"
|
|
|
|
+ :courses="checkJson.answer2"
|
|
|
|
+ @setCourse="setCourse"
|
|
|
|
+ >
|
|
|
|
+ </courseDilogVue>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import courseDilogVue from '../../../test/add/components/course2/courseDilog.vue'
|
|
|
|
|
|
+import courseDilogVue from "../../../test/add/components/course2/courseDilog.vue";
|
|
export default {
|
|
export default {
|
|
- components: {
|
|
|
|
- courseDilogVue,
|
|
|
|
|
|
+ components: {
|
|
|
|
+ courseDilogVue
|
|
|
|
+ },
|
|
|
|
+ props: {
|
|
|
|
+ tindex: {
|
|
|
|
+ type: Number
|
|
},
|
|
},
|
|
- props: {
|
|
|
|
- tindex: {
|
|
|
|
- type: Number
|
|
|
|
- },
|
|
|
|
- cJson: {
|
|
|
|
- type: Object,
|
|
|
|
- },
|
|
|
|
- checktype: {
|
|
|
|
- type: Number,
|
|
|
|
- default: 1
|
|
|
|
- },
|
|
|
|
- see: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- }
|
|
|
|
|
|
+ cJson: {
|
|
|
|
+ type: Object
|
|
},
|
|
},
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- option: {
|
|
|
|
- 1: { name: '附件' },
|
|
|
|
- },
|
|
|
|
- userid: this.$route.query.userid,
|
|
|
|
- checkJson: undefined,
|
|
|
|
- progress: 0,
|
|
|
|
- isFinishSize: 0,
|
|
|
|
- proVisible: false,
|
|
|
|
- isAllSize: 0,
|
|
|
|
- wurl: "",
|
|
|
|
- isTong: false,
|
|
|
|
- page: 0,
|
|
|
|
- isloading: false,
|
|
|
|
- courseDetail:[],
|
|
|
|
- dialogVisibleCourse: false
|
|
|
|
- }
|
|
|
|
|
|
+ checktype: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 1
|
|
},
|
|
},
|
|
- computed: {
|
|
|
|
-
|
|
|
|
|
|
+ see: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ option: {
|
|
|
|
+ 1: { name: "附件" }
|
|
|
|
+ },
|
|
|
|
+ userid: this.$route.query.userid,
|
|
|
|
+ checkJson: undefined,
|
|
|
|
+ progress: 0,
|
|
|
|
+ isFinishSize: 0,
|
|
|
|
+ proVisible: false,
|
|
|
|
+ isAllSize: 0,
|
|
|
|
+ wurl: "",
|
|
|
|
+ isTong: false,
|
|
|
|
+ page: 0,
|
|
|
|
+ isloading: false,
|
|
|
|
+ courseDetail: [],
|
|
|
|
+ dialogVisibleCourse: false
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ watch: {
|
|
|
|
+ checkJson: {
|
|
|
|
+ handler(newValue) {
|
|
|
|
+ this.$emit("update:cJson", newValue);
|
|
|
|
+ },
|
|
|
|
+ deep: true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ setCourse(courses) {
|
|
|
|
+ this.checkJson.answer2 = courses;
|
|
|
|
+ this.getCourse(this.checkJson.answer2);
|
|
|
|
+ this.$forceUpdate();
|
|
|
|
+ },
|
|
|
|
+ depthCopy(s) {
|
|
|
|
+ return JSON.parse(JSON.stringify(s));
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- checkJson: {
|
|
|
|
- handler(newValue) {
|
|
|
|
- this.$emit('update:cJson', newValue)
|
|
|
|
- },
|
|
|
|
- deep: true
|
|
|
|
- },
|
|
|
|
|
|
+ openFileBox() {
|
|
|
|
+ this.dialogVisiblefile = true;
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- setCourse(courses) {
|
|
|
|
- this.checkJson.answer2 = courses
|
|
|
|
- this.getCourse(this.checkJson.answer2)
|
|
|
|
- this.$forceUpdate()
|
|
|
|
- },
|
|
|
|
- depthCopy(s) {
|
|
|
|
- return JSON.parse(JSON.stringify(s));
|
|
|
|
- },
|
|
|
|
- openFileBox() {
|
|
|
|
- this.dialogVisiblefile = true
|
|
|
|
- },
|
|
|
|
- setPage(index) {
|
|
|
|
- if (index == '1') {
|
|
|
|
- this.page++
|
|
|
|
- } else if (index == '-1') {
|
|
|
|
- this.page--
|
|
|
|
- }
|
|
|
|
- this.checkJson.answer2 = this.checkJson.courses[this.page]
|
|
|
|
- this.getCourse(this.checkJson.answer2)
|
|
|
|
- },
|
|
|
|
- openCourse(cid){
|
|
|
|
- top.postMessage({ cid: cid, screenType: "3" }, "*");
|
|
|
|
- },
|
|
|
|
- getCourse(id) {
|
|
|
|
- this.isloading = true
|
|
|
|
- let params = {
|
|
|
|
- cid: id.join(","),
|
|
|
|
- };
|
|
|
|
- this.ajax
|
|
|
|
- .get(this.$store.state.api + "getCourseInfoTestAll", params)
|
|
|
|
- .then((res) => {
|
|
|
|
- this.isloading = false
|
|
|
|
- this.courseDetail = res.data[0]
|
|
|
|
- this.courseDetail.forEach(element => {
|
|
|
|
- element.cover = JSON.parse(element.cover)[0].url
|
|
|
|
- });
|
|
|
|
- })
|
|
|
|
- .catch((err) => {
|
|
|
|
- this.isloading = false
|
|
|
|
- console.error(err);
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- openCourseD(){
|
|
|
|
- this.dialogVisibleCourse = true
|
|
|
|
- }
|
|
|
|
|
|
+ setPage(index) {
|
|
|
|
+ if (index == "1") {
|
|
|
|
+ this.page++;
|
|
|
|
+ } else if (index == "-1") {
|
|
|
|
+ this.page--;
|
|
|
|
+ }
|
|
|
|
+ this.checkJson.answer2 = this.checkJson.courses[this.page];
|
|
|
|
+ this.getCourse(this.checkJson.answer2);
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
|
|
|
|
- if(this.checkJson.answer2.length){
|
|
|
|
- // this.page = this.checkJson.courses.indexOf(this.checkJson.answer2)
|
|
|
|
- this.getCourse(this.checkJson.answer2)
|
|
|
|
- }
|
|
|
|
|
|
+ openCourse(cid) {
|
|
|
|
+ top.postMessage({ cid: cid, screenType: "3" }, "*");
|
|
|
|
+ },
|
|
|
|
+ getCourse(id) {
|
|
|
|
+ this.isloading = true;
|
|
|
|
+ let params = {
|
|
|
|
+ cid: id.join(",")
|
|
|
|
+ };
|
|
|
|
+ this.ajax
|
|
|
|
+ .get(this.$store.state.api + "getCourseInfoTestAll", params)
|
|
|
|
+ .then(res => {
|
|
|
|
+ this.isloading = false;
|
|
|
|
+ this.courseDetail = res.data[0];
|
|
|
|
+ this.courseDetail.forEach(element => {
|
|
|
|
+ element.cover = JSON.parse(element.cover)[0].url;
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(err => {
|
|
|
|
+ this.isloading = false;
|
|
|
|
+ console.error(err);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ openCourseD() {
|
|
|
|
+ this.dialogVisibleCourse = true;
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined;
|
|
|
|
+ if (this.checkJson.answer2.length) {
|
|
|
|
+ // this.page = this.checkJson.courses.indexOf(this.checkJson.answer2)
|
|
|
|
+ this.getCourse(this.checkJson.answer2);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
.c_box {
|
|
.c_box {
|
|
- width: 100%;
|
|
|
|
- position: relative;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-left: 45px;
|
|
}
|
|
}
|
|
|
|
|
|
/* .mask {
|
|
/* .mask {
|
|
@@ -172,59 +214,171 @@ export default {
|
|
} */
|
|
} */
|
|
|
|
|
|
.choice_box {
|
|
.choice_box {
|
|
- white-space: pre-line;
|
|
|
|
|
|
+ white-space: pre-line;
|
|
}
|
|
}
|
|
|
|
|
|
-.choice_box>.title {
|
|
|
|
- font-weight: bold;
|
|
|
|
- width: 100%;
|
|
|
|
- word-break: break-all;
|
|
|
|
|
|
+.choice_box > .title {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ width: 100%;
|
|
|
|
+ word-break: break-all;
|
|
}
|
|
}
|
|
|
|
|
|
-.choice_box>.choices {
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
|
+.choice_box > .choices {
|
|
|
|
+ margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
-.choices > .page{
|
|
|
|
- margin-top: 10px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
|
|
+.choices > .page {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
-.p_page{
|
|
|
|
- margin: 0 10px;
|
|
|
|
|
|
+.p_page {
|
|
|
|
+ margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.course {
|
|
.course {
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- cursor: pointer;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
-.course + .course{
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
|
+.course + .course {
|
|
|
|
+ margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.course > .banner {
|
|
.course > .banner {
|
|
- width: 200px;
|
|
|
|
- height: 120px;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- border: 1px solid #3896fc;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: 5px;
|
|
|
|
- margin-right: 15px;
|
|
|
|
-}
|
|
|
|
-.course > .banner > img{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- object-fit: cover;
|
|
|
|
|
|
+ width: 200px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ border: 1px solid #3896fc;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+}
|
|
|
|
+.course > .banner > img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+}
|
|
|
|
+.course > .content {
|
|
|
|
+}
|
|
|
|
+.course > .content > .c_c {
|
|
}
|
|
}
|
|
-.course > .content {}
|
|
|
|
-.course > .content > .c_c {}
|
|
|
|
-.course > .content > .c_c + .c_c{
|
|
|
|
- margin-top: 5px;
|
|
|
|
|
|
+.course > .content > .c_c + .c_c {
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+}
|
|
|
|
+.course > .content > .c_c span:nth-child(1) {
|
|
|
|
+}
|
|
|
|
+.course > .content > .c_c span:nth-child(2) {
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.g_t_index {
|
|
|
|
+ color: #3681fc;
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ position: relative;
|
|
|
|
+ margin-right: 30px;
|
|
|
|
+ margin-left: -40px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.g_t_index + span {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.g_t_index::after {
|
|
|
|
+ content: "";
|
|
|
|
+ width: 18px;
|
|
|
|
+ height: 2px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: -18px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ background: #3681fc;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.g_t_index::before {
|
|
|
|
+ content: "";
|
|
|
|
+ width: 6px;
|
|
|
|
+ height: 6px;
|
|
|
|
+ border-right: 2px solid #3681fc;
|
|
|
|
+ border-top: 2px solid #3681fc;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: -15px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: rotate(45deg) translateY(-5px);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_list {
|
|
|
|
+ width: calc(100% - 10px);
|
|
|
|
+ min-height: 200px;
|
|
|
|
+ height: auto;
|
|
|
|
+ border: 1px solid #e7e7e7;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ /* overflow: auto; */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_l_add1 {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 200px;
|
|
|
|
+ background-color: #F9FAFB;
|
|
|
|
+ border: 1.5px dashed #dfdfdf;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #00000066;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_l_add2{
|
|
|
|
+ width: 230px;
|
|
|
|
+ height: 200px;
|
|
|
|
+ background-color: #F9FAFB;
|
|
|
|
+ border: 1.5px dashed #dfdfdf;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #00000066;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_l_item {
|
|
|
|
+ width: 230px;
|
|
|
|
+ height: 200px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border: solid 1px #3896FC;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 5px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_l_item > img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 110px;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_l_item > div {
|
|
|
|
+ width: 210px;
|
|
|
|
+ display: block;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ font-size: 14px; /* 设置字体大小 */
|
|
|
|
+ color: #333; /* 设置字体颜色 */
|
|
|
|
+ box-sizing: border-box;
|
|
}
|
|
}
|
|
-.course > .content > .c_c span:nth-child(1){}
|
|
|
|
-.course > .content > .c_c span:nth-child(2){}
|
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|