123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360 |
- <template>
- <div class="pb_content">
- <div class="pb_content_body">
- <div class="body_student">
- <div class="student_head">
- <div class="box_course">
- <div class="wheel">
- <img
- :src="
- studentMessage.headportrait != null
- ? studentMessage.headportrait
- : tx
- "
- alt=""
- />
- </div>
- <div class="right_box">
- <div class="right_box_title">
- {{ studentMessage.name ? studentMessage.name : "暂无名称" }}
- </div>
- <div class="people">
- <div>
- <span>班级:</span
- ><span>{{
- studentMessage.cname ? studentMessage.cname : "暂无班级"
- }}</span>
- </div>
- <div style="margin-left: 50px">
- <span>所属组织:</span
- ><span>{{
- studentMessage.sname ? studentMessage.sname : "暂无学校"
- }}</span>
- </div>
- </div>
- <div>
- <span>手机号码:</span
- ><span>{{
- studentMessage.phonenumber
- ? studentMessage.phonenumber
- : "暂无手机号"
- }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="student_body">
- <div class="myProject">我的项目</div>
- <div class="project_box">
- <div
- class="three_box_inthis"
- v-for="(item, index) in myCourse"
- :key="index"
- >
- <div
- class="project"
- @click="
- goTo(
- '/liveProjectDetail?courseId=' +
- item.id +
- '&userid=' +
- userid +
- '&oid=' +
- oid
- )
- "
- >
- <!-- <img
- :src="
- item.cover != null && item.cover != ''
- ? JSON.parse(item.cover)[0].url
- : mpj
- "
- alt=""
- /> -->
- <img :src="item.poster ? item.poster : mpj" alt="" />
- </div>
- <div class="projct_nav">
- <div style="font-size: 18px">
- {{ item.name }}
- </div>
- <div>
- <span style="color: #999">{{ item.time }}</span>
- </div>
- </div>
- <!-- <div class="three_bottom">
- <div
- @click="
- goTo(
- '/liveProjectDetail?courseId=' +
- item.id +
- '&userid=' +
- userid +
- '&oid=' +
- oid
- )
- "
- >
- 课前预习
- </div>
- <div
- @click="
- goTo(
- '/liveProjectDetail?courseId=' +
- item.id +
- '&userid=' +
- userid +
- '&oid=' +
- oid
- )
- "
- >
- 开始上课
- </div>
- <div
- @click="
- goTo(
- '/liveProjectDetail?courseId=' +
- item.id +
- '&userid=' +
- userid +
- '&oid=' +
- oid
- )
- "
- >
- 课后复习
- </div>
- </div> -->
- </div>
- </div>
- <div class="student_page">
- <el-pagination
- background
- layout="prev, pager, next"
- :page-size="10"
- :total="total"
- v-if="page && myCourse.length"
- style="padding-bottom: 20px"
- @current-change="handleCurrentChange"
- ></el-pagination>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- myCourse: [
- // {
- // cover: [],
- // courseid: "9a4e8dbe-132e-438e-97db-b07eb01fa04c",
- // title: "introduce a festival (Final)",
- // chapters: [],
- // createTime: this.getNowTime(),
- // },
- ],
- studentMessage: [],
- tx: require("../assets/avatar.png"),
- mpj: require("../assets/icon/pptImg2.png"),
- userid: this.$route.query.userid,
- oid: this.$route.query.oid,
- classid: this.$route.query.classid,
- loading: "",
- page: 1,
- total: 0,
- };
- },
- methods: {
- goTo(path) {
- this.$router.push(path);
- },
- getNowTime() {
- const yy = new Date().getFullYear();
- const MM =
- new Date().getMonth() + 1 < 10
- ? "0" + (new Date().getMonth() + 1)
- : new Date().getMonth() + 1;
- const dd =
- new Date().getDate() < 10
- ? "0" + new Date().getDate()
- : new Date().getDate();
- const HH =
- new Date().getHours() < 10
- ? "0" + new Date().getHours()
- : new Date().getHours();
- const mm =
- new Date().getMinutes() < 10
- ? "0" + new Date().getMinutes()
- : new Date().getMinutes();
- const ss =
- new Date().getSeconds() < 10
- ? "0" + new Date().getSeconds()
- : new Date().getSeconds();
- return yy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
- },
- selectSDetail() {
- let params = {
- uid: this.userid,
- };
- this.ajax
- .get(this.$store.state.api + "selectSDetail", params)
- .then((res) => {
- this.studentMessage = res.data[0][0];
- })
- .catch((err) => {
- this.isLoading = false;
- console.error(err);
- });
- },
- handleCurrentChange(val) {
- // console.log(`当前页: ${val}`);
- this.page = val;
- this.getData();
- },
- getData() {
- if (!this.loading) {
- this.loading = this.openLoading(document.querySelector(".project_box"));
- }
- let params = {
- oid: this.oid,
- cid: this.classid,
- page: this.page,
- };
- this.ajax
- .get(this.$store.state.api + "getRealTimeClassStu", params)
- .then((res) => {
- this.loading.close();
- this.loading = "";
- this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
- this.myCourse = res.data[0];
- })
- .catch((err) => {
- this.loading.close();
- this.loading = "";
- console.error(err);
- });
- },
- },
- created() {
- this.selectSDetail();
- this.page = 1;
- this.getData();
- document.scrollingElement.scrollTop = 0;
- },
- };
- </script>
- <style scoped>
- .body_student {
- margin: 0px auto;
- width: 98%;
- height: 100%;
- }
- .student_head {
- width: 100%;
- margin: 0 auto;
- height: 30%;
- background-image: linear-gradient(90deg, #30c499, #75ceba);
- color: #fff;
- }
- .wheel > img,
- .project > img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- .box_course {
- display: flex;
- padding: 35px 0 25px 60px;
- align-items: center;
- }
- .wheel {
- width: 210px;
- }
- .right_box {
- display: flex;
- flex-direction: column;
- margin-left: 30px;
- /* justify-content: space-around; */
- }
- .right_box_title {
- font-size: 23px;
- }
- .people {
- display: flex;
- margin: 30px 0 20px 0px;
- }
- .student_body {
- width: 100%;
- margin: 0 auto;
- background: #fff;
- margin-top: 20px;
- padding: 0 0 20px;
- min-height: 1000px;
- }
- .project {
- width: 100%;
- height: 150px;
- overflow: hidden;
- cursor: pointer;
- }
- .project_box {
- display: flex;
- width: 100%;
- flex-direction: row;
- flex-wrap: wrap;
- }
- .three_box_inthis {
- display: flex;
- width: 300px;
- flex-direction: column;
- align-items: flex-start;
- border: 1px solid #ccc;
- margin: 15px;
- }
- .projct_nav {
- padding-left: 5px;
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: space-around;
- width: 100%;
- box-sizing: border-box;
- }
- .projct_nav > div:nth-child(1) {
- cursor: pointer;
- }
- .projct_nav > div {
- margin-bottom: 5px;
- }
- .myProject {
- padding: 20px 20px 10px 0;
- border-bottom: 1px solid #ccc;
- margin-left: 20px;
- width: 95%;
- }
- .three_bottom {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- height: 40px;
- align-items: center;
- background: #f5f4f4;
- font-size: 14px;
- width: 100%;
- margin-bottom: 0;
- }
- .three_bottom > div {
- cursor: pointer;
- }
- </style>
|