Browse Source

添加loading

lex-xin 4 months ago
parent
commit
b1d24b55bf

+ 23 - 0
miniprogram/pages/orders/order-result.less

@@ -115,6 +115,29 @@ page {
 
 }
 
+/* HTML: <div class="loader"></div> */
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  margin-top: -50rpx;
+  margin-left: -50rpx;
+  z-index: 9;
+  width: 100rpx;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: 
+    radial-gradient(farthest-side,#E8E8E8 94%,#0000) top/8px 8px no-repeat,
+    conic-gradient(#0000 30%,#E8E8E8);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+  animation: tempLoading 1s infinite linear;
+}
+@keyframes tempLoading{ 
+  100%{transform: rotate(1turn)}
+}
+
 .qrcode-title {
   padding: 40rpx 24rpx;
   font-weight: 600;

+ 1 - 0
miniprogram/pages/orders/order-result.wxml

@@ -50,6 +50,7 @@
           <view class="left-text">{{goodsInfo.wechatStatus == 'WAIT_USE' ? '待使用' : '已使用'}}</view>
           <view class="qrcode-wrap">
             <image src="{{canvasImg}}" mode="scaleToFill" class='my_draw_canvas' style="opacity: {{ goodsInfo.wechatStatus == 'PAID' ? 0.5 : 1 }};" show-menu-by-longpress="true"></image>
+            <view class="loader" wx:if="{{!canvasImg}}"></view>
           </view>
         </view>
       </view>