618活动 开发

components/J-skeleton/J-skeleton.vue

+<template>
+  <view>
+    <view v-if="loading" class="skeleton" :class="{ animate: animate }">
+			<!-- 轮播图 -->
+			<view
+			  v-if="imgTitle"
+			  class="skeleton-imgTitle"
+			  style="width: 100%;border-radius: 20rpx;height: 260rpx;display: block;"
+			></view>
+			<!-- 分类图 -->
+			<view class="skeleton-title-content" :style="{ justifyContent: flexType}">
+				<view
+				  v-if="showCategory"
+				  class="skeleton-category"
+					v-for="(item, index) in categoryRow"
+					:key="index"
+				  :class="[categoryShape]"
+				  :style="{ width: categorySize, height: categorySize}"
+				></view>
+			</view>
+			<view class="skeleton-title-content" :style="{ justifyContent: flexType}">
+				<view
+				  v-if="showCategory"
+				  class="skeleton-category square"
+					v-for="(item, index) in categoryRow"
+					:key="index"
+				  :style="{ width: categorySize, height: categorySize}"
+				></view>
+			</view>
+			<view class="skeleton-title-content" 
+				v-for="(item, index) in itemRow" 
+				:key="index" 
+				:style="{ justifyContent: flexType}">
+				<!-- 头像图 -->
+				<view
+				  v-if="showAvatar"
+				  class="skeleton-avatar"
+					v-for="(item, index) in nameRow"
+					:key="index"
+				  :class="[avatarShape]"
+				  :style="{ width: avatarSize, height: avatarSize}"
+				></view>
+				<!-- 文字条 -->
+				<view class="skeleton-content" v-if="showTitle">
+				  <view  class="skeleton-title" :style="{ width: titleWidth }"></view>
+				  <view class="skeleton-rows">
+				    <view
+				      class="skeleton-row-item"
+				      v-for="(item, index) in rowList"
+				      :key="index"
+				      :style="{ width: item.width }"
+				    ></view>
+				  </view>
+				</view>
+			</view>
+    </view>
+    <view v-else><slot></slot></view>
+  </view>
+</template>
+
+<script>
+const DEFAULT_ROW_WIDTH = '100%'
+const DEFAULT_LAST_ROW_WIDTH = '60%'
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+		imgTitle: {
+		  type: Boolean,
+		  default: false,
+		},
+		nameRow:{
+			type: Number,
+			default: 1,
+		},
+		categoryRow:{
+			type: Number,
+			default: 1
+		},
+		itemRow:{
+			type: Number,
+			default: 4
+		},
+		flexType:{
+			type: String,
+			default: 'flex-start', // center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右
+		},
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
+		showCategory: {
+			type: Boolean,
+			default: true
+		},
+    avatarSize: {
+      type: String,
+      default: '100rpx'
+    },
+		categorySize: {
+			type: String,
+			default: '100rpx'
+		},
+    avatarShape: {
+      type: String,
+      default: 'round', // square | round
+    },
+		categoryShape: {
+			type: String,
+			default: 'round', // square | round
+		},
+    showTitle: {
+      type: Boolean,
+      default: false,
+    },
+    titleWidth: {
+      type: String,
+      default: '40%',
+    },
+    row: {
+      type: Number,
+      default: 3,
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    rowList() {
+      let list = []
+      for (let i = 0; i < this.row; i++) {
+        list.push({
+          width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
+        })
+      }
+      return list
+    },
+  },
+}
+</script>
+
+<style scoped>
+.skeleton {
+  margin: 32rpx;
+  --bg-color: #f2f3f5;
+  --row-height: 32rpx;
+  --row-margin-top: 32rpx;
+}
+.skeleton-title-content{
+	margin-top: 32rpx;
+	display: flex;
+}
+.skeleton-imgTitle {
+  flex-wrap: wrap;
+	background: var(--bg-color);
+	margin: 20rpx auto;
+}
+.skeleton-avatar {
+  flex-shrink: 0;
+  background: var(--bg-color);
+  margin-right: 16rpx;
+}
+.skeleton-category{
+	flex-shrink: 0;
+	background: var(--bg-color);
+	margin-right: 16rpx;
+	/* margin-top: 32rpx; */
+}
+.skeleton-avatar.round {
+  border-radius: 50%;
+}
+.skeleton-category.round{
+	border-radius: 50%;
+}
+
+.skeleton-content {
+  width: 100%;
+}
+
+.skeleton-title {
+  background-color: var(--bg-color);
+  height: var(--row-height);
+}
+
+.skeleton-title + .skeleton-rows {
+  margin-top: var(--row-margin-top);
+}
+
+.skeleton-rows {
+}
+
+.skeleton-row-item {
+  background-color: var(--bg-color);
+  height: var(--row-height);
+}
+.skeleton-row-item:not(:first-child) {
+  margin-top: var(--row-margin-top);
+}
+
+.skeleton.animate {
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+
+@keyframes skeleton-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

components/J-skeleton/README.md

+# skeleton
+感谢原作者 https://ext.dcloud.net.cn/plugin?id=852
+
+自己项目非常需要骨架，正好原作者发布了1.0   根据自己项目 自己修改了下。
+
+目前仅支持：
+1.轮播图
+2.分类栏
+3.头像
+4.文章条
+5.动态心情
+
+以上是根据自己项目修改的，后续再拓展，或者自己根据自己项目修改，原作者写的还是很灵活的，修改方便！
+
+
+## 属性说明
+
+|属性名|类型|默认值|说明|
+| -- | -- | --|--|
+| loading | Boolean | true | 是否显示占位图 |
+| flexType | String | flex-start | 排列方式 center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右 |
+| imgTitle | Boolean | false | 轮播图占位图 |
+| showAvatar | Boolean | true | 是否显示头像占位图 |
+| nameRow | Number | 1 | 显示头像圆1个 |
+| avatarSize | String | 50px | 头像站占位图大小 |
+| avatarShape | String | round | 头像形状，可选值：round, square |
+| showTitle | Boolean | true | 是否显示标题占位图 |
+| titleWidth | String | 40% | 标题占位图宽度 |
+| row | Number|  3 | 标题段落占位图行数 |
+| animate | Boolean | true | 是否开启动画 |
+
+## 使用示例
+
+```html
+<skeleton
+  :loading="loading"
+  :avatarSize="skeleton1.avatarSize"
+  :row="skeleton1.row"
+  :showTitle="skeleton1.showTitle"
+>
+  <view class="section-content">我是段落1</view>
+</skeleton>
+```
+
+```javascript
+import Skeleton from '../components/skeleton/index.vue'
+export default {
+  components: {
+    Skeleton
+  },
+  data() {
+    return {
+      loading: true,
+      skeleton1 : {
+        avatarSize: '52px',
+        row: 3,
+        showTitle: true,
+      }
+    }
+  },
+  created() {
+    this.reloadData()
+  },
+  methods: {
+    reloadData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 3000)
+    },
+  },
+}
+```
+
+## 效果图
+
+![](http://images.alisali.cn/img_20191014113211.png)

components/uni-popup/uni-popup.vue

@@ -167,7 +167,7 @@
 		left: 0;
 		right: 0;
 		/* #ifndef APP-NVUE */
-		z-index: 99;
+		z-index: 999999;
 		/* #endif */
 	}
 

main.js

@@ -60,6 +60,7 @@ function __reloadResource(_this) {
 	_this._source.default_image =
 		'https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190605/goods/5cf78b96601be.png?x-oss-process=image/resize,m_lfit,w_300,h_300/auto-orient,0/quality,Q_85/format,jpg';
 }
+// 毫秒数转时间
 
 // 跳转商品详情页,只传一个商品ID,方便以后全局修改
 

manifest.json

@@ -2,7 +2,7 @@
   "name": "shop_mobile_uni",
   "appid": "__UNI__F904656",
   "description": "",
-  "versionName": "1.0.9",
+  "versionName": "1.0.10",
   "versionCode": "100",
   "transformPx": false,
   "app-plus": {
@@ -51,7 +51,7 @@
       "mode": "history",
       "base": "/uni"
     },
-    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/prod/1.0.9/",
+    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/prod/1.0.10/",
     "optimization": {
       "treeShaking": {
         "enable": true

pages/home/home.vue

 <template>
+	<skeleton
+		:loading="loading"
+		:avatarSize="skeleton1.avatarSize"
+		:row="skeleton1.row"
+		:showTitle="skeleton1.showTitle"
+		:imgTitle='skeleton1.imgTitle'
+		:categoryRow= 'skeleton1.categoryRow'
+		:flexType='skeleton1.flexType'
+		:categorySize='skeleton1.categorySize'
+		:avatarShape='skeleton1.avatarShape'
+		:titleWidth='skeleton1.titleWidth'
+	>
 		<view class="homeContent">
 			<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin" :ref="item.name"></component>
 			<BottomBar />
+			<uni-popup ref="popup" type="center" :maskClick="false">
+				<img 
+					src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20200311/3cfb41a8-e0e6-4bf2-8e30-24623a93351a.gif" 
+					width='200' 
+					height='200'>
+			</uni-popup>
 		</view>
+	</skeleton>
 </template>
 
 <script>
@@ -17,19 +36,34 @@
 	import CustomStyle from './components/custowstyle.vue';
 	import MultImage from './components/multimage.vue';
 	import BottomBar from "@/components/BottomBar/BottomBar.vue";
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+	import Skeleton from '@/components/J-skeleton/J-skeleton.vue';
 	export default {
 		data() {
 			return {
 				data: [],
 				isLogin: 0,
-				fixFlag: false
+				fixFlag: false,
+				loading: true,
+				skeleton1 : {
+				  avatarSize: '160rpx',
+				  row: 2,
+				  showTitle: true,
+					imgTitle: true,
+					flexType: 'space-between',
+					categoryRow: 4,
+					categorySize: '110rpx',
+					avatarShape: 'square',
+					titleWidth: '100%'
+				}
 			}
 		},
 		onLoad() {
+			this.loading = true;
 			this.getData();
-			uni.showLoading({
-			    title: '加载中'
-			});
+			// uni.showLoading({
+			//   title: '加载中'
+			// });
 			// #ifdef H5
 			//默认请求微信分享
 			if (this.$wechat && this.$wechat.isWechat()) {
@@ -54,9 +88,33 @@
 					method: 'GET',
 					dataType: 'json',
 					success: (res) => {
+						if(res && res.data && res.data.code === 0){
 							this.data = res.data.data;
 							this.isLogin = res.data.login_flg;
-						uni.hideLoading();
+							// uni.hideLoading();
+							this.loading = false;
+							// 打开广告弹窗
+							const timestamp = new Date('2020/05/18 00:00:00').getTime() / 1000;
+							console.log(timestamp);
+							if(res.data.login_flg === 1 && res.data.reg_time > timestamp){
+								setTimeout(() => {
+									this.$refs.popup.open();
+								}, 600);
+							}
+						}else{
+							uni.showToast({
+							    title: '获取数据失败，请重试~',
+							    duration: 2000,
+									icon: 'none'
+							});
+						}	
+					},
+					fail: () => {
+						uni.showToast({
+						    title: '获取数据失败，请重试~',
+						    duration: 2000,
+								icon: 'none'
+						});
 					}
 				});
 			}
@@ -72,7 +130,9 @@
 			Promotion,
 			HotRecommd,
 			CustomStyle,
-			MultImage
+			MultImage,
+			uniPopup,
+			Skeleton
 		}
 	}
 </script>

pages/search/search.vue

@@ -239,7 +239,7 @@
 }
 .search-content{
 	display: flex;
-	justify-content: start;
+	justify-content: flex-start;
 	align-items: center;
 	height: 88rpx;
 	padding: 0 20rpx;
@@ -255,7 +255,7 @@
 		background-color: #F8F8F8;
 		border-radius: 60rpx;
 		display: flex;
-		justify-content: start;
+		justify-content: flex-start;
 		align-items: center;
 		.search-input_val{
 			position: absolute;

pages/searchhistory/searchhistory.vue

@@ -224,7 +224,7 @@
 <style lang="less" scoped>
 	.search-content{
 		display: flex;
-		justify-content: start;
+		justify-content: flex-start;
 		align-items: center;
 		height: 100rpx;
 		padding: 0 20rpx;
@@ -247,7 +247,7 @@
 			border: 3rpx solid #D0D0D0;
 			border-radius: 60rpx;
 			display: flex;
-			justify-content: start;
+			justify-content: flex-start;
 			align-items: center;
 			.uni-searchbar__box-icon-search{
 				width: 56rpx;

pages/wxpay/wxpay.vue

@@ -150,7 +150,7 @@
 		height: 100rpx;
 		padding: 0 20rpx;
 		display: flex;
-		justify-content: start;
+		justify-content: flex-start;
 		align-items: center;
 		position: relative;
 		.search-icon-arrowleft{

pages/yuepay/yuepay.vue

@@ -136,7 +136,7 @@
 		height: 100rpx;
 		padding: 0 20rpx;
 		display: flex;
-		justify-content: start;
+		justify-content: flex-start;
 		align-items: center;
 		position: relative;
 		background-color: #fff;