feat: 签到成功显示提示弹窗

src/components/popup.vue

+<template>
+  <div class="popup" v-show="visible">
+    <div class="popup-container">
+      <div class="title">
+        {{title}}
+        <i class="icon-close el-icon-close" @click="handleClose"></i>
+      </div>
+      <slot></slot>
+    </div>
+    <div class="overlay"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+<style scoped>
+.overlay{
+  position:fixed;
+  left:0;
+  top:0;
+  right:0;
+  bottom:0;
+  z-index:1999;
+  background:rgba(0, 0, 0, .5);
+}
+.popup-container{
+  position:fixed;
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+  z-index:2000;
+  background:#fff;
+  max-width:80vw;
+  border-radius:5px;
+  overflow:hidden;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%)
+}
+.title{
+  background:#2994ea;
+  color:#fff;
+  padding:10px 40px 10px 15px;
+  position:relative;
+  min-width:190px;
+}
+.title>i{
+  position:absolute;
+  right:6px;
+  top:6px;
+  padding:5px;
+  cursor:pointer;
+}
+.title>i:hover{
+  color: #e3e3e3;
+}
+</style>

src/pages/learn/courseDetail.vue

@@ -91,11 +91,11 @@
                               <div class="time" v-if="item1.type === 5">
                                 <template>
                                   {{ item1.live.start_time }} {{ item1.live.statusStr }}
-                                  <el-button v-if="[-1, 0].includes(item1.live.sign_status)" class="in-btn" type="primary" size="mini" round @click.stop="handleSignIn(item1.live)">签到</el-button>
+                                  <el-button v-if="[-1, 0].includes(item1.live.sign_status)" class="in-btn" type="primary" size="mini" round @click.stop="handleSignIn(item1)">签到</el-button>
                                   <!-- <el-tag v-if="[3, 5].includes(item1.live.live_status) && [2, 3].includes(item1.live.sign_status)" type="danger" size="small">{{item1.live.sign_status === 2 ? '迟到' : '漏签'}}</el-tag> -->
+                                  <el-tag v-if="[1, 2].includes(item1.live.sign_status)" type="danger" size="small">{{item1.live.sign_status === 2 ? '迟到' : '已签到'}}</el-tag>
                                   <template v-if="[3, 5].includes(item1.live.live_status)">
-                                    <el-tag v-if="[2, 3].includes(item1.live.sign_status)" type="danger" size="small">{{item1.live.sign_status === 2 ? '迟到' : '缺课'}}</el-tag>
-                                    <el-tag v-if="item1.live.sign_status === 1" type="success" size="small">已签到</el-tag>
+                                    <el-tag v-if="item1.live.sign_status === 3" type="success" size="small">缺课</el-tag>
                                   </template>
                                 </template>
                               </div>
@@ -274,6 +274,11 @@
         </el-col>
       </el-row>
     </div>
+    <app-popup :title="popup.title" :visible.sync="popup.visible">
+      <p v-if="popup.data.live" class="popup-content" @click="jumpToOtherVA(popup.data)">
+        {{popup.data.live.topic}} {{popup.data.live.start_time}} <span>进入直播</span>
+      </p>
+    </app-popup>
   </div>
 </template>
 
@@ -282,15 +287,21 @@ import cAction from '@action'
 import cTool from '@tool'
 
 import VEditor from '@/components/ckeditor'
+import AppPopup from '@/components/popup'
 
 export default {
-  components: { VEditor },
+  components: { VEditor, AppPopup },
   props: {
     sid: { type: String, require: false },
     cid: { type: String, require: false }
   },
   data() {
     return {
+      popup: {
+        title: '签到成功',
+        visible: false,
+        data: {}
+      },
       params: {
         path: `/${this.cid}`,
         request: 'getCourseDiscussList',
@@ -610,11 +621,16 @@ export default {
     this.resizeRoot()
   },
   methods: {
+    handleTestSign(item) {
+      this.popup.title = '签到成功'
+      this.popup.visible = true
+      this.popup.data = item
+    },
     handleSignIn(item) {
-      if (item.sign_status === -1) {
+      if (item.live.sign_status === -1) {
         this.$message.error('直播未开始，请提前10分钟进入签到')
       } else {
-        this.fetchSignIn(item.id)
+        this.fetchSignIn(item)
       }
     },
     handleClick(tab, event) {
@@ -959,16 +975,20 @@ export default {
       if (r != null) return unescape(r[2])
       return null
     },
-    fetchSignIn(id) {
-      cAction.Player.signIn(id)
+    fetchSignIn(item) {
+      cAction.Player.signIn(item.live.id)
         .then(res => {
           const { code, status } = res
+          let msg = ''
           if (code === 0) {
             if (status === 1) {
-              this.$message.success('签到成功')
+              msg = '签到成功'
             } else if (status === 2) {
-              this.$message.success('课程已开始，您已迟到，请于课后补看错过视频')
+              msg = '课程已开始，您已迟到，请于课后补看错过视频'
             }
+            this.popup.title = msg
+            this.popup.visible = true
+            this.popup.data = item
             this.updatePages()
           }
         })
@@ -981,6 +1001,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.popup-content{
+  padding: 2px 15px;
+  font-size:14px;
+  cursor:pointer;
+}
+.popup-content:hover,.popup-content:hover span{
+  color:#d21f28;
+}
+.popup-content span{
+  color:#999;
+  font-size:12px;
+}
 body .el-tab-pane {
   padding-top: 0;
 }

src/pages/mobile/list.vue

@@ -32,10 +32,10 @@
               <div class="live-item-content__time">{{ subitem.start_time }}</div>
               <div class="live-item-content__status">
                 {{ calcTimeText(subitem) }}
-                <el-tag v-if="[-1, 0].includes(subitem.sign_status)" style="float:right;" size="small" @click.stop="handleSignIn(subitem)">签 到</el-tag>
+                <el-tag v-if="[-1, 0].includes(subitem.sign_status)" style="float:right;" size="small" @click.stop="handleSignIn(subitem, item.course_id)">签 到</el-tag>
+                <el-tag v-if="[1, 2].includes(subitem.sign_status)" type="danger" style="float:right;" size="small">{{subitem.sign_status === 2 ? '迟到' : '已签到'}}</el-tag>
                 <template v-if="[3, 5].includes(subitem.live_status)">
-                  <el-tag v-if="[2, 3].includes(subitem.sign_status)" type="danger" style="float:right;" size="small">{{subitem.sign_status === 2 ? '迟到' : '缺课'}}</el-tag>
-                  <el-tag v-if="subitem.sign_status === 1" type="success" size="small" style="float:right;">已签到</el-tag>
+                  <el-tag v-if="subitem.sign_status === 3" type="success" size="small" style="float:right;">缺课</el-tag>
                 </template>
               </div>
             </div>
@@ -43,14 +43,19 @@
         </div>
       </template>
     </div>
+    <app-popup :title="popup.title" :visible.sync="popup.visible">
+      <p v-if="popup.data" class="popup-content" @click="jumpToOtherVA(popup.data)">
+        {{popup.datatopic}} {{popup.data.start_time}} <span>进入直播</span>
+      </p>
+    </app-popup>
   </div>
 </template>
 <script>
 import cAction from '@action'
 import LanguageSwitch from '@/components/languageSwitch/index.vue'
-
+import AppPopup from '@/components/popup'
 export default {
-  components: { LanguageSwitch },
+  components: { LanguageSwitch, AppPopup },
   data() {
     const UA = navigator.userAgent
     const isWechat = /micromessenger/i.test(UA)
@@ -65,7 +70,13 @@ export default {
       timer: null,
       isWechat,
       wechatVersion,
-      notSupport
+      notSupport,
+      popup: {
+        title: '签到成功',
+        visible: false,
+        data: {},
+        courseId: ''
+      }
     }
   },
   computed: {
@@ -77,11 +88,11 @@ export default {
     }
   },
   methods: {
-    handleSignIn(item) {
+    handleSignIn(item, courseId) {
       if (item.sign_status === -1) {
         this.$message.error('直播未开始，请提前10分钟进入签到')
       } else {
-        this.fetchSignIn(item.id)
+        this.fetchSignIn(item, courseId)
       }
     },
     /* 退出登录 - 跳转方法 */
@@ -257,16 +268,21 @@ export default {
       }
       return result
     },
-    fetchSignIn(id) {
-      cAction.Player.signIn(id)
+    fetchSignIn(item, courseId) {
+      cAction.Player.signIn(item.id)
         .then(res => {
           const { code, status } = res
           if (code === 0) {
+            let msg = ''
             if (status === 1) {
-              this.$message.success('签到成功')
+              msg = '签到成功'
             } else if (status === 2) {
-              this.$message.success('课程已开始，您已迟到，请于课后补看错过视频')
+              msg = '课程已开始，您已迟到，请于课后补看错过视频'
             }
+            this.popup.title = msg
+            this.popup.visible = true
+            this.popup.data = item
+            this.popup.courseId = courseId
             this.getNewLiveMsg()
             this.getLiveList()
           }
@@ -297,6 +313,18 @@ export default {
 }
 </script>
 <style>
+.popup-content{
+  padding: 2px 15px;
+  font-size:14px;
+  cursor:pointer;
+}
+.popup-content:hover,.popup-content:hover span{
+  color:#d21f28;
+}
+.popup-content span{
+  color:#999;
+  font-size:12px;
+}
 html {
   font-size: 100px;
 }