Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
dev
/
zhiliang-light-mp
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
fafba665
authored
2019-07-25 14:57:51 +0800
by
simon
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
版本提交
1 parent
fca038b5
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
702 additions
and
157 deletions
src/app.scss
src/assets/scss/_mixins.scss
src/assets/scss/_utils.scss
src/pages/address-management/address-management.js
src/pages/address-management/address-management.json
src/pages/address-management/address-management.scss
src/pages/address-management/address-management.wxml
src/pages/gift-detail/gift-detail.js
src/pages/gift-detail/gift-detail.json
src/pages/gift-detail/gift-detail.scss
src/pages/gift-detail/gift-detail.wxml
src/pages/gift-shop/gift-shop.js
src/pages/gift-shop/gift-shop.scss
src/pages/gift-shop/gift-shop.wxml
src/pages/index/index.scss
src/utils/util.js
src/app.scss
View file @
fafba66
...
...
@@ -19,68 +19,68 @@
// @lazysprite "filetype";
.test
{
background-image
:
url(%ASSETS_IMG%/qr-r.jpg)
;
background-image
:
url(%ASSETS_IMG%/qr-r.jpg)
;
}
.app
{
height
:
100%
;
justify-content
:
space-between
;
// text-align: center;
box-sizing
:
border-box
;
font-family
:
-
apple-system-font
,
Helvetica
Neue
,
Helvetica
,
sans-serif
,
FZY3JW-GB1-0
;
height
:
100%
;
justify-content
:
space-between
;
// text-align: center;
box-sizing
:
border-box
;
font-family
:
PingFangSC-Regular
,
-
apple-system-font
,
Helvetica
Neue
,
Helvetica
,
sans-serif
,
FZY3JW-GB1-0
;
}
.app__width
{
width
:
750px
;
width
:
750px
;
}
.app__width
{
width
:
750px
;
width
:
750px
;
}
.app__inner
{
margin
:
20px
;
margin
:
20px
;
}
.app__title
{
font-size
:
$fontSize
;
line-height
:
$fontSize
+
4px
;
font-weight
:
bold
;
padding-bottom
:
10px
;
margin-bottom
:
20px
;
border-bottom
:
.5px
solid
#EEEEEE
;
font-size
:
$fontSize
;
line-height
:
$fontSize
+
4px
;
font-weight
:
bold
;
padding-bottom
:
10px
;
margin-bottom
:
20px
;
border-bottom
:
.5px
solid
#EEEEEE
;
}
.app__desc
{
font-size
:
$fontSizeSmaller
;
line-height
:
$fontSizeSmaller
+
2px
;
margin-bottom
:
20px
;
color
:
$colorGray
;
font-size
:
$fontSizeSmaller
;
line-height
:
$fontSizeSmaller
+
2px
;
margin-bottom
:
20px
;
color
:
$colorGray
;
}
.app__bgc
{
position
:
fixed
;
background-color
:
#ffffff
;
width
:
100%
;
height
:
100%
;
position
:
fixed
;
background-color
:
#ffffff
;
width
:
100%
;
height
:
100%
;
}
.app__bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
width
:
100%
;
height
:
100%
;
}
.app__top-shadow
{
position
:
fixed
;
width
:
750px
;
height
:
1px
;
box-shadow
:
0px
4px
0
.9px
0
.1px
rgba
(
6
,
0
,
1
,
0
.07
);
background-color
:
#ffffff
;
position
:
fixed
;
width
:
750px
;
height
:
1px
;
box-shadow
:
0px
4px
0
.9px
0
.1px
rgba
(
6
,
0
,
1
,
0
.07
);
background-color
:
#ffffff
;
}
.app__content
{
position
:
relative
;
position
:
relative
;
}
...
...
@@ -88,26 +88,31 @@
// web font icon
@font-face
{
font-family
:
"iconfont"
;
src
:
url
(
'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA=='
)
format
(
'woff2'
),
font-family
:
"iconfont"
;
src
:
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA==')
format
(
'woff2'
)
,
}
.iconfont
{
font-family
:
"iconfont"
!
important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
font-family
:
"iconfont"
!
important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
.iconrefresh
:before
{
content
:
"\e874"
;
content
:
"\e874"
;
}
.iconempty
:before
{
content
:
"\e6a6"
;
content
:
"\e6a6"
;
}
.drop-down-item
:last-child
{
border-bottom
:
none
;
border-bottom
:
none
;
}
.link
{
color
:
$colorBlue
;
}
...
...
src/assets/scss/_mixins.scss
View file @
fafba66
...
...
@@ -8,75 +8,95 @@
*
*/
// 居中按钮样式
@mixin
btn-center
(
$width
,
$height
)
{
width
:
$width
;
height
:
$height
;
line-height
:
$height
;
text-align
:
center
;
}
// 超过多少行自动省略 默认一行
@mixin
ellipsis
(
$line
:
1
)
{
display
:
-
webkit-box
;
word-break
:
break-all
;
-webkit-box-orient
:
vertical
;
-webkit-line-clamp
:
$line
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
// 文字截取
@mixin
text-overflow
()
{
overflow
:
hidden
;
white-space
:
normal
;
text-overflow
:
ellipsis
;
word-break
:
break-all
;
word-wrap
:
normal
;
overflow
:
hidden
;
white-space
:
normal
;
text-overflow
:
ellipsis
;
word-break
:
break-all
;
word-wrap
:
normal
;
}
@mixin
word-break
()
{
word-break
:
break-all
;
word-wrap
:
break-word
;
white-space
:
normal
;
word-break
:
break-all
;
word-wrap
:
break-word
;
white-space
:
normal
;
}
// No wrap
@mixin
no-wrap
()
{
word-break
:
normal
;
word-wrap
:
normal
;
white-space
:
nowrap
;
word-break
:
normal
;
word-wrap
:
normal
;
white-space
:
nowrap
;
}
// 清除浮动
@mixin
clearfix
()
{
&
:before
,
&
:after
{
content
:
" "
;
// 1
display
:
table
;
// 2
}
&
:after
{
clear
:
both
;
}
&
:before
,
&
:after
{
content
:
" "
;
// 1
display
:
table
;
// 2
}
&
:after
{
clear
:
both
;
}
}
// Single side border-radius
@mixin
border-top-radius
(
$radius
)
{
border-top-right-radius
:
$radius
;
border-top-left-radius
:
$radius
;
border-top-right-radius
:
$radius
;
border-top-left-radius
:
$radius
;
}
@mixin
border-right-radius
(
$radius
)
{
border-bottom-right-radius
:
$radius
;
border-top-right-radius
:
$radius
;
border-bottom-right-radius
:
$radius
;
border-top-right-radius
:
$radius
;
}
@mixin
border-bottom-radius
(
$radius
)
{
border-bottom-right-radius
:
$radius
;
border-bottom-left-radius
:
$radius
;
border-bottom-right-radius
:
$radius
;
border-bottom-left-radius
:
$radius
;
}
@mixin
border-left-radius
(
$radius
)
{
border-bottom-left-radius
:
$radius
;
border-top-left-radius
:
$radius
;
border-bottom-left-radius
:
$radius
;
border-top-left-radius
:
$radius
;
}
// Center-align a block level element
@mixin
center-block
()
{
display
:
block
;
margin-left
:
auto
;
margin-right
:
auto
;
display
:
block
;
margin-left
:
auto
;
margin-right
:
auto
;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin
hide-text
()
{
font-size
:
0
;
line-height
:
0
;
color
:
transparent
;
text-shadow
:
none
;
background-color
:
transparent
;
border
:
0
;
font-size
:
0
;
line-height
:
0
;
color
:
transparent
;
text-shadow
:
none
;
background-color
:
transparent
;
border
:
0
;
}
...
...
src/assets/scss/_utils.scss
View file @
fafba66
...
...
@@ -237,3 +237,8 @@
width
:
100%
;
height
:
100%
;
}
.shadow
{
box-shadow
:
0
6px
18px
0
rgba
(
0
,
0
,
0
,
0
.10
);
border-radius
:
8px
;
}
...
...
src/pages/address-management/address-management.js
View file @
fafba66
let
app
=
getApp
();
Page
({
data
:
{},
onLoad
(
options
)
{}
onLoad
(
options
)
{},
// 编辑收货地址
onAddressEditHandler
()
{
app
.
router
.
push
({
path
:
"addressEdit"
})
},
// 添加收货地址
onAddressAddHandler
()
{
app
.
router
.
push
({
path
:
"addressEdit"
})
}
})
...
...
src/pages/address-management/address-management.json
View file @
fafba66
{
"navigationBarTitleText"
:
"
more
"
"navigationBarTitleText"
:
"
我的收货地址
"
}
...
...
src/pages/address-management/address-management.scss
View file @
fafba66
@import
'../../assets/scss/mixins'
;
@import
'../../assets/scss/utils'
;
$contentWidth
:
690px
;
.page
{
.bgc
{}
.bgc
{
background
:
#F8F8F8
;
}
.bg
{}
.main
{
.top-space
{
height
:
0px
;
height
:
20px
;
}
// 内容容器通用样式
.cont-wrap
{
margin
:
20px
auto
0
;
width
:
$contentWidth
;
background
:
#fff
;
padding
:
30px
28px
;
@extend
.bb
;
@extend
.shadow
;
}
.content
{
position
:
relative
;
.manage-wrap
{}
// 表单
.form
{
padding
:
30px
30px
;
&
-tit
{
margin-bottom
:
28px
;
display
:
flex
;
justify-content
:
space-between
;
font-size
:
24px
;
.address-message
{
color
:
#333333
;
display
:
flex
;
align-content
:
center
;
align-items
:
center
;
height
:
36px
;
.address
{
font-size
:
32px
;
margin-right
:
20px
;
vertical-align
:
middle
;
}
.used
{
color
:
#fff
;
background
:
#FF7B21
;
border-radius
:
8px
;
display
:
inline-block
;
padding
:
2px
12px
;
text-align
:
center
;
}
}
.address-edit
{
color
:
#3680EB
;
font-size
:
28px
;
}
}
&
-item
{
margin-bottom
:
20px
;
font-size
:
28px
;
display
:
flex
;
.label
{
min-width
:
140px
;
color
:
#666666
;
}
.cont
{
color
:
#333333
;
@extend
.bb
;
padding-left
:
20px
;
}
}
}
// 添加地址
.manage-add
{
width
:
$contentWidth
;
margin
:
20px
auto
;
@extend
.bb
;
background
:
#fff
;
padding
:
38px
30px
;
font-size
:
32px
;
color
:
#3680EB
;
@extend
.shadow
;
}
}
}
}
...
...
src/pages/address-management/address-management.wxml
View file @
fafba66
...
...
@@ -3,6 +3,54 @@
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content"></view>
<view class="content">
<!-- 地址 item -->
<view class="manage-wrap">
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">
<view class="address">地址一:默认地址</view>
<view class="used">当前使用</view>
</view>
<view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
</view>
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">
<view class="address">地址一:默认地址</view>
<view class="used">当前使用</view>
</view>
<view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
</view>
</view>
<!-- 添加地址 -->
<view bindtap="onAddressAddHandler" class="manage-add">+添加地址</view>
</view>
</view>
</view>
...
...
src/pages/gift-detail/gift-detail.js
View file @
fafba66
let
app
=
getApp
();
Page
({
data
:
{},
onLoad
(
options
)
{}
onLoad
(
options
)
{},
/**
* 确认兑换 / 提交订单
*/
onSubmitHandler
()
{
},
/**
* 收获地址管理
*/
onAddressManagementHandler
()
{
app
.
router
.
push
({
path
:
"addressManagement"
})
}
})
...
...
src/pages/gift-detail/gift-detail.json
View file @
fafba66
{
"navigationBarTitleText"
:
"
more
"
"navigationBarTitleText"
:
"
礼物详情
"
}
...
...
src/pages/gift-detail/gift-detail.scss
View file @
fafba66
@import
'../../assets/scss/mixins'
;
@import
'../../assets/scss/utils'
;
$contentWidth
:
690px
;
.page
{
.bgc
{}
.bgc
{
background
:
#F8F8F8
;
}
.bg
{}
.main
{
.top-space
{
height
:
0px
;
height
:
2
0px
;
}
.content
{
position
:
relative
;
// 内容容器通用样式
.cont-wrap
{
margin
:
20px
auto
0
;
width
:
$contentWidth
;
background
:
#fff
;
padding
:
30px
28px
;
@extend
.bb
;
@extend
.shadow
;
}
// 产品
.product
{
width
:
$contentWidth
;
margin
:
0
auto
;
&
-item
{
background
:
#fff
;
width
:
$contentWidth
;
height
:
260px
;
margin
:
20px
0
;
@extend
.shadow
;
@extend
.bb
;
padding
:
30px
;
display
:
flex
;
justify-content
:
space-between
;
.image-wrap
{
width
:
200px
;
height
:
200px
;
.img
{}
}
.cont
{
position
:
relative
;
flex
:
1
;
@extend
.bb
;
padding-left
:
20px
;
display
:
flex
;
flex-wrap
:
wrap
;
align-content
:
center
;
.name
{
font-size
:
36px
;
color
:
#333333
;
@include
ellipsis
(
2
);
}
.integral
{
margin-top
:
16px
;
font-size
:
28px
;
color
:
#FF7900
;
}
}
}
}
// 京东卡使用规则
.use-rule
{
color
:
#666666
;
font-size
:
28px
;
line-height
:
48px
;
}
// 表单
.form
{
padding
:
30px
30px
40px
;
&
-tit
{
margin-bottom
:
22px
;
display
:
flex
;
justify-content
:
space-between
;
font-size
:
24px
;
.address-message
{
color
:
#333333
;
}
.address-edit
{
color
:
#3680EB
;
}
}
&
-item
{
margin-bottom
:
30px
;
font-size
:
28px
;
display
:
flex
;
.label
{
min-width
:
140px
;
color
:
#666666
;
}
.cont
{
color
:
#333333
;
@extend
.bb
;
padding-left
:
20px
;
}
}
&
-remark
{
background
:
#F8F8F8
;
border
:
0
solid
#CCCCCC
;
border-radius
:
4px
;
min-height
:
200px
;
@extend
.bb
;
padding
:
20px
;
color
:
#333333
;
font-size
:
28px
;
}
}
}
// 底部
.bottom
{
position
:
fixed
;
bottom
:
0
;
// 提交栏
.submit-bar
{
width
:
750px
;
height
:
100px
;
display
:
flex
;
justify-content
:
space-between
;
background-color
:
#fff
;
&
-cont
{
flex
:
1
;
height
:
100px
;
line-height
:
100px
;
font-size
:
32px
;
@extend
.bb
;
padding
:
0
30px
;
.integral
{
color
:
$colorBlue
;
}
}
&
-btn
{
background
:
#3680EB
;
color
:
#fff
;
font-size
:
32px
;
@include
btn-center
(
240px
,
100px
);
}
}
}
}
}
...
...
src/pages/gift-detail/gift-detail.wxml
View file @
fafba66
...
...
@@ -3,6 +3,58 @@
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content"></view>
<view class="content">
<view class="product">
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元某东购物卡200元</view>
<view class="integral">消耗积分:3000分</view>
</view>
</view>
</view>
<block wx:if="{{1<0}}">
<!-- 使用规则 (京东卡) -->
<view class="cont-wrap use-rule">
京东E卡可在京东商城
<span class="link">www.jd.com</span>
上购买自营商品(“自营商品”指在商品详情页明确标识为自营的商品),用户可在订单结算时输入E卡密码并使用。
</view>
</block>
<block wx:else>
<!-- 表单提交 (实物) -->
<view class="cont-wrap form">
<view class="form-tit">
<view class="address-message">收货信息</view>
<view bindtap="onAddressManagementHandler" class="address-edit">更改地址</view>
</view>
<view class="form-item">
<view class="label">收货人</view>
<view class="cont">郑亮亮</view>
</view>
<view class="form-item">
<view class="label">收货电话</view>
<view class="cont">13800000000</view>
</view>
<view class="form-item">
<view class="label">收货地址</view>
<view class="cont">深圳市龙岗区XXX路</view>
</view>
<textarea placeholder="备注您的其他要求" class="form-remark"></textarea>
</view>
</block>
</view>
<view class="bottom">
<view class="submit-bar">
<view class="submit-bar-cont">
现有积分
<span class="integral">350</span>
分
</view>
<view bindtap="onSubmitHandler" class="submit-bar-btn">确认兑换</view>
</view>
</view>
</view>
</view>
...
...
src/pages/gift-shop/gift-shop.js
View file @
fafba66
let
app
=
getApp
();
Page
({
data
:
{},
onLoad
(
options
)
{}
data
:
{
productList
:
[
""
,
""
,
""
]
},
onLoad
(
options
)
{},
/**
* 显示礼物详情
*/
onShowGiftDetailHandler
()
{
app
.
router
.
push
({
path
:
"giftDetail"
});
}
})
...
...
src/pages/gift-shop/gift-shop.scss
View file @
fafba66
...
...
@@ -82,10 +82,9 @@ $contentWidth:690px;
&
-item
{
background
:
#fff
;
width
:
$contentWidth
;
height
:
260px
;
//
height: 260px;
margin
:
20px
0
;
box-shadow
:
0
6px
18px
0
rgba
(
0
,
0
,
0
,
0
.10
);
border-radius
:
8px
;
@extend
.shadow
;
@extend
.bb
;
padding
:
30px
;
display
:
flex
;
...
...
@@ -100,16 +99,20 @@ $contentWidth:690px;
.cont
{
position
:
relative
;
flex
:
1
;
@extend
.bb
;
padding-left
:
20px
;
.name
{
font-size
:
32px
;
color
:
#333333
;
@include
ellipsis
;
}
.desc
{
font-size
:
24px
;
color
:
#999999
;
margin-top
:
12px
;
@include
ellipsis
(
2
);
}
.integral
{
...
...
@@ -125,9 +128,9 @@ $contentWidth:690px;
bottom
:
0
;
right
:
0
;
width
:
14
0
px
;
height
:
6
4
px
;
line-height
:
6
4
px
;
width
:
14
2
px
;
height
:
6
0
px
;
line-height
:
6
0
px
;
text-align
:
center
;
color
:
#fff
;
border-radius
:
8px
;
...
...
src/pages/gift-shop/gift-shop.wxml
View file @
fafba66
...
...
@@ -24,37 +24,15 @@
<view class="top-space"></view>
<view class="content">
<view class="product">
<view class="product-item">
<view class="product-item"
wx:for="{{productList}}" wx:key="{{index}}"
>
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用,可够买xxx</view>
<view class="desc">可在xx超市使用,可够买xxx
可在xx超市使用,可够买xxx可在xx超市使用,可够买xxx
</view>
<view class="integral">消耗积分:3000分</view>
<view class="btn">查看</view>
</view>
</view>
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用,可够买xxx</view>
<view class="integral">消耗积分:3000分</view>
<view class="btn">查看</view>
</view>
</view>
<view class="product-item">
<view class="image-wrap">
<!-- <image /> -->
</view>
<view class="cont">
<view class="name">某东购物卡200元</view>
<view class="desc">可在xx超市使用,可够买xxx</view>
<view class="integral">消耗积分:3000分</view>
<view class="btn">查看</view>
<view bindtap="onShowGiftDetailHandler" data-data="{{item}}" class="btn">查看</view>
</view>
</view>
</view>
...
...
src/pages/index/index.scss
View file @
fafba66
...
...
@@ -28,8 +28,7 @@ $contentWidth:670px;
width
:
$contentWidth
;
height
:
100px
;
background
:
#FFFFFF
;
box-shadow
:
0
6px
18px
0
rgba
(
0
,
0
,
0
,
0
.10
);
border-radius
:
8px
;
@extend
.shadow
;
margin
:
222px
auto
0
;
display
:
flex
;
justify-content
:
space-between
;
...
...
src/utils/util.js
View file @
fafba66
// 手机正则
const
REGEXPS
=
{
"mobile"
:
/^
1
\
d
{
10
}
$
/
"mobile"
:
/^
1
\
d
{
10
}
$
/
}
// 验证手机
function
checkMobile
(
str
)
{
return
REGEXPS
.
mobile
.
test
(
str
);
return
REGEXPS
.
mobile
.
test
(
str
);
}
function
formatTime
(
date
)
{
var
year
=
date
.
getFullYear
()
var
month
=
date
.
getMonth
()
+
1
var
day
=
date
.
getDate
()
/**
* 链接参数转换为obj
* 入参 完整链接
* @param {*} url
*/
function
param2Obj
(
url
)
{
const
search
=
url
.
split
(
'?'
)[
1
]
if
(
!
search
)
{
return
{}
}
return
JSON
.
parse
(
'{"'
+
decodeURIComponent
(
search
)
.
replace
(
/"/g
,
'\\"'
)
.
replace
(
/&/g
,
'","'
)
.
replace
(
/=/g
,
'":"'
)
+
'"}'
)
}
var
hour
=
date
.
getHours
()
var
minute
=
date
.
getMinutes
()
var
second
=
date
.
getSeconds
()
/**
* 格式化日期常规日期
* 格式yyyy-MM-dd hh:mm:ss
* @param {*} date
*/
function
formatTime
(
date
)
{
var
year
=
date
.
getFullYear
()
var
month
=
date
.
getMonth
()
+
1
var
day
=
date
.
getDate
()
var
hour
=
date
.
getHours
()
var
minute
=
date
.
getMinutes
()
var
second
=
date
.
getSeconds
()
return
[
year
,
month
,
day
].
map
(
formatNumber
).
join
(
'/'
)
+
' '
+
[
hour
,
minute
,
second
].
map
(
formatNumber
).
join
(
':'
)
return
[
year
,
month
,
day
].
map
(
formatNumber
).
join
(
'/'
)
+
' '
+
[
hour
,
minute
,
second
].
map
(
formatNumber
).
join
(
':'
)
}
/**
* 格式化数字,不足一位补充0
* @param {*} n
*/
function
formatNumber
(
n
)
{
n
=
n
.
toString
()
return
n
[
1
]
?
n
:
'0'
+
n
n
=
n
.
toString
()
return
n
[
1
]
?
n
:
'0'
+
n
}
/**
* 获取屏幕剩余高度
* useHeight 单位是rpx
* 默认返回单位是rpx 可通过unit参数改为 px
*/
function
getLastScreenHeight
(
useHeight
=
0
,
unit
=
'rpx'
)
{
let
sysInfo
=
wx
.
getSystemInfoSync
();
let
clientHeight
=
sysInfo
.
windowHeight
;
// 获取可使用窗口高度
let
clientWidth
=
sysInfo
.
windowWidth
;
// 算出比例
let
ratio
=
750
/
clientWidth
;
// 算出屏幕高度(单位rpx)
let
height
=
clientHeight
*
ratio
;
// 计算剩余高度
let
lastHeight
=
height
-
useHeight
;
// 可转换成px
if
(
unit
==
'px'
)
{
lastHeight
=
lastHeight
/
750
*
clientWidth
}
return
lastHeight
;
let
sysInfo
=
wx
.
getSystemInfoSync
();
let
clientHeight
=
sysInfo
.
windowHeight
;
// 获取可使用窗口高度
let
clientWidth
=
sysInfo
.
windowWidth
;
// 算出比例
let
ratio
=
750
/
clientWidth
;
// 算出屏幕高度(单位rpx)
let
height
=
clientHeight
*
ratio
;
// 计算剩余高度
let
lastHeight
=
height
-
useHeight
;
// 可转换成px
if
(
unit
==
'px'
)
{
lastHeight
=
lastHeight
/
750
*
clientWidth
}
return
lastHeight
;
}
/**
* px转rpx
* @param {*} value
*/
function
pxToRpx
(
value
)
{
let
sysInfo
=
wx
.
getSystemInfoSync
();
let
clientWidth
=
sysInfo
.
windowWidth
;
let
result
=
value
/
750
*
clientWidth
return
result
;
}
// 格式化星期几
function
formatWeek
(
week
)
{
let
result
=
""
;
switch
(
week
)
{
case
1
:
result
=
"一"
;
break
;
case
2
:
result
=
"二"
;
break
;
case
3
:
result
=
"三"
;
break
;
case
4
:
result
=
"四"
;
break
;
case
5
:
result
=
"五"
;
break
;
case
6
:
result
=
"六"
;
break
;
case
0
:
result
=
"日"
;
break
;
default
:
break
;
}
return
result
;
}
/**
* 获取点击传值
* @param {*} evt
* @param {*} key
*/
function
getBindtapData
(
evt
,
key
=
"data"
)
{
let
keyStr
=
key
||
"data"
;
return
evt
.
currentTarget
.
dataset
[
keyStr
];
}
/**
* 获取小程序码
* path = "/pages/index/index?pa=1"
* @param {*} path
*/
function
wxacodeGet
(
path
)
{
return
" https://api.k.wxpai.cn/bizproxy/mzcfsapi/qrcode/create?path="
+
encodeURIComponent
(
path
);
}
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
function
debounce
(
func
,
wait
,
immediate
)
{
let
timeout
;
return
function
()
{
let
context
=
this
;
let
args
=
arguments
;
if
(
timeout
)
clearTimeout
(
timeout
);
if
(
immediate
)
{
var
callNow
=
!
timeout
;
timeout
=
setTimeout
(()
=>
{
timeout
=
null
;
},
wait
)
if
(
callNow
)
func
.
apply
(
context
,
args
)
}
else
{
timeout
=
setTimeout
(
function
()
{
func
.
apply
(
context
,
args
)
},
wait
);
}
}
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版,2 表定时器版
* 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。
*/
function
throttle
(
func
,
wait
,
type
)
{
if
(
type
===
1
)
{
var
previous
=
0
;
}
else
if
(
type
===
2
)
{
var
timeout
;
}
return
function
()
{
let
context
=
this
;
let
args
=
arguments
;
if
(
type
===
1
)
{
let
now
=
Date
.
now
();
if
(
now
-
previous
>
wait
)
{
func
.
apply
(
context
,
args
);
previous
=
now
;
}
}
else
if
(
type
===
2
)
{
if
(
!
timeout
)
{
timeout
=
setTimeout
(()
=>
{
timeout
=
null
;
func
.
apply
(
context
,
args
)
},
wait
)
}
}
}
}
module
.
exports
=
{
formatTime
:
formatTime
,
checkMobile
:
checkMobile
,
getLastScreenHeight
:
getLastScreenHeight
formatTime
:
formatTime
,
checkMobile
:
checkMobile
,
getLastScreenHeight
:
getLastScreenHeight
,
debounce
:
debounce
,
throttle
:
throttle
,
param2Obj
:
param2Obj
,
pxToRpx
:
pxToRpx
,
formatWeek
:
formatWeek
,
getBindtapData
:
getBindtapData
,
wxacodeGet
:
wxacodeGet
,
}
...
...
Please
register
or
sign in
to post a comment