fe / yoho-miniapp-eshop · Commits

Go to a project

Authored by 李奇
Commit 6b76f4d69d1004d1cfad615cf7ac588798b57d7f 1 parent d27ab12d

分类页修改

Inline Side-by-side
Showing 3 changed files with 48 additions and 474 deletions
import Yas from '../../../common/yas';
import categoryModel from '../../../models/product/category';
import shopModel from '../../../models/product/shop';
const app = getApp();
const router = global.router;
const genderMap = {
1: '1,3',
2: '2,3'
};
let yas;
Page({
data: {
scrollHeight: app.globalData.systemInfo.windowHeight - 120,
currentId: null,
currentName: '',
categoryList: [],
subCategoryList: []
show: false
},
onLoad: function() {
this.categoryGroup = {};
this.subCategoryGroup = {};
this.loadCategoryList();
this.loadShopList();
yas = new Yas(app);
},
onShow: function() {
yas.pageOpenReport();
yas.report('YB_MAIN_TAB_C', {TAB_ID: 2});
},
loadCategoryList() {
const channelList = [
{name: 'Men', id: '1'},
{name: 'Women', id: '2'},
{name: 'Kids', id: '3'}
];
new Promise(resolve => {
let group = {};
let backNum = 0;
const backFn = () => {
backNum++;
if (backNum >= channelList.length) {
return resolve(group);
}
};
channelList.map(value => {
categoryModel.categoryList(value.id).then(res => {
if (res.code === 200 && res.data && res.data.length) {
value.hasCate = true;
group[value.id] = res.data;
}
backFn();
}).catch(() => {
backFn();
});
return value;
});
}).then(res => {
let currentChannel;
let channelLength = 0;
this.categoryGroup = res || {};
channelList.forEach(value => {
if (!value.hasCate) {
return;
}
channelLength++;
if (!currentChannel) {
currentChannel = value.id;
}
});
expandItem: function(e) {
if (e.target) {
this.setData({
pageLoaded: true,
channelList,
channelLength
});
this.changeChannel({currentTarget: {dataset: {
id: currentChannel
}}});
});
},
loadSubCategoryList(id, channelId) {
let subCateList = this.subCategoryGroup[id];
if (subCateList) {
return Promise.resolve(subCateList);
} else {
return categoryModel.subCategoryList({id, channelId}).then(res => {
if (res && res.code === 200) {
let list = res.data || [];
this.subCategoryGroup[id] = list;
return list;
}
return false;
}).catch(() => {
return false;
show: !this.data.show
});
}
},
loadShopList() {
shopModel.shopList().then(res => {
if (res.code !== 200) {
return;
}
this.setData({shopList: res.data.shop_product_list || []});
});
},
changeChannel(e) {
let currentChannel = e.currentTarget.dataset.id;
if (currentChannel === this.data.currentChannel) {
return;
}
let categoryList = this.categoryGroup[currentChannel] || [];
let defaultCate = categoryList[0];
this.setData({
currentChannel,
categoryList
});
if (defaultCate) {
this.changeCategory({currentTarget: {dataset: {
id: defaultCate.category_id,
name: defaultCate.category_name
}}});
}
},
changeCategory(e) {
let data = e.currentTarget.dataset || {};
if (data.id === this.data.currentId) {
return;
}
this.loadSubCategoryList(data.id, this.data.currentChannel).then(list => {
if (!list) {
return;
}
if (!list.length && e.type) {
return this.goCategoryListWithId({currentTarget: {dataset: {
cid: data.id
}}});
}
this.setData({
currentId: data.id,
currentName: data.name,
subCategoryList: list || []
});
});
},
goCategoryList(e) {
const key = e.currentTarget.dataset.key;
let cate = this.data.subCategoryList[key] || {};
let params = cate.relation_parameter || {};
params.title = cate.category_name;
yas.report('YB_CATEGORY_FLR_C', {
TAB_ID: this.data.currentChannel,
L1_CATE_ID: this.data.currentId,
F_ID: 1002,
I_INDEX: key + 1,
L2_CATE_ID: cate.category_id
});
params.gender = genderMap[this.data.currentChannel] || '';
router.go('productList', params);
},
goCategoryListWithId(e) {
const cateId = e.currentTarget.dataset.cid;
const categoryList = this.data.categoryList || [];
let cate;
categoryList.forEach(value => {
if (cateId === value.category_id) {
cate = value;
}
});
if (cate) {
let params = cate.relation_parameter || {};
params.title = cate.category_name;
if (e.type) {
yas.report('YB_CATEGORY_FLR_C', {
TAB_ID: this.data.currentChannel,
L1_CATE_ID: this.data.currentId,
F_ID: 1002,
I_INDEX: 0,
L2_CATE_ID: 0
});
}
params.gender = genderMap[this.data.currentChannel] || '';
router.go('productList', params);
}
},
goProductDetail(e) {
const dataset = e.currentTarget.dataset;
const skn = dataset.skn;
yas.report('YB_CATEGORY_FLR_C', {
SHOP_ID: dataset.sid,
I_INDEX: dataset.shopIndex + 1,
L_INDEX: dataset.index + 1,
PRD_SKN: skn
});
router.go('productDetail', {productSkn: skn});
},
goShopList(e) {
const shopId = e.currentTarget.dataset.id;
const index = e.currentTarget.dataset.index;
yas.report('YB_CATEGORY_FLR_C', {
SHOP_ID: shopId,
TAB_ID: this.data.currentChannel,
L1_CATE_ID: this.data.currentId,
F_ID: 1003,
I_INDEX: index + 1,
L_INDEX: 0
});
router.go('productShop', {shopId});
}
});
... ...
<wxs src="../../../wxs/helper.wxs" module="helper" />
<view class="container">
<view wx:if="{{channelLength > 1}}" class="channel-list channel-list-{{channelLength}}">
<text wx:for="{{channelList}}" wx:key="{{item.id}}" class="channel-item {{currentChannel == item.id ? 'active' : ''}}" data-id="{{item.id}}" bindtap="changeChannel">{{item.name}}</text>
</view>
<view class="category-wrap" style="height: {{scrollHeight}}px;">
<view class="right-list">
<view class="category-header"> — 全部{{currentName}} — </view>
<view class="sub-list-block clearfix">
<view wx:for="{{subCategoryList}}" wx:key="{{item.category_id}}" class="category-sub-item" data-key="{{index}}" bindtap="goCategoryList">
<image wx:if="{{item.default_images}}" src="{{helper.image(item.default_images, 64, 84)}}"
class="item-img"></image>
<view class="item-name">{{item.category_name}}</view>
</view>
<view wx:if="{{currentId}}" class="category-sub-item more-item" data-cid="{{currentId}}" bindtap="goCategoryListWithId">
<view class="item-name">MORE</view>
</view>
</view>
</view>
<view class="left-list">
<view wx:for="{{categoryList}}" wx:key="{{item.category_id}}" class="category-item {{currentId == item.category_id ? 'active' : ''}}" data-id="{{item.category_id}}" data-name="{{item.category_name}}" bindtap="changeCategory">{{item.category_name}}</view>
<view class="container category">
<view class="gap"></view>
<view class="all">全部商品</view>
<view class="gap"></view>
<view class="items" >
<view class="item" bindtap="expandItem">上衣</view>
<view class="item">裤装</view>
<view class="item">鞋靴</view>
<view class="item">包类</view>
<view class="item">裙装</view>
<view class="item">服配</view>
<view class="item-expand {{show ? 'open' : ''}}">
</view>
</view>
<block wx:if="{{shopList.length > 0}}">
<view class="category-line"></view>
<view class="hot-shops">
<view-title title="热门品牌" height="88"></view-title>
<view class="shop-list">
<view wx:for="{{shopList}}" wx:key="{{item.shop_id}}" class="shop-item" wx:for-index="shopIdx">
<view class="shop-info">
<image src="{{helper.image(item.brand_ico, 50, 50)}}" class="shop-logo"></image>
<text class="shop-name">{{item.brand_name}}</text>
<view class="go-shop" data-id="{{item.shop_id}}" data-index="{{shopIdx}}" bindtap="goShopList">进入店铺
<text
class="iconfont icon-right"></text></view>
</view>
<view class="scoll-wrap">
<view class="shop-goods">
<view wx:for="{{item.shop_product_list}}" wx:for-item="goods" wx:key="{{index}}"
class="goods-item" data-sid="{{item.shop_id}}" data-skn="{{goods.product_skn}}"
data-index="{{index}}" data-shop-index="{{shopIdx}}" bindtap="goProductDetail">
<image src="{{helper.image(goods.default_images, 94, 150)}}" class="goods-img"></image>
<text class="price">¥ {{helper.round(goods.sales_price)}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="category-line"></view>
</block>
<copyright></copyright>
</view>
... ...
.channel-list {
width: 100%;
border-top: 1rpx solid #e0e0e0;
font-size: 0;
white-space: nowrap;
padding: 14rpx 0;
overflow: hidden;
.category .gap {
height: 20rpx;
background-color: #f2f2f2;
}
.channel-list .channel-item {
height: 60rpx;
line-height: 60rpx;
font-size: 34rpx;
color: #b0b0b0;
display: inline-block;
text-align: center;
border-left: 1rpx solid #e0e0e0;
}
.channel-list.channel-list-2 .channel-item {
width: 50%;
}
.channel-list.channel-list-3 .channel-item {
width: 33.33%;
}
.channel-list .channel-item:first-child {
border-left: 0;
}
.channel-list .active {
color: #444;
}
.category-line {
height: 10px;
background-color: #f0f0f0;
}
.category-wrap {
.category .all {
height: 85rpx;
padding-left: 30rpx;
font-size: 28rpx;
border-top: 1rpx solid #e0e0e0;
text-align: center;
}
.category-wrap .left-list {
width: 27%;
height: 100%;
background-color: #f7f7f7;
color: #b0b0b0;
overflow-x: hidden;
}
.category-wrap .left-list .category-item {
height: 120rpx;
line-height: 120rpx;
overflow: hidden;
border-bottom: 1rpx solid #fff;
}
.category-wrap .left-list .active {
color: #444;
line-height: 85rpx;
background-color: #fff;
position: relative;
border-top: 1rpx solid #f4f4f4;
border-bottom: 1rpx solid #f4f4f4;
}
.category-wrap .left-list .active:before {
content: "";
width: 8rpx;
height: 100%;
position: absolute;
.category .items {
position: fixed;
top: 125rpx;
left: 0;
background-color: #444;
}
.category-wrap .right-list {
width: 73%;
height: 100%;
float: right;
overflow-x: hidden;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.category-wrap .right-list .category-header {
line-height: 80rpx;
}
.category-wrap .right-list .sub-list-block {
width: 100%;
padding-left: 4%;
}
.category-wrap .right-list .category-sub-item {
width: 28%;
height: 194rpx;
float: left;
margin-right: 4%;
margin-bottom: 4%;
background-color: #f5f7f6;
position: relative;
}
.category-wrap .right-list .item-img {
width: 126rpx;
height: 170rpx;
}
.category-wrap .right-list .item-name {
width: 100%;
font-size: 20rpx;
position: absolute;
bottom: 14rpx;
}
.category-wrap .more-item .item-name {
bottom: 50%;
margin-bottom: -10rpx;
}
.hot-shops .shop-list {
right: 0;
bottom: 0;
padding-left: 30rpx;
background-color: #fff;
border-top: 1rpx solid #f4f4f4;
}
.hot-shops .shop-list .shop-item {
border-bottom: 1rpx solid #e0e0e0;
}
.hot-shops .shop-list .shop-item:last-child {
border-bottom: 0;
}
.hot-shops .shop-list .shop-info {
height: 100rpx;
line-height: 100rpx;
margin: 30rpx 0;
font-size: 36rpx;
}
.hot-shops .shop-list .shop-logo {
width: 100rpx;
height: 100rpx;
margin-right: 30rpx;
display: inline-block;
vertical-align: top;
background-color: #f7f7f7;
border: 1rpx solid #eee;
box-sizing: border-box;
}
.hot-shops .shop-list .go-shop {
float: right;
margin-right: 30rpx;
display: inline-block;
font-size: 24rpx;
color: #b0b0b0;
}
.hot-shops .go-shop .iconfont {
position: relative;
top: 2rpx;
}
.hot-shops .scoll-wrap {
overflow-y: hidden;
}
.hot-shops .shop-goods {
font-size: 0;
white-space: nowrap;
}
.hot-shops .goods-item {
display: inline-block;
width: 188rpx;
height: 340rpx;
margin-right: 30rpx;
.category .items .item {
height: 110rpx;
font-size: 28rpx;
line-height: 110rpx;
border-bottom: 1rpx solid #f4f4f4;
}
.hot-shops .goods-item .goods-img {
display: block;
width: 100%;
height: 250rpx;
background-color: #f6f6f6;
.category .item-expand {
position: absolute;
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-color: #f4f4f4;
transition: left 0.4s linear;
}
.hot-shops .goods-item .price {
line-height: 90rpx;
font-size: 24rpx;
color: #444;
display: block;
text-align: center;
.category .item-expand.open {
left: 40%;
}
... ...