1

Signed-off-by: lcw <1324309909@qq.com>

src/App.vue

@@ -1,342 +1,343 @@
 <template>
-  <div id="app">
-    <div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
-      <div class="logo" @click="goTo('/')"></div>
-      <div class="user_head" v-if="this.$store.state.isLogin">
-        <div class="noticeBox">
-          <i class="noticeI" @click="goTo('/works')"></i>
-          <span v-if="this.$store.state.nCount != 0">{{
-            this.$store.state.nCount > 99 ? "99+" : this.$store.state.nCount
-          }}</span>
-        </div>
-        <!-- <span class="user_name">{{
-					this.$store.state.userInfo ? this.$store.state.userInfo.name : "用户"
-				}}</span> -->
-        <div>
-          <i class="exitI"></i>
-          <el-button type="text" style="color: white" @click="exit"
-            >退出</el-button
-          >
-        </div>
-      </div>
-      <div class="app_right">
-        <div class="box_right_three">
-          <div class="pic_img"><img src="./assets/myProject.png" alt="" /></div>
-          <div @click="goTo('/project')">我的课程</div>
-        </div>
-        <div class="box_right_three">
-          <div class="pic_img"><img src="./assets/myMessage.png" alt="" /></div>
-          <div @click="goTo('/mine')">个人中心</div>
-        </div>
-        <div class="box_right_three">
-          <div class="pic_img"><img src="./assets/mine.png" alt="" /></div>
-          <div>张子林</div>
-        </div>
-      </div>
-    </div>
-    <div style="height: calc(100% - 67.5px)">
-      <!-- main 内容 -->
-      <keep-alive v-if="$route.meta.keepAlive">
-        <!-- 这里是会被缓存的视图组件 -->
-        <router-view
-          v-if="$route.meta.keepAlive"
-          :class="{ pb_body: isShowNav }"
-        />
-      </keep-alive>
-      <!-- 这里是不被缓存的视图组件 -->
-      <router-view
-        v-if="!$route.meta.keepAlive"
-        :class="{ pb_body: isShowNav }"
-      />
+	<div id="app">
+		<div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
+			<div class="logo" @click="goTo('/')"></div>
+			<div class="app_right">
+				<div class="box_right_three" v-if="this.$store.state.isLogin">
+					<div class="pic_img"><img src="./assets/myProject.png" alt="" /></div>
+					<div @click="goTo('/project')">我的课程</div>
+				</div>
+				<div class="box_right_three" v-if="this.$store.state.isLogin">
+					<div class="pic_img"><img src="./assets/myMessage.png" alt="" /></div>
+					<div @click="goTo('/mine')">个人中心</div>
+				</div>
+				<div class="box_right_three" v-if="this.$store.state.isLogin">
+					<div class="pic_img"><img src="./assets/mine.png" alt="" /></div>
+					<div>
+						{{
+							this.$store.state.studentInfo
+								? this.$store.state.studentInfo.name
+								: "用户"
+						}}
+					</div>
+				</div>
+				<div class="user_head" v-if="this.$store.state.isLogin" @click="exit">
+					<div>
+						<i class="exitI"></i>
+						<el-button type="text" style="color: white">退出</el-button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+			<!-- main 内容 -->
+			<keep-alive v-if="$route.meta.keepAlive">
+				<!-- 这里是会被缓存的视图组件 -->
+				<router-view
+					v-if="$route.meta.keepAlive"
+					:class="{ pb_body: isShowNav }"
+				/>
+			</keep-alive>
+			<!-- 这里是不被缓存的视图组件 -->
+			<router-view
+				v-if="!$route.meta.keepAlive"
+				:class="{ pb_body: isShowNav }"
+			/>
 
-      <!-- 底部导航 -->
-      <footer-nav
-        v-if="isShowNav"
-        :luyou="this.$store.state.luyou"
-      ></footer-nav>
-    </div>
-	      <div class="bottom">
-        <div class="bottom_flex">
-          <div class="left_bottom_flex">
-            <div class="left_title">联系我们</div>
-            <div class="left_content">
-              <div>地址：深圳市南山区</div>
-              <div>手机：13418906754</div>
-              <div>邮箱：win.wu@qichuangxin.com</div>
-              <div>电话：0755-84658992</div>
-              <div>邮编：518129</div>
-            </div>
-          </div>
-          <div class="right_bottom_flex">
-            <img src="./assets/logo2.png" alt="" />
-          </div>
-        </div>
-      </div>
-  </div>
+			<!-- 底部导航 -->
+			<footer-nav
+				v-if="isShowNav"
+				:luyou="this.$store.state.luyou"
+			></footer-nav>
+		</div>
+		<div class="bottom" v-if="this.$store.state.isLogin">
+			<div class="bottom_flex">
+				<div class="left_bottom_flex">
+					<div class="left_title">联系我们</div>
+					<div class="left_content">
+						<div>地址：深圳市南山区</div>
+						<div>手机：13418906754</div>
+						<div>邮箱：win.wu@qichuangxin.com</div>
+						<div>电话：0755-84658992</div>
+						<div>邮编：518129</div>
+					</div>
+				</div>
+				<div class="right_bottom_flex">
+					<img src="./assets/logo2.png" alt="" />
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { Message } from "element-ui";
-export default {
-  // name: "App",
-  data() {
-    return {
-      isShowNav: true, // 是否显示导航 Tab
-    };
-  },
-  components: {},
-  created: function () {
-    // this.getnCount();
-    setInterval(() => {
-      // this.getnCount();
-    }, 60000);
-  },
-  methods: {
-    goTo(path) {
-      this.$router.push(path);
-    },
-    isLogin() {
-      const loading = this.$loading.service({
-        background: "rgba(255, 255, 255)",
-        target: document.querySelector("body"),
-      });
-      var _isLogin = this.$cookies.get("tlogin");
-      var userInfo = this.$cookies.get("teacherInfo");
-      // if (_isLogin == "1" && userInfo) {
-      loading.close();
-      this.$store.commit("update", ["isLogin", true]);
-      // var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
-      this.$store.commit("update", ["userInfo", userInfo]);
-      let router_path = this.$route.path;
-      if (router_path == "/") {
-        this.$router.push("/course");
-      }
-      // } else {
-      //   this.$store.commit("update", ["isLogin", false]);
-      //   Message({
-      //     message: "未登录，请登录",
-      //     type: "warning",
-      //   });
-      //   setTimeout(() => {
-      //     loading.close();
-      //     this.$router.push("/login");
-      //   }, 2000);
-      // }
-    },
-    getnCount() {
-      let params = {
-        bid: this.$store.state.userInfo.userid,
-      };
-      this.ajax
-        .get(this.$store.state.api + "getNcount", params)
-        .then((res) => {
-          console.log(res);
-          if (res.data[0].length > 0) {
-            this.$store.commit("update", ["nCount", res.data[0][0].num]);
-          } else {
-            this.$store.commit("update", ["nCount", 0]);
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    exit() {
-      sessionStorage.clear();
-      this.$cookies.remove("tlogin");
-      this.$cookies.remove("teacherInfo");
-      this.$store.commit("update", ["isLogin", false]);
-      this.$store.commit("update", ["userInfo", {}]);
-      Message({
-        message: "退出成功",
-        type: "success",
-      });
-      this.$router.push("/login");
-    },
-    goTo(path) {
-      this.$router.push(path);
-    },
-  },
-};
+	import { Message } from "element-ui";
+	export default {
+		// name: "App",
+		data() {
+			return {
+				isShowNav: true, // 是否显示导航 Tab
+			};
+		},
+		components: {},
+		created: function () {
+			// this.getnCount();
+			setInterval(() => {
+				// this.getnCount();
+			}, 60000);
+		},
+		methods: {
+			goTo(path) {
+				this.$router.push(path);
+			},
+			isLogin() {
+				const loading = this.$loading.service({
+					background: "rgba(255, 255, 255)",
+					target: document.querySelector("body"),
+				});
+				var _isLogin = this.$cookies.get("slogin");
+				var studentInfo = this.$cookies.get("studentInfo");
+				// if (_isLogin == "1" && userInfo) {
+				loading.close();
+				this.$store.commit("update", ["isLogin", true]);
+				// var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
+				this.$store.commit("update", ["studentInfo", studentInfo]);
+				let router_path = this.$route.path;
+				if (router_path == "/") {
+					this.$router.push("/index");
+				}
+				// } else {
+				//   this.$store.commit("update", ["isLogin", false]);
+				//   Message({
+				//     message: "未登录，请登录",
+				//     type: "warning",
+				//   });
+				//   setTimeout(() => {
+				//     loading.close();
+				//     this.$router.push("/login");
+				//   }, 2000);
+				// }
+			},
+			getnCount() {
+				let params = {
+					bid: this.$store.state.studentInfo.userid,
+				};
+				this.ajax
+					.get(this.$store.state.api + "getNcount", params)
+					.then((res) => {
+						console.log(res);
+						if (res.data[0].length > 0) {
+							this.$store.commit("update", ["nCount", res.data[0][0].num]);
+						} else {
+							this.$store.commit("update", ["nCount", 0]);
+						}
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+			},
+			exit() {
+				sessionStorage.clear();
+				this.$cookies.remove("slogin");
+				this.$cookies.remove("studentInfo");
+				this.$store.commit("update", ["isLogin", false]);
+				this.$store.commit("update", ["studentInfo", {}]);
+				Message({
+					message: "退出成功",
+					type: "success",
+				});
+				this.$router.push("/login");
+			},
+			goTo(path) {
+				this.$router.push(path);
+			},
+		},
+	};
 </script>
-
 <style>
-* {
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}
-#app {
-  height: 100%;
-  width: 100%;
-  background: #e6eaf0;
-  /* min-width: 1380px; */
-  min-width: 1000px;
-}
-.app_head {
-  height: 67.5px;
-  width: 100%;
-  background-color: rgb(129, 179, 253);
-  display: flex;
-  align-items: center;
-  min-width: 1000px;
-  flex-direction: row;
-  justify-content: space-around;
-}
-.logo {
-  height: 48px;
-  width: 73px;
-  background: url("./assets/logo.png");
-  background-size: 100% 100%;
-  margin-left: 20px;
-  cursor: pointer;
-}
-.pb_body {
-  width: 100%;
-  min-width: 1140px;
-  min-width: 745px;
-  display: inline-block;
-  height: calc(100% - 67.5px);
-  min-height: 750px;
-  background: #f2f2f2;
-  border-radius: 5px;
-  position: relative;
-  overflow: auto;
-}
-.pb_head {
-  font-size: 26px;
-  /* font-weight: 600; */
-  width: 95%;
-  margin: 10px auto;
-  padding: 10px 5px;
-  border-bottom: 3px solid #eee;
-}
-.pb_content {
-  /* height: 100%; */
-}
-.pb_content_body {
-  margin: 0px auto;
-  width: 100%;
-  /* overflow: auto;
-					  height: calc(100% - 120px); */
-}
-.user_head {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  margin-right: 20px;
-  font-size: 18px;
-  font-weight: 600;
-}
-.user_head .user_name {
-  color: #fff;
-  margin-right: 10px;
-}
-.user_head div {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.user_head .exitI {
-  background-image: url("./assets/exit.png");
-  width: 25px;
-  height: 25px;
-  background-size: 100% 100%;
-  margin-top: 1px;
-  line-height: 25px;
-  vertical-align: text-top;
-  background-repeat: no-repeat;
-}
-.noticeBox {
-  position: relative;
-  margin-right: 10px;
-}
+	* {
+		margin: 0;
+		padding: 0;
+	}
+	html,
+	body {
+		height: 100%;
+		width: 100%;
+		background: #e6eaf0;
+	}
+	body {
+		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+			"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+	}
+	#app {
+		height: 100%;
+		width: 100%;
+		background: #e6eaf0;
+		/* min-width: 1380px; */
+		min-width: 1000px;
+	}
+	.app_head {
+		height: 67.5px;
+		width: 100%;
+		background-color: rgb(129, 179, 253);
+		display: flex;
+		align-items: center;
+		min-width: 1000px;
+		flex-direction: row;
+		justify-content: space-around;
+	}
+	.logo {
+		height: 48px;
+		width: 73px;
+		background: url("./assets/logo.png");
+		background-size: 100% 100%;
+		margin-left: 20px;
+		cursor: pointer;
+	}
+	.pb_body {
+		width: 100%;
+		min-width: 1140px;
+		min-width: 745px;
+		display: inline-block;
+		height: calc(100% - 67.5px);
+		/* height: calc(100% - 67.5px - 226px); */
+		min-height: 750px;
+		background: #f2f2f2;
+		border-radius: 5px;
+		position: relative;
+		overflow: auto;
+	}
+	.pb_head {
+		font-size: 26px;
+		/* font-weight: 600; */
+		width: 95%;
+		margin: 10px auto;
+		padding: 10px 5px;
+		border-bottom: 3px solid #eee;
+	}
+	.pb_content {
+		/* height: 100%; */
+	}
+	.pb_content_body {
+		margin: 0px auto;
+		width: 100%;
+		/* overflow: auto;
+								  height: calc(100% - 120px); */
+	}
+	.user_head {
+		display: flex;
+		align-items: center;
+		margin-right: 20px;
+		font-size: 18px;
+		font-weight: 600;
+	}
+	.user_head .user_name {
+		color: #fff;
+		margin-right: 10px;
+	}
+	.user_head div {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+	.user_head .exitI {
+		background-image: url("./assets/exit.png");
+		width: 25px;
+		height: 25px;
+		background-size: 100% 100%;
+		margin-top: 1px;
+		line-height: 25px;
+		vertical-align: text-top;
+		background-repeat: no-repeat;
+	}
+	.noticeBox {
+		position: relative;
+		margin-right: 10px;
+	}
 
-.user_head .noticeI {
-  background-image: url("./assets/icon/noticeA.png");
-  width: 25px;
-  height: 25px;
-  background-size: 100% 100%;
-  margin-top: 1px;
-  line-height: 25px;
-  vertical-align: text-top;
-  background-repeat: no-repeat;
-  cursor: pointer;
-}
-.noticeBox span {
-  position: absolute;
-  background: red;
-  width: 15px;
-  height: 15px;
-  border-radius: 30px;
-  color: #fff;
-  text-align: center;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: -3px;
-  right: -3px;
-}
-.stuWidth {
-  min-width: 1180px;
-}
-.app_right {
-  display: flex;
-  width: 500px;
-  flex-direction: row;
-  justify-content: flex-end;
-  color: #fff;
-}
-.pic_img {
-  width: 30px;
-  height: 30px;
-}
-.pic_img > img {
-  width: 100%;
-  height: 100%;
-}
-.box_right_three {
-  display: flex;
-      margin: 0 25px 0px 0;
-}
-.box_right_three > div:nth-child(2) {
-  margin: 5px 10px 0 5px;
-  cursor: pointer;
-}
-.bottom {
-  background: #ccc;
-  width: 100%;
-}
-.bottom_flex {
-  display: flex;
-  justify-content: space-around;
-}
-.left_bottom_flex {
-  margin: 10px 0 5px 0;
-}
-.left_title {
-  font-size: 18px;
-  margin: 5px 0 15px 5px;
-  color: #747474;
-}
-.left_content {
-  color: #767676;
-  font-size: 14px;
-}
-.left_content > div {
-  margin-bottom: 15px;
-}
-.right_bottom_flex {
-  width: 219px;
-  height: 144px;
-  margin: auto 0;
-}
-.right_bottom_flex > img {
-  width: 100%;
-  height: 100%;
-}
+	.user_head .noticeI {
+		background-image: url("./assets/icon/noticeA.png");
+		width: 25px;
+		height: 25px;
+		background-size: 100% 100%;
+		margin-top: 1px;
+		line-height: 25px;
+		vertical-align: text-top;
+		background-repeat: no-repeat;
+		cursor: pointer;
+	}
+	.noticeBox span {
+		position: absolute;
+		background: red;
+		width: 15px;
+		height: 15px;
+		border-radius: 30px;
+		color: #fff;
+		text-align: center;
+		font-size: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		top: -3px;
+		right: -3px;
+	}
+	.stuWidth {
+		min-width: 1180px;
+	}
+	.app_right {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		color: #fff;
+		align-items: center;
+	}
+	.pic_img {
+		width: 30px;
+		height: 30px;
+	}
+	.pic_img > img {
+		width: 100%;
+		height: 100%;
+	}
+	.box_right_three {
+		display: flex;
+		margin: 0 25px 0px 0;
+	}
+	.box_right_three > div:nth-child(2) {
+		margin: 5px 10px 0 5px;
+		cursor: pointer;
+		line-height: 22px;
+	}
+	.bottom {
+		background: #ccc;
+		width: 100%;
+	}
+	.bottom_flex {
+		display: flex;
+		justify-content: space-around;
+	}
+	.left_bottom_flex {
+		margin: 10px 0 5px 0;
+	}
+	.left_title {
+		font-size: 18px;
+		margin: 5px 0 15px 5px;
+		color: #747474;
+	}
+	.left_content {
+		color: #767676;
+		font-size: 14px;
+	}
+	.left_content > div {
+		margin-bottom: 15px;
+	}
+	.right_bottom_flex {
+		width: 219px;
+		height: 144px;
+		margin: auto 0;
+	}
+	.right_bottom_flex > img {
+		width: 100%;
+		height: 100%;
+	}
 </style>

src/components/courseDetail.vue

@@ -1,99 +1,71 @@
 <template>
-  <div class="pb_content">
-    <div class="pb_content_body" style="height: 100%">
-      <div class="body_student">
-        <div class="student_head">
-          <div class="box_course">
-            <div class="wheel"><img src="../assets/wheel2.png" alt="" /></div>
-            <div class="right_box">
-              <div class="right_box_title">认识木头制作|颗粒板和胶合板制作</div>
-              <div class="people">
-                <div class="man">
-                  <img src="../assets/people.png" alt="" />
-                </div>
-                <div class="person">56人</div>
-              </div>
-              <div class="now_study" @click="dialogVisible = true">
-                立即学习
-              </div>
-            </div>
-          </div>
-          <div class="choose_who">
-            <div
-              class="who_choose"
-              :class="choose == 0 ? 'choose' : ''"
-              @click="choose = 0"
-            >
-              课程简介
-            </div>
-            <div
-              class="who_choose"
-              :class="choose == 1 ? 'choose' : ''"
-              @click="choose = 1"
-            >
-              课程学员
-            </div>
-          </div>
-        </div>
-        <div class="student_body" v-if="choose == 0">
-          <div class="nav">
-            木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
-            木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
-          </div>
-          <div class="pic">
-            <div class="Img"><img src="../assets/game.png" alt="" /></div>
-            <div class="Img"><img src="../assets/piano.png" alt="" /></div>
-            <div class="Img"><img src="../assets/moonLight.png" alt="" /></div>
-            <div class="Img"><img src="../assets/music.png" alt="" /></div>
-          </div>
-        </div>
-        <div class="student_body_one" v-else>
-          <div class="student">
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-            <div>李浩宇</div>
-            <div>赵雨辰</div>
-            <div>董佳杰</div>
-            <div>张馨予</div>
-            <div>闫艺馨</div>
-            <div>谭宏说</div>
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-            <div>李浩宇</div>
-            <div>赵雨辰</div>
-            <div>董佳杰</div>
-            <div>张馨予</div>
-            <div>闫艺馨</div>
-            <div>谭宏说</div>
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-            <div>李浩宇</div>
-            <div>赵雨辰</div>
-            <div>董佳杰</div>
-            <div>张馨予</div>
-            <div>闫艺馨</div>
-            <div>谭宏说</div>
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-            <div>李浩宇</div>
-            <div>赵雨辰</div>
-            <div>董佳杰</div>
-            <div>张馨予</div>
-            <div>闫艺馨</div>
-            <div>谭宏说</div>
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-            <div>李浩宇</div>
-            <div>赵雨辰</div>
-            <div>董佳杰</div>
-            <div>张馨予</div>
-            <div>闫艺馨</div>
-            <div>谭宏说</div>
-            <div>西英凡</div>
-            <div>侣浩洋</div>
-          </div>
-        </div>
-        <!-- <div
+	<div class="pb_content">
+		<div class="pb_content_body" style="height: 100%">
+			<div class="body_student">
+				<div class="student_head">
+					<div class="box_course">
+						<div class="wheel">
+							<img
+								:src="
+									this.courseDetail.cover != null &&
+									this.courseDetail.cover != ''
+										? JSON.parse(this.courseDetail.cover).length > 0
+											? JSON.parse(this.courseDetail.cover)[0].url
+											: mr
+										: mr
+								"
+								alt=""
+							/>
+						</div>
+						<div class="right_box">
+							<div class="right_box_title">
+								{{ courseDetail.title }}
+							</div>
+							<div class="people">
+								<div class="man">
+									<img src="../assets/people.png" alt="" />
+								</div>
+								<div class="person">
+									{{ courseDetail.vcount != null ? courseDetail.vcount : 0 }}人
+								</div>
+							</div>
+							<div class="now_study" @click="dialogVisible = true">
+								立即学习
+							</div>
+						</div>
+					</div>
+					<div class="choose_who">
+						<div
+							class="who_choose"
+							:class="choose == 0 ? 'choose' : ''"
+							@click="choose = 0"
+						>
+							课程简介
+						</div>
+						<div
+							class="who_choose"
+							:class="choose == 1 ? 'choose' : ''"
+							@click="choose = 1"
+						>
+							课程学员
+						</div>
+					</div>
+				</div>
+				<div class="student_body" v-if="choose == 0">
+					<div class="nav">
+						{{ courseDetail.brief != null ? courseDetail.brief : "暂无课程简介"}}
+					</div>
+					
+				</div>
+				<div class="student_body_one" v-else>
+					<div class="student" v-if="aStudentName.length > 0">
+						<div v-for="(item, index) in aStudentName" :key="index">
+							{{ item.name }}
+						</div>
+					</div>
+					<div class="student" v-else>暂无课程学员</div>
+				</div>
+				<!-- <div
           style="
             text-align: center;
             padding: 30px 0 20px 0;
@@ -102,216 +74,270 @@
         >
           此处滚动加载..
         </div> -->
-        <el-dialog
-          title="阶段选择"
-          :visible.sync="dialogVisible"
-          :append-to-body="true"
-          width="700px"
-          :before-close="handleClose"
-          class="dialog_change"
-        >
-          <div style="font-size: 20px">请选择阶段</div>
-          <div style="padding: 20px 30px; display: flex">
-            <div class="blue_box" @click="goTo('/study')">
-              <div>第一阶段</div>
-              <div>木头的基本认识与实操</div>
-            </div>
-            <div class="blue_box" @click="goTo('/study')">
-              <div>第二阶段</div>
-              <div>木头的组合知识</div>
-            </div>
-            <div class="blue_box" @click="goTo('/study')">
-              <div>第三阶段</div>
-              <div>简介各种类型的保险箱</div>
-            </div>
-          </div>
-        </el-dialog>
-      </div>
-    </div>
-  </div>
+				<el-dialog
+					title="阶段选择"
+					:visible.sync="dialogVisible"
+					:append-to-body="true"
+					width="700px"
+					:before-close="handleClose"
+					class="dialog_change"
+				>
+					<div style="font-size: 20px">请选择阶段</div>
+					<div
+						style="padding: 20px 30px; display: flex"
+						v-for="(item, index) in chapInfo"
+						:key="index"
+					>
+						<div class="blue_box" @click="addUserRate">
+							<div>第{{ index + 1 }}阶段</div>
+							<div>{{ item.dyName }}</div>
+						</div>
+					</div>
+				</el-dialog>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      choose: 0,
-      dialogVisible: false,
-    };
-  },
-  methods: {
-    handleClose(done) {
-      done();
-    },
-    goTo(path) {
-      this.$router.push(path);
-    },
-  },
-  created() {},
-};
+	export default {
+		data() {
+			return {
+				choose: 0,
+				dialogVisible: false,
+				id: this.$route.query.courseId,
+				courseDetail: {},
+				aStudentName: [],
+				chapInfo: [],
+				mr: require("../assets/icon/wheel.png"),
+			};
+		},
+		methods: {
+			handleClose(done) {
+				done();
+			},
+			goTo(path) {
+				this.$router.push(path);
+			},
+      addUserRate(){
+        let params = {
+          uid:this.$store.state.studentInfo.userid,
+					cid: this.id,
+				};
+				this.ajax
+					.get(this.$store.state.api + "addUserR", params)
+					.then((res) => {
+						console.log(res.data);
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+        this.goTo("/study");
+      },
+			getCourseDetail() {
+				const loading = this.$loading.service({
+					background: "rgba(255, 255, 255, 0.7)",
+					target: document.querySelector(".student_table"),
+				});
+				let params = {
+					courseId: this.id,
+				};
+				this.ajax
+					.get(this.$store.state.api + "selectCourseDetail", params)
+					.then((res) => {
+						loading.close();
+						// this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+						this.courseDetail = res.data[0][0];
+						this.aStudentName = res.data[1];
+						this.chapInfo = JSON.parse(this.courseDetail.chapters);
+					})
+					.catch((err) => {
+						loading.close();
+						console.error(err);
+					});
+			},
+			// getSName() {
+			// 	let params = {
+			// 		uid: JSON.stringify(this.courseDetail.course_student),
+			// 	};
+			// 	this.ajax
+			// 		.get(this.$store.state.api + "selectSName", params)
+			// 		.then((res) => {
+			// 			this.aStudentName = res.data[0];
+			// 		})
+			// 		.catch((err) => {
+			// 			console.error(err);
+			// 		});
+			// },
+		},
+		created() {
+			this.getCourseDetail();
+			// this.getSName();
+		},
+	};
 </script>
 
 <style scoped>
-.body_student {
-  margin: 0px auto;
-  width: 80%;
-  height: 100%;
-}
-.student_head {
-  width: 80%;
-  margin: 0 auto;
-  background: #fff;
-  height: 30%;
-}
-.wheel {
-  width: 210px;
-}
-.man {
-  width: 16px;
-  height: 16px;
-}
-.wheel > img,
-.man > img {
-  width: 100%;
-  height: 100%;
-}
-.box_course {
-  display: flex;
-  padding: 35px 0 0 60px;
-}
-.right_box {
-  display: flex;
-  flex-direction: column;
-  margin-left: 30px;
-}
-.right_box_title {
-  font-size: 23px;
-}
-.people {
-  display: flex;
-  margin-top: 20px;
-}
-.person {
-  margin-left: 10px;
-  line-height: 18px;
-}
-.now_study {
-  width: 150px;
-  height: 35px;
-  color: #fff;
-  background: #0e71e6;
-  text-align: center;
-  line-height: 35px;
-  border-radius: 5px;
-  font-size: 13px;
-  cursor: pointer;
-  margin-top: 60px;
-}
-.choose_who {
-  display: flex;
-  margin: 30px 0 0 60px;
-}
-.who_choose {
-  height: 28px;
-  cursor: pointer;
-}
-.choose_who > div:nth-child(2) {
-  margin-left: 35px;
-}
-.choose {
-  border-bottom: 5px solid #d7d7d7;
-}
-.student_body {
-  width: 80%;
-  margin: 0 auto;
-  background: #fff;
-  margin-top: 20px;
-  padding: 0 0 20px;
-  min-height: 1000px;
-}
-.nav {
-  margin: 0 auto;
-  width: 80%;
-  padding-top: 20px;
-  text-indent: 25px;
-}
-.pic {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  height: 100%;
-  justify-content: space-evenly;
-}
-.Img {
-  /*width: 30%; */
-  width: 300px;
-  margin: 20px 50px;
-  margin: 20px 10px;
-  border: 1px solid #dbdbdb;
-  border-radius: 5px;
-  overflow: hidden;
-}
-.Img > img {
-  width: 100%;
-  height: 100%;
-}
-.student_body_one {
-  width: 80%;
-  margin: 0 auto;
-  background: #fff;
-  height: 100%;
-  margin-top: 20px;
-  min-height: 1000px;
-}
-.student {
-  width: 85%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  margin: 0 auto;
-  padding: 20px 0;
-}
-.student > div {
-  width: 12%;
-  height: 35px;
-  background: #e3759a;
-  text-align: center;
-  border: 1px solid #e3759a;
-  border-radius: 5px;
-  color: #fff;
-  line-height: 35px;
-  margin: 10px;
-}
-.dialog_change >>> .el-dialog {
-  border-radius: 5px;
-}
-.dialog_change >>> .el-dialog__header {
-  background: #537bb8;
-}
-.dialog_change >>> .el-dialog__title {
-  color: #fff;
-  line-height: 5px;
-}
-.dialog_change >>> .el-dialog__body {
-  background: #f5f5f5;
-}
-.blue_box {
-  width: 33%;
-  height: 100px;
-  text-align: center;
-  color: #fff;
-  background-image: linear-gradient(to right, #35bafd, #0ba2f4);
-  border-radius: 7px;
-  margin: 0 10px;
-  cursor: pointer;
-}
-.blue_box > div:nth-child(1) {
-  font-size: 17px;
-  line-height: 65px;
-}
-.blue_box > div:nth-child(2) {
-  line-height: 0px;
-}
+	.body_student {
+		margin: 0px auto;
+		width: 80%;
+		height: 100%;
+	}
+	.student_head {
+		width: 80%;
+		margin: 0 auto;
+		background: #fff;
+		height: 30%;
+	}
+	.wheel {
+		width: 210px;
+	}
+	.man {
+		width: 16px;
+		height: 16px;
+	}
+	.wheel > img,
+	.man > img {
+		width: 100%;
+		height: 100%;
+	}
+	.box_course {
+		display: flex;
+		padding: 35px 0 0 60px;
+	}
+	.right_box {
+		display: flex;
+		flex-direction: column;
+		margin-left: 30px;
+	}
+	.right_box_title {
+		font-size: 23px;
+	}
+	.people {
+		display: flex;
+		margin-top: 20px;
+	}
+	.person {
+		margin-left: 10px;
+		line-height: 18px;
+	}
+	.now_study {
+		width: 150px;
+		height: 35px;
+		color: #fff;
+		background: #0e71e6;
+		text-align: center;
+		line-height: 35px;
+		border-radius: 5px;
+		font-size: 13px;
+		cursor: pointer;
+		margin-top: 60px;
+	}
+	.choose_who {
+		display: flex;
+		margin: 30px 0 0 60px;
+	}
+	.who_choose {
+		height: 28px;
+		cursor: pointer;
+	}
+	.choose_who > div:nth-child(2) {
+		margin-left: 35px;
+	}
+	.choose {
+		border-bottom: 5px solid #d7d7d7;
+	}
+	.student_body {
+		width: 80%;
+		margin: 0 auto;
+		background: #fff;
+		margin-top: 20px;
+		padding: 0 0 20px;
+		min-height: 1000px;
+	}
+	.nav {
+		margin: 0 auto;
+		width: 80%;
+		padding-top: 20px;
+		text-indent: 25px;
+	}
+	.pic {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		height: 100%;
+		justify-content: space-evenly;
+	}
+	.Img {
+		/*width: 30%; */
+		width: 300px;
+		margin: 20px 50px;
+		margin: 20px 10px;
+		border: 1px solid #dbdbdb;
+		border-radius: 5px;
+		overflow: hidden;
+	}
+	.Img > img {
+		width: 100%;
+		height: 100%;
+	}
+	.student_body_one {
+		width: 80%;
+		margin: 0 auto;
+		background: #fff;
+		height: 100%;
+		margin-top: 20px;
+		min-height: 1000px;
+	}
+	.student {
+		width: 85%;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		margin: 0 auto;
+		padding: 20px 0;
+	}
+	.student > div {
+		width: 12%;
+		height: 35px;
+		background: #e3759a;
+		text-align: center;
+		border: 1px solid #e3759a;
+		border-radius: 5px;
+		color: #fff;
+		line-height: 35px;
+		margin: 10px;
+	}
+	.dialog_change >>> .el-dialog {
+		border-radius: 5px;
+	}
+	.dialog_change >>> .el-dialog__header {
+		background: #537bb8;
+	}
+	.dialog_change >>> .el-dialog__title {
+		color: #fff;
+		line-height: 5px;
+	}
+	.dialog_change >>> .el-dialog__body {
+		background: #f5f5f5;
+	}
+	.blue_box {
+		width: 33%;
+		height: 100px;
+		text-align: center;
+		color: #fff;
+		background-image: linear-gradient(to right, #35bafd, #0ba2f4);
+		border-radius: 7px;
+		margin: 0 10px;
+		cursor: pointer;
+	}
+	.blue_box > div:nth-child(1) {
+		font-size: 17px;
+		line-height: 65px;
+	}
+	.blue_box > div:nth-child(2) {
+		line-height: 0px;
+	}
 </style>

src/components/index.vue

@@ -22,7 +22,7 @@
                   <div>56人学习</div>
                 </div>
               </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
+              <div class="now_study" @click="goTo('/courseDetail?courseId='+ '94c3f2d9-356f-11ec-80ad-005056b86db5')">
                 立即学习
               </div>
             </div>

src/components/login.vue

@@ -0,0 +1,457 @@
+<template>
+	<div class="login_content" style="background: #e6eaf0">
+		<!-- <el-button type="primary" @click="login()">登录</el-button> -->
+		<div class="login_box" v-show="islogin">
+			<div style="padding: 0px 20px">
+				<div class="login_title">
+					<span>PBL学生平台</span>
+				</div>
+				<!-- <div class="userLogin">
+          <img src="../assets/username.png" />
+          <el-input v-model="phoneNum" placeholder="手机号码"></el-input>
+        </div>
+        <div class="userLogin">
+          <img src="../assets/password.png" />
+          <el-input
+            v-model="password"
+            placeholder="密码"
+            type="password"
+          ></el-input>
+        </div> -->
+				<el-form
+					label-position="right"
+					label-width="80px"
+					style="margin-top: 30px"
+				>
+					<el-form-item label="手机号码">
+						<el-input
+							v-model="phoneNum"
+							auto-complete="off"
+							placeholder="请输入手机号码"
+							style="width: 100%"
+							@keyup.enter.native="findPhone"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="密码">
+						<el-input
+							v-model="password"
+							auto-complete="off"
+							placeholder="请输入密码"
+							type="password"
+							style="width: 100%"
+							@keyup.enter.native="findPhone"
+						></el-input>
+					</el-form-item>
+				</el-form>
+				<div style="display: flex; justify-content: flex-end">
+					<el-button type="text" @click="islogin = false">立即注册</el-button>
+				</div>
+				<div class="login_button">
+					<button @click="findPhone()">登录</button>
+				</div>
+			</div>
+		</div>
+		<div class="login_box" v-show="!islogin">
+			<div style="padding: 0px 20px">
+				<div class="login_title">
+					<span>PBL学生平台注册</span>
+				</div>
+				<!-- <div class="userLogin">
+          <img src="../assets/username.png" />
+          <el-input v-model="phoneNum" placeholder="手机号码"></el-input>
+        </div>
+        <div class="userLogin">
+          <img src="../assets/password.png" />
+          <el-input v-model="password" placeholder="密码" type="password"></el-input>
+        </div> -->
+				<el-form
+					label-position="right"
+					label-width="80px"
+					style="margin-top: 30px"
+					:rules="rules2"
+					ref="ruleForm2"
+					:model="registerForm"
+				>
+					<el-form-item label="手机号码" prop="phone">
+						<el-input
+							v-model="registerForm.rphoneNum"
+							auto-complete="off"
+							placeholder="请输入手机号码"
+							style="width: 100%"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="密码" prop="pass">
+						<el-input
+							v-model="registerForm.rpassword"
+							auto-complete="off"
+							placeholder="请输入密码"
+							type="password"
+							style="width: 100%"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="确认密码" prop="checkPass">
+						<el-input
+							v-model="registerForm.repassword"
+							auto-complete="off"
+							placeholder="请再输入一遍密码"
+							type="password"
+							style="width: 100%"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="学校" prop="school">
+						<el-select
+							v-model="registerForm.school"
+							placeholder="请选择学校"
+							@change="getClass"
+						>
+							<el-option
+								v-for="(item, index) in schoolArray"
+								:key="index"
+								:label="item.name"
+								:value="item.id"
+							>
+							</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="班级" prop="class">
+						<el-select v-model="registerForm.class" placeholder="请先选择学校">
+							<el-option
+								v-for="(item, index) in classArray"
+								:key="index"
+								:label="item.name"
+								:value="item.id"
+							>
+							</el-option>
+						</el-select>
+					</el-form-item>
+				</el-form>
+				<div style="display: flex; justify-content: flex-end">
+					<el-button type="text" @click="islogin = true">返回登录</el-button>
+				</div>
+				<div class="login_button">
+					<button @click="register()">注册</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			var validatePass = (rule, value, callback) => {
+				var _this = this;
+				if (_this.registerForm.rpassword === "") {
+					callback(new Error("请输入密码"));
+				} else {
+					if (_this.registerForm.rpassword.length < 6) {
+						callback(new Error("输入的密码需不少于6位"));
+					} else if (_this.registerForm.repassword !== "") {
+						_this.$refs.ruleForm2.validateField("checkPass");
+					}
+					callback();
+				}
+			};
+			var validatePass2 = (rule, value, callback) => {
+				var _this = this;
+				if (_this.registerForm.repassword === "") {
+					callback(new Error("请再次输入密码"));
+				} else if (
+					_this.registerForm.repassword !== _this.registerForm.rpassword
+				) {
+					callback(new Error("两次输入密码不一致!"));
+				} else {
+					callback();
+				}
+			};
+			// 验证手机
+			var checkPhone = (rule, value, callback) => {
+				var _this = this;
+				let reg = /^1\d{10}$/;
+				if (_this.registerForm.rphoneNum === "") {
+					callback(new Error("请输入手机号码"));
+				} else {
+					if (!reg.test(_this.registerForm.rphoneNum)) {
+						callback(new Error("请输入11位手机号"));
+					} else {
+						let params = { un: _this.registerForm.rphoneNum };
+						this.ajax
+							.get(this.$store.state.api + "findPhone", params)
+							.then((res) => {
+								if (res.data[0].length > 0) {
+									callback(new Error("此手机号已注册"));
+								} else {
+									callback();
+								}
+								console.log(res.data[0]);
+							})
+							.catch((err) => {
+								callback();
+								console.error(err);
+							});
+					}
+				}
+			};
+			return {
+				islogin: true,
+				phoneNum: "",
+				password: "",
+				sqlPassword: "",
+				registerForm: {
+					rphoneNum: "",
+					rpassword: "",
+					repassword: "",
+					school: "",
+					class: "",
+				},
+				schoolArray: [],
+				classArray: [],
+				now: "",
+				rules2: {
+					phone: [
+						{
+							required: true,
+							type: "number",
+							validator: checkPhone,
+							trigger: ["blur", "change"],
+						},
+					],
+					pass: [{ required: true, validator: validatePass, trigger: "blur" }],
+					checkPass: [
+						{ required: true, validator: validatePass2, trigger: "blur" },
+					],
+					school: [
+						{ required: true, message: "请选择活动区域", trigger: "blur" },
+					],
+				},
+				studentInfo: [],
+			};
+		},
+		created() {
+			// this.getOrg();
+			this.getSchool();
+		},
+		methods: {
+			time() {
+				if (!this.now) {
+					this.now = new Date().getTime();
+					return true;
+				} else {
+					let time = new Date().getTime();
+					if (time - this.now > 3000) {
+						this.now = time;
+						return true;
+					} else {
+						return false;
+					}
+				}
+			},
+			register() {
+				this.$refs.ruleForm2.validate((valid) => {
+					if (valid) {
+						if (this.time()) {
+							let params = [
+								{
+									username: this.registerForm.rphoneNum,
+									userpassword: this.registerForm.repassword,
+									oid: this.registerForm.school,
+									cid: this.registerForm.class,
+								},
+							];
+							this.ajax
+								.post(this.$store.state.api + "register_student", params)
+								.then((res) => {
+									this.$message({
+										message: "注册成功",
+										type: "success",
+									});
+									this.registerForm = {
+										rphoneNum: "",
+										rpassword: "",
+										repassword: "",
+										school: "",
+										class: "",
+									};
+									this.islogin = true;
+								})
+								.catch((err) => {
+									this.$message.error("注册失败");
+									console.error(err);
+								});
+						}
+					} else {
+						return false;
+					}
+				});
+			},
+			findPhone() {
+				let params = { un: this.phoneNum };
+				this.ajax
+					.get(this.$store.state.api + "findPhone", params)
+					.then((res) => {
+						if (res.data[0].length > 0) {
+							if (res.data[0][0].state == 0) {
+								this.$message.error("此账号已被屏蔽登录,请咨询管理员");
+								return;
+							}
+							if (res.data[0][0].type == 2) {
+								// this.sqlPassword = res.data[0][0].userpassword;
+								// this.userInfo = res.data[0][0]
+								this.isU = 1;
+							} else {
+								this.isU = 2;
+							}
+						} else {
+							this.isU = false;
+						}
+						this.login();
+						console.log(res.data[0][0]);
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+			},
+			login() {
+				if (this.time()) {
+					var _this = this;
+					var isU = _this.isU;
+					if (isU == 1) {
+						let params = [
+							{
+								uname: this.phoneNum,
+								upassword: this.password,
+							},
+						];
+						_this.ajax
+							.post(_this.$store.state.api + "login", params)
+							.then((res) => {
+								if (res.data.status == "1") {
+									_this.$message({
+										message: "登录成功",
+										type: "success",
+									});
+
+									_this.studentInfo = res.data[0][0];
+									_this.$cookies.set("slogin", "1", -1);
+
+									_this.$cookies.set("suserid", _this.studentInfo.userid, -1);
+									_this.$cookies.set("studentInfo", _this.studentInfo, -1);
+									// window.sessionStorage.setItem("login", true);
+									// window.sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
+									_this.$store.commit("update", ["isLogin", true]);
+									_this.$store.commit("update", [
+										"studentInfo",
+										_this.studentInfo,
+									]);
+									// console.log(_this.$store.state);
+									_this.$router.push("/index");
+								} else {
+									this.$message.error("密码错误");
+								}
+								console.log(res.data);
+							})
+							.catch((err) => {
+								this.$message.error("登录失败");
+								console.error(err);
+							});
+					} else if (isU == 2) {
+						this.$message.error("此账号角色不是学生");
+					} else {
+						this.$message.error("此账号还未注册请去注册");
+					}
+				}
+
+				//   sessionStorage.removeItem("key");
+			},
+			getSchool() {
+				this.ajax
+					.get(this.$store.state.api + "selectOrg", "")
+					.then((res) => {
+						this.schoolArray = res.data[0];
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+			},
+			getClass() {
+				let params = {
+					oid: this.registerForm.school,
+				};
+				this.ajax
+					.get(this.$store.state.api + "selectClassBySchool", params)
+					.then((res) => {
+						this.classArray = res.data[0];
+					})
+					.catch((err) => {
+						console.error(err);
+					});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+    html,body{
+        height: 100%;
+    }
+	.login_content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: calc(100% - (67.5px * 2));
+		/* position: absolute; */
+		width: 100%;
+	}
+	.login_box {
+		width: 23%;
+		min-width: 400px;
+		margin: 0 auto;
+		background: #fff;
+		padding: 20px;
+		box-shadow: 0 0 20px #eee;
+	}
+
+	/* .userLogin img {
+				  width: 50%;
+				  display: inline-block;
+				  width: 18px;
+				  padding-right: 5px;
+				  border-right: 1px solid #2a97ff;
+				  position: absolute;
+				  top: 8px;
+				  left: 10px;
+				  z-index: 999;
+				} */
+
+	/* .el-input >>> input {
+				  width: 100%;
+				  padding: 15px 0 15px 40px;
+				  outline: none;
+				  border: 1px solid #ccc;
+				  font-size: 14px;
+				} */
+	/* .userLogin {
+				  margin-top: 25px;
+				  position: relative;
+				} */
+	.login_button {
+		margin-top: 10px;
+	}
+	.login_button button {
+		width: 100%;
+		color: #fff;
+		background: #2a97ff;
+		padding: 10px;
+		border-radius: 10px;
+		border: none;
+		font-size: 18px;
+		text-align: center;
+		outline: none;
+		cursor: pointer;
+	}
+	.login_title {
+		text-align: center;
+		font-size: 26px;
+		font-weight: 600;
+	}
+</style>

src/config/config.js

@@ -9,7 +9,7 @@ const store = new Vuex.Store({
         luyou:1,
         userInfo: {},
         nCount:0,
-        // api: 'https://ld.api.cocorobo.cn/edu/',
+        // api: 'https://pbl.cocorobo.cn/api/pbl/',
         api: 'http://localhost:7003/pbl/',
     },
 

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import login from '@/components/login'
 import index from '@/components/index'
 import courseDetail from '@/components/courseDetail'
 import mine from '@/components/mine'
@@ -17,7 +18,12 @@ Vue.use(Router).use(ElementUI)
 export default new Router({
   routes: [
     {
-      path: '/',
+      path: '/login',
+      name: 'login',
+      component: login
+    },
+    {
+      path: '/index',
       name: 'index',
       component: index
     },