diff --git a/miniprogram/pages/upload/upload.ts b/miniprogram/pages/upload/upload.ts index 783fa18..04835b1 100755 --- a/miniprogram/pages/upload/upload.ts +++ b/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) diff --git a/miniprogram/pages/upload/upload.wxml b/miniprogram/pages/upload/upload.wxml index c68bdd3..e7f247a 100755 --- a/miniprogram/pages/upload/upload.wxml +++ b/miniprogram/pages/upload/upload.wxml @@ -54,8 +54,13 @@ - + + + + + + diff --git a/miniprogram/pages/upload/upload.wxss b/miniprogram/pages/upload/upload.wxss index c72e12a..2d9a110 100755 --- a/miniprogram/pages/upload/upload.wxss +++ b/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%} -} \ No newline at end of file +} diff --git a/miniprogram/utils/api.ts b/miniprogram/utils/api.ts index 75f6c37..72437cf 100755 --- a/miniprogram/utils/api.ts +++ b/miniprogram/utils/api.ts @@ -382,7 +382,7 @@ class ApiManager { ): Promise { return new Promise((resolve, reject) => { if (showLoading) { - wx.showLoading({ title: '加载中...' }); + // wx.showLoading({ title: '加载中...' }); } console.log('发起微信云托管请求:', {