Authored by lore-w

'我的收藏改为ajax分页/意见反馈功能性修改'

... ... @@ -18,18 +18,18 @@ class Yohobuy
{
/* 正式环境 */
// const API_URL = 'http://api2.open.yohobuy.com/';
// const API_URL2 = 'http://api.open.yohobuy.com/';
// const SERVICE_URL = 'http://service.api.yohobuy.com/';
// const YOHOBUY_URL = 'http://www.yohobuy.com/';
const API_URL = 'http://api2.open.yohobuy.com/';
const API_URL2 = 'http://api.open.yohobuy.com/';
const SERVICE_URL = 'http://service.api.yohobuy.com/';
const YOHOBUY_URL = 'http://www.yohobuy.com/';
/* 测试环境 */
const API_URL = 'http://test2.open.yohobuy.com/';
const SERVICE_URL = 'http://test.service.api.yohobuy.com/';
const YOHOBUY_URL = 'http://www.yohobuy.com/';
const API_URL_MYCENTER = 'http://192.168.102.205:8081/api-gateway-web/'; // 我的个人中心接口URL
const API_URL_SHOPINGCART = 'http://192.168.102.213:8080/api-gateway-web/'; // 我的购物车接口URL
const API_URL_PRODUCTDETAIL = 'http://192.168.102.209:18080/yoho-product/'; // 商品详情页
// const API_URL = 'http://test2.open.yohobuy.com/';
// const SERVICE_URL = 'http://test.service.api.yohobuy.com/';
// const YOHOBUY_URL = 'http://www.yohobuy.com/';
// const API_URL_MYCENTER = 'http://192.168.102.205:8081/api-gateway-web/'; // 我的个人中心接口URL
// const API_URL_SHOPINGCART = 'http://192.168.102.213:8080/api-gateway-web/'; // 我的购物车接口URL
// const API_URL_PRODUCTDETAIL = 'http://192.168.102.209:18080/yoho-product/'; // 商品详情页
/**
* 私钥列表
... ...
... ... @@ -12,26 +12,43 @@ var diaLog = require('./dialog');
var $navLi = $('#fav-tab > li'),
$favContainer = $('.fav-content > .fav-type'),
$swiperList = $('.swiper-container'),
$swiperList = '',
swiperObj = {},
favTabHammer,
favContentHammer;
favContentHammer,
footerH = $('#yoho-footer').height(),
$loadMore = $('.fav-load-more'),
$brandLoadMore = $('.fav-brand-load-more'),
winH = $(window).height(),
$favProductList = $('.fav-product-list'),
$favBrandList = $('.fav-brand-swiper'),
pageId = 1,
brandPageId = 1, //收藏品牌的当前页数
lockId = true,
brandLockId = true, //收藏品牌是否可下拉加载更多
brandTab = false; //当前是否停留在收藏品牌页
function showFavTab(index) {
var i,
id;
$navLi.filter('.active').removeClass('active');
$navLi.eq(index).addClass('active');
$favContainer.filter('.show').removeClass('show');
$favContainer.eq(index).addClass('show');
}
if (index === 1) {
//初始化swiper
function initSwiper() {
var i,
id;
//导航
$swiperList = $('.swiper-container');
for (i = 0; i < $swiperList.length; i++) {
id = $swiperList.eq(i).attr('data-id');
console.log(id);
if (!!swiperObj[id]) {
swiperObj[id].destroy(true, true);
}
swiperObj[id] = new Swiper('#swiper-container-' + id, {
slidesPerView: 'auto',
grabCursor: true,
... ... @@ -41,15 +58,71 @@ function showFavTab(index) {
watchSlidesVisibility: true
});
}
}
// 上拉加载更多
function loadData($parent, url, page) {
if (url === 'favBrand') {
brandLockId = true;
} else {
lockId = true;
}
$.ajax({
method: 'post',
url: '/home/' + url,
data: {
page: page
},
success: function(data) {
//setTimeout(function() { //模拟延时
if (url === 'favBrand') {
$brandLoadMore.addClass('hide');
} else {
$loadMore.addClass('hide');
}
if (data === ' ') {
$parent.closest('.fav-type').find('.fav-null-box').removeClass('hide');
} else if (data === 'end') {
$parent.closest('.fav-type').find('.fav-load-background')
.removeClass('fav-load-background').html('没有更多了');
} else if (data.length > 10) {
$parent.append(data);
if (url === 'favBrand') {
initSwiper();//如果是收藏品牌需要初始化swiper
brandLockId = false;//请求成功后解锁品牌收藏page++
} else {
lockId = false;//请求成功后解锁商品收藏page++
}
window.rePosFooter();
} else {
return;
}
window.rePosFooter();
//},1000);
}
});
}
// 如果从品牌收藏入口进入
if ($('#fav-tab').hasClass('brand-tab')) {
showFavTab(1);
loadData($favBrandList, 'favBrand', 1);
brandTab = true;
window.rePosFooter();
} else {
showFavTab(0);
loadData($favProductList, 'favProduct', 1);
brandTab = false;
window.rePosFooter();
}
favTabHammer = new Hammer(document.getElementById('fav-tab'));
... ... @@ -62,7 +135,20 @@ favTabHammer.on('tap', function(e) {
}
index = $cur.index();
if (index === 0) {
if ($favProductList.find('li').length === 0 &&
$favProductList.closest('.fav-type').find('.fav-null-box').hasClass('hide')) {
loadData($favProductList, 'favProduct', 1);
}
} else {
if ($favBrandList.find('div').length === 0 &&
$favBrandList.closest('.fav-type').find('.fav-null-box').hasClass('hide')) {
loadData($favBrandList, 'favBrand', 1);
}
}
showFavTab(index);
window.rePosFooter();
});
... ... @@ -118,3 +204,30 @@ favContentHammer.on('tap', function(e) {
});
});
});
// 上拉加载更多
$(document).scroll(function() {
if ($(window).scrollTop() + winH >= $(document).height() - footerH) {
if (brandTab) {
$brandLoadMore.filter('.hide').removeClass('hide');
if (!brandLockId) {
brandPageId++;
}
} else {
$loadMore.filter('.hide').removeClass('hide');
if (!lockId) {
console.log(222);
pageId++;
loadData($favProductList, 'favProduct', pageId);
}
}
}
});
\ No newline at end of file
... ...
... ... @@ -99,6 +99,7 @@ if (document.getElementById('img-form') !== null) {
// 点赞与取消点赞
$likeBtn.bind('click', function() {
var id = $(this).closest('.suggest-item').attr('data-id'),
$that = $(this);
... ... @@ -110,13 +111,8 @@ $likeBtn.bind('click', function() {
}
}).then(function(data) {
if (data.code === 200) {
if ($that.hasClass('active')) {
$that.closest('.suggest-type').removeClass('active')
.prev('.suggest-type').addClass('active');
} else {
$that.closest('.suggest-type').addClass('active')
.next('.suggest-type').removeClass('active');
}
$that.closest('.suggest-type').removeClass('show');
$('.suggest-good').addClass('show');
}
}).fail(function(data) {
... ... @@ -125,6 +121,7 @@ $likeBtn.bind('click', function() {
});
$disLikeBtn.bind('click', function() {
var id = $(this).closest('.suggest-item').attr('data-id'),
$that = $(this);
... ... @@ -136,7 +133,8 @@ $disLikeBtn.bind('click', function() {
}
}).then(function(data) {
if (data.code === 200) {
$that.toggleClass('active');
$that.closest('.suggest-type').removeClass('show');
$('.suggest-bad').addClass('show');
}
}).fail(function(data) {
... ...
... ... @@ -137,6 +137,7 @@
bottom: pxToRem(20px);
left: 0;
width: 100%;
min-height: pxToRem(24px);
&.save-price-number {
text-indent: $width + pxToRem(10px);
... ... @@ -276,4 +277,18 @@
}
}
}
//上拉加载更多
.fav-load-more,.fav-brand-load-more {
width: 100%;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #444;
&.load-background {
background: image_url('loading.gif') center center no-repeat;
@include background-size(auto 40%);
}
}
}
\ No newline at end of file
... ...
... ... @@ -66,7 +66,9 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
color: #b0b0b0;
font-size: pxToRem(26px);
display: none;
text-align: center;
&.suggest-active {
> div {
width: 50%;
float: left;
... ... @@ -91,19 +93,30 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
}
}
}
&.active {
color: #444;
}
}
&.active {
text-align: center;
> .active {
color: #444;
}
&.show {
display: block;
}
&.suggest-bad {
> div {
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
@include rotate(180deg);
}
}
}
}
}
}
}
... ... @@ -119,6 +132,7 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
font-size: pxToRem(30px);
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-top: -1px;
> span {
color: #b0b0b0;
... ...
... ... @@ -7,22 +7,22 @@
</ul>
<div class="fav-content" id="fav-content">
<div class="fav-type">
<ul class="fav-product-list">
{{> home/favorite_product_list}}
</ul>
<ul class="fav-product-list"></ul>
{{^ hasFavProduct}}
<div class="fav-null-box hide">
<span class="fav-null">您暂无收藏任何商品</span>
<a class="go-shopping" href="{{productUrl}}">随便逛逛</a>
{{/ hasFavProduct}}
</div>
<div class="fav-load-more fav-load-background hide"></div>
</div>
<div class="fav-type">
{{> home/favorite_brand_list}}
<div class="fav-brand-swiper"></div>
{{^ hasFavBrand}}
<div class="fav-null-box hide">
<span class="fav-null">您暂无收藏任何品牌</span>
<a class="go-shopping" href="{{brandUrl}}">随便逛逛</a>
{{/ hasFavBrand}}
</div>
<div class="fav-brand-load-more load-background hide"></div>
</div>
</div>
{{/ favorite}}
... ...
... ... @@ -13,22 +13,33 @@
<h2>{{title}}</h2>
<p>{{content}}</p>
<div class="suggest-type {{^ good}}show{{/ good}}">
<div class="like-btn">
<div class="suggest-type suggest-good">
<div class="active">
<span class="iconfont">&#xe601;</span>
<span>靠谱</span>
<span>靠谱,谢谢您的反馈</span>
</div>
</div>
<div class="dislike-btn {{# bad}}active{{/ bad}}">
<div class="suggest-type suggest-bad">
<div class="active">
<span class="iconfont">&#xe601;</span>
<span>不靠谱</span>
<span>不靠谱,谢谢您的反馈</span>
</div>
</div>
<div class="like-btn active suggest-type {{# good}}show{{/ good}}">
{{# none}}
<div class="suggest-type suggest-active show">
<div class="like-btn">
<span class="iconfont">&#xe601;</span>
<span>靠谱,谢谢您的反馈</span>
<span>靠谱</span>
</div>
<div class="dislike-btn">
<span class="iconfont">&#xe601;</span>
<span>不靠谱</span>
</div>
</div>
{{/ none}}
</div>
{{/ suggestContent}}
</div>
<a class="create-new-suggest" href="./suggestSub">
... ...
... ... @@ -95,20 +95,13 @@ class HomeController extends AbstractAction
$this->setNavHeader('我的收藏', true, SITE_MAIN);
$tab = $this->get('tab', '');
$uid = $this->getUid();
$gender = Helpers::getGenderByCookie();
$favProducts = UserModel::getFavProductData($this->_uid, 1, 10);
$favBrands = UserModel::getFavBrandData($this->_uid, 10, 1, 10);
$data = array(
'favPage' => true, //加载js
'pageFooter' => true,
'favorite' => true,
'hasFavProduct' => $favProducts,
'productUrl' => '/product/new',
'hasFavBrand' => $favBrands,
'brandUrl' => '/product/new'
'brandUrl' => '/product/new',
);
// 判断是否为品牌收藏页
if ($tab === 'brand') {
... ... @@ -132,6 +125,8 @@ class HomeController extends AbstractAction
if (empty($result)) {
echo ' ';
} else if (isset($result['end'])) {
echo 'end';
} else {
$this->_view->display('favorite_product', $result);
}
... ... @@ -145,12 +140,15 @@ class HomeController extends AbstractAction
if ($this->isAjax()) {
$page = $this->post('page', 1);
$gender = Helpers::getGenderByCookie();
$result = UserModel::getFavBrandData($this->_uid, 10, $page, 10);
$result = UserModel::getFavBrandData($this->_uid, $gender, $page, 10);
}
if (empty($result)) {
echo ' ';
} else if (isset($result['end'])) {
echo 'end';
} else {
$this->_view->display('favorite_brand', $result);
}
... ...
... ... @@ -157,8 +157,16 @@ class UserModel
$favProduct = UserData::favoriteProductData($uid, $page, $limit);
// 处理用户收藏的商品数据
if (isset($favProduct['data']) && !empty($favProduct['data'])) {
if (isset($favProduct['data']) && !empty($favProduct['data']['product_list'])) {
if ($page > $favProduct['data']['page_total']) {
$result['end'] = true;
return $result;
}
$datas = array();
$product = array();
foreach ($favProduct['data']['product_list'] as $val) {
$product = array();
$product['fav_id'] = $val['product_id'];
... ... @@ -169,9 +177,10 @@ class UserModel
$product['savePrice'] = ($val['market_price'] - $val['sales_price'] > 0) ? '¥'.($val['market_price'] - $val['sales_price']) . '.00' : false;
$product['sellOut'] = (bool)($val['price_down']);
$result[] = $product;
$datas[] = $product;
}
!empty($datas) && $result['hasFavProduct'] = $datas;
}
return $result;
... ... @@ -182,9 +191,11 @@ class UserModel
*
* @param int $uid 用户ID
* @param string $gender 性别 1,3表示男,2,3表示女,1,2,3表示全部
* @param int $page 第几页
* @param int $limit 限制读取的数目
* @return array|mixed 处理之后的收藏的品牌数据
*/
public static function getFavBrandData($uid, $gender)
public static function getFavBrandData($uid, $gender, $page, $limit)
{
$result = array();
... ... @@ -192,8 +203,16 @@ class UserModel
$favBrand = UserData::favoriteBrandData($uid, $gender);
// 处理用户收藏的品牌数据
if (isset($favBrand['data']) && !empty($favBrand['data'])) {
if (isset($favBrand['data']) && !empty($favBrand['data']['brand_list'])) {
if ($page > $favBrand['data']['page_total']) {
$result['end'] = true;
return $result;
}
$datas = array();
$brand = array();
foreach ($favBrand['data']['brand_list'] as $val) {
$brand = array();
$brand['id'] = $val['brand_id'];
... ... @@ -214,8 +233,10 @@ class UserModel
$brand['productList'][] = $product;
}
$result[] = $brand;
$datas[] = $brand;
}
!empty($datas) && $result['hasFavBrand'] = $datas;
}
return $result;
... ...