Commit bc960610 authored by 郑秀明's avatar 郑秀明

Merge branch 'zxm_618_dev' into develop

parents 04175859 39d76ee7
<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>
# 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)
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
left: 0; left: 0;
right: 0; right: 0;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 99; z-index: 999999;
/* #endif */ /* #endif */
} }
......
...@@ -60,6 +60,7 @@ function __reloadResource(_this) { ...@@ -60,6 +60,7 @@ function __reloadResource(_this) {
_this._source.default_image = _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'; '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,方便以后全局修改 // 跳转商品详情页,只传一个商品ID,方便以后全局修改
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name": "shop_mobile_uni", "name": "shop_mobile_uni",
"appid": "__UNI__F904656", "appid": "__UNI__F904656",
"description": "", "description": "",
"versionName": "1.0.9", "versionName": "1.0.10",
"versionCode": "100", "versionCode": "100",
"transformPx": false, "transformPx": false,
"app-plus": { "app-plus": {
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
"mode": "history", "mode": "history",
"base": "/uni" "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": { "optimization": {
"treeShaking": { "treeShaking": {
"enable": true "enable": true
......
<template> <template>
<view class="homeContent"> <skeleton
<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin" :ref="item.name"></component> :loading="loading"
<BottomBar /> :avatarSize="skeleton1.avatarSize"
</view> :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> </template>
<script> <script>
...@@ -16,20 +35,35 @@ ...@@ -16,20 +35,35 @@
import HotRecommd from './components/hotrecommd.vue'; import HotRecommd from './components/hotrecommd.vue';
import CustomStyle from './components/custowstyle.vue'; import CustomStyle from './components/custowstyle.vue';
import MultImage from './components/multimage.vue'; import MultImage from './components/multimage.vue';
import BottomBar from "@/components/BottomBar/BottomBar.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 { export default {
data() { data() {
return { return {
data: [], data: [],
isLogin: 0, 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() { onLoad() {
this.loading = true;
this.getData(); this.getData();
uni.showLoading({ // uni.showLoading({
title: '加载中' // title: '加载中'
}); // });
// #ifdef H5 // #ifdef H5
//默认请求微信分享 //默认请求微信分享
if (this.$wechat && this.$wechat.isWechat()) { if (this.$wechat && this.$wechat.isWechat()) {
...@@ -54,9 +88,33 @@ ...@@ -54,9 +88,33 @@
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
this.data = res.data.data; if(res && res.data && res.data.code === 0){
this.isLogin = res.data.login_flg; this.data = res.data.data;
uni.hideLoading(); this.isLogin = res.data.login_flg;
// 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 @@ ...@@ -72,7 +130,9 @@
Promotion, Promotion,
HotRecommd, HotRecommd,
CustomStyle, CustomStyle,
MultImage MultImage,
uniPopup,
Skeleton
} }
} }
</script> </script>
......
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
} }
.search-content{ .search-content{
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
height: 88rpx; height: 88rpx;
padding: 0 20rpx; padding: 0 20rpx;
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
background-color: #F8F8F8; background-color: #F8F8F8;
border-radius: 60rpx; border-radius: 60rpx;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
.search-input_val{ .search-input_val{
position: absolute; position: absolute;
......
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.search-content{ .search-content{
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
height: 100rpx; height: 100rpx;
padding: 0 20rpx; padding: 0 20rpx;
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
border: 3rpx solid #D0D0D0; border: 3rpx solid #D0D0D0;
border-radius: 60rpx; border-radius: 60rpx;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
.uni-searchbar__box-icon-search{ .uni-searchbar__box-icon-search{
width: 56rpx; width: 56rpx;
......
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
height: 100rpx; height: 100rpx;
padding: 0 20rpx; padding: 0 20rpx;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
position: relative; position: relative;
.search-icon-arrowleft{ .search-icon-arrowleft{
......
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
height: 100rpx; height: 100rpx;
padding: 0 20rpx; padding: 0 20rpx;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment