阳光跑和排行榜结合

src/components/RankingWindow/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+    <div class="mask" v-if="rankingState">
+      <Ranking :imWindow="true" @getClose="close"></Ranking>
+    </div>
+  </Transition>
+</template>
+<script setup lang="ts">
+const { proxy } = getCurrentInstance() as any;
+import Ranking from "@/views/ranking/index"
+const emit = defineEmits(['getClose']);
+
+//父值
+const props = defineProps({
+});
+
+
+const data = reactive<any>({
+  rankingState: false
+});
+
+const { rankingState } = toRefs(data);
+
+//打开
+const open = () => {
+  rankingState.value = true;
+};
+
+//关闭
+const close = () => {
+  rankingState.value = false;
+  emit('getClose', false);
+};
+
+//暴露给父组件用
+defineExpose({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+.mask {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  background: radial-gradient(87% 87% at 9% -34%, #315f7e 0%, #0f1926 100%);
+  z-index: 998;
+}
+</style>

src/views/ranking/index.vue

@@ -191,6 +191,15 @@ const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const refSwiper = ref();
 const reportWindowRef = ref();
+const emit = defineEmits(['getClose']);
+
+//父值
+const props = defineProps({
+  imWindow: {
+    type: Boolean,
+    default: false
+  },
+});
 
 const data = reactive<any>({
   pageType: 1,//1年级排名2班级排名
@@ -775,7 +784,11 @@ const returnData = (data: any) => {
  * 返回
 */
 const confirmExit = () => {
-  router.go(-1);
+  if(props.imWindow){
+    emit('getClose', false);
+  }else{
+    router.go(-1);
+  }
 };
 
 onBeforeMount(() => {

src/views/sunshineRun/index.vue

@@ -75,6 +75,7 @@
         </div>
       </div>
     </div>
+    <RankingWindow ref="rankingWindowRef" @getClose="getClose"></RankingWindow>
   </div>
 </template>
 
@@ -84,6 +85,7 @@ const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const myInfo: any = localStorage.getItem("userInfo");
 const { sunshineRunWs, startConnect } = useSunshineRunSocket();
+const rankingWindowRef = ref();
 
 const data = reactive<any>({
   timerManager: {},//计时器管理
@@ -98,6 +100,7 @@ const data = reactive<any>({
     size: 8,
     pages: 1
   }, //学生分页
+  timer: null,//排行榜定时弹窗状态
 });
 
 const {
@@ -109,6 +112,7 @@ const {
   unit,
   screen,
   studentPage,
+  timer,
 } = toRefs(data);
 
 /**
@@ -285,6 +289,18 @@ const initSunshineRun = () => {
   });
 };
 
+/**
+ * 关闭排行榜后继续执行定时任务
+ */
+const getClose = () => {
+  timer.value = setTimeout(() => {
+    if (testList.value.length == 0) {
+      rankingWindowRef.value.open();
+    }
+  }, 1000 * 60 * 0.5);
+};
+
+
 onBeforeMount(() => {
   //获取当前时间
   setDate();
@@ -305,11 +321,30 @@ onBeforeMount(() => {
   getAutoplay();
 })
 
+/**
+ * 监听数据
+ */
+watch(
+  () => testList.value.length,
+  (v) => {
+    if (v == 0) {
+      timer.value = setTimeout(() => {
+        rankingWindowRef.value.open();
+      }, 1000 * 60 * 0.5);
+    } else {
+      rankingWindowRef.value.close();
+      clearTimeout(timer.value);
+    }
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
 })
 
 onBeforeUnmount(() => {
   getClearTimer();
+  clearTimeout(timer.value);
 })
 </script>
 
@@ -492,7 +527,7 @@ onBeforeUnmount(() => {
                 padding: 0.8vh 8% 0.8vh 5%;
                 box-sizing: border-box;
                 // background: linear-gradient(180deg, rgba(0, 0, 0, 0.87) 45%, rgba(18, 133, 124, 0.7367) 135%);
-                background: linear-gradient(to right, rgba(15,25,38,1) 0%,rgba(49,95,126,0.6) 100%);
+                background: linear-gradient(to right, rgba(15, 25, 38, 1) 0%, rgba(49, 95, 126, 0.6) 100%);
                 border-radius: 0px 0px 1vh 0px;
               }
 
@@ -695,7 +730,7 @@ onBeforeUnmount(() => {
 
                 .score {
                   color: #ffffff;
-                  
+
                   display: inline-block;
                 }