From 53bcba4f8383ae82d5b60aa7bea16474607b24bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E9=B9=8F?= <jp@xiuyetang.com>
Date: Fri, 5 Jun 2020 20:04:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=88=86=E5=8C=85=EF=BC=8C?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=B7=BB=E5=8A=A0=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                                |   5 +
 package.json                                     |   1 +
 src/components/EasyLoadimage/EasyLoadimage.vue   |   7 +-
 src/components/quick-skeleton/quick-skeleton.vue | 171 +++++++++++++++++++++++
 src/pages.json                                   |  85 +++++++----
 src/pages/index/index.vue                        |  60 +++++---
 src/pages/test/index.vue                         |  96 +++++++++++++
 src/static/easy-loadimage/default.jpeg           | Bin 0 -> 2191 bytes
 src/store/modules/index.js                       |  50 ++++---
 9 files changed, 399 insertions(+), 76 deletions(-)
 create mode 100644 src/components/quick-skeleton/quick-skeleton.vue
 create mode 100644 src/pages/test/index.vue
 create mode 100644 src/static/easy-loadimage/default.jpeg

diff --git a/package-lock.json b/package-lock.json
index c13cd9b..6e3b81c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9254,6 +9254,11 @@
         "minipass": "^3.0.0"
       }
     },
+    "miniprogram-skeleton": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/miniprogram-skeleton/-/miniprogram-skeleton-1.0.3.tgz",
+      "integrity": "sha512-oDt4rPP1gRYqlNuMcN+LQ0HDcEbBssOnp/weyZQsGV6+bDM++ClIX3AVU4LQBu3CF3XZ6n5qQIJJXt70e0Igsg=="
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "http://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1703d3e..2f75640 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@dcloudio/uni-stat": "^2.0.0-26920200424005",
     "core-js": "^3.6.4",
     "flyio": "^0.6.2",
+    "miniprogram-skeleton": "^1.0.3",
     "regenerator-runtime": "^0.12.1",
     "sass-resources-loader": "^2.0.3",
     "vue": "^2.6.11",
diff --git a/src/components/EasyLoadimage/EasyLoadimage.vue b/src/components/EasyLoadimage/EasyLoadimage.vue
index a14d1d8..6448b06 100644
--- a/src/components/EasyLoadimage/EasyLoadimage.vue
+++ b/src/components/EasyLoadimage/EasyLoadimage.vue
@@ -57,7 +57,8 @@ export default{
             loadImg:false,
             showImg:false,
             isLoadError:false,
-            showTransition:false
+            showTransition:false,
+			defaultImg: '/static/easy-loadimage/loading.gif'
         }
     },
     methods:{
@@ -99,9 +100,13 @@ export default{
 </script>
 
 <style scoped>
+	.easy-loadimage{
+		min-height: 160rpx;
+	}
     /* 官方优化图片tips */
     image{
         will-change: transform
+		
     } 
     /* 渐变过渡效果处理 */
     image.origin-img{
diff --git a/src/components/quick-skeleton/quick-skeleton.vue b/src/components/quick-skeleton/quick-skeleton.vue
new file mode 100644
index 0000000..cabaec6
--- /dev/null
+++ b/src/components/quick-skeleton/quick-skeleton.vue
@@ -0,0 +1,171 @@
+<template>
+<view v-show="show" :style="{width: systemInfo.width + 'px', height: systemInfo.height + 'px', backgroundColor: bgcolor, position: 'absolute', left: 0, top: 0, zIndex: 9998, overflow: 'hidden'}">
+    <view v-for="(item,rect_idx) in skeletonRectLists" :key="rect_idx + 'rect'" :class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']" :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
+    <view v-for="(item,circle_idx) in skeletonCircleLists" :key="circle_idx + 'circle'" :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''" :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', borderRadius: item.width + 'px', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
+
+    <view class="spinbox" v-if="loading == 'spin'">
+        <view class="spin"></view>
+    </view>
+</view>
+</template>
+
+<script>
+	export default {
+		name: "skeleton",
+		props: {
+			bgcolor: {
+				type: String,
+				value: '#FFF'
+			},
+			selector: {
+				type: String,
+				value: 'skeleton'
+			},
+			loading: {
+				type: String,
+				value: 'spin'
+			},
+			show: {
+				type: Boolean,
+				value: false
+			}
+		},
+		data() {
+			return {
+				loadingAni: ['spin', 'chiaroscuro'],
+				systemInfo: {},
+				skeletonRectLists: [],
+				skeletonCircleLists: []
+			}
+		},
+		watch: {
+			show() {
+				this.attachedAction();
+				this.readyAction();
+			}
+		},
+		methods: {
+			attachedAction: function(){
+				//默认的首屏宽高，防止内容闪现
+				const systemInfo = uni.getSystemInfoSync();
+				this.systemInfo = {
+					width: systemInfo.windowWidth,
+					height: systemInfo.windowHeight
+				};
+				console.log(this.systemInfo)
+				this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';
+			},
+			readyAction: function(){
+				const that = this;
+				//绘制背景
+				uni.createSelectorQuery().selectAll(`.${this.selector}`).boundingClientRect().exec(function(res){
+					
+					that.systemInfo.height = res[0][0].height + res[0][0].top;
+				});
+				
+				//绘制矩形
+				this.rectHandle();
+
+				//绘制圆形
+				this.radiusHandle();
+			},
+			rectHandle: function(){
+				const that = this;
+
+				//绘制不带样式的节点
+				uni.createSelectorQuery().selectAll(`.${this.selector}-rect`).boundingClientRect().exec(function(res){
+					that.skeletonRectLists = res[0];
+				});
+
+			},
+			radiusHandle(){
+				const that = this;
+
+				uni.createSelectorQuery().selectAll(`.${this.selector}-radius`).boundingClientRect().exec(function(res){
+					that.skeletonCircleLists = res[0];
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+.spinbox{
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  z-index: 9999
+}
+.spin {
+  display: inline-block;
+  width: 64rpx;
+  height: 64rpx;
+}
+.spin:after {
+  content: " ";
+  display: block;
+  width: 46rpx;
+  height: 46rpx;
+  margin: 1rpx;
+  border-radius: 50%;
+  border: 5rpx solid #409eff;
+  border-color: #409eff transparent #409eff transparent;
+  animation: spin 1.2s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.chiaroscuro{
+  width: 100%;
+  height: 100%;
+  background: rgb(194, 207, 214);
+  animation-duration: 2s;
+  animation-name: blink;
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: .4;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .4;
+  }
+}
+
+@keyframes flush {
+  0% {
+    left: -100%;
+  }
+  50% {
+    left: 0;
+  }
+  100% {
+    left: 100%;
+  }
+}
+.shine {
+  animation: flush 2s linear infinite;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(to left,
+  rgba(255, 255, 255, 0) 0%,
+  rgba(255, 255, 255, .85) 50%,
+  rgba(255, 255, 255, 0) 100%
+  )
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 5b6074c..5857432 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -60,42 +60,42 @@
                 "navigationBarTitleText": "产品详情"
             }
         },
-        {
-            "path": "pages/refundProgress/refundProgress",
-            "style": {
-                "navigationBarTitleText": "申请退款"
-            }
-        },
-        {
-            "path": "pages/address/addAddress",
-            "style": {
-                "navigationBarTitleText": "新增地址"
-            }
-        },
-        {
-            "path": "pages/address/addressList",
-            "style": {
-                "navigationBarTitleText": "地址管理"
-            }
-        },
+        // {
+        //     "path": "pages/refundProgress/refundProgress",
+        //     "style": {
+        //         "navigationBarTitleText": "申请退款"
+        //     }
+        // },
+        // {
+        //     "path": "pages/address/addAddress",
+        //     "style": {
+        //         "navigationBarTitleText": "新增地址"
+        //     }
+        // },
+        // {
+        //     "path": "pages/address/addressList",
+        //     "style": {
+        //         "navigationBarTitleText": "地址管理"
+        //     }
+        // },
         {
             "path": "pages/confirmOrder/confirmOrder",
             "style": {
                 "navigationBarTitleText": "确认订单"
             }
         },
-        {
-            "path": "pages/refundment/refundWays",
-            "style": {
-                "navigationBarTitleText": "退款方式"
-            }
-        },
-        {
-            "path": "pages/refundment/refundment",
-            "style": {
-                "navigationBarTitleText": "申请退款"
-            }
-        },
+        // {
+        //     "path": "pages/refundment/refundWays",
+        //     "style": {
+        //         "navigationBarTitleText": "退款方式"
+        //     }
+        // },
+        // {
+        //     "path": "pages/refundment/refundment",
+        //     "style": {
+        //         "navigationBarTitleText": "申请退款"
+        //     }
+        // },
         {
             "path": "pages/predelivery/predelivery",
             "style": {
@@ -126,7 +126,25 @@
                 "navigationBarTitleText": "验光数据"
             }
         }
-    ],
+   ],
+  "subpackages": [
+	 {
+	   "root": "pages/refundment",
+	   "pages": [
+		 "pages/refundment/refundWays",
+		 "pages/refundment/refundment",
+		 "pages/refundProgress/refundProgress"
+	   ]
+	 },
+	 {
+	   "root": "pages/address",
+	   "name": "pack2",
+	   "pages": [
+	 		 "pages/address/addAddress",
+	 		 "pages/address/addressList"
+	   ]
+	 }
+   ],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
@@ -162,6 +180,11 @@
     "condition": {
         "current": 0,
         "list": [
+			// {
+			//     "name": "首页",
+			//     "path": "pages/test/index",
+			//     "query": ""
+			// },
             {
                 "name": "首页",
                 "path": "pages/index/index",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index a5748d7..ba6aad8 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,8 +1,9 @@
-<template>
-  <view class="content">
+<template>
+  <view class="container">
+  <view class="content skeleton" v-show="showContent">
     <view class="header">
       <!-- 搜索-->
-      <view class="searchBar">
+      <view class="searchBar skeleton-rect">
         <icon
           class="searchIcon"
           type="search"
@@ -73,7 +74,7 @@
     </Uni-drawer>
 
     <!-- 筛选菜单-->
-    <view class="content-wrap">
+    <view class="content-wrap skeleton-rect">
       <view>
         <HMfilterDropdown
           :filterData="categoryList"
@@ -93,7 +94,7 @@
         <view class="goods-list">
           <view class="product-list">
             <view
-              class="product"
+              class="product skeleton-rect"
               v-for="(goods) in goodsList"
               :key="goods.id"
             >
@@ -105,27 +106,33 @@
             </view>
           </view>
           <view class="loading-text">
-            <text v-if="isLoading==true">{{loadingText}}</text>
-            <text v-else>{{loadedText}}</text>
+            <text>{{loadedText}}</text>
+            <!-- <text v-else>{{loadedText}}</text> -->
           </view>
         </view>
         <!-- </scroll-view> -->
       </view>
-    </view>
-  </view>
+    </view>
+	</view>
+	<!--引用组件-->
+	<skeleton :show="showSkeleton"  ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
+	</view>
 </template>
 
 <script>
 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
 import Card from "@/components/CommodityCard/CommodityCard.vue";
-import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
+import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
+import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
 import store from "@/store";
+
 
 export default {
   components: {
     UniDrawer: UniDrawer,
     HMfilterDropdown: HMfilterDropdown,
-    Card: Card
+    Card: Card,
+	skeleton: skeleton
   },
   data() {
     return {
@@ -137,14 +144,15 @@ export default {
       filterDropdownValue: [],
       filterData: [],
       searchText: "",
-      scrollTop: 0,
-      viewHeight: uni.getSystemInfoSync().windowHeight
+      scrollTop: 0,
+	  showContent: true,
+      viewHeight: uni.getSystemInfoSync().windowHeight,
+	  showSkeleton: false  //骨架屏显示隐藏
     };
   },
   onPageScroll({ scrollTop }) {
     // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
     this.scrollTop = scrollTop;
-    console.log("pagescroll====>", this.viewHeight);
   },
   computed: {
     goodsList() {
@@ -160,13 +168,20 @@ export default {
     outData(value) {
       return JSON.stringify(value);
     }
+  },
+  /**
+   *  页面载入完成后调用子组件的方法生成预加载效果
+   */
+  onReady:function(){
+	 this.getInitData()
   },
-  onLoad() {
-    store.dispatch("index/category");
-    // this.getList();
-    store.dispatch("index/list");
-  },
-  methods: {
+  methods: {
+	async getInitData (){
+		this.showSkeleton = true;
+		await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
+		this.showSkeleton = false;
+		this.showContent = true
+	},
     showDrawer(e) {
       this.$refs[e].open();
     },
@@ -240,7 +255,7 @@ export default {
 </script>
 
 <style lang="scss">
-.content {
+.content,.container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -324,7 +339,8 @@ export default {
     justify-content: space-between;
     flex-wrap: wrap;
     .product {
-      width: 48%;
+      width: 48%;
+	  min-height: 120rpx;
       margin: 0 0 20rpx 0;
       background: #ffffff;
       border: 1px solid #f2f2f2;
diff --git a/src/pages/test/index.vue b/src/pages/test/index.vue
new file mode 100644
index 0000000..066639f
--- /dev/null
+++ b/src/pages/test/index.vue
@@ -0,0 +1,96 @@
+<template>
+    <view class="controller">
+        <view class="container skeleton">
+            <view class="userinfo">
+                <block>
+                    <!--skeleton-radius 绘制圆形-->
+                    <image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
+                     <!--skeleton-rect 绘制矩形-->
+                    <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
+                </block>
+            </view>
+            <view style="margin: 20px 0">
+                <view v-for="(item,index) in lists" :key="index" class="lists">
+                    <text class="skeleton-rect">{{item}}</text>
+                </view>
+            </view>
+
+            <view class="usermotto">
+                <text class="user-motto skeleton-rect">{{motto}}</text>
+            </view>
+        </view>
+        <!--引用组件-->
+        <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
+    </view>
+</template>
+
+<script>
+	//引入骨架屏组件(以我本地地址为例，具体地址由自身引用位置决定)
+	import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
+	export default {
+		data() {
+			return {
+				motto: 'Hello World',
+				userInfo: {
+					avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/s4RzXCAQsVNliaJXtHBvdpAkeRwnK7Jhiaf9mzuVqEhZza3zSYM7tJ1xZCQE9SCoOR8qjVEjDKltw1SQnxyicWq6A/132',
+					nickName: 'jayzou'
+				},
+				lists: [
+					'第1行数据',
+					'第2行数据',
+					'第3行数据',
+					'第4行数据',
+					'第5行数据',
+					'第6行数据'
+				],
+				showSkeleton: false  //骨架屏显示隐藏
+			}
+		},
+		components: {
+			skeleton
+		},
+		onLoad: function () {
+		},
+		/**
+		 *  页面载入完成后调用子组件的方法生成预加载效果
+		 */
+		onReady:function(){
+			const that = this;
+			that.showSkeleton = true;
+
+			setTimeout(() => {
+				that.showSkeleton = false;
+			}, 2000);
+		}
+	}
+</script>
+
+<style>
+.container {
+	padding: 20upx 60upx;
+}
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.userinfo-avatar {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+.userinfo-nickname {
+  color: #aaa;
+}
+.usermotto {
+  margin-top: 200px;
+}
+.lists{
+  margin: 10px 0;
+}
+.list{
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/static/easy-loadimage/default.jpeg b/src/static/easy-loadimage/default.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..105e6466d61405caefa94bf81188932f32d72fad
GIT binary patch
literal 2191
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZp@o5yja`6WfR~q-TL?(-^78ZY^9f4xa`Ezt
z%8E&d3W^F#$Z9A^NU2JTiYgi^s%mQM>FJ5f8(SD#m}^+-X)|(h0oC$K@e4?qtIDex
zYHOS8n(OLn>w+*4f)EIpgBef`L<mCuKfoZ!!El!08#AL41Ct;lvmoRDBMeeNXMzC(
z95AymF|x7)<#YuYm>8HifqZ75FTj9NIFN~%MNq^rsBoc>QKO=g<3XnniHkN)1S%H;
znFBWk%wPgpAtMM31y&R(MkYZa$3R1;|F;-;fMzoZG7B=;GyFXwb7^VeDc@hqXCyVu
zcfMjJw~kj|i>a1BoO$7^2jWv1?b=s2UiezTeF`Xh^}vg&9js3s{DD#>wlPef7N`TI
zfLa(U1B8K6vi#u;dsc9Mv5nztU)>NF!tzUQ9Xn7Lkp?>K*=?(S=~=bY+-Krt47_f8
zf5}Gv&UjOpapK+i+wMvGg12vZ9rPvL@S?U`o%l_okjt_hFV65L`;;gzHee=~tXe&B
z%D1-cl7t&+oA-QAo2)zAe7Bj+G{0GmFAP1RjI1|*yLjW##ff+4Z|gf+vpnOL@rQjU
zr))`oSUcHp0cyZQd5mv)uD$pGGLr2u$S_mMoSS=ZZuzM**R+8%NUW#t&EG9$7F$xv
z)88)M7_WKDtmlvZrc_<YAMq(?G9WQ1^3rbEWZUoa>QWE%@2Nh`p!{C$(*cg($M<Yt
zvim$MWTno{1-<phC+I+ItaditWn;T=)?LO8r_;{9JL?v0mS2`@=dJFWz!cKDSb4X7
zu56#Kr0h*#Scab}>s@Tm{br^&C<u+EASU!bi=6o9v;o81T<z(f&TFl<ldFFr%D`Y8
zyzKtTCB0fR4Xjo!t@`@Ia!XC6_3DL%M;AXnAqLS2vQ|#+!r8or8>ySqzNak)2j6_v
z$;&n{YB@oI?KsrW+E1<BF3xZL=Cc&+f?kLT?w@r|{7Vo0vR7}0;F_h?`~S%_uyw5}
zf2X}NX8$xtL$9g-)^J_D_Q&X$(bm%GRR(%)7e78(sqIcx-&aRFZhuj9f6wY=%UBZa
zuPNGJi(czfy0THi|7(Z;*J-bVWwR38g#RW9|4rR><#^N#nX9Y3FFySzbIZ<V%IjeD
znD@J$u{MCc!=I71-MxK_ar6Q+aI~)g$H?-NDKFPBcujyt`cX)nbp7<Z2u?_v8RrlE
zR!epOn;^V2WcI#4=M`2?W$@yf(X=dtQ9~<<Yi0n;f|VUwsSZL-%M?~_S^!qcKvq&q
z>$<h<?)N`3iFYn)d59j~xv;(1ZKFas-?KK^vy9ZDm2XL|z35{-%XV?Vd%r)kn4W>s
zWR}s*&DEPTKSf$)GYBn#rbtBY-ZVGM?{!}xm(N^q`q0WaqG{L>lva=}Wys}|Br<aj
z<6?m&#}qwh9-x+h*4G#7(u#pjy&%oAE$7~wE8sMI`N^h|YYeKGnLjg1d|f=p)N^iK
zw{Fk9UL*5JrZdajl6y{fl1!W8iHp*6TF<#|<Z~8y!je}cZYg%elE-<1;LZ~<Pof2$
z81gx|Jy$HAxUKt({|{S(M38VE198-=rt<avQ*s#BBOI9;{AAf$Jmm>El3%$C$XwL*
z5N&wY!fui=L7VX`2VVv!(*~If4bK{&T<!}ebNc!<*1PO)z6>o5AZd$%;RB*H3AOXe
z0>#<ujC(y(UWNsJS@h0Z-}~%!nOz(!W~*iHetvY_^}m5nqTa?Rzc}P1rET%3VBWqG
zAXiarcRa^0g9~kKg@-v`KX+Ys^^jop)`I@Uyc`+nG6pylUH==<9lN@vRwBdM+2Uc#
z*UyixXFufFdh3V#g|-$G<30)hcstXweFELF>sx9$@F>!yg(4@go7!4a^UvxDu3FT3
VRFtK(&^TOL<o5LiOkw|T0sxhngy{eP

literal 0
HcmV?d00001

diff --git a/src/store/modules/index.js b/src/store/modules/index.js
index 8052746..d16ecb5 100644
--- a/src/store/modules/index.js
+++ b/src/store/modules/index.js
@@ -7,11 +7,21 @@
    search,
  } = urlAlias;
 
+let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",
+   "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",
+   "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}
+var initArr = [1,2,3,4,5,6,7,8]
+let list = []
+initArr.forEach(function (value) {
+	list.push(initData)
+});	
+
+//初始化数据是为了显示默认骨架
  const state = {
    categoryList: [],
-   list: []
+   list: list
  };
-
+ 
  const mutations = {
    LIST: (state, list) => {
      state.list = list;
@@ -25,10 +35,9 @@
    category({
      commit
    }, param) {
-     request({
+	   return new Promise((resolve) => request({
        url: category,
        success: (res) => {
-         console.log('category', res);
          let data = res.data.data;
          for (let i = 0; i <= data.length; i++) {
            if (data[i] && data[i].type !== 'filter') {
@@ -40,35 +49,34 @@
            name: "全部",
            value: "all",
            isNoPull: true,
-
          });
          commit('CATEGORY', data);
+		 resolve(data)
+		 console.log('3333')
        },
        fail: (res) => {
          console.log("fail status === > ", res);
-       },
-       complete: (res) => {
-         console.log("complete status === > ", res);
-       },
-     })
+       }
+     }))
+     
    },
    list({
      commit
    }, param) {
-
-     request({
+	 return new Promise((resolve) =>  request({
        url: shopList,
        success: (res) => {
          commit('LIST', res.data.data)
+		  resolve(res.data)
+		  console.log('3333')
        },
        fail: (res) => {
          console.log("fail status === > ", res);
        },
        complete: (res) => {
-         console.log("complete status === > ", res);
          state.isLoading = false;
        },
-     })
+     }))
    },
    search({
      commit
@@ -76,9 +84,8 @@
      params,
      keyword
    }) {
-     const uid = uni.getStorageSync('uid');
-     console.log("params", params, keyword);
-     request({
+	  const uid = uni.getStorageSync('uid');
+	 return new Promise((resolve) => request({
        url: search,
        data: {
          params: JSON.stringify(params),
@@ -88,14 +95,13 @@
        },
        success: (res) => {
          commit('LIST', res.data.data);
+		 resolve(res.data)
        },
        fail: (res) => {
          console.log("fail status === > ", res);
-       },
-       complete: (res) => {
-         console.log("complete status === > ", res);
-       },
-     })
+       }
+     }))
+     
    },
  };
 
-- 
2.0.0