Authored by 肖亚东

首页推荐商品列表添加 — review by 黄敬囿

<swiper class="banner" indicator-dots="true" autoplay="true"
interval="3500" circular="true" indicator-color='rgba(255,255,255,0.2)'
indicator-active-color="rgba(255,255,255,1)">
<block wx:for="{{ data.data }}" wx:key="{{index}}">
<block tt:for="{{ data.data }}" tt:key="{{index}}">
<swiper-item>
<image src="{{item.src}}" class="new-focus-img"
mode="aspectFill "data-url="{{item.url}}"
... ...
<!-- 首页潮流品牌 -->
<view class='horImgContainer'>
<scroll-view class='horImgScrollView' scroll-x="true">
<block wx:for="{{ data.data }}" wx:key="{{index}}">
<block tt:for="{{ data.data }}" tt:key="{{index}}">
<view class="hor-Item" style="margin-left:{{index==0?'16rpx':'0'}}"
bindtap="jumpByRule" data-jump_rule="{{item.url}}"
data-brand-id="{{item.id}}" data-brand-name="{{item.name}}"
... ...
<!-- 首页潮流品牌 -->
<scroll-view class="hor-product-container" scroll-x="true">
<block wx:for="{{ data.list }}" wx:key="{{index}}"
wx:for-item="item">
<block tt:for="{{ data.list }}" tt:key="{{index}}"
tt:for-item="item">
<view class="group-product-item"
bindtap="productItemTapped"
data-skn="{{item.productSkn}}"
... ...
<!-- 热门品类 -->
<view class="catgoryContainer">
<block wx:for="{{data.data}}" wx:key="{{index}}">
<block tt:for="{{data.data}}" tt:key="{{index}}">
<view class="category" bindtap="jumpByRule"
style="width: {{itemWidth}}px;border-right:{{index % 4 == 3 ? '0px' : '1px #dddddd solid;'}}"
data-jump_rule="{{item.url}}" data-url="{{item.url}}"
... ...
<!-- 首页最新活动 -->
<view class="activityContainer">
<block wx:for="{{activityList}}" wx:key="{{index}}">
<block tt:for="{{activityList}}" tt:key="{{index}}">
<view class="activity" bindtap="jumpByRule"
data-jump_rule="{{item.url}}" data-url="{{item.url}}"
data-index="{{index}}"data-f_id="{{f_id}}"
... ...
import { getChannelCode, getGenderCode, getRecPosCode, getRecommandContentCode, getResourceCode,getHomeContentCode} from '../../utils/home';
import homeService from './indexService.js'
import { parseProductListData } from '../../utils/productListUtil';
//获取应用实例
let app = getApp()
... ... @@ -36,69 +37,6 @@ Page({
},
}
},
'bannerList': [
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/21/13/01028381b6f5db69fdbebba95f3aade7bc.jpg'},
{'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/14/17/01e5af09eaec1c1d1e1c920586e8127489.jpg'}
],
'categoryList': [
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'}
],
'brandList':[
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'},
{'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/07/10/13/01f3619775fe5f22467ef884b614b1ec3e.jpg'}
],
'activityList': [
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'},
{'src': 'http://img13.static.yhbimg.com/article/2018/11/21/18/02a7e5be8e9c6e85492fa61d1cb57f913c.jpg'}
],
'productList': [
{
'src': 'http://img13.static.yhbimg.com/goodsimg/2017/09/27/13/02dac922f0856fcb6d9912865243cff2f6.jpg',
'title': 'THETHING',
'price': '¥1200.00'
},{
'src': 'http://img13.static.yhbimg.com/goodsimg/2017/09/27/13/02dac922f0856fcb6d9912865243cff2f6.jpg',
'title': 'THETHING羽绒服羽绒服羽绒服',
'price': '¥1200.00'
},{
'src': 'http://img13.static.yhbimg.com/goodsimg/2017/09/27/13/02dac922f0856fcb6d9912865243cff2f6.jpg',
'title': 'Red Charcoal',
'price': '¥1109.00'
},{
'src': 'http://img10.static.yhbimg.com/goodsimg/2018/10/25/11/01ac8f33d0272b233c7e303424d342ff65.jpg',
'title': 'Red Charcoal',
'price': '¥1109.00'
},{
'src': 'http://img10.static.yhbimg.com/goodsimg/2018/10/25/11/01ac8f33d0272b233c7e303424d342ff65.jpg',
'title': 'Red Charcoal',
'price': '¥1109.00'
},{
'src': 'http://img13.static.yhbimg.com/goodsimg/2017/09/27/13/02dac922f0856fcb6d9912865243cff2f6.jpg',
'title': 'THETHING',
'price': '¥1200.00'
}
],
'singleImage': 'http://img10.static.yhbimg.com/yhb-img01/2018/06/20/13/01b8a424ad754cf867b0bbe8d66e833300.jpg'
},
onLoad: function () {
this.fetchNewHomeData();
... ... @@ -193,81 +131,88 @@ Page({
homelist: currentData.data,
})
}
console.log('====================================');
console.log('==============楼层数据===============');
console.log(currentData.data);
console.log('====================================');
// this.fetchRecommend(force);
this.fetchRecommend(force);
},
//请求(男生、女生)猜你喜欢数据
// fetchRecommend: function (force) {
// let currentChannel = this.data.selectedChannel;
// let currentChannelData = this.data.newChannels[currentChannel];
// let recommend = currentChannelData.recommend;
// if (recommend.data && recommend.data.length > 0 && !force) {
// return;
// }
fetchRecommend: function (force) {
let currentChannel = this.data.selectedChannel;
let currentChannelData = this.data.newChannels[currentChannel];
let recommend = currentChannelData.recommend;
if (recommend.data && recommend.data.length > 0 && !force) {
return;
}
// let param = {};
// let gender = getGenderCode(currentChannel);
// let yh_channel = getChannelCode(currentChannel);
// let content_code = getRecommandContentCode(currentChannel);
// let rec_pos = getRecPosCode(currentChannel);
// param = {
// content_code,
// gender,
// yh_channel,
// rec_pos,
// };
let param = {};
let gender = getGenderCode(currentChannel);
let yh_channel = getChannelCode(currentChannel);
let content_code = getRecommandContentCode(currentChannel);
let rec_pos = getRecPosCode(currentChannel);
param = {
content_code,
gender,
yh_channel,
rec_pos,
};
// let newChannelData = objectAssign(currentChannelData, { recommend: objectAssign(recommend, { isLoading: true, }) });
// let newChannels = this.data.newChannels;
// newChannels[currentChannel] = newChannelData;
let newChannelData = Object.assign(currentChannelData, { recommend: Object.assign(recommend, { isLoading: true, }) });
let newChannels = this.data.newChannels;
newChannels[currentChannel] = newChannelData;
// this.setData({
// newChannels: newChannels,
// });
this.setData({
newChannels: newChannels,
});
// homeService.getProductlist(param)
// .then(json => {
// if (!json || !json.code || json.code != 200) {
// let currentChannel = this.data.selectedChannel;
// let currentChannelData = this.data.newChannels[currentChannel];
// let newChannelData = objectAssign(currentChannelData, { recommend: objectAssign(recommend, { isLoading: false, error: { code: json.code, message: json.message } }) });
// let newChannels = this.data.newChannels;
// newChannels[currentChannel] = newChannelData;
homeService.getProductlist(param)
.then(json => {
console.log('==============商品数据===============');
console.log(json);
console.log('====================================');
if (!json || !json.code || json.code != 200) {
let currentChannel = this.data.selectedChannel;
let currentChannelData = this.data.newChannels[currentChannel];
let newChannelData = Object.assign(currentChannelData, { recommend: Object.assign(recommend, { isLoading: false, error: { code: json.code, message: json.message } }) });
let newChannels = this.data.newChannels;
newChannels[currentChannel] = newChannelData;
// this.setData({
// newChannels: newChannels,
// });
// return;
// }
this.setData({
newChannels: newChannels,
});
return;
}
// let data = json.data.product_list;
// data = parseBrandListData(data);
// let currentChannel = this.data.selectedChannel;
// let currentChannelData = this.data.newChannels[currentChannel];
// let newChannelData = objectAssign(currentChannelData, { recommend: objectAssign(recommend, { isLoading: false, data }) });
// let newChannels = this.data.newChannels;
// newChannels[currentChannel] = newChannelData;
let data = json.data.product_list;
data = parseProductListData(data);
let currentChannel = this.data.selectedChannel;
let currentChannelData = this.data.newChannels[currentChannel];
let newChannelData = Object.assign(currentChannelData, { recommend: Object.assign(recommend, { isLoading: false, data }) });
let newChannels = this.data.newChannels;
newChannels[currentChannel] = newChannelData;
// this.setData({
// newChannels: newChannels,
// });
// })
// .catch(error => {
// let currentChannel = this.data.selectedChannel;
// let currentChannelData = this.data.newChannels[currentChannel];
// let newChannelData = objectAssign(currentChannelData, { recommend: objectAssign(recommend, { isLoading: false, error }) });
// let newChannels = this.data.newChannels;
// newChannels[currentChannel] = newChannelData;
this.setData({
newChannels: newChannels,
});
// this.setData({
// newChannels: newChannels,
// });
// });
// },
console.log('====================================');
console.log(newChannels);
console.log('====================================');
})
.catch(error => {
let currentChannel = this.data.selectedChannel;
let currentChannelData = this.data.newChannels[currentChannel];
let newChannelData = Object.assign(currentChannelData, { recommend: Object.assign(recommend, { isLoading: false, error }) });
let newChannels = this.data.newChannels;
newChannels[currentChannel] = newChannelData;
this.setData({
newChannels: newChannels,
});
});
},
jumpByRuleEvent(event) {
console.log(event.detail);
... ...
... ... @@ -5,6 +5,7 @@
"home-brand": "../../components/home/home-brand/home-brand",
"home-new-activity": "../../components/home/home-new-activity/home-new-activity",
"home-single-image": "../../components/home/home-single-image/home-single-image",
"home-hor-product-list": "../../components/home/home-hor-product-list/home-hor-product-list"
"home-hor-product-list": "../../components/home/home-hor-product-list/home-hor-product-list",
"productCell": "../../components/productList/productCell"
}
}
... ...
... ... @@ -3,7 +3,7 @@
style="border-bottom:{{no_line?'0.5rpx solid #ffffff':'0.5rpx solid #e0e0e0'}}">
<view class='titleLine'></view>
<view class='titleDesc'>{{desc}}</view>
<view class='titleMore' wx:if='{{more_url?true:false}}' data-jump_rule="{{more_url}}" bindtap="jumpByRule">
<view class='titleMore' tt:if='{{more_url?true:false}}' data-jump_rule="{{more_url}}" bindtap="jumpByRule">
<image class="titleMoreIm" src="../../images/more_ic@2x.png" ></image>
</view>
</view>
... ... @@ -24,10 +24,10 @@
<image bindtap='selectChannel' class="channelIcon" src='../../images/ceb-ic@2x.png'></image>
</view>
<image class='newTopImg' src='../../images/home-top-bg2@2x.png'></image>
<image wx:if='{{channelSelect}}' class='channelBg' src='../../images/channel-bg@2x.png'></image>
<image tt:if='{{channelSelect}}' class='channelBg' src='../../images/channel-bg@2x.png'></image>
<form bindsubmit='formSubmitFromSwitchGender' report-submit='true'>
<view class='channelContainer' wx:if='{{channelSelect}}'>
<view class='channelContainer' tt:if='{{channelSelect}}'>
<view class='channelItem' data-type="boy" bindtap="channelSelected">
<view class='indicator' style="background-color:{{selectedChannel=='boy' ? 'white':'transparent'}}"></view>
... ... @@ -52,66 +52,66 @@
<scroll-view scroll-y="true" class="mainContainer">
<block wx:for='{{homelist}}' wx:key='{{index}}'>
<block tt:for='{{homelist}}' tt:key='{{index}}'>
<block wx:if="{{item.template_name=='focus' || item.template_name=='newFocus'}}">
<block tt:if="{{item.template_name=='focus' || item.template_name=='newFocus'}}">
<home-banner data="{{data:item.data,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-banner>
</block>
<!-- <block wx:if="{{item.template_name == 'image_list' && item.data.list.length == 4}}">
<!-- <block tt:if="{{item.template_name == 'image_list' && item.data.list.length == 4}}">
<template is='fourImage' data="{{data:item.data,f_id:item.template_id,f_index:index,f_name:item.template_name}}"/>
</block> -->
<!-- <block wx:if="{{item.template_name == 'twoPicture'}}">
<block wx:if="{{item.title}}">
<!-- <block tt:if="{{item.template_name == 'twoPicture'}}">
<block tt:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title,more_url:item.moreUrl,no_line:false}}"/>
</block>
<template is='twoImage' data="{{data:item.data,f_id:item.template_id,f_index:index,f_name:item.template_name,ratio:item.ratio,title:item.title}}"/>
</block> -->
<block wx:elif="{{item.template_name=='newSingleImage'}}">
<block wx:if="{{item.title}}">
<block tt:elif="{{item.template_name=='newSingleImage'}}">
<block tt:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title}}"/>
</block>
<home-single-image item="{{data:item,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-single-image>
</block>
<!-- <block wx:elif="{{item.template_name=='sv_new_user_floor'}}">
<!-- <block tt:elif="{{item.template_name=='sv_new_user_floor'}}">
<template is='newCustomerBanner' data="{{newCustomer: newCustomer, data:item.data.banner_image}}" />
</block> -->
<block wx:elif="{{item.template_name=='new_recommend_content_five'}}">
<block wx:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title,more_url:item.moreUrl,no_line:true}}"/>
</block>
<home-hot-category data="{{data:item.list,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-hot-category>
<block tt:elif="{{item.template_name=='new_recommend_content_five'}}">
<block tt:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title,more_url:item.moreUrl,no_line:true}}"/>
</block>
<home-hot-category data="{{data:item.list,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-hot-category>
</block>
<block wx:elif="{{item.template_name=='3:4ImageListFloor'}}">
<block wx:if="{{item.title}}">
<block tt:elif="{{item.template_name=='3:4ImageListFloor'}}">
<block tt:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title}}"/>
</block>
<home-brand data="{{data:item.list,title:item.title,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-brand>
<view wx:if="{{!item.title}}" style='width:100%;height:16rpx;background-color:white'/><!--兼容空白 后期需优化调整-->
<view tt:if="{{!item.title}}" style='width:100%;height:16rpx;background-color:white'/><!--兼容空白 后期需优化调整-->
</block>
<block wx:elif="{{item.template_name=='newProductListFloor'}}">
<block tt:elif="{{item.template_name=='newProductListFloor'}}">
<home-hor-product-list data="{{item.data}}" bindjumpByRule="jumpByRuleEvent"></home-hor-product-list>
</block>
<!--拼团购商品列表-->
<!-- <block wx:elif="{{item.template_name=='collageBuyPrdList'}}">
<!-- <block tt:elif="{{item.template_name=='collageBuyPrdList'}}">
</block> -->
<block wx:elif="{{item.template_name=='popularListFloor'}}">
<block tt:elif="{{item.template_name=='popularListFloor'}}">
<home-hor-product-list data="{{item.data}}" bindjumpByRule="jumpByRuleEvent"></home-hor-product-list>
</block>
<!-- <block wx:elif="{{item.template_name=='popularListFloor'}}">
<!-- <block tt:elif="{{item.template_name=='popularListFloor'}}">
<scroll-view class="activity-container-footer" scroll-x="true">
<block wx:for="{{item.data.list}}" wx:key="{{index}}" wx:for-item="item">
<block tt:for="{{item.data.list}}" tt:key="{{index}}" tt:for-item="item">
<view class="activity-item" bindtap="activityItemTapped" data-skn="{{item.product_skn}}"
data-f_id="{{item.template_id}}" data-f_index='{{item.index}}' data-f_inindex='{{index}}' data-f_name='newProductListFloor'>
<image src="{{item.default_images}}" class="activity-item-img"></image>
... ... @@ -121,21 +121,22 @@
</scroll-view>
</block> -->
<!-- <template is='tipTitle' data="{{desc:'热门品类', no_line: 'true'}}"/>
<home-hot-category category-list="{{categoryList}}"
bindjumpByRule="jumpByRuleEvent"></home-hot-category>
<template is='tipTitle' data="{{desc:'潮流品牌'}}"/>
<home-brand brand-list="{{brandList}}" bindjumpByRule="jumpByRuleEvent"></home-brand>
<home-brand brand-list="{{brandList}}" bindjumpByRule="jumpByRuleEvent"></home-brand>
<template is='tipTitle' data="{{desc:'最新活动'}}"/>
<!-- <template is='tipTitle' data="{{desc:'最新活动'}}"/>
<home-new-activity activity-list="{{activityList}}"
bindjumpByRule="jumpByRuleEvent"></home-new-activity>
bindjumpByRule="jumpByRuleEvent"></home-new-activity> -->
<template is='tipTitle' data="{{desc:'精彩活动'}}"/>
<home-single-image data="{{src:singleImage}}" bindjumpByRule="jumpByRuleEvent"></home-single-image>
<home-hor-product-list product-list="{{productList}}" bindjumpByRule="jumpByRuleEvent"></home-hor-product-list> -->
</block>
<!-- 商品推荐 -->
<block tt:elif="{{newChannels[selectedChannel]['recommend']['data']}}">
<template is='tipTitle' data="{{desc:'猜你喜欢'}}"/>
<view class="product-list">
<block tt:for="{{newChannels[selectedChannel]['recommend']['data']}}" tt:for-item="product" tt:key="{{index}}">
<productCell id="productCell" item="{{product}}"/>
</block>
</view>
</block>
</scroll-view>
... ...
... ... @@ -142,3 +142,9 @@
letter-spacing: 1.1px;
text-align: left;
}
.product-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
... ...