Authored by 黄敬囿

商品列表 review by 肖亚东

... ... @@ -3,7 +3,8 @@
"pages/index/index",
"pages/category/category",
"pages/shopCart/shopCart",
"pages/userCenter/userCenter"
"pages/userCenter/userCenter",
"pages/productList/index"
],
"window":{
... ...
{
"component": true
}
\ No newline at end of file
... ...
<view>
<view class="no-data-root">
暂无数据
</view>
\ No newline at end of file
... ...
.no-data-root {
height: 50%;
}
\ No newline at end of file
... ...
... ... @@ -14,8 +14,8 @@
width: 0rpx;
}
.tab-swiper-navbar-item {
/* display: block;
flex: 1; */
display: flex;
flex-direction: row;
position: relative;
padding: 20rpx 0;
text-align: center;
... ... @@ -24,11 +24,12 @@
font-size: 28rpx;
color: #999999;
align-self: center;
align-items: center;
}
.tab-swiper-navbar-item-on {
color: #000000;
font-weight: bold;
font-size: 40rpx;
/* font-size: 40rpx; */
font-family: PingFang-SC-Medium;
border-bottom: 6rpx solid #000000;
}
... ... @@ -54,7 +55,8 @@
height: 100%;
}
.tab-swiper-navbar-icon {
width: 40rpx;
height: 56rpx;
width: 20rpx;
height: 28rpx;
align-self: center;
}
... ...
import api from '../../common/api';
import { parseProductListData } from '../../utils/productListUtil';
Page({
data:{
tabs:[
{
id:0,
name: "最新0",
isShowIcon: false,
data:{},
},
{
id: 1,
name: "最新1",
isShowIcon: false,
data:{},
},
{
id: 2,
name: "最新2",
isShowIcon: false,
data:{},
},
{
id: 3,
name: "最新3",
isShowIcon: true,
iconUrl: "../../assets/images/arrow_normal@2x.png",
iconType: 1,
data:{},
}
],
activeIndex: 0,
contentWidth: 0,
contentHeight: 0,
},
onLoad: function () {
try{
let systemInfo = tt.getSystemInfoSync();
let contentWidth = systemInfo.screenWidth;
// let contentWidth = screenWidth;
let contentHeight = systemInfo.screenHeight - 115;
this.setData({
contentWidth,
contentHeight,
})
}catch(e){
console.log(e.message)
}
let tab = this.data.tabs[0];
this.fechProductList(tab);
},
onTabClick: function (e) {
//获取到点击当前Tab的信息
let tab = e.detail;
this.fechProductList(tab);
},
fechProductList: function (tab) {
// debugger
let id = tab.id;
let orderType = tab.iconType;
let iconUrl = tab.iconUrl;
let order = "s_p_desc";
// console.log("id:"+id+"===orderType:"+orderType);
if(id === 1){
order = "s_t_desc";
}else if(id === 2){
order = "h_v_desc";
}else if(id === 3){
if(orderType && orderType === 1){
order= "s_p_desc";
}else{
order= "s_p_asc";
}
}else {
order = "s_p_desc";
}
let that = this;
// that.data.tabs.activeIndex = id;
let param = {
method: "app.search.category",
firstProductSkn: "51167928",
gender:"1,3",
limit: 10,
page: 1,
sort: "116",
subCategoryId: "48",
title: "POLO",
order: order,
}
api.get({data: param})
.then(data => {
let listData = data.data;
let productList = listData.product_list;
// let tab = that.tabs[0]
// tab.data = data;
let tabs = that.data.tabs;
for (var index in productList) {
let skn = productList[index].product_skn;
let name = productList[index].product_name;
// console.log("name:"+name+"==skn:"+skn)
}
productList = parseProductListData(productList);
listData.product_list = productList;
tabs[id].data = listData;
// tablist[id].iconType = orderType;
// tablist[id].iconUrl = iconUrl;
// console.log("id:"+id)
that.setData({
tabs: tabs,
activeIndex: id,
});
});
}
})
\ No newline at end of file
... ...
{
"usingComponents": {
"tabCell": "../../components/tabSwiper/tabCell",
"productCell": "../../components/productList/productCell",
"noDataView": "../../components/noData/noDataView"
}
}
\ No newline at end of file
... ...
<view>
<tabCell id="tabCell" tabs="{{tabs}}" bind:onTabClick="onTabClick"/>
<view style="position: absolute;top: 108rpx;width: {{contentWidth}}px;height:{{contentHeight}}px;">
<swiper current="{{activeIndex}}">
<swiper-item tt:for="{{tabs}}" tt:for-item="tab" tt:key="{{tabs[activeIndex].id}}" catchtouchmove='catchTouchMove'>
<block tt:if="{{tab && tab.data && tab.data.product_list && tab.data.product_list.lenght >0}}">
<view>{{activeIndex}}{{tab.data.product_list.lenght}}</view>
<scroll-view scroll-y="true" bindscrolltolower="onLoadMore">
<view class="scroll-content">
<block tt:for="{{tab.data.product_list}}" tt:for-item="product" tt:key="{{index}}">
<productCell id="productCell" item="{{product}}"/>
</block>
</view>
<view class="load_more_view" tt:if="{{tab.showLoadMoreView}}">加载中...</view>
</scroll-view>
</block>
<block tt:else>
<view class='empty'>
<noDataView></noDataView>
</view>
</block>
</swiper-item>
</swiper>
</view>
</view>
\ No newline at end of file
... ...
.order-list-navbar {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
z-index: 500;
top: 0;
width: 100%;
height: 96rpx;
border-top: 2rpx solid #eeeeee;
border-bottom: 2rpx solid #eeeeee;
}
.order-list-navbar-item-space {
width: 0rpx;
}
.order-list-navbar-item {
/* display: block;
flex: 1; */
position: relative;
padding: 20rpx 0;
text-align: center;
font-family: PingFang-SC-Medium;
font-weight: 500;
font-size: 28rpx;
color: #999999;
align-self: center;
}
.order-list-navbar-item-on {
color: #000000;
font-weight: bold;
font-size: 40rpx;
font-family: PingFang-SC-Medium;
border-bottom: 6rpx solid #000000;
}
.order-list-navbar-slider {
position: absolute;
display: block;
content: " ";
transition: transform .3s;
}
.order-list-navbar-title {
display: inline-block;
font-size: 30rpx;
max-width: 8em;
text-align: center;
}
.order-list-navtab-content {
position: absolute;
top: 68rpx;
left: 0px;
width: 100%;
height: 100%;
}
swiper, scroll-view {
height: 100%;
}
.scroll-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.load_more_view {
width: 100%;
height: 30rpx;
font-size: 14px;
margin-top: 10rpx;
margin-bottom: 10rpx;
text-align: center;
}
.empty {
display: flex;
justify-content: center;
font-family: PingFang-SC-Regular;
color: #999;
font-size: 30rpx;
letter-spacing: 0.8px;
margin-top: 300rpx;
height: 80%;
}
\ No newline at end of file
... ...