Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
shop_mobile_uni
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
郑秀明
shop_mobile_uni
Commits
bc960610
Commit
bc960610
authored
May 12, 2020
by
郑秀明
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'zxm_618_dev' into develop
parents
04175859
39d76ee7
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
383 additions
and
23 deletions
+383
-23
J-skeleton.vue
components/J-skeleton/J-skeleton.vue
+222
-0
README.md
components/J-skeleton/README.md
+77
-0
uni-popup.vue
components/uni-popup/uni-popup.vue
+1
-1
main.js
main.js
+1
-0
manifest.json
manifest.json
+2
-2
home.vue
pages/home/home.vue
+74
-14
search.vue
pages/search/search.vue
+2
-2
searchhistory.vue
pages/searchhistory/searchhistory.vue
+2
-2
wxpay.vue
pages/wxpay/wxpay.vue
+1
-1
yuepay.vue
pages/yuepay/yuepay.vue
+1
-1
No files found.
components/J-skeleton/J-skeleton.vue
0 → 100644
View file @
bc960610
<
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
:
32
rpx
;
--bg-color
:
#f2f3f5
;
--row-height
:
32
rpx
;
--row-margin-top
:
32
rpx
;
}
.skeleton-title-content
{
margin-top
:
32
rpx
;
display
:
flex
;
}
.skeleton-imgTitle
{
flex-wrap
:
wrap
;
background
:
var
(
--bg-color
);
margin
:
20
rpx
auto
;
}
.skeleton-avatar
{
flex-shrink
:
0
;
background
:
var
(
--bg-color
);
margin-right
:
16
rpx
;
}
.skeleton-category
{
flex-shrink
:
0
;
background
:
var
(
--bg-color
);
margin-right
:
16
rpx
;
/* 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
0 → 100644
View file @
bc960610
# 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
)
},
},
}
```
## 效果图

components/uni-popup/uni-popup.vue
View file @
bc960610
...
@@ -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
:
99
9999
;
/* #endif */
/* #endif */
}
}
...
...
main.js
View file @
bc960610
...
@@ -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,方便以后全局修改
...
...
manifest.json
View file @
bc960610
...
@@ -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
...
...
pages/home/home.vue
View file @
bc960610
<
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
>
...
...
pages/search/search.vue
View file @
bc960610
...
@@ -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;
...
...
pages/searchhistory/searchhistory.vue
View file @
bc960610
...
@@ -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;
...
...
pages/wxpay/wxpay.vue
View file @
bc960610
...
@@ -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
{
...
...
pages/yuepay/yuepay.vue
View file @
bc960610
...
@@ -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
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment