Authored by yyq

category

import api from '../../common/api';
export default {
shopList() {
return api.get({
url: '',
data: {
method: 'app.distribution.shopList'
}
});
},
}
... ...
import categoryModel from '../../../models/product/category';
import shopModel from '../../../models/product/shop';
let app = getApp();
Page({
data: {
scrollHeight: app.globalData.systemInfo.windowHeight - 10,
currentId: 1,
categoryList: [
{category_id: 1, category_name: '上衣'},
{category_id: 2, category_name: '裤装'},
{category_id: 3, category_name: '鞋靴'},
{category_id: 4, category_name: '裤装'},
{category_id: 5, category_name: '鞋靴'},
{category_id: 6, category_name: '裤装'},
{category_id: 7, category_name: '鞋靴'},
{category_id: 8, category_name: '裤装'},
{category_id: 9, category_name: '鞋靴'},
{category_id: 10, category_name: '裤装'},
{category_id: 11, category_name: '鞋靴'},
{category_id: 12, category_name: '裤装'},
{category_id: 13, category_name: '鞋靴'},
{category_id: 14, category_name: '裤装'},
{category_id: 15, category_name: '鞋靴'},
{category_id: 16, category_name: '裤装'},
{category_id: 17, category_name: '鞋靴'},
{category_id: 18, category_name: '裤装'},
{category_id: 19, category_name: '鞋靴'}
],
subCategoryList: [
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
{
default_images: 'http://img13.static.yhbimg.com/goodsimg/2015/10/15/02/02f3ebf9ad9053857a3d083dde3b8ab124.jpg?imageMogr2/thumbnail/144x192/background/d2hpdGU=/position/center/quality/80',
category_name: '西装'
},
]
currentId: null,
currentName: '',
categoryList: [],
subCategoryList: []
},
onLoad: function () {
this.subCategoryGroup = {};
this.loadCategoryList();
this.loadShopList();
},
loadCategoryList() {
categoryModel.categoryList().then(res => {
if (res.code !== 200) {
return;
}
let categoryList = res.data || [];
categoryList.map(value => {
this.subCategoryGroup[value.category_id] = value.sub || [];
if (this.data.currentId === null) {
setTimeout(() => {
console.log(this);
this.changeCategory({currentTarget: {dataset: {
id: value.category_id,
name: value.category_name
}}});
}, 100);
}
return value;
});
this.setData({categoryList});
});
},
loadShopList() {
shopModel.shopList().then(res => {
if (res.code !== 200) {
return;
}
this.setData({shopList: res.data.shop_product_list || []});
});
},
changeCategory(e) {
console.log(e);
this.setData({currentId: e.currentTarget.dataset.id});
let data = {
currentId: e.currentTarget.dataset.id,
currentName: e.currentTarget.dataset.name
};
if (this.subCategoryGroup[data.currentId]) {
data.subCategoryList = this.subCategoryGroup[data.currentId];
}
this.setData(data);
}
})
... ...
<wxs src="../../../wxs/helper.wxs" module="helper" />
<view class="container">
<view class="category-line"></view>
<view class="category-wrap" style="height: {{scrollHeight}}px;">
<view class="right-list">
<view class="category-header"> — 热门推荐 — </view>
<view class="sub-list-block clearfix">
<view wx:for="{{subCategoryList}}" wx:key="{{item.category_id}}" class="category-sub-item" bindtap="onCategoryItemTapped">
<image src="{{item.default_images}}" class="item-img"></image>
<view class="item-name">{{item.category_name}}</view>
</view>
</view>
<view class="category-header"> — 全部{{currentCateValue}} — </view>
<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">
<image src="{{item.default_images}}" class="item-img"></image>
<image src="{{helper.image(item.sort_ico, 64, 84)}}" class="item-img"></image>
<view class="item-name">{{item.category_name}}</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}}" bindtap="changeCategory">{{item.category_name}}</view>
<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>
</view>
<view class="category-line"></view>
<view class="hot-shops">
<view-title title="热门品牌" height="88"></view-title>
<view class="shop-list">
<view class="shop-item">
<view class="shop-info">
<image src="{{item.logo}}" class="shop-logo"></image>
<text class="shop-name">it</text>
<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.hr_shop_id}}" class="shop-item">
<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>
<navigator url="/page/product/shop?shopid={{item.shop_id}}" class="go-shop" hover-class="none">进入店铺<text class="iconfont icon-right"></text></navigator>
</view>
<view class="scoll-wrap">
<view class="shop-goods">
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<navigator url="/page/product/shop?shopid={{item.hr_shop_id}}" class="go-shop" hover-class="none">进入店铺<text class="iconfont icon-right"></text></navigator>
</view>
</view>
</view>
<view class="shop-item">
<view class="shop-info">
<image src="{{item.logo}}" class="shop-logo"></image>
<text class="shop-name">it</text>
<navigator url="/page/product/shop?shopid={{item.shop_id}}" class="go-shop" hover-class="none">进入店铺<text class="iconfont icon-right"></text></navigator>
</view>
<view class="scoll-wrap">
<view class="shop-goods">
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
</view>
<view class="goods-item">
<image src="//img11.static.yhbimg.com/goodsimg/2017/08/31/09/018041b9d8f4b1e7372688ef05b1934e55.jpg?imageMogr2/thumbnail/64x85/background/d2hpdGU=/position/center/quality/80" class="goods-img"></image>
<text class="price">¥2100.00</text>
<view class="scoll-wrap">
<view class="shop-goods">
<view wx:for="{{item.shop_product_list}}" wx:key="{{index}}" class="goods-item">
<image src="{{helper.image(item.default_images, 94, 150)}}" class="goods-img"></image>
<text class="price">¥ {{item.sales_price}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="category-line"></view>
<view class="category-line"></view>
</block>
</view>
... ...