fe / YOHOBUYWAP · Commits

Go to a project

Authored by Rock Zhang
Commit 143b0e95e277c5c624cb2e33b6588538d18e4bc3 2 parents 7cda0df7 aca0e2dd

Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop

Inline Side-by-side
Showing 12 changed files with 156 additions and 19 deletions
@@ -85,6 +85,7 @@ $('.sub-nav').on('mouseenter', 'li', function () { @@ -85,6 +85,7 @@ $('.sub-nav').on('mouseenter', 'li', function () {
85 if ($('.banner-swiper').find('li').size() > 1) { 85 if ($('.banner-swiper').find('li').size() > 1) {
86 bannerSwiper = new Swiper('.banner-swiper', { 86 bannerSwiper = new Swiper('.banner-swiper', {
87 lazyLoading: true, 87 lazyLoading: true,
  88 + lazyLoadingInPrevNext: true,
88 loop: true, 89 loop: true,
89 autoplay: 3000, 90 autoplay: 3000,
90 autoplayDisableOnInteraction: false, 91 autoplayDisableOnInteraction: false,
@@ -6,6 +6,10 @@ @@ -6,6 +6,10 @@
6 6
7 var $ = require('yoho.zepto'); 7 var $ = require('yoho.zepto');
8 8
  9 +var $searchBox = $('.search-box'),
  10 + $indexSearch = $('.index-search'),
  11 + $indexLogo = $('.index-logo');
  12 +
9 function downLoadApp() { 13 function downLoadApp() {
10 var appUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho&g_f=995445'; 14 var appUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho&g_f=995445';
11 var clickedAt = new Date(); 15 var clickedAt = new Date();
@@ -40,3 +44,42 @@ if (!window.cookie('_float-layer-app')) { @@ -40,3 +44,42 @@ if (!window.cookie('_float-layer-app')) {
40 $('#float-layer-app').hide(); 44 $('#float-layer-app').hide();
41 } 45 }
42 46
  47 +/**
  48 + * 频道选择页面顶部搜索
  49 + * @author: bikai<kai.bi@yoho.cn>
  50 + * @date: 2015/10/28
  51 + */
  52 +
  53 +$searchBox.find('input').on('focus', function () {
  54 + $indexLogo.css({
  55 + width: 0,
  56 + display: 'none'
  57 + });
  58 + $searchBox.css({
  59 + width: '12.8rem'
  60 + });
  61 + $indexSearch.css({
  62 + width: '15.5rem'
  63 + });
  64 + $('.clear-text, .no-search').show();
  65 +}).on('blur', function () {
  66 + $indexLogo.css({
  67 + width: '5.4rem',
  68 + display: 'block'
  69 + });
  70 + $searchBox.css({
  71 + width: '8.8rem'
  72 + });
  73 + $indexSearch.css({
  74 + width: '9.6rem'
  75 + });
  76 + $('.clear-text, .no-search').hide();
  77 +});
  78 +
  79 +$searchBox.find('.clear-text').tap(function () {
  80 + $searchBox.find('input').val('').trigger('focus');
  81 +});
  82 +
  83 +$searchBox.find('.search-icon').tap(function () {
  84 + $indexSearch.submit();
  85 +});
@@ -25,12 +25,19 @@ var phoneRegx = { @@ -25,12 +25,19 @@ var phoneRegx = {
25 '+61': /^[0-9]{11}$/ 25 '+61': /^[0-9]{11}$/
26 }; 26 };
27 27
28 -//密码显示隐藏  
29 -function bindEyesEvt() { 28 +/**
  29 + * 密码显示隐藏
  30 + * @params opt 初始化参数
  31 + */
  32 +function bindEyesEvt(opt) {
30 var $hasEye = $('.has-eye'), 33 var $hasEye = $('.has-eye'),
31 $eye; 34 $eye;
32 35
33 - $hasEye.append('<div class="eye close"></div>'); 36 + if (opt && opt.status === 'open') {
  37 + $hasEye.append('<div class="eye"></div>');
  38 + } else {
  39 + $hasEye.append('<div class="eye close"></div>');
  40 + }
34 $eye = $hasEye.children('.eye'); 41 $eye = $hasEye.children('.eye');
35 42
36 $eye.on('tap', function(e) { 43 $eye.on('tap', function(e) {
@@ -14,7 +14,9 @@ var tip = require('../../plugin/tip'); @@ -14,7 +14,9 @@ var tip = require('../../plugin/tip');
14 var trim = $.trim; 14 var trim = $.trim;
15 var showErrTip = tip.show; 15 var showErrTip = tip.show;
16 16
17 -api.bindEyesEvt(); 17 +api.bindEyesEvt({
  18 + status: 'open' //默认眼睛打开
  19 +});
18 20
19 $pwd.bind('input', function() { 21 $pwd.bind('input', function() {
20 if (trim($pwd.val()) === '') { 22 if (trim($pwd.val()) === '') {
@@ -53,7 +53,7 @@ var $listNav = $('#list-nav'), @@ -53,7 +53,7 @@ var $listNav = $('#list-nav'),
53 end: false 53 end: false
54 } 54 }
55 }, 55 },
56 - $pre, //纪录进入筛选前的active项 56 + $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
57 searching; 57 searching;
58 58
59 if ($('.swiper-container .swiper-slide').length > 1) { 59 if ($('.swiper-container .swiper-slide').length > 1) {
@@ -53,6 +53,7 @@ @@ -53,6 +53,7 @@
53 background: #000; 53 background: #000;
54 text-align: center; 54 text-align: center;
55 text-decoration: none; 55 text-decoration: none;
  56 + z-index: 1;
56 } 57 }
57 58
58 .info-tag { 59 .info-tag {
@@ -2,7 +2,71 @@ @@ -2,7 +2,71 @@
2 width: 100%; 2 width: 100%;
3 overflow: hidden; 3 overflow: hidden;
4 margin: 0 auto; 4 margin: 0 auto;
  5 + .index-header {
  6 + padding: 0 20rem / $pxConvertRem;
  7 + width: 100%;
  8 + height: 96rem / $pxConvertRem;
  9 + line-height: 96rem / $pxConvertRem;
5 10
  11 + .index-logo {
  12 + float: left;
  13 + font-size: 50rem / $pxConvertRem;
  14 + width: 216rem / $pxConvertRem;
  15 + color: #343434;
  16 + }
  17 +
  18 + .index-search {
  19 + float: right;
  20 + width: 384rem / $pxConvertRem;
  21 + .search-box {
  22 + float: left;
  23 + position: relative;
  24 + top: 20rem / $pxConvertRem;
  25 + width: 352rem / $pxConvertRem;
  26 + height: 56rem / $pxConvertRem;
  27 + padding-right: 40rem / $pxConvertRem;
  28 + z-index: 1;
  29 + transition: width 400ms;
  30 + box-sizing: border-box;
  31 + border: 1px solid #ccc;
  32 + overflow: hidden;
  33 + }
  34 + input {
  35 + float: left;
  36 + width: 100%;
  37 + font-size: 28rem / $pxConvertRem;
  38 + padding: 10rem / $pxConvertRem;
  39 + color: #999;
  40 + overflow: hidden;
  41 + border: none;
  42 + }
  43 + .iconfont {
  44 + position: absolute;
  45 + top: 8rem / $pxConvertRem;
  46 + width: 40rem / $pxConvertRem;
  47 + font-size: 28rem / $pxConvertRem;
  48 + z-index: 1;
  49 + line-height: 40rem / $pxConvertRem;
  50 + }
  51 + .clear-text {
  52 + display: none;
  53 + right: 50rem / $pxConvertRem;
  54 + color: #ccc;
  55 + }
  56 + .search-icon {
  57 + right: 10rem / $pxConvertRem;
  58 + color: #e6e6e6;
  59 + }
  60 + }
  61 +
  62 + .no-search {
  63 + display: none;
  64 + float: left;
  65 + margin-right: 10rem / $pxConvertRem;
  66 + color: #999;
  67 + font-size: 28rem / $pxConvertRem;
  68 + }
  69 + }
6 .index-container { 70 .index-container {
7 position: relative; 71 position: relative;
8 @include transition(transform 0.5s); 72 @include transition(transform 0.5s);
@@ -3,6 +3,17 @@ @@ -3,6 +3,17 @@
3 <div class="index-page yoho-page"> 3 <div class="index-page yoho-page">
4 4
5 <div class="index-container"> 5 <div class="index-container">
  6 + <div class="index-header clearfix">
  7 + <div class="iconfont index-logo">&#xe60e;</div>
  8 + <form action="http://search.m.yohobuy.com" class="index-search">
  9 + <a href="javascript:void(0);" class="no-search">取消</a>
  10 + <div class="search-box">
  11 + <input type="text" name="query" placeholder="搜索">
  12 + <span class="iconfont clear-text">&#xe623;</span>
  13 + <span class="iconfont search-icon">&#xe60f;</span>
  14 + </div>
  15 + </form>
  16 + </div>
6 17
7 <div class="index-channel"> 18 <div class="index-channel">
8 <img class="img" src="{{background}}" alt=""> 19 <img class="img" src="{{background}}" alt="">
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 29
30 <div id="goods-container" class="goods-container"> 30 <div id="goods-container" class="goods-container">
31 {{# goodsContainer}} 31 {{# goodsContainer}}
32 - <div class="new-goods container"> 32 + <div class="new-goods container clearfix">
33 {{#if goods}} 33 {{#if goods}}
34 {{# goods}} 34 {{# goods}}
35 {{> good}} 35 {{> good}}
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 39
40 <div id="goods-container" class="goods-container"> 40 <div id="goods-container" class="goods-container">
41 {{# goodsContainer}} 41 {{# goodsContainer}}
42 - <div class="new-goods container"> 42 + <div class="new-goods container clearfix">
43 {{#if goods}} 43 {{#if goods}}
44 {{# goods}} 44 {{# goods}}
45 {{> good}} 45 {{> good}}
@@ -48,8 +48,8 @@ @@ -48,8 +48,8 @@
48 <p class="no-result">未找到相关搜索结果</p> 48 <p class="no-result">未找到相关搜索结果</p>
49 {{/if}} 49 {{/if}}
50 </div> 50 </div>
51 - <div class="price-goods container hide"></div>  
52 - <div class="discount-goods container hide"></div> 51 + <div class="price-goods container hide clearfix"></div>
  52 + <div class="discount-goods container hide clearfix"></div>
53 {{/ goodsContainer}} 53 {{/ goodsContainer}}
54 54
55 {{> filter}} 55 {{> filter}}
1 <div class="banner-top"> 1 <div class="banner-top">
2 <div class="banner-swiper swiper-container"> 2 <div class="banner-swiper swiper-container">
3 <ul class="swiper-wrapper"> 3 <ul class="swiper-wrapper">
4 - {{# list}}  
5 - <li class="swiper-slide">  
6 - <a href="{{url}}">  
7 - <img class="swiper-lazy" data-src="{{img}}">  
8 - </a>  
9 - <div class="swiper-lazy-preloader"></div>  
10 - </li>  
11 - {{/ list}} 4 + {{#each list}}
  5 + {{#if @first}}
  6 + <li class="swiper-slide">
  7 + <a href="{{url}}">
  8 + <img src="{{img}}">
  9 + </a>
  10 + </li>
  11 + {{^}}
  12 + <li class="swiper-slide">
  13 + <a href="{{url}}">
  14 + <img class="swiper-lazy" data-src="{{img}}">
  15 + </a>
  16 + <div class="swiper-lazy-preloader"></div>
  17 + </li>
  18 + {{/if}}
  19 + {{/each}}
12 </ul> 20 </ul>
13 </div> 21 </div>
14 <div class="swiper-pagination"> 22 <div class="swiper-pagination">
1 <div class="icons-wrapper"> 1 <div class="icons-wrapper">
2 <ul class="icons-list clearfix"> 2 <ul class="icons-list clearfix">
3 {{#list}} 3 {{#list}}
4 - <li class="icons-item"><a href="{{url}}" class="imagebar"><img class="lazy" data-original="{{img}}" alt=""></a><a href="{{url}}" class="linkbar">{{title}}</a></li> 4 + <li class="icons-item"><a href="{{url}}" class="imagebar"><img src="{{img}}" alt=""></a><a href="{{url}}" class="linkbar">{{title}}</a></li>
5 {{/list}} 5 {{/list}}
6 </ul> 6 </ul>
7 -</div>  
  7 +</div>