Authored by zhangxiaoru

shopCollect.js

... ... @@ -13,6 +13,12 @@ const shopIndex = (req, res, next) => {
navTitle: '店铺收藏'
}),
shopCollect: {
bannerTop: {
data: [
{src: '//img10.static.yhbimg.com/yhb-img01/2016/10/10/15/01a6351f91fe38304d268db009c9126bd4.jpg?imageView2/2/w/640/h/240/q/70'},
{src: '//img11.static.yhbimg.com/yhb-img01/2016/10/12/17/0168982b53cefca01ff3b2c5b91e606714.jpg?imageView2/2/w/640/h/240/q/70'}
]
},
navList: [
{
navName: '推荐'
... ... @@ -37,7 +43,7 @@ const shopIndex = (req, res, next) => {
}
]
}
});
}).catch(next);
};
module.exports = {
... ...
... ... @@ -4,19 +4,21 @@
{{> resources/banner-top}}
{{/ bannerTop}}
<ul class="nav">
{{# navList}}
<li class="nav-info"><a href="{{navSrc}}">{{navName}}</a></li>
{{/ navList}}
</ul>
<div class="shop-nav nav">
{{!-- <ul class="swiper-wrapper clearfix">
{{# navList}}
<li class="swiper-slide"><a href="{{navSrc}}">{{navName}}</a></li>
{{/ navList}}
</ul> --}}
</div>
<div class="shop-list">
{{!-- {{# shopList}} --}}
<div class="shop-info">
<div class="shop-info" data-id="1284">
<div class="info-title">
<div class="collect">
<span class="fans">粉丝{{fansNum}}</span>
<i class="iconfont like">&#xe605;</i>
<i class="iconfont collect-btn already-collect">&#xe605;</i>
</div>
<div class="shop-tile">
... ...
<ul class="swiper-wrapper clearfix">
{{# navList}}
<li class="swiper-slide"><a href="{{navSrc}}">{{navName}}</a></li>
{{/ navList}}
</ul>
\ No newline at end of file
... ...
... ... @@ -3,14 +3,105 @@
*/
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper');
Swiper = require('yoho-swiper'),
tip = require('../plugin/tip');
// tip = require('../../plugin/tip');
// Handlebars = require('yoho-handlebars');
// $(function() {
// new Swiper('.nav', {
// slideElement: 'nav-info',
// slidesPerView: 'auto',
// watchSlidesVisibility: true
// });
// });
var searching,
$collect = $('.collect-btn'),
shopId,
navSwiper;
var shopNav = require('./collect-shop/shop-nav.hbs');
var navString = shopNav({
navList: [
{
navName: '欧美'
},
{
navName: '欧美'
},
{
navName: '推荐'
}
]
});
require('../common');
$('.shop-nav').append(navString);
$collect.on('touchstart', function() {
var opt,
$this = $(this);
shopId = $this.parents('.shop-info').data('id');
if (searching) {
return;
}
searching = true;
if ($collect.hasClass('already-collect')) {
opt = 'cancel';
} else {
opt = 'ok';
}
$.ajax({
method: 'get',
url: location.protocol + '//m.yohobuy.com' + '/product/opt/favoriteBrand',
data: {
id: shopId,
opt: opt,
type: 'shop',
},
xhrFields: {
withCredentials: true
},
success: function(data) {
if (data.code === 200) {
if ($collect.hasClass('already-collect')) {
$collect.removeClass('already-collect');
tip.show('店铺取消收藏成功');
} else {
$collect.addClass('already-collect');
tip.show('店铺收藏成功');
}
}
if (data.code === 400) {
window.location.href = 'http://www.yohobuy.com/passport/login';
}
searching = false;
},
error: function() {
tip.show('网络断开连接了~');
searching = false;
}
});
});
$(function() {
navSwiper = new Swiper('.shop-nav', {
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li'
});
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
});
... ...
.shop-collect {
background: #f0f0f0;
.nav {
width: 100%;
height: 90px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 30px;
li {
float: left;
width: 160px;
width: 160.5px;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
margin: 25px 0 25px 0;
margin: 25px 0;
border-right: 1px solid #e0e0e0;
a {
... ... @@ -36,12 +32,14 @@
.shop-list {
width: 100%;
background: #f0f0f0;
padding-top: 30px;
.shop-info {
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 30px;
}
.info-title {
... ... @@ -59,9 +57,13 @@
margin-right: 30px;
}
.like {
.collect-btn {
color: #b0b0b0;
}
.already-collect {
color: #d0021b;
}
}
.shop-tile {
... ... @@ -104,4 +106,4 @@
}
}
}
}
\ No newline at end of file
}
... ...