销售订单详情页骨架屏

packageA/orderForm/detail.js

@@ -2,6 +2,7 @@ const _Http = getApp().globalData.http;
 
 Page({
 	data: {
+		loading: true,
 		sa_orderid: null,
 		tabsActive: 0,
 		tabsList: [{
@@ -41,7 +42,8 @@ Page({
 				icon: "none"
 			});
 			this.setData({
-				detail: res.data
+				detail: res.data,
+				loading: false
 			});
 			this.partialRenewal(true)
 		})

packageA/orderForm/detail.scss

@@ -1,3 +1,5 @@
+@import "./detail.skeleton.wxss";
+
 .intr {
     position: relative;
     width: 100vw;

packageA/orderForm/detail.skeleton.wxml

@@ -0,0 +1,191 @@
+<!--
+此文件为开发者工具生成，生成时间: 2023/1/2下午7:11:05
+使用方法：
+在 E:\云链项目\e-wechat\packageA\orderForm\detail.wxml 引入模板
+
+```
+<import src="detail.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+```
+
+在 E:\云链项目\e-wechat\packageA\orderForm\detail.wxss 中引入样式
+```
+@import "./detail.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+-->
+<template name="skeleton">
+  <view class="sk-container">
+    <view class="intr">
+      <view class="num sk-transparent sk-text-10-0000-663 sk-text">
+        SO202212010013
+      </view>
+      <view class="tags">
+        <text style="background-color: #0079FE;" class="sk-transparent sk-text-25-0000-649 sk-text">班尼戈</text>
+        <text style="background-color: #4BD863;" class="sk-transparent sk-text-25-0000-291 sk-text">燃气</text>
+      </view>
+      <view class="exp sk-transparent sk-text-11-7647-922 sk-text">订单类型：标准订单</view>
+      <view class="exp sk-transparent sk-text-11-7647-21 sk-text">订单状态：新建</view>
+      <view class="exp sk-transparent sk-text-11-7647-855 sk-text">单据日期：暂无</view>
+      <view class="exp sk-transparent sk-text-11-7647-244 sk-text">创建日期：2022-12-01 20:26:09</view>
+      <view class="exp sk-transparent sk-text-11-7647-704 sk-text">核销状态：未核销</view>
+      <view class="exp sk-transparent sk-text-11-7647-983 sk-text">开票状态：未开票</view>
+      <view is="miniprogram_npm/@vant/weapp/button/index">
+        <button app-parameter="true" business-id="true" class="copy 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-297 sk-text" style="background-position-x: 50%;">一键复制订单</view>
+        </button>
+      </view>
+    </view>
+    <navigator class="box location">
+      <view is="miniprogram_npm/@vant/weapp/icon/index">
+        <view class="icon van-icon icon-index--van-icon van-icon-location icon-index--van-icon-location sk-pseudo sk-pseudo-circle" style="true"></view>
+      </view>
+      <view class="content">
+        <view class="name sk-transparent">
+          朱文华1
+          <text class="sk-transparent sk-text-14-2857-296 sk-text">15067346733</text>
+        </view>
+        <view class="address sk-transparent sk-text-14-2857-619 sk-text">
+          昌盛南路智慧产业创业园
+        </view>
+      </view>
+      <view class="iconfont icon-dibu-bianji sk-pseudo sk-pseudo-circle"></view>
+    </navigator>
+    <navigator class="box location">
+      <view class="content">
+        <view class="name sk-transparent sk-text-14-2857-624 sk-text">
+          开票单位
+        </view>
+        <view class="address sk-transparent sk-text-14-2857-776 sk-text">
+          抬头1
+        </view>
+      </view>
+      <view class="iconfont icon-dibu-bianji sk-pseudo sk-pseudo-circle"></view>
+    </navigator>
+    <view class="box pay">
+      <view class="title sk-transparent sk-text-14-2857-913 sk-text">
+        支付信息
+      </view>
+      <navigator class="row">
+        <view class="label sk-transparent sk-text-14-2857-937 sk-text">结算人</view>
+        <view style="font-size: 14px;" class="sk-transparent">
+          嘉兴市1号有限公司
+          <view is="miniprogram_npm/@vant/weapp/icon/index">
+            <view class="van-icon icon-index--van-icon van-icon-arrow icon-index--van-icon-arrow sk-pseudo sk-pseudo-circle" style="true"></view>
+          </view>
+        </view>
+      </navigator>
+      <navigator class="row">
+        <view class="label sk-transparent sk-text-14-2857-216 sk-text">支付账户</view>
+        <view style="font-size: 14px;" class="sk-transparent">
+          暂无
+          <view is="miniprogram_npm/@vant/weapp/icon/index">
+            <view class="van-icon icon-index--van-icon van-icon-arrow icon-index--van-icon-arrow sk-pseudo sk-pseudo-circle" style="true"></view>
+          </view>
+        </view>
+      </navigator>
+      <navigator class="row" style="font-size: 0;">
+        <view class="label sk-transparent sk-text-14-2857-484 sk-text">是否使用返利金（余额：）</view>
+        <checkbox color="#EFEFEF"></checkbox>
+      </navigator>
+      <view class="row">
+        <view class="label sk-transparent sk-text-14-2857-661 sk-text">返利金支付(最多订单金额20%)</view>
+        <view class="remarks sk-image" placeholder="使用金额" placeholder-class="placeholder" type="digit" value="true"></view>
+      </view>
+    </view>
+    <view class="box" style="padding: 5px 15px;">
+      <view class="row">
+        <view class="label sk-transparent sk-text-14-2857-68 sk-text">订单备注</view>
+        <view auto-height="true" class="remarks sk-image" placeholder="订单备注" placeholder-class="placeholder" value="true" style="height: 17px;"></view>
+      </view>
+      <navigator class="row" style="font-size: 0;">
+        <view class="label sk-transparent sk-text-14-2857-573 sk-text">是否需要回签单</view>
+        <checkbox color="#EFEFEF"></checkbox>
+      </navigator>
+    </view>
+    <view style="height: 10px;"></view>
+    <view is="components/Yl_FunTabs/index">
+      <scroll-view enable-flex="true" enable-passive="true" scroll-with-animation="true" scroll-x="true" class="scroll FunTabs-index--scroll" scroll-left="0">
+        <view class="item FunTabs-index--item active FunTabs-index--active" data-index="0" id="50e49f68--active0">
+          <view class="icon FunTabs-index--icon">
+            <text class="iconfont FunTabs-index--iconfont icon-tabchanpin FunTabs-index--icon-tabchanpin sk-pseudo sk-pseudo-circle"></text>
+          </view>
+          <view class="label FunTabs-index--label line-1 FunTabs-index--line-1 sk-transparent sk-text-14-2857-679 sk-text" style="background-position-x: 50%;">产品明细</view>
+        </view>
+        <view class="item FunTabs-index--item" data-index="1">
+          <view class="icon FunTabs-index--icon">
+            <text class="iconfont FunTabs-index--iconfont icon-tabfujian1 FunTabs-index--icon-tabfujian1 sk-pseudo sk-pseudo-circle"></text>
+          </view>
+          <view class="label FunTabs-index--label line-1 FunTabs-index--line-1 sk-transparent sk-text-14-2857-20 sk-text" style="background-position-x: 50%;">附件</view>
+        </view>
+        <view class="item FunTabs-index--item" data-index="2">
+          <view class="icon FunTabs-index--icon">
+            <text class="iconfont FunTabs-index--iconfont icon-tabcaozuojilu1 FunTabs-index--icon-tabcaozuojilu1 sk-pseudo sk-pseudo-circle"></text>
+          </view>
+          <view class="label FunTabs-index--label line-1 FunTabs-index--line-1 sk-transparent sk-text-14-2857-24 sk-text" style="background-position-x: 50%;">订单进度</view>
+        </view>
+        <view class="item FunTabs-index--item" data-index="3">
+          <view class="icon FunTabs-index--icon">
+            <text class="iconfont FunTabs-index--iconfont icon-tabkaipiaoxinxi FunTabs-index--icon-tabkaipiaoxinxi sk-pseudo sk-pseudo-circle"></text>
+          </view>
+          <view class="label FunTabs-index--label line-1 FunTabs-index--line-1 sk-transparent sk-text-14-2857-30 sk-text" style="background-position-x: 50%;">发票</view>
+        </view>
+      </scroll-view>
+      <view class="slot-box FunTabs-index--slot-box">
+        <view is="packageA/orderForm/modules/product/index" id="Product">
+          <view class="product-index--head">
+            <view class="product-index--count sk-transparent sk-text-14-2857-889 sk-text">产品明细</view>
+            <view class="product-index--expand">
+              <navigator class="product-index--but">
+                <view is="miniprogram_npm/@vant/weapp/icon/index">
+                  <view class="van-icon icon-index--van-icon van-icon-plus icon-index--van-icon-plus sk-pseudo sk-pseudo-circle" style="true"></view>
+                </view>
+              </navigator>
+            </view>
+          </view>
+          <view is="packageA/orderForm/modules/product/list/index">
+            <view class="product-item list-index--product-item">
+              <navigator class="product list-index--product" data-item="[object Object]">
+                <view class="mian list-index--mian">
+                  <view class="img list-index--img" data-file="[object Object],[object Object],[object Object],[object Object]">
+                    <view is="miniprogram_npm/@vant/weapp/image/index"></view>
+                  </view>
+                  <view class="dec list-index--dec">
+                    <view class="title list-index--title">
+                      <text class="line-1 list-index--line-1 sk-transparent sk-text-14-2857-79 sk-text">测试新增</text>
+                      <text class="tag list-index--tag sk-transparent sk-text-22-5000-211 sk-text">紧缺</text>
+                    </view>
+                  </view>
+                  <view class="delete list-index--delete" data-item="[object Object]">
+                    <text class="iconfont list-index--iconfont icon-guanlian-shanchu list-index--icon-guanlian-shanchu sk-pseudo sk-pseudo-circle"></text>
+                  </view>
+                </view>
+              </navigator>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="footer">
+      <view class="count sk-transparent sk-text-32-2222-106 sk-text">
+        ￥400
+      </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-829 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-447 sk-text" style="background-position-x: 50%;">提交订单</view>
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

packageA/orderForm/detail.skeleton.wxss

@@ -0,0 +1,205 @@
+/*
+此文件为开发者工具生成，生成时间: 2023/1/2下午7:11:06
+
+在 E:\云链项目\e-wechat\packageA\orderForm\detail.wxss 中引入样式
+```
+@import "./detail.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+*/
+.sk-transparent {
+    color: transparent !important;
+  }
+.sk-text-10-0000-663 {
+    background-image: linear-gradient(transparent 10.0000%, #EEEEEE 0%, #EEEEEE 90.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    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-25-0000-649 {
+    background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-25-0000-291 {
+    background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-922 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-21 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-855 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-244 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-704 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-11-7647-983 {
+    background-image: linear-gradient(transparent 11.7647%, #EEEEEE 0%, #EEEEEE 88.2353%, transparent 0%) !important;
+    background-size: 100% 34.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-297 {
+    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-14-2857-296 {
+    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-619 {
+    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-624 {
+    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-2857-776 {
+    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-913 {
+    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-2857-937 {
+    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-216 {
+    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-484 {
+    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-661 {
+    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-68 {
+    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-573 {
+    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-679 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-20 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-24 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-30 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-889 {
+    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-79 {
+    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-22-5000-211 {
+    background-image: linear-gradient(transparent 22.5000%, #EEEEEE 0%, #EEEEEE 77.5000%, transparent 0%) !important;
+    background-size: 100% 40.0000rpx;
+    position: relative !important;
+  }
+.sk-text-32-2222-106 {
+    background-image: linear-gradient(transparent 32.2222%, #EEEEEE 0%, #EEEEEE 67.7778%, transparent 0%) !important;
+    background-size: 100% 90.0000rpx;
+    position: relative !important;
+  }
+.sk-text-15-0000-829 {
+    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-447 {
+    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-image {
+    background: #EFEFEF !important;
+  }
+.sk-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: transparent;
+  }

packageA/orderForm/detail.wxml

@@ -1,3 +1,6 @@
+<import src="detail.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+
 <view class="intr">
     <view class="num">
         {{detail.sonum}}