no message

app.wxss

@@ -1,6 +1,7 @@
 @import "colorui/main.wxss";
 @import "colorui/icon.wxss";
 @import "colorui/animation.wxss";
+@import 'assets/styles/skyvow.wxss';
 
 /**app.wxss**/
 .scrollPage {

assets/styles/skyvow.wxss

@@ -0,0 +1,118 @@
+page{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	color: #333;
+    background-color: #f8f8f8;
+    font-size: 16px;
+    /*font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;*/
+    font-family: PingFang SC,Helvetica Neue,Hiragino Sans GB,Helvetica,Microsoft YaHei,Arial;
+    -ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.page__hd {
+    padding: 40px;
+}
+
+.page__bd {
+    padding-bottom: 40px;
+}
+
+.page__bd_spacing {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.page__ft{
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.page__desc {
+    margin-top: 5px;
+    color: #888888;
+    text-align: left;
+    font-size: 14px;
+}
+
+.placeholder {
+    background-color: #ebebef;
+    color: #bbb;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.sub-title {
+    padding: 30rpx 30rpx 18rpx;
+    font-size: 28rpx;
+    color: #888;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.button-sp-area {
+    margin: 20px auto 0;
+    width: 80%;
+    text-align: center;
+}
+
+.btn-area {
+    margin: 1.17647059em 15px 0.3em;
+}
+
+.btn-area button {
+    margin-bottom: 10px;
+}
+
+.btn-area button:last-child {
+    margin-bottom: 0;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.btn-group {
+    position: relative;
+    z-index: 1010;
+    margin-bottom: 50px;
+}
+
+.logo {
+    padding: 30rpx;
+    text-align: center;
+}
+
+.logo image {
+    width: 200rpx;
+    height: 200rpx;
+}
+
+.logo__text {
+    font-size: 48rpx;
+    font-weight: bold;
+    font-style: italic;
+    background: -webkit-linear-gradient(left, #04BE02 , #2d8cf0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
+}

components/skeleton-avatar/index.js

@@ -0,0 +1,49 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    relations: {
+        '../skeleton/index': {
+            type: 'ancestor',
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-skeleton-avatar',
+        },
+        size: {
+            type: String,
+            value: 'default',
+        },
+        shape: {
+            type: String,
+            value: 'circle',
+        },
+    },
+    data: {
+        active: false,
+    },
+    computed: {
+        classes: ['prefixCls, active, size, shape', function(prefixCls, active, size, shape) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--active`]: active,
+                [`${prefixCls}--${size}`]: size,
+                [`${prefixCls}--${shape}`]: shape,
+            })
+
+            return {
+                wrap,
+            }
+        }],
+    },
+    methods: {
+    	updated(active) {
+            if (this.data.active !== active) {
+                this.setData({
+                    active,
+                })
+            }
+        },
+    },
+})

components/skeleton-avatar/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/skeleton-avatar/index.wxml

@@ -0,0 +1 @@
+<view class="wux-class {{ classes.wrap }}"></view>

components/skeleton-avatar/index.wxss

@@ -0,0 +1,58 @@
+.wux-skeleton-avatar {
+  display: inline-block;
+  vertical-align: top;
+  background: #f2f2f2;
+  width: 80rpx;
+  height: 80rpx;
+  line-height: 80rpx
+}
+.wux-skeleton-avatar--small {
+  width: 64rpx;
+  height: 64rpx;
+  line-height: 64rpx
+}
+.wux-skeleton-avatar--large {
+  width: 96rpx;
+  height: 96rpx;
+  line-height: 96rpx
+}
+.wux-skeleton-avatar--page {
+  width: 220rpx;
+  height: 220rpx;
+  line-height: 220rpx
+}
+
+.wux-skeleton-avatar--title {
+  width: 100%;
+  height: 120rpx;
+  line-height: 120rpx
+}
+
+.wux-skeleton-avatar--full {
+  width: 100%;
+  height: 240rpx;
+  line-height: 240rpx
+}
+
+.wux-skeleton-avatar--circle {
+  border-radius: 50%
+}
+.wux-skeleton-avatar--rounded {
+  border-radius: 8rpx
+}
+.wux-skeleton-avatar--square {
+  border-radius: 0
+}
+.wux-skeleton-avatar--active {
+  background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
+  animation: loading 1.4s ease infinite;
+  background-size: 400% 100%
+}
+@keyframes loading {
+  0% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0 50%
+  }
+}

components/skeleton-paragraph/index.js

@@ -0,0 +1,59 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    relations: {
+        '../skeleton/index': {
+            type: 'ancestor',
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-skeleton-paragraph',
+        },
+        rows: {
+            type: Number,
+            value: 3,
+        },
+        rounded: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        active: false,
+        rowList: [],
+    },
+    computed: {
+        classes: ['prefixCls, active, rounded', function(prefixCls, active, rounded) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--active`]: active,
+                [`${prefixCls}--rounded`]: rounded,
+            })
+            const row = `${prefixCls}__row`
+
+            return {
+                wrap,
+                row,
+            }
+        }],
+    },
+    methods: {
+    	updated(active) {
+            if (this.data.active !== active) {
+                this.setData({
+                    active,
+                })
+            }
+        },
+        updateRows(rows = this.data.rows) {
+            this.setData({
+                rowList: [...Array(rows)].map((_, index) => index),
+            })
+        },
+    },
+    attached() {
+        this.updateRows()
+    },
+})

components/skeleton-paragraph/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/skeleton-paragraph/index.wxml

@@ -0,0 +1,5 @@
+<view class="wux-class {{ classes.wrap }}">
+    <block wx:for="{{ rowList }}" wx:key="">
+        <view class="{{ classes.row }}"></view>
+    </block>
+</view>

components/skeleton-paragraph/index.wxss

@@ -0,0 +1,41 @@
+.wux-skeleton-paragraph {
+  position: relative;
+  overflow: hidden
+}
+.wux-skeleton-paragraph__row {
+  height: 32rpx;
+  background: #f2f2f2;
+  width: 100%;
+  margin-top: 32rpx
+}
+.wux-skeleton-paragraph__row:first-child {
+  margin-top: 0
+}
+.wux-skeleton-paragraph__row:nth-child(4n+1) {
+  width: 80%
+}
+.wux-skeleton-paragraph__row:nth-child(4n+2) {
+  width: 100%
+}
+.wux-skeleton-paragraph__row:nth-child(4n+3) {
+  width: 70%
+}
+.wux-skeleton-paragraph__row:nth-child(4n+4) {
+  width: 85%
+}
+.wux-skeleton-paragraph--rounded .wux-skeleton-paragraph__row {
+  border-radius: 8rpx
+}
+.wux-skeleton-paragraph--active .wux-skeleton-paragraph__row {
+  background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
+  animation: loading 1.4s ease infinite;
+  background-size: 400% 100%
+}
+@keyframes loading {
+  0% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0 50%
+  }
+}

components/skeleton/index.js

@@ -0,0 +1,59 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    relations: {
+        '../skeleton-avatar/index': {
+            type: 'descendant',
+            observer() {
+                this.debounce(this.updated)
+            },
+        },
+        '../skeleton-paragraph/index': {
+            type: 'descendant',
+            observer() {
+                this.debounce(this.updated)
+            },
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-skeleton',
+        },
+        active: {
+            type: Boolean,
+            value: false,
+            observer: 'updated',
+        },
+    },
+    computed: {
+        classes: ['prefixCls, active', function(prefixCls, active) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--active`]: active,
+            })
+
+            return {
+                wrap,
+            }
+        }],
+    },
+    methods: {
+        updated(active = this.data.active) {
+            const avatar = this.getRelationNodes('../skeleton-avatar/index')
+            const paragraph = this.getRelationNodes('../skeleton-paragraph/index')
+
+            if (avatar.length > 0) {
+                avatar.forEach((element) => {
+                    element.updated(active)
+                })
+            }
+
+            if (paragraph.length > 0) {
+                paragraph.forEach((element) => {
+                    element.updated(active)
+                })
+            }
+        },
+    },
+})

components/skeleton/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/skeleton/index.wxml

@@ -0,0 +1,3 @@
+<view class="wux-class {{ classes.wrap }}">
+    <slot></slot>
+</view>

components/skeleton/index.wxss

@@ -0,0 +1,4 @@
+.wux-skeleton {
+  position: relative;
+  width: 100%
+}

pages/mall/shops/index.json

@@ -1,5 +1,10 @@
 {
   "usingComponents": {
+    "wux-skeleton": "/components/skeleton/index",
+    "wux-skeleton-avatar": "/components/skeleton-avatar/index",
+    "wux-skeleton-paragraph": "/components/skeleton-paragraph/index",
+    "wux-row": "/components/row/index",
+    "wux-col": "/components/col/index",
     "refresh-view": "/components/refresh-view/index",
     "wux-button": "/components/button/index",
     "wux-tab": "/components/tab/index",

pages/mall/shops/index.wxml

@@ -4,10 +4,77 @@
 </cu-custom>
 
 <!-- <refresh-view refreshing="false" refreshed="{{!requesting}}" bind:refresh="onRefresh"> -->
-<view class="flex flex-column flex-center" wx:if="{{loading}}" style="height:{{height}}rpx">
+<!-- <view class="flex flex-column flex-center" wx:if="{{loading}}" style="height:{{height}}rpx">
 	<view class="load-spinner text-gray" />
 	<view class="text-empty" style="margin-top:48rpx">加载中...</view>
+</view> -->
+
+<view wx:if="{{loading}}" class="page__bd page__bd_spacing">
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-skeleton-avatar shape="rounded" size="full" />
+		</wux-row>
+	</wux-skeleton>
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-skeleton-avatar shape="rounded" size="title" />
+		</wux-row>
+	</wux-skeleton>
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-col span="4">
+				<wux-skeleton-avatar shape="rounded" size="page" />
+			</wux-col>
+			<wux-col span="1">
+			</wux-col>
+			<wux-col span="8">
+				<view style="margin-left:16rpx">
+					<wux-skeleton-paragraph rounded rows="4" />
+				</view>
+			</wux-col>
+		</wux-row>
+	</wux-skeleton>
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-skeleton-avatar shape="rounded" size="title" />
+		</wux-row>
+	</wux-skeleton>
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-col span="4">
+				<wux-skeleton-avatar shape="rounded" size="page" />
+			</wux-col>
+			<wux-col span="1">
+			</wux-col>
+			<wux-col span="8">
+				<view style="margin-left:16rpx">
+					<wux-skeleton-paragraph rounded rows="4" />
+				</view>
+			</wux-col>
+		</wux-row>
+	</wux-skeleton>
+	<view class="sub-title"></view>
+	<wux-skeleton active>
+		<wux-row>
+			<wux-col span="4">
+				<wux-skeleton-avatar shape="rounded" size="page" />
+			</wux-col>
+			<wux-col span="1">
+			</wux-col>
+			<wux-col span="8">
+				<view style="margin-left:16rpx">
+					<wux-skeleton-paragraph rounded rows="4" />
+				</view>
+			</wux-col>
+		</wux-row>
+	</wux-skeleton>
 </view>
+
 <view class="flex list-empty" wx:elif="{{!taskList.length && !cheapList.length}}" style="height:{{height}}rpx">
 	<image class="img-empty" src="/assets/image/list_empty.png"></image>
 	<view class="text-empty">暂无数据</view>