代码提交

pages/share/index.vue

@@ -0,0 +1,137 @@
+<!--
+    @name: 分享跳转页面
+    @author: kahu4
+    @date: 2023-11-10 11:33
+    @description：index
+    @update: 2023-11-10 11:33
+-->
+<script
+    setup
+>
+import {  onBeforeUnmount, onMounted, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { lazyLoading } from "@/utils/images";
+import {  useShareInner } from "@/hooks/useShare";
+
+let colorTime
+const textColor = ref('#cccccc')
+const text = ref('数据处理中...')
+
+const {
+  params,
+  analysisParams
+} = useShareInner()
+onMounted(() => {
+  colorTime = setInterval(() => {
+    textColor.value = textColor.value === '#333' ? "#cccccc" : "#333"
+  }, 800)
+})
+
+onLoad(options => {
+  // 解析参数
+  analysisParams(options)
+})
+
+onBeforeUnmount(() => {
+  colorTime && clearInterval(colorTime)
+})
+</script>
+
+<template>
+  <view class="share-container">
+    <view class="main-box">
+      <view
+          class="loading"
+
+      >
+        <image :src="lazyLoading" />
+      </view>
+      <view
+          class="text"
+          :style="{color:textColor}"
+      >
+        <view
+            :style="{animationDelay: `${index*0.2}s`}"
+            v-for="(item,index) in text"
+            :key="index"
+        >
+          {{ item }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+
+<style lang="scss">
+page {
+  background: #fafafa;
+}
+</style>
+<style
+    scoped
+    lang="scss"
+>
+.share-container {
+  width: 100%;
+
+  .main-box {
+    position: absolute;
+    top: 30%;
+    left: 0;
+    width: 100%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .loading {
+      image{
+        width: 300px;
+        height: 300px;
+
+      }
+    }
+
+    .text {
+      margin: 30rpx 0;
+      transition: all .3s;
+      font-size: 48rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      view {
+        margin: 0 5rpx;
+        animation: jump 3s ease-in-out infinite;
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 360deg;
+  }
+  80% {
+    rotate: 460deg;
+  }
+
+}
+
+@keyframes jump {
+  0%, 60% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-15rpx);
+  }
+  40% {
+    transform: translateY(15rpx);
+  }
+}
+</style>