fix ui

miniprogram/pages/upload/upload.ts

@@ -50,7 +50,8 @@ Page({
     showExpandLayer: false,
     photoExpandCurrentWidth: 0,
     expandBorderStyle: '',
-    shouldResetOnReturn: false
+    shouldResetOnReturn: false,
+    scannerVisible: false
   },
 
   onLoad() {
@@ -775,6 +776,7 @@ Page({
           setTimeout(() => {
             this.setData({ photoExpandTransition: 'transition: transform 900ms ease-in-out' })
             this.setData({ photoExpandTransform: 'transform: translate(0px, 0px) scale(1);', photoExpandCurrentWidth: targetWidth, expandBorderStyle: 'opacity: 1; transition: opacity 600ms ease-out;' })
+            setTimeout(() => { this.setData({ scannerVisible: true }) }, 100)
           }, 50)
         })
       }, waitMs)

miniprogram/pages/upload/upload.wxml

@@ -54,8 +54,13 @@
         </view>
         <view wx:if="{{takePhoto && showExpandLayer }}" class="photo-expand-layer" style="{{photoExpandTransform}} {{photoExpandTransition}}">
           <view class="photo-expand-inner" style="{{photoExpandCurrentWidth ? ('width: ' + photoExpandCurrentWidth + 'px;') : ''}}">
-            <view class="expand-border-bg" style="{{expandBorderStyle}}"></view>
+            <!-- <view class="expand-border-bg" style="{{expandBorderStyle}}"></view> -->
             <image class="photo-expand-image" src="{{takePhoto ? photoPath : photoSvgData}}" mode="widthFix"></image>
+            <view class="scanner {{scannerVisible ? 'scanner-visible' : 'scanner-hidden'}}">
+              <view class="star star1"></view>
+              <view class="star star2"></view>
+              <view class="star star3"></view>
+            </view>
           </view>
         </view>
         <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />

miniprogram/pages/upload/upload.wxss

@@ -1048,8 +1048,8 @@
   display: inline-block;
   /* 初始与小卡片重叠，无额外外边距 */
   background-color: #ffffff;
-  /* border: 26rpx solid #ffffff; */
-  /* border-bottom: 40rpx solid #fff; */
+  border: 24rpx solid #ffffff;
+  border-bottom: 48rpx solid #fff;
   box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.35);
   border-radius: 12rpx;
   position: relative;
@@ -1062,11 +1062,78 @@
   width: 100%;
   height: auto;
   max-width: 100%;
-  z-index: 1;
   position: relative;
   border-radius: 12rpx;
 }
 
+.scanner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  /* width: calc(100% + 12rpx); */
+  /* height: calc(100% + 12rpx); */
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  border-radius: 12rpx;
+  /* background: linear-gradient(90deg, #D5A3E5 0%, #FDB5F0 30.43%, #F5838E 68.23%, #F0D9B6 100%); */
+  background-color: rgba(255, 255, 255, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.scanner-hidden { opacity: 0;  }
+.scanner-visible { animation: scannerFadeIn 1s 1000ms ease forwards; }
+@keyframes scannerFadeIn { from { opacity: 0 } to { opacity: 1 } }
+
+.star { position: relative; opacity: 0; transform-origin: center center; will-change: transform, opacity; }
+.star::after {
+  content:"";
+  position:absolute;
+  width: 36rpx;
+  height: 40rpx;
+  border-radius: 8rpx;
+  background: linear-gradient(337deg, #DE9EFC 7.88%, #31DAFF 107.03%);
+  transform:rotate(45deg) skewX(22.5deg) skewY(22.5deg);
+}
+.star::before{
+  content:"";
+  position:absolute;
+  width: 36rpx;
+  height: 40rpx;
+  border-radius: 8rpx;
+  background: linear-gradient(78.35deg, #DE9EFC 7.88%, #31DAFF 107.03%);
+  transform:rotate(-45deg) skewX(22.5deg) skewY(22.5deg);
+}
+
+/* .scanner-visible .star { animation: starCycle var(--cycle) ease-in-out infinite; } */
+.scanner-visible .star { animation: starCycle 3000ms ease-in-out infinite; }
+.scanner-visible .star1 { animation-delay: 1000ms; }
+.scanner-visible .star2 { animation-delay: 2000ms; }
+.scanner-visible .star3 { animation-delay: 3000ms; }
+
+@keyframes starCycle {
+  0% {
+    opacity: 0;
+    transform: translate(-20rpx, -20rpx) scale(0.5);
+  }
+  34% {
+    opacity: 1;
+    transform: translate(-20rpx, -20rpx) scale(0.5);
+  }
+  67% {
+    opacity: 1;
+    transform: translate(0rpx, 0rpx) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(36rpx, 36rpx) scale(0.5);
+  }
+}
+
 .expand-border-bg {
   position: absolute;
   top: 50%;
@@ -1124,4 +1191,4 @@
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}
     100%{background-position:0% 50%}
-}
+}

miniprogram/utils/api.ts

@@ -382,7 +382,7 @@ class ApiManager {
   ): Promise<ICloud.CallContainerResult> {
     return new Promise((resolve, reject) => {
       if (showLoading) {
-        wx.showLoading({ title: '加载中...' });
+        // wx.showLoading({ title: '加载中...' });
       }
 
       console.log('发起微信云托管请求:', {