修改

package.json

@@ -5,6 +5,7 @@
         "js-base64": "^3.7.7",
         "js-fast-way": "^0.5.6",
         "js-md5": "^0.8.3",
+        "lottie-web": "^5.12.2",
         "pinia": "^2.2.4",
         "uni-ajax": "^2.5.1",
         "vue": "^3.5.12"

pages.json

@@ -16,7 +16,6 @@
                   "navigationStyle": "default"
                }
            }
-
     ],
     "globalStyle": {
         "navigationStyle": "custom",

pages/index/LottieAnimation.vue

@@ -0,0 +1,54 @@
+<template>
+  <div ref="lottieContainer" class="lottie-container"></div>
+</template>
+
+<script>
+import lottie from 'lottie-web';
+
+export default {
+  props: {
+    animationData: {
+      type: Object,
+      required: true
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    }
+  },
+  mounted() {
+    this.initLottie();
+  },
+  beforeDestroy() {
+    this.destroyLottie();
+  },
+  methods: {
+    initLottie() {
+      this.animation = lottie.loadAnimation({
+        container: this.$refs.lottieContainer, // DOM元素
+        renderer: 'svg',
+        loop: this.loop,
+        autoplay: this.autoplay,
+        animationData: this.animationData // 动画数据
+      });
+    },
+    destroyLottie() {
+      if (this.animation) {
+        this.animation.destroy(); // 销毁动画
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.lottie-container {
+  width: 100%;
+  height: 100%;
+
+}
+</style>

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="content">
         <view class="image-content">
-            <image style="width: 250px; height: 250px; background-color: #eeeeee;" mode="scaleToFill"
+            <image style="width: 350rpx; height: 350rpx; background-color: #eeeeee;" mode="scaleToFill"
                 src="/static/safe.png"></image>
         </view>
         <view class="btn-class ">
@@ -12,11 +12,12 @@
                      <uni-icons type="loop"></uni-icons>
                     样品检测</button>
         </view>
+
     </view>
 </template>
 
 <script setup>
-import {onMounted,ref, watch} from "vue";
+import { ref} from "vue";
 
 const toStorage=()=>{
     uni.navigateTo({
@@ -39,4 +40,5 @@ const toDecation=()=>{
          text-align: center;
          margin: 30px auto;
     }
+
 </style>

pages/putStorage/LottieAnimation.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="lottieContainer" class="lottie-container"></div>
+</template>
+
+<script>
+import lottie from 'lottie-web';
+
+export default {
+  props: {
+    animationData: {
+      type: Object,
+      required: true
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    }
+  },
+  mounted() {
+    this.initLottie();
+  },
+  beforeDestroy() {
+    this.destroyLottie();
+  },
+  methods: {
+    initLottie() {
+      this.animation = lottie.loadAnimation({
+        container: this.$refs.lottieContainer, // DOM元素
+        renderer: 'svg',
+        loop: this.loop,
+        autoplay: this.autoplay,
+        animationData: this.animationData // 动画数据
+      });
+    },
+    destroyLottie() {
+      if (this.animation) {
+        this.animation.destroy(); // 销毁动画
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.lottie-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

pages/putStorage/putStorage.vue

@@ -55,10 +55,13 @@
                          <uni-icons type="upload"></uni-icons>
                         一键生成报告</button>
              </view>
+              <LottieAnimation :animationData="animationData" v-if="!isShowStartBtn" />
 	</view>
 </template>
 
 <script setup>
+    import LottieAnimation from './LottieAnimation.vue';
+    import animationData from '/static/lotte/circle.json'; // 导入你的动画 JSON 数据
     import {
         onMounted,
         ref,
@@ -69,12 +72,12 @@ import {getArrValue} from "js-fast-way";
 
 
 // 获取 module
-const rfidModule = uni.requireNativePlugin("DeviceModule_RFID");
+// const rfidModule = uni.requireNativePlugin("DeviceModule_RFID");
 
 //渲染完成
 onReady(() => {
     // #ifdef APP-PLUS
-    rfidModuleInit()
+    // rfidModuleInit()
     // #endif
 })
 
@@ -171,6 +174,7 @@ const startScanData = async (data) => {
 
 //停止扫描
 const stopScan = () => {
+
     const { code } = rfidModule.stopScan()
     if (code === 0) {
         isScan.value = false
@@ -258,6 +262,7 @@ const toReport=()=>{
     bottom: 0; /* 靠近底部 */
     left: 0; /* 左对齐 */
     right: 0; /* 右对齐 */
+    z-index: 100;
 }
 
 .btn {

yarn.lock

@@ -998,6 +998,11 @@ local-pkg@^0.5.0:
     mlly "^1.4.2"
     pkg-types "^1.0.3"
 
+lottie-web@^5.12.2:
+  version "5.12.2"
+  resolved "http://39.108.216.210:9000/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "http://39.108.216.210:9000/lru-cache/-/lru-cache-5.1.1.tgz"