Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
2
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Plain Diff
Browse Files
Authored by
biao
9 years ago
Commit
abae3a49089b668e1bc60b2c50c4ec11e1833c85
2 parents
53e6b735
a1528ab2
Merge branch 'feature/wap325' of
http://git.dev.yoho.cn/web/yohobuy
into feature/wap325
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
250 additions
and
124 deletions
library/LibModels/Wap/Home/SideData.php
static/js/guang/home.js
static/js/guang/info.js
static/sass/home/_side-nav.scss
template/m.yohobuy.com/actions/guang/index/home.phtml
template/m.yohobuy.com/actions/guang/index/index.phtml
template/m.yohobuy.com/actions/guang/index/page.phtml
template/m.yohobuy.com/partials/guang/home.phtml
template/m.yohobuy.com/partials/home/side_nav.phtml
yohobuy/m.yohobuy.com/application/models/Index/Side.php
library/LibModels/Wap/Home/SideData.php
View file @
abae3a4
...
...
@@ -18,7 +18,7 @@ class SideData
{
const
URI_LEFTNAV_ENTRANCE
=
'operations/api/v5/entrance/getEntrance'
;
const
URI_LEFTNAV_CATEGORY
=
'operations/api/v
5
/category/getCategory'
;
const
URI_LEFTNAV_CATEGORY
=
'operations/api/v
6
/category/getCategory'
;
/**
* 左侧边栏的分类和图标数据
...
...
@@ -40,6 +40,7 @@ class SideData
$param
=
Yohobuy
::
param
();
$param
[
'client_type'
]
=
'h5'
;
// 调用H5手机网站的
$param
[
'private_key'
]
=
'fd4ad5fcfa0de589ef238c0e7331b585'
;
// 调用Android的private_key不然会有参数验证错误的bug
$param
[
'client_secret'
]
=
Sign
::
getSign
(
$param
);
return
Yohobuy
::
get
(
Yohobuy
::
SERVICE_URL
.
self
::
URI_LEFTNAV_CATEGORY
,
$param
);
...
...
static/js/guang/home.js
View file @
abae3a4
...
...
@@ -4,8 +4,7 @@
* @date: 2015/10/10
*/
var
$
=
require
(
'jquery'
),
Swiper
=
require
(
'yoho.iswiper'
);
var
$
=
require
(
'jquery'
);
var
info
=
require
(
'./info'
),
loadMore
=
info
.
loadMore
;
...
...
@@ -24,18 +23,12 @@ var $infoList = $('#info-list'),
var
state
=
{};
var
mySwiper
;
if
(
$loadMoreInfo
.
length
>
0
)
{
$loading
=
$loadMoreInfo
.
children
(
'.loading'
);
$noMore
=
$loadMoreInfo
.
children
(
'.no-more'
);
}
mySwiper
=
new
Swiper
(
'.swiper-container'
,
{
lazyLoading
:
true
,
pagination
:
'.swiper-pagination'
,
autoplay
:
3000
});
info
.
initSwiper
(
curType
);
info
.
initInfosEvt
(
$infoList
);
...
...
@@ -86,9 +79,8 @@ $nav.on('touchend touchcancel', function(e) {
$loading
.
addClass
(
'hide'
);
$noMore
.
addClass
(
'hide'
);
loadMore
(
$content
,
$
.
extend
({
isTab
:
true
},
state
[
curType
]));
state
[
curType
].
isTab
=
true
;
loadMore
(
$content
,
state
[
curType
]);
}
else
{
//重置当前Tab的load-more
...
...
static/js/guang/info.js
View file @
abae3a4
...
...
@@ -7,16 +7,19 @@
var
$
=
require
(
'jquery'
),
Hammer
=
require
(
'yoho.hammer'
),
ellipsis
=
require
(
'mlellipsis'
),
lazyLoad
=
require
(
'yoho.lazyload'
);
lazyLoad
=
require
(
'yoho.lazyload'
),
Swiper
=
require
(
'yoho.iswiper'
);
var
tip
=
require
(
'../plugin/tip'
);
var
loading
=
require
(
'../plugin/loading'
);
var
$loadMoreInfo
=
$
(
'#load-more-info'
);
var
$loading
=
$
(
''
),
$noMore
=
$
(
''
);
$noMore
=
$
(
''
),
$swiper
=
$
(
''
);
var
searching
=
false
;
var
mySwiper
=
{};
ellipsis
.
init
();
...
...
@@ -25,6 +28,19 @@ if ($loadMoreInfo.length > 0) {
$noMore
=
$loadMoreInfo
.
children
(
'.no-more'
);
}
//初始化swiper
function
initSwiper
(
typeId
)
{
if
(
typeof
typeId
===
undefined
)
{
return
;
}
mySwiper
[
typeId
]
=
new
Swiper
(
'.swiper-cont-'
+
typeId
,
{
lazyLoading
:
true
,
wrapperClass
:
'swiper-wrap-'
+
typeId
,
pagination
:
'.swiper-pagi-'
+
typeId
,
autoplay
:
3000
});
}
/**
* 设置指定资讯项的Lazyload和文字截取
* @params $infos 资讯项
...
...
@@ -175,6 +191,14 @@ function loadMore($container, opt, url) {
$container
.
append
(
data
);
$swiper
=
$container
.
find
(
'.swiper-container'
);
if
(
$swiper
.
length
)
{
$swiper
.
addClass
(
'swiper-cont-'
+
opt
.
type
);
$swiper
.
children
(
'.swiper-wrapper'
).
addClass
(
'swiper-wrap-'
+
opt
.
type
);
$swiper
.
children
(
'.swiper-pagination'
).
addClass
(
'swiper-pagi-'
+
opt
.
type
);
initSwiper
(
opt
.
type
);
}
if
(
num
>
0
)
{
$newItems
=
$container
.
find
(
'.guang-info:gt('
+
(
num
-
1
)
+
')'
);
}
else
{
...
...
@@ -194,14 +218,19 @@ function loadMore($container, opt, url) {
opt
.
page
++
;
searching
=
false
;
delete
opt
.
isTab
;
},
error
:
function
()
{
tip
.
show
(
'网络断开连接了~'
);
searching
=
false
;
delete
opt
.
isTab
;
}
});
}
exports
.
mySwiper
=
mySwiper
;
exports
.
initSwiper
=
initSwiper
;
exports
.
initInfosEvt
=
initInfosEvt
;
exports
.
setLazyLoadAndMellipsis
=
setLazyLoadAndMellipsis
;
exports
.
loadMore
=
loadMore
;
\ No newline at end of file
...
...
static/sass/home/_side-nav.scss
View file @
abae3a4
...
...
@@ -7,20 +7,40 @@
left
:
0
;
right
:
100rem
/
$pxConvertRem
;
width
:
540rem
/
$pxConvertRem
;
background
:
#f0f0f0
;
overflow
:
hidden
;
overflow-y
:
auto
;
@include
transition
(
all
.3s
);
ul
{
background
:
#f0f0f0
;
>
ul
{
margin-bottom
:
20rem
/
$pxConvertRem
;
background
:
#fff
;
border-top
:
1px
solid
#e0e0e0
;
border-bottom
:
1px
solid
#e0e0e0
;
}
li
{
position
:
relative
;
height
:
128rem
/
$pxConvertRem
;
line-height
:
128rem
/
$pxConvertRem
;
border-bottom
:
1px
solid
#e0e0e0
;
height
:
80rem
/
$pxConvertRem
;
line-height
:
80rem
/
$pxConvertRem
;
background
:
#fff
;
&
:after
{
content
:
''
;
position
:
absolute
;
right
:
0
;
bottom
:
0
;
width
:
430rem
/
$pxConvertRem
;
height
:
0
;
border-top
:
1px
solid
#e0e0e0
;
}
&
:last-child
{
&
:after
{
content
:
none
;
}
}
a
{
display
:
block
;
height
:
100%
;
...
...
@@ -29,6 +49,15 @@
font-size
:
24rem
/
$pxConvertRem
;
}
.title
{
display
:
inline-block
;
padding-left
:
10rem
/
$pxConvertRem
;
font-size
:
30rem
/
$pxConvertRem
;
vertical-align
:
baseline
;
// 此处字体小于 12px, 先扩大,再scale缩小
@include
transform
(
scale
(
0
.75
));
}
.nav-icon
,
.nav-img
{
position
:
absolute
;
width
:
60rem
/
$pxConvertRem
;
...
...
@@ -51,9 +80,38 @@
}
em
{
margin-right
:
10rem
/
$pxConvertRem
;
font-weight
:
bold
;
font-size
:
34rem
/
$pxConvertRem
;
font-size
:
30rem
/
$pxConvertRem
;
}
}
.first
{
li
{
height
:
100rem
/
$pxConvertRem
;
line-height
:
100rem
/
$pxConvertRem
;
border-bottom
:
1px
solid
#e0e0e0
;
&
:last-child
{
border-bottom
:
none
;
}
&
:after
{
content
:
none
;
}
a
{
font-size
:
40rem
/
$pxConvertRem
;
}
em
{
font-size
:
40rem
/
$pxConvertRem
;
}
.title
{
font-size
:
24rem
/
$pxConvertRem
;
@include
transform
(
scale
(
1
));
}
}
}
...
...
@@ -85,17 +143,17 @@
}
}
li
.new
{
margin
:
(
19rem
/
$pxConvertRem
)
0
0
;
border-top
:
1px
solid
#e0e0e0
;
a
{}
i
{
background
:
image-url
(
"side-nav/new.png"
)
no-repeat
left
center
;
background-size
:
100%
100%
;
}
}
// li.new {
// margin: (19rem / $pxConvertRem) 0 0;
// border-top: 1px solid #e0e0e0;
//
// a {}
//
// i {
// background: image-url("side-nav/new.png") no-repeat left center;
// background-size: 100% 100%;
// }
// }
li
.guang
,
li
.trendfinder
{
.nav-icon
{
...
...
@@ -123,16 +181,20 @@
@include
transition
(
transform
0
.3s
);
li
{
height
:
109rem
/
$pxConvertRem
;
line-height
:
109rem
/
$pxConvertRem
;
height
:
80rem
/
$pxConvertRem
;
line-height
:
80rem
/
$pxConvertRem
;
border
:
none
;
border-bottom
:
1px
solid
#e0e0e0
;
&
:after
{
content
:
none
;
}
a
{
position
:
relative
;
display
:
block
;
margin
:
0
0
0
(
30rem
/
$pxConvertRem
);
padding-left
:
50rem
/
$pxConvertRem
;
border-bottom
:
1px
solid
#e0e0e0
;
font-size
:
36rem
/
$pxConvertRem
;
z-index
:
2
;
}
...
...
@@ -173,7 +235,7 @@
a
{
color
:
#fff
;
border-bottom
:
none
;
padding-left
:
11
0rem
/
$pxConvertRem
;
padding-left
:
7
0rem
/
$pxConvertRem
;
}
.nav-back
{
...
...
@@ -185,6 +247,7 @@
.sub-nav.show
{
display
:
block
;
z-index
:
1
;
@include
transform
(
translateX
(
0
));
@include
transition
(
transform
0
.3s
);
}
...
...
template/m.yohobuy.com/actions/guang/index/home.phtml
deleted
100644 → 0
View file @
53e6b73
{
{>
guang/home
}
}
\ No newline at end of file
template/m.yohobuy.com/actions/guang/index/index.phtml
View file @
abae3a4
...
...
@@ -9,8 +9,32 @@
</li>
{
{/
navs
}
}
</ul>
<div
class=
"guang-item-content"
>
{
{>
guang/home
}
}
<div
id=
"info-list"
class=
"info-list-container"
>
{
{#
infos
}
}
<div
class=
"info-list{{^show}} hide{{/show}}"
>
{
{#if
show
}
}
{
{#if
../swiper
}
}
<div
class=
"swiper-container swiper-cont-{{@index}}"
>
<div
class=
"swiper-wrapper swiper-wrap-{{@index}}"
>
{
{#
swiper
}
}
<div
class=
"swiper-slide"
>
<a
href=
"{{url}}"
>
<img
class=
"swiper-lazy"
data-src=
"{{img}}"
>
</a>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
{
{/
swiper
}
}
</div>
<div
class=
"swiper-pagination swiper-pagi-{{@index}}"
></div>
</div>
{
{/if
}
}
{
{/if
}
}
{
{#
info
}
}
{
{>
guang/info
}
}
{
{/
info
}
}
</div>
{
{/
infos
}
}
</div>
<div
id=
"load-more-info"
class=
"load-more-info"
>
...
...
template/m.yohobuy.com/actions/guang/index/page.phtml
View file @
abae3a4
{
{#if
swiper
}
}
<div
class=
"swiper-container"
>
<div
class=
"swiper-wrapper"
>
{
{#
swiper
}
}
<div
class=
"swiper-slide"
>
<a
href=
"{{url}}"
>
<img
class=
"swiper-lazy"
data-src=
"{{img}}"
>
</a>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
{
{/
swiper
}
}
</div>
<div
class=
"swiper-pagination"
></div>
</div>
{
{/if
}
}
{
{#
infos
}
}
{
{>
guang/info
}
}
{
{/
infos
}
}
\ No newline at end of file
...
...
template/m.yohobuy.com/partials/guang/home.phtml
deleted
100644 → 0
View file @
53e6b73
{
{#if
swiper
}
}
<div
class=
"swiper-container"
>
<div
class=
"swiper-wrapper"
>
{
{#
swiper
}
}
<div
class=
"swiper-slide"
>
<a
href=
"{{url}}"
>
<img
class=
"swiper-lazy"
data-src=
"{{img}}"
>
</a>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
{
{/
swiper
}
}
</div>
<div
class=
"swiper-pagination"
></div>
</div>
{
{/if
}
}
<div
id=
"info-list"
class=
"info-list-container"
>
{
{#
infos
}
}
<div
class=
"info-list{{^show}} hide{{/show}}"
>
{
{#
info
}
}
{
{>
guang/info
}
}
{
{/
info
}
}
</div>
{
{/
infos
}
}
</div>
\ No newline at end of file
template/m.yohobuy.com/partials/home/side_nav.phtml
View file @
abae3a4
<div class="side-nav">
{{# sideNav}}
<ul>
<ul
{{#if @first}}class="first"{{/if}}
>
{{# this}}
<li class="{{styleClass}}">
{{# url}}
<a href="{{.}}">
{{/ url}}
{{^ url}}
<a href="javascript:;">
{{/ url}}
{{#if url}}
<a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
{{/if}}
{{# img}}
<span class="nav-img" style="background-image: url({{.}})"></span>
{{/ img}}
{{^ img}}
<i class="nav-icon"></i>
{{/ img}}
<em>{{textCn}}</em>{{textEn}}
<em>{{textCn}}</em>
<span class="title">{{textEn}}</span>
{{# subNav}}
<span class="enter-subnav iconfont"></span>
{{/ subNav}}
...
...
@@ -23,13 +23,12 @@
{{# subNav}}
<ul class="sub-nav">
{{# list}}
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}}">
{{# url}}
<a href="{{.}}">
{{/ url}}
{{^ url}}
<a href="javascript:;">
{{/ url}}
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};">
{{#if url}}
<a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
{{/if}}
{{^ back}}
<span class="nav-point iconfont"></span>
{{/ back}}
...
...
@@ -37,7 +36,7 @@
<i class="nav-back iconfont"></i>
{{/ back}}
<em>{{textCn}}</em>
{{textEn}}
<span class="title">{{textEn}}</span>
</a>
</li>
{{/ list}}
...
...
@@ -47,4 +46,4 @@
{{/ this}}
</ul>
{{/sideNav}}
</div>
\ No newline at end of file
</div>
...
...
yohobuy/m.yohobuy.com/application/models/Index/Side.php
View file @
abae3a4
...
...
@@ -8,7 +8,7 @@ use Plugin\Helpers;
use
Plugin\Cache
;
/**
*
*
* @name SideModel
* @package models/Index
* @copyright yoho.inc
...
...
@@ -20,7 +20,7 @@ class SideModel
/**
* 获取左侧边栏数据
*
*
* @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
*/
public
static
function
getLeftNav
(
$guangChoosed
=
'all'
)
...
...
@@ -59,12 +59,21 @@ class SideModel
// 如果存在子菜单,就输出子菜单
if
(
isset
(
$value
[
'sub'
])
&&
!
empty
(
$value
[
'sub'
]))
{
$subs
=
array
();
$subs
=
array
(
array
(
'textCn'
=>
$group
[
$groupKey
][
'textCn'
],
'textEn'
=>
$group
[
$groupKey
][
'textEn'
],
'back'
=>
true
,
'isSelect'
=>
false
,
'bgColor'
=>
self
::
getSideTopColor
(
$guangChoosed
)
)
);
foreach
(
$value
[
'sub'
]
as
$oneSub
)
{
$subs
[]
=
self
::
formatSideItem
(
$oneSub
);
}
$group
[
$groupKey
][
'subNav'
]
=
$subs
;
$group
[
$groupKey
][
'styleClass'
]
=
'guang'
;
$group
[
$groupKey
][
'subNav'
][
'list'
]
=
$subs
;
}
$groupKey
++
;
...
...
@@ -93,13 +102,65 @@ class SideModel
/**
* 获取并生成左侧边栏中逛的数据
*
*
* @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
* @return array
*/
private
static
function
genLeftNavGuang
(
$guangChoosed
=
'all'
)
{
// 判断逛的背景色
$color
=
self
::
getSideTopColor
(
$guangChoosed
);
return
array
(
array
(
'textCn'
=>
'逛'
,
'textEn'
=>
'TRENDFINDER'
,
'styleClass'
=>
'guang'
,
'subNav'
=>
array
(
'list'
=>
array
(
0
=>
array
(
'textCn'
=>
'逛'
,
'textEn'
=>
'TrendFinder'
,
'back'
=>
true
,
'isSelect'
=>
false
,
'bgColor'
=>
$color
,
),
1
=>
array
(
'textCn'
=>
'查看全部'
,
'textEn'
=>
''
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'lifestyle'
||
$guangChoosed
===
'kids'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'1,2,3'
),
'guang'
)
),
2
=>
array
(
'textCn'
=>
'只看男生'
,
'textEn'
=>
'Boys'
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'boys'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'1,3'
),
'guang'
)
),
3
=>
array
(
'textCn'
=>
'只看女生'
,
'textEn'
=>
'Girls'
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'girls'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'2,3'
),
'guang'
)
),
)
)
)
);
}
/**
* 根据选择的频道获取逛的背景色
* @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
* @return string color值
*/
private
static
function
getSideTopColor
(
$guangChoosed
)
{
// 判断逛的背景色
$color
=
false
;
if
(
$guangChoosed
===
'girls'
)
{
$color
=
'#FF88AE'
;
...
...
@@ -109,43 +170,7 @@ class SideModel
$color
=
'#4f4138'
;
}
return
array
(
'textCn'
=>
'逛'
,
'textEn'
=>
'TRENDFINDER'
,
'styleClass'
=>
'guang'
,
'subNav'
=>
array
(
'list'
=>
array
(
0
=>
array
(
'textCn'
=>
'逛'
,
'textEn'
=>
'TrendFinder'
,
'back'
=>
true
,
'isSelect'
=>
false
,
'bgColor'
=>
$color
,
),
1
=>
array
(
'textCn'
=>
'查看全部'
,
'textEn'
=>
''
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'lifestyle'
||
$guangChoosed
===
'kids'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'1,2,3'
),
'guang'
)
),
2
=>
array
(
'textCn'
=>
'只看男生'
,
'textEn'
=>
'Boys'
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'boys'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'1,3'
),
'guang'
)
),
3
=>
array
(
'textCn'
=>
'只看女生'
,
'textEn'
=>
'Girls'
,
'back'
=>
false
,
'isSelect'
=>
(
$guangChoosed
===
'girls'
)
?
true
:
false
,
'url'
=>
Helpers
::
url
(
''
,
array
(
'gender'
=>
'2,3'
),
'guang'
)
),
)
)
);
return
$color
;
}
...
...
@@ -164,6 +189,9 @@ class SideModel
$result
[
'styleClass'
]
=
strtolower
(
$data
[
'sort_name_en'
]);
$result
[
'url'
]
=
Helpers
::
getFilterUrl
(
$data
[
'sort_url'
]);
$result
[
'img'
]
=
Helpers
::
getImageUrl
(
$data
[
'sort_ico'
],
60
,
60
,
1
);
if
(
isset
(
$data
[
'sort_name_color'
]))
{
$result
[
'color'
]
=
$data
[
'sort_name_color'
];
}
return
$result
;
}
...
...
Please
register
or
login
to post a comment