添加骨架屏

pages/teams/order.js

@@ -9,7 +9,9 @@ let sys_payorderid = null,
     }).format();
 
 Page({
-    data: {},
+    data: {
+        loading: true
+    },
     onLoad(options) {
         sys_payorderid = options.id;
         // sys_payincidence 1账号 2主体
@@ -70,7 +72,8 @@ Page({
                 }, {
                     label: "备注",
                     value: detail.remarks
-                }]
+                }],
+                loading: false
             });
         })
     },

pages/teams/order.scss

@@ -1,3 +1,4 @@
+@import "./order.skeleton.wxss";
 .row {
     width: 100vw;
     padding-left: 30rpx;

pages/teams/order.skeleton.wxml

@@ -0,0 +1,120 @@
+<!--
+此文件为开发者工具生成，生成时间: 2023/5/23下午2:56:33
+使用方法：
+在 D:\开发项目\MD_YOSwechat\pages\teams\order.wxml 引入模板
+
+```
+<import src="order.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+```
+
+在 D:\开发项目\MD_YOSwechat\pages\teams\order.wxss 中引入样式
+```
+@import "./order.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+-->
+<template name="skeleton">
+  <view class="sk-container">
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-980 sk-text">付费订单号</view>
+        <view class="text sk-transparent sk-text-14-2857-123 sk-text" style="color: #333333;">SO202305230004</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-364 sk-text">付费状态</view>
+        <view class="text sk-transparent sk-text-14-2857-158 sk-text" style="color: #FF3B30;">未付费</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-910 sk-text">付费金额</view>
+        <view class="text sk-transparent sk-text-14-2857-33 sk-text" style="color: #FF3B30;">￥0.30</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-551 sk-text">付费时间</view>
+        <view class="text sk-transparent sk-opacity" style="color: #333333;"> --</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-468 sk-text">付费版本</view>
+        <view class="text sk-transparent sk-text-14-2857-100 sk-text" style="color: #333333;">营销宝</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-836 sk-text">付费人</view>
+        <view class="text sk-transparent sk-text-14-2857-885 sk-text" style="color: #333333;">张翼</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-199 sk-text">付费渠道</view>
+        <view class="text sk-transparent sk-text-14-2857-903 sk-text" style="color: #333333;">微信支付</view>
+      </view>
+    </navigator>
+    <navigator class="row">
+      <view>
+        <view class="lebel sk-transparent sk-text-14-2857-66 sk-text">备注</view>
+        <view class="text sk-transparent sk-text-14-2857-698 sk-text" style="color: #333333;">111</view>
+      </view>
+    </navigator>
+    <view class="title sk-transparent sk-text-14-2857-294 sk-text">
+      付费订单列表
+    </view>
+    <view class="card">
+      <view class="label sk-transparent sk-text-14-2857-93 sk-text">账号名称：崔晓珊</view>
+      <view class="sk-transparent sk-text-14-7059-887 sk-text">账号：006991</view>
+      <view class="sk-transparent">单价（元）：
+        <text class="price sk-transparent sk-text-14-7059-50 sk-text">￥0.15</text>
+      </view>
+      <view class="sk-transparent sk-text-14-7059-182 sk-text">生效时间：2023-05-23</view>
+      <view class="sk-transparent sk-text-14-7059-918 sk-text">到期时间：2024-05-23</view>
+    </view>
+    <view class="card">
+      <view class="label sk-transparent sk-text-14-2857-6 sk-text">账号名称：验证3</view>
+      <view class="sk-transparent sk-text-14-7059-970 sk-text">账号：006994</view>
+      <view class="sk-transparent">单价（元）：
+        <text class="price sk-transparent sk-text-14-7059-591 sk-text">￥0.15</text>
+      </view>
+      <view class="sk-transparent sk-text-14-7059-34 sk-text">生效时间：2023-05-23</view>
+      <view class="sk-transparent sk-text-14-7059-511 sk-text">到期时间：2024-05-23</view>
+    </view>
+    <view style="height: 65px;"></view>
+    <view class="footer">
+      <view class="left">
+        <view class="sk-transparent">
+          总价：
+          <text class="price sk-transparent sk-text-31-3953-69 sk-text">￥0.30</text>
+        </view>
+      </view>
+      <view class="but-box">
+       <!--  <view is="miniprogram_npm/@vant/weapp/button/index">
+          <button app-parameter="true" business-id="true" class="but delete van-button button-index--van-button van-button--default button-index--van-button--default van-button--normal button-index--van-button--normal sk-button sk-pseudo sk-pseudo-circle"
+            data-detail="null" form-type="true" hover-class="van-button--active hover-class" lang="true" open-type="true" send-message-img="true" send-message-path="true" send-message-title="true" session-from="true" style="true">
+            <view class="van-button__text button-index--van-button__text sk-transparent sk-text-15-0000-528 sk-text" style="background-position-x: 50%;">删除订单</view>
+          </button>
+        </view> -->
+        <view is="miniprogram_npm/@vant/weapp/button/index">
+          <button app-parameter="true" business-id="true" class="but van-button button-index--van-button van-button--default button-index--van-button--default van-button--normal button-index--van-button--normal sk-button sk-pseudo sk-pseudo-circle" data-detail="null"
+            form-type="true" hover-class="van-button--active hover-class" lang="true" open-type="true" send-message-img="true" send-message-path="true" send-message-title="true" session-from="true" style="true">
+            <view class="van-button__text button-index--van-button__text sk-transparent sk-text-15-0000-836 sk-text" style="background-position-x: 50%;">继续支付</view>
+          </button>
+        </view>
+      </view>
+    </view>
+    <view is="pages/teams/modules/inventory" id="inventory">
+      <view is="miniprogram_npm/@vant/weapp/popup/index">
+        <view is="miniprogram_npm/@vant/weapp/overlay/index">
+          <view is="miniprogram_npm/@vant/weapp/transition/index"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

pages/teams/order.skeleton.wxss

@@ -0,0 +1,195 @@
+/*
+此文件为开发者工具生成，生成时间: 2023/5/23下午2:56:34
+
+在 D:\开发项目\MD_YOSwechat\pages\teams\order.wxss 中引入样式
+```
+@import "./order.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+*/
+.sk-transparent {
+    color: transparent !important;
+  }
+.sk-text-14-2857-980 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text {
+    background-origin: content-box !important;
+    background-clip: content-box !important;
+    background-color: transparent !important;
+    color: transparent !important;
+    background-repeat: repeat-y !important;
+  }
+.sk-text-14-2857-123 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-364 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-158 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-910 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-33 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-551 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-opacity {
+    opacity: 0 !important;
+  }
+.sk-text-14-2857-468 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-100 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-836 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-885 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-199 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-903 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-66 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-698 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-294 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 39.2000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-93 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-887 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-50 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-182 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-918 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-6 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-970 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-591 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-34 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-7059-511 {
+    background-image: linear-gradient(transparent 14.7059%, #EEEEEE 0%, #EEEEEE 85.2941%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-31-3953-69 {
+    background-image: linear-gradient(transparent 31.3953%, #EEEEEE 0%, #EEEEEE 68.6047%, transparent 0%) !important;
+    background-size: 100% 86.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-528 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-836 {
+    background-image: linear-gradient(transparent 15.0000%, #EEEEEE 0%, #EEEEEE 85.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-button {
+    color: #EFEFEF !important;
+    background: #EFEFEF !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+.sk-pseudo::before, .sk-pseudo::after {
+      background: #EFEFEF !important;
+      background-image: none !important;
+      color: transparent !important;
+      border-color: transparent !important;
+    }
+.sk-pseudo-rect::before, .sk-pseudo-rect::after {
+      border-radius: 0 !important;
+    }
+.sk-pseudo-circle::before, .sk-pseudo-circle::after {
+      border-radius: 50% !important;
+    }
+.sk-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: transparent;
+  }

pages/teams/order.wxml

@@ -1,3 +1,5 @@
+<import src="order.skeleton.wxml" />
+<template is="skeleton" wx:if="{{loading}}" />
 <navigator url="#" class="row" wx:for="{{showroom}}" wx:key="lebel" bindtap="{{item.func||''}}">
     <view>
         <view class="lebel">{{item.label}}</view>