8/8需求

src/apis/note.js

@@ -1,12 +1,12 @@
 import request from '@/axios'
 export default {
-  /**
-   * 
-   * @param {*} data 
-   * @returns 
-   * 获取笔记列表
-   */
-  noteList(data) {
+	/**
+	 * 
+	 * @param {*} data 
+	 * @returns 
+	 * 获取笔记列表
+	 */
+	noteList(data) {
 		return request({
 			url: '/user/note/listDate',
 			method: 'get',
@@ -14,11 +14,24 @@ export default {
 		})
 	},
 
-  postNote(data) {
+	postNote(data) {
 		return request({
 			url: '/user/note',
 			method: 'post',
 			data: data
 		})
 	},
+	/**
+	 * 
+	 * @param {*} data 
+	 * @returns 
+	 * 获取未读督学最新一条信息
+	 */
+	informUserselectLastUnStudyMsg(data) {
+		return request({
+			url: '/app/informUser/selectLastUnStudyMsg',
+			method: 'get',
+			params: data
+		})
+	},
 }

src/components/header/index.vue

@@ -23,10 +23,36 @@
       </nav>
 
       <div class="userinfo" v-if="userInfo">
-        <a class="msg" @click="go('/person-center/my-message')">
+        <!-- <a class="msg" @click="go('/person-center/my-message')">
           <i class="pi" v-if="msgCount > 0"></i>
           <i class="el-icon-message-solid icon"></i>
-        </a>
+          <div @click.stop="" class="popover_style">
+            {{ msgData.text }} <el-button style="float:right;" type="text">立即学习</el-button>
+          </div>
+        </a> -->
+        <el-tooltip
+          placement="bottom"
+          effect="light"
+          v-model="msgShow"
+          :hide-after="0"
+          manual
+        >
+          <el-badge :is-dot="msgCount > 0 ? true : false" class="item">
+            <el-button
+              style="font-size: 18px; padding: 0px"
+              icon="el-icon-message-solid"
+              type="text"
+              @click="go('/person-center/my-message')"
+            ></el-button>
+          </el-badge>
+          <div slot="content">
+            {{ msgData.text }}
+            <div>
+              <el-button type="text" @click="newGoToStudy">立即学习</el-button
+              ><el-button type="text" @click="clearMsg">关闭</el-button>
+            </div>
+          </div>
+        </el-tooltip>
         <el-dropdown @command="handleCommand">
           <span
             class="el-dropdown-link"
@@ -82,19 +108,31 @@
         >
       </div>
     </div>
+
+    <RebuildModal
+      ref="rebuildModal"
+      @rebuildSubmit="rebuildSubmit($event)"
+    ></RebuildModal>
   </header>
 </template>
 
 <script>
+import RebuildModal from "@/components/rebuildModal";
 import { mapGetters, mapMutations } from "vuex";
 export default {
   name: "Header",
+  components: {
+    RebuildModal,
+  },
   data() {
     return {
       searchKey: "",
       type: "1",
       showBox: false,
       timer: null,
+      msgData: {},
+      sysTime: 0,
+      msgShow: false,
     };
   },
   computed: {
@@ -113,12 +151,280 @@ export default {
   },
   mounted() {
     if (this.$tools.isLogin()) {
+      this.$request.informUserselectLastUnStudyMsg().then((res) => {
+        if (res.data && res.data.id) {
+          let today = new Date(new Date().toLocaleDateString()).getTime();
+          if (localStorage.getItem("msg")) {
+            let ary = JSON.parse(localStorage.getItem("msg"));
+            if (ary.updateTime === today) {
+              this.msgShow = false;
+              return;
+            }
+          }
+          this.$nextTick(() => {
+            this.msgData = res.data;
+            this.msgShow = true;
+          });
+        } else {
+          this.msgShow = false;
+        }
+      });
       this.getMsgCount();
     }
   },
   methods: {
     ...mapMutations(["getMsgCount"]),
+    rebuildSubmit(item) {
+      this.$router.push({
+        path: `/my-course-detail/${item.goodsId}`,
+        query: {
+          gradeId: item.gradeId,
+          orderGoodsId: item.orderGoodsId,
+          rebuild: 1,
+        },
+      });
+    },
+    getGoodsData() {
+      return new Promise((resolve, reject) => {
+        this.$request.goodsDetail(this.msgData.goodsId).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    /**
+     * 关闭消息
+     */
+    clearMsg() {
+      let ary = {
+        userId: this.msgData.userId,
+        msgId: this.msgData.id,
+        updateTime: new Date(new Date().toLocaleDateString()).getTime(),
+      };
+      localStorage.setItem("msg", JSON.stringify(ary));
+      this.msgShow = false;
+    },
+    /**
+     * 前往学习
+     */
+    async newGoToStudy() {
+      let item = await this.getGoodsData();
+      if (item.goodsType == 1) {
+        this.sysTime = this.$tools.timest();
+        item.orderGoodsId = this.msgData.orderGoodsId;
+        this.canJump(item).then((res) => {
+          this.clearMsg();
+          this.$router.push({
+            path: `/my-course-detail/${item.goodsId}`,
+            query: {
+              gradeId: item.gradeId,
+              orderGoodsId: item.orderGoodsId,
+              courseId: res.rows[0].courseId || "",
+            },
+          });
+        });
+
+        // arsty = '立刻学习';
+
+        //题库
+      } else if (item.goodsType == 2) {
+        this.clearMsg();
+        this.$router.push({
+          path: "/person-center/my-bank/bank-detail/" + item.goodsId,
+          query: {
+            orderGoodsId: item.orderGoodsId,
+          },
+        });
+      }
+    },
+    canJump(item) {
+      return new Promise((resolve) => {
+        this.$request
+          .orderInfo({
+            orderGoodsId: item.orderGoodsId,
+          })
+          .then(async (res) => {
+            let items = res.data;
+            let currentTime = this.$tools.timest();
+            if (items.interfaceAccountId > 0) {
+              //学习账号已开通
+
+              if (items.learnStatus == 1) {
+                //跳转第三方h5
+
+                const confirmText = [
+                  "您的学习账号已经开通，请按照步骤操作，进行学习。",
+                  "1.点击【跳转学习网址】按钮",
+                  "2.打开学习网址后，选择【个人用户】进行登录",
+                  "(1)账号：您个人的身份证号码",
+                  "(2)密码：身份证号码，再加111111",
+                ];
+                const newDatas = [];
+                const h = this.$createElement;
+                for (const i in confirmText) {
+                  newDatas.push(h("p", null, confirmText[i]));
+                }
+                this.$confirm(h("div", null, newDatas), "温馨提示", {
+                  confirmButtonText: "跳转学习网址",
+                  cancelButtonText: "关闭",
+                  closeOnClickModal: false,
+                  closeOnPressEscape: false,
+                  distinguishCancelAndClose: false,
+                  showClose: false,
+                })
+                  .then((_) => {
+                    window.open("http://admin.zhujianpeixun.com/", "_blank");
+                  })
+                  .catch((_) => {});
+
+                return;
+              } else {
+                this.$message({
+                  type: "warning",
+                  message:
+                    "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
+                });
+                return;
+              }
+            }
+            // //内部系统
+            // if (items.interfacePushId > 0 && items.officialStatus != 1) {
+            //   this.$message({
+            //     type: "warning",
+            //     message:
+            //       "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
+            //   });
+            //   return;
+            // }
+            if (
+              this.sysTime <= items.serviceStartTime ||
+              this.sysTime >= items.serviceEndTime
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在学习服务期，不能进入学习",
+              });
+              return;
+            }
+
+            if (
+              (items.classStartTime && this.sysTime <= items.classStartTime) ||
+              (items.classEndTime && this.sysTime >= items.classEndTime)
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在班级有效期，不能进入学习",
+              });
+              return;
+            }
+
+            if (items.learningStatus == 2) {
+              this.$message({
+                type: "warning",
+                message: "开放学习时间待定，不能进入学习",
+              });
+              return;
+            }
+
+            if (items.classStatus == 0) {
+              this.$message({
+                type: "warning",
+                message: "尚未开班，不能进入学习",
+              });
+              return;
+            }
+            if (
+              items.learningStatus == 3 &&
+              this.sysTime < items.learningTimeStart
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在开放学习时间,不能进入学习",
+              });
+              return;
+            }
+
+            let rebuildStatus = await this.courseGoodsRebuildStatus(
+              items.goodsId,
+              items.gradeId
+            );
 
+            if (rebuildStatus == 0) {
+              this.$refs.rebuildModal.showModal(items);
+              return;
+            }
+
+            // if (item.educationName == "继续教育") {
+            this.$request
+              .lockLockStatus({
+                action: "jxjy",
+              })
+              .then((res) => {
+                //有其他端在操作，不能学习
+                this.$message({
+                  type: "warning",
+                  message: res.msg,
+                });
+              })
+              .catch((err) => {
+                //可以学习
+                this.$request
+                  .courseCourseList({
+                    pageNum: 1,
+                    pageSize: 1,
+                    goodsId: items.goodsId,
+                    gradeId: items.gradeId,
+                  })
+                  .then((res) => {
+                    if (res.rows.length) {
+                      resolve(res);
+                    } else {
+                      this.$message({
+                        type: "warning",
+                        message: "课程内暂无可以学习的科目",
+                      });
+                    }
+                  });
+              });
+
+            // } else {
+            //   this.$request
+            //     .courseCourseList({
+            //       pageNum: 1,
+            //       pageSize: 1,
+            //       goodsId: items.goodsId,
+            //       gradeId: items.gradeId,
+            //     })
+            //     .then((res) => {
+            //       if (res.rows.length) {
+            //         resolve(res);
+            //       } else {
+            //         this.$message({
+            //           type: "warning",
+            //           message: "课程内暂无可以学习的科目",
+            //         });
+            //       }
+            //     });
+            // }
+          });
+      });
+    },
+
+    /**
+     * @param {Object} goodsId 商品id
+     * 查询商品重修状态
+     */
+    courseGoodsRebuildStatus(goodsId, gradeId) {
+      return new Promise((resolve) => {
+        this.$request
+          .courseGoodsRebuildStatus({
+            goodsId: goodsId,
+            gradeId: gradeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
     handleCommand(command) {
       switch (command) {
         case "1":
@@ -302,6 +608,7 @@ export default {
 
     .search {
       float: right;
+      margin-right: 12px;
       margin-top: 20px;
       width: 324px;
       background: #fafbfc;
@@ -371,6 +678,17 @@ export default {
             top: 0;
             right: 0;
           }
+          .popover_style {
+            position: absolute;
+            top: 150%;
+            left: -100px;
+            border-radius: 8px;
+            background-color: #fff;
+            border: 1px solid #333;
+            padding: 0px 6px;
+            width: 300px;
+            white-space: normal;
+          }
         }
 
         &.name {

src/pages/home/index.vue

@@ -9,14 +9,48 @@
           </div>
 
           <div class="icon-list" v-else>
-            <a @click="go('/person-center/my-message')">
+            <!-- <a @click="go('/person-center/my-message')">
               <i class="el-icon-message-solid icon"></i>
-            </a>
+            </a> -->
+
+            <el-tooltip
+              placement="bottom-end"
+              effect="light"
+              v-model="msgShow"
+              :hide-after="0"
+              manual
+            >
+              <el-badge
+                :is-dot="msgCount > 0 ? true : false"
+                class="item"
+                style="vertical-align: baseline"
+              >
+                <el-button
+                  style="font-size: 20px; padding: 0px"
+                  icon="el-icon-message-solid"
+                  type="text"
+                  @click="go('/person-center/my-message')"
+                ></el-button>
+              </el-badge>
+              <div slot="content">
+                {{ msgData.text }}
+                <div>
+                  <el-button type="text" @click="newGoToStudy"
+                    >立即学习</el-button
+                  ><el-button type="text" @click="clearMsg">关闭</el-button>
+                </div>
+              </div>
+            </el-tooltip>
             <el-dropdown @command="handleCommand">
               <span class="el-dropdown-link">
                 <i
                   class="el-icon-user-solid"
-                  style="font-size: 20px; color: #3f8dfd; cursor: pointer"
+                  style="
+                    font-size: 20px;
+                    color: #3f8dfd;
+                    cursor: pointer;
+                    margin-left: 20px;
+                  "
                   @click="go('/person-center/my-course')"
                 ></i>
               </span>
@@ -59,7 +93,11 @@
               >搜索</el-button
             >
           </div>
-          <div class="contact" v-show="false" v-if="header.serviceTel.status == 1">
+          <div
+            class="contact"
+            v-show="false"
+            v-if="header.serviceTel.status == 1"
+          >
             <div class="contact__phone">{{ header.serviceTel.tel }}</div>
             <div class="contact__time">
               {{ header.serviceTel.time }}
@@ -475,10 +513,16 @@
     <ToolBar></ToolBar>
     <Footer></Footer>
     <wx-login ref="wxLogin" @wxLoginBack="wxLoginBack"></wx-login>
+
+    <RebuildModal
+      ref="rebuildModal"
+      @rebuildSubmit="rebuildSubmit($event)"
+    ></RebuildModal>
   </div>
 </template>
 
 <script>
+import RebuildModal from "@/components/rebuildModal";
 import wxLogin from "@/components/wxLogin/index";
 import Footer from "@/components/footer/index";
 import ToolBar from "@/components/toolbar/index";
@@ -495,9 +539,10 @@ export default {
     GoodsItem,
     ToolBar,
     wxLogin,
+    RebuildModal,
   },
   computed: {
-    ...mapGetters(["userInfo", "token", "header"]),
+    ...mapGetters(["userInfo", "token", "header", "msgCount"]),
 
     showNav: function () {
       return function (list) {
@@ -513,6 +558,8 @@ export default {
   },
   data() {
     return {
+      msgShow: false,
+      msgData: {},
       showBox: false,
       indexToken: "",
       indexUserAccount: "",
@@ -584,6 +631,8 @@ export default {
   mounted() {
     if (this.userInfo) {
       this.getRecord();
+      this.getmsg();
+      this.getMsgCount();
     }
     this.getActivityList();
     // this.color = this.colors[0];
@@ -594,10 +643,263 @@ export default {
     userInfo(val) {
       if (val) {
         this.getRecord();
+        this.getmsg();
+        this.getMsgCount();
       }
     },
   },
   methods: {
+    /**
+     * 关闭消息
+     */
+    clearMsg() {
+      let ary = {
+        userId: this.msgData.userId,
+        msgId: this.msgData.id,
+        updateTime: new Date(new Date().toLocaleDateString()).getTime(),
+      };
+      localStorage.setItem("msg", JSON.stringify(ary));
+      this.msgShow = false;
+    },
+    rebuildSubmit(item) {
+      this.$router.push({
+        path: `/my-course-detail/${item.goodsId}`,
+        query: {
+          gradeId: item.gradeId,
+          orderGoodsId: item.orderGoodsId,
+          rebuild: 1,
+        },
+      });
+    },
+    getGoodsData() {
+      return new Promise((resolve, reject) => {
+        this.$request.goodsDetail(this.msgData.goodsId).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    /**
+     * 前往学习
+     */
+    async newGoToStudy() {
+      let item = await this.getGoodsData();
+      if (item.goodsType == 1) {
+        this.sysTime = this.$tools.timest();
+        item.orderGoodsId = this.msgData.orderGoodsId;
+        this.canJump(item).then((res) => {
+          this.clearMsg();
+          this.$router.push({
+            path: `/my-course-detail/${item.goodsId}`,
+            query: {
+              gradeId: item.gradeId,
+              orderGoodsId: item.orderGoodsId,
+              courseId: res.rows[0].courseId || "",
+            },
+          });
+        });
+
+        // arsty = '立刻学习';
+
+        //题库
+      } else if (item.goodsType == 2) {
+          this.clearMsg();
+        this.$router.push({
+          path: "/person-center/my-bank/bank-detail/" + item.goodsId,
+          query: {
+            orderGoodsId: item.orderGoodsId,
+          },
+        });
+      }
+    },
+    canJump(item) {
+      return new Promise((resolve) => {
+        this.$request
+          .orderInfo({
+            orderGoodsId: item.orderGoodsId,
+          })
+          .then(async (res) => {
+            let items = res.data;
+            let currentTime = this.$tools.timest();
+            if (items.interfaceAccountId > 0) {
+              //学习账号已开通
+
+              if (items.learnStatus == 1) {
+                //跳转第三方h5
+
+                const confirmText = [
+                  "您的学习账号已经开通，请按照步骤操作，进行学习。",
+                  "1.点击【跳转学习网址】按钮",
+                  "2.打开学习网址后，选择【个人用户】进行登录",
+                  "(1)账号：您个人的身份证号码",
+                  "(2)密码：身份证号码，再加111111",
+                ];
+                const newDatas = [];
+                const h = this.$createElement;
+                for (const i in confirmText) {
+                  newDatas.push(h("p", null, confirmText[i]));
+                }
+                this.$confirm(h("div", null, newDatas), "温馨提示", {
+                  confirmButtonText: "跳转学习网址",
+                  cancelButtonText: "关闭",
+                  closeOnClickModal: false,
+                  closeOnPressEscape: false,
+                  distinguishCancelAndClose: false,
+                  showClose: false,
+                })
+                  .then((_) => {
+                    window.open("http://admin.zhujianpeixun.com/", "_blank");
+                  })
+                  .catch((_) => {});
+
+                return;
+              } else {
+                this.$message({
+                  type: "warning",
+                  message:
+                    "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
+                });
+                return;
+              }
+            }
+            // //内部系统
+            // if (items.interfacePushId > 0 && items.officialStatus != 1) {
+            //   this.$message({
+            //     type: "warning",
+            //     message:
+            //       "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
+            //   });
+            //   return;
+            // }
+            if (
+              this.sysTime <= items.serviceStartTime ||
+              this.sysTime >= items.serviceEndTime
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在学习服务期，不能进入学习",
+              });
+              return;
+            }
+
+            if (
+              (items.classStartTime && this.sysTime <= items.classStartTime) ||
+              (items.classEndTime && this.sysTime >= items.classEndTime)
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在班级有效期，不能进入学习",
+              });
+              return;
+            }
+
+            if (items.learningStatus == 2) {
+              this.$message({
+                type: "warning",
+                message: "开放学习时间待定，不能进入学习",
+              });
+              return;
+            }
+
+            if (items.classStatus == 0) {
+              this.$message({
+                type: "warning",
+                message: "尚未开班，不能进入学习",
+              });
+              return;
+            }
+            if (
+              items.learningStatus == 3 &&
+              this.sysTime < items.learningTimeStart
+            ) {
+              this.$message({
+                type: "warning",
+                message: "不在开放学习时间,不能进入学习",
+              });
+              return;
+            }
+
+            let rebuildStatus = await this.courseGoodsRebuildStatus(
+              items.goodsId,
+              items.gradeId
+            );
+
+            if (rebuildStatus == 0) {
+              this.$refs.rebuildModal.showModal(items);
+              return;
+            }
+
+            // if (item.educationName == "继续教育") {
+            this.$request
+              .lockLockStatus({
+                action: "jxjy",
+              })
+              .then((res) => {
+                //有其他端在操作，不能学习
+                this.$message({
+                  type: "warning",
+                  message: res.msg,
+                });
+              })
+              .catch((err) => {
+                //可以学习
+                this.$request
+                  .courseCourseList({
+                    pageNum: 1,
+                    pageSize: 1,
+                    goodsId: items.goodsId,
+                    gradeId: items.gradeId,
+                  })
+                  .then((res) => {
+                    if (res.rows.length) {
+                      resolve(res);
+                    } else {
+                      this.$message({
+                        type: "warning",
+                        message: "课程内暂无可以学习的科目",
+                      });
+                    }
+                  });
+              });
+
+            // } else {
+            //   this.$request
+            //     .courseCourseList({
+            //       pageNum: 1,
+            //       pageSize: 1,
+            //       goodsId: items.goodsId,
+            //       gradeId: items.gradeId,
+            //     })
+            //     .then((res) => {
+            //       if (res.rows.length) {
+            //         resolve(res);
+            //       } else {
+            //         this.$message({
+            //           type: "warning",
+            //           message: "课程内暂无可以学习的科目",
+            //         });
+            //       }
+            //     });
+            // }
+          });
+      });
+    },
+
+    /**
+     * @param {Object} goodsId 商品id
+     * 查询商品重修状态
+     */
+    courseGoodsRebuildStatus(goodsId, gradeId) {
+      return new Promise((resolve) => {
+        this.$request
+          .courseGoodsRebuildStatus({
+            goodsId: goodsId,
+            gradeId: gradeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
     /**
      * 微信登入
      */
@@ -682,7 +984,7 @@ export default {
         return 0;
       }
     },
-    ...mapMutations(["setUserInfo"]),
+    ...mapMutations(["setUserInfo", "getMsgCount"]),
     /**
      * 播放记录
      */
@@ -985,6 +1287,29 @@ export default {
         }
       });
     },
+    /**
+     * 消息提示
+     */
+    getmsg() {
+      this.$request.informUserselectLastUnStudyMsg().then((res) => {
+        if (res.data && res.data.id) {
+          let today = new Date(new Date().toLocaleDateString()).getTime();
+          if (localStorage.getItem("msg")) {
+            let ary = JSON.parse(localStorage.getItem("msg"));
+            if (ary.updateTime === today) {
+              this.msgShow = false;
+              return;
+            }
+          }
+          this.$nextTick(() => {
+            this.msgData = res.data;
+            this.msgShow = true
+          });
+        } else {
+          this.msgShow = false;
+        }
+      });
+    },
     /**
      * 获取用户登录信息
      */
@@ -997,6 +1322,7 @@ export default {
           this.isLogin = false;
           this.isloginSms = false;
           this.setUserInfo(res.data);
+          this.getmsg();
         })
         .catch((err) => {
           this.isLogin = false;
@@ -1794,4 +2120,7 @@ export default {
     }
   }
 }
+/deep/ .el-badge__content.is-fixed {
+  top: 7px;
+}
 </style>