Merge branch 'develop' of git.yoho.cn:fe/yoho-brand-shop into develop

@@ -36,7 +36,8 @@
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTextStyle": "black"
+    "navigationBarTextStyle": "black",
+    "backgroundColor": "#f0f0f0"
   },
   "tabBar": {
     "borderStyle": "#e0e0e0",

-/**app.wxss**/
-/*.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} */
-
 .clearfix:after {
     content: '';
     display: block;

 <view class="bottom-copyright">
-    <image class="image" src="../../static/images/yoho!buy@2x.png"></image>
+    <image class="image" src="../../../static/images/yoho!buy@2x.png"></image>
 </view>

+Component({
+    properties: {
+        title: {
+            type: String,
+            value: '默认标题'
+        },
+        height: {
+            type: String,
+            value: 100,
+            observer: '_setHeight'
+        }
+    },
+    data: {
+        style: ''
+    },
+    methods: {
+        _setHeight: function(val) {
+            this.setData({
+                style: `height: ${val}rpx;line-height: ${val}rpx;`
+            });
+        }
+    }
+});

+{
+    "component": true
+}

+<view class="view-title" style="{{style}}">
+    <span class="title-text">{{title}}</span>
+</view>
+

+
+.view-title {
+    font-size: 0;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+}
+
+.view-title .title-text {
+    position: relative;
+    font-family: PingFang-SC-Semibold;
+    font-size: 28rpx;
+    color: #222;
+    letter-spacing: -0.34px;
+}
+
+.view-title .title-text:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -40rpx;
+    display: inline-block;
+    margin-top: -2rpx;
+    height: 4rpx;
+    width: 20rpx;
+    background-color: #222;
+}
+
+.view-title .title-text:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -40rpx;
+    margin-top: -2rpx;
+    display: inline-block;
+    height: 4rpx;
+    width: 20rpx;
+    background-color: #222;
+}
\ No newline at end of file

+Component({
+    properties: {
+        item: {
+            type: Object,
+            value: {
+                default_images: 'http://img10.static.yhbimg.com/goodsimg/2017/12/06/11/0186f48aaa66d73d10d4c2037bcadd9896.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
+                product_name: '测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的',
+                salePriceStr: '3',
+                originPriceStr: '3',
+                showOriginPrice: false
+            }
+        }
+    }
+});

+{
+    "component": true
+}

+<wxs src="../../wxs/helper.wxs" module="helper" />
+<view class="product-item">
+    <image class="item-image" mode="aspectFit" src="{{helper.image(item.default_images, 860, 644)}}"></image>
+    <view class="item-detail">
+        <text class="item-title">{{item.product_name}}</text>
+        <view class="item-price">
+            <text class="price1" style="color:{{item.showOriginPrice ? '#d0021b' : '#444444'}}">￥{{item.salePriceStr}}</text>
+            <text class="price2" wx:if="{{item.showOriginPrice}}">￥{{item.originPriceStr}}</text>
+        </view>
+    </view>
+</view>

+.product-item {
+    display: flex;
+    flex-direction: column;
+    margin-top: 65rpx;
+}
+
+.product-item .item-detail {
+    position: relative;
+    height: 128rpx;
+}
+
+.product-item .item-price {
+    position: absolute;
+    bottom: 0;
+    font-family: PingFang-SC-Regular;
+    font-size: 24rpx;
+    color: #444;
+    width: 322rpx;
+    max-width: 322rpx;
+    letter-spacing: 0.28px;
+}
+
+.product-item .item-price .price2 {
+    color: #444;
+    margin-left: 10rpx;
+    text-decoration: line-through;
+}
+
+.product-item .item-image {
+    width: 322rpx;
+    height: 430rpx;
+}
+
+.product-item .item-title {
+    font-family: PingFang-SC-Regular;
+    font-size: 24rpx;
+    color: #444;
+    width: 322rpx;
+    max-width: 322rpx;
+    line-height: 1.3;
+    letter-spacing: 0.28px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: pre-wrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    margin: 20rpx 0;
+}
+

+Component({
+    properties: {
+        floorData: {
+            type: Object,
+            value: {}
+        }
+    },
+    data: {
+        curSortType: 'def',
+        curSortField: '',
+        curGender: '',
+        showSubGender: false,
+        subFilterText: '筛选'
+    },
+    methods: {
+        sortChange: function ({target}) {
+            const sort = target.dataset.sort;
+            
+            const setSort = field => {
+                if (sort === this.data.curSortType && sort !== 'price') {
+                    return;
+                }
+                this.setData({
+                    curSortType: sort,
+                    curSortField: field,
+                    showSubGender: false
+                });
+                this.triggerEvent('sortchange', {curSort: field, gender: this.data.curGender})
+            };
+
+            switch (sort) {
+                case 'def':
+                    setSort('');
+                    break;
+                case 'time':
+                    setSort('s_t_desc');
+                    break;
+                case 'popular':
+                    setSort('s_n_asc');
+                    break;
+                case 'price':
+                    setSort(this.data.curSortField === 's_p_asc' ? 's_p_desc' : 's_p_asc');
+                    break;
+                default:
+                    break;
+            }
+
+        },
+        subFilterGenderTap: function (e) {
+            this.setData({
+                showSubGender: !this.data.showSubGender
+            });
+        },
+        selectGenderTap: function (e) {
+            const gender = e.target.dataset.gender;
+            
+            if (gender) {
+                this.setData({
+                    curGender: gender,
+                    showSubGender: false,
+                    subFilterText: gender === '1,3' ? '男生' : '女生' 
+                });
+            }
+
+            this.triggerEvent('sortchange', {curSort: this.data.curSortField, gender})
+        }
+    }
+});

+{
+    "component": true
+}

+<view class="product-list-filter">
+    <ul class="filter-items" bindtap="sortChange">
+        <li class="item {{curSortType == 'def' ? 'active' : ''}} default" data-sort="def">
+            默认
+            <image class="item-icon" wx:if="{{curSortType == 'def'}}"
+                   src="../../static/icons/triangle_active@2x.png"></image>
+            <image class="item-icon" wx:if="{{curSortType != 'def'}}"
+                   src="../../static/icons/triangle_normal@2x.png"></image>
+        </li>
+        <li class="item {{curSortType == 'time' ? 'active' : ''}}" data-sort="time">新品</li>
+        <li class="item {{curSortType == 'popular' ? 'active' : ''}}" data-sort="popular">人气</li>
+        <li class="item {{curSortType == 'price' ? 'active' : ''}}" data-sort="price">
+            价格
+            <image class="item-icon" wx:if="{{curSortField != 's_p_asc' && curSortField != 's_p_desc'}}" 
+                   src="../../static/icons/db_arrow_normal@2x.png"></image>
+            <image class="item-icon" wx:if="{{curSortField == 's_p_desc'}}" 
+                   src="../../static/icons/db_down_active@2x.png"></image>
+            <image class="item-icon" wx:if="{{curSortField == 's_p_asc'}}" 
+                   src="../../static/icons/db_up_active@2x.png"></image>
+        </li>
+        <li class="item {{curGender ? 'active' : ''}}" catchtap="subFilterGenderTap">
+            {{subFilterText}}
+            <image class="item-icon" wx:if="{{curGender == ''}}"
+                   src="../../static/icons/sg_down_normal@2x.png"></image>
+            <image class="item-icon" wx:if="{{curGender != ''}}"
+                   src="../../static/icons/sg_down_active@2x.png"></image>
+        </li>
+    </ul>
+    <view wx:if="{{showSubGender}}" class="sub-gender" bindtap="selectGenderTap">
+        <view class="gender-item {{curGender == '1,3' ? 'active' : ''}}" data-gender="1,3">男生/BOYS</view>
+        <view class="gender-item {{curGender == '2,3' ? 'active' : ''}}" data-gender="2,3">女生/GIRLS</view>
+    </view>
+</view>

+.product-list-filter {
+    position: relative;
+    font-size: 0;
+    height: 88rpx;
+    line-height: 88rpx;
+}
+
+.product-list-filter .filter-items {
+    display: flex;
+}
+
+.product-list-filter .item {
+    position: relative;
+    flex: 1;
+    font-family: PingFang-SC-Regular;
+    text-align: center;
+    font-size: 28rpx;
+    color: #b0b0b0;
+    letter-spacing: 0.33px;
+}
+
+.product-list-filter .item .item-icon {
+    position: absolute;
+    height: 28rpx;
+    width: 20rpx;
+    top: 50%;
+    left: 50%;
+    margin-top: -14rpx;
+    margin-left: 34rpx;
+}
+
+.product-list-filter .item.default .item-icon{
+    position: absolute;
+    height: 10rpx;
+    width: 18rpx;
+    top: 50%;
+    left: 50%;
+    margin-top: -5rpx;
+    margin-left: 34rpx;
+}
+
+.product-list-filter .item:after {
+    display: inline-block;
+    content: '';
+    height: 50rpx;
+    width: 1rpx;
+    position: absolute;
+    top: 19rpx;
+    right: 0;
+    background-color: #eee;
+    transform: scaleX(0.5);
+}
+
+.product-list-filter .item:last-child:after {
+    display: inline-block;
+    content: '';
+    height: 0;
+    width: 0;
+}
+
+.product-list-filter .item.active {
+    color: #444;
+}
+
+.product-list-filter .sub-gender {
+    position: absolute;
+    top: 88rpx;
+    left: 0;
+    right: 0;
+    font-size: 28rpx;
+    background-color: #fff;
+    text-align: center;
+}
+
+.product-list-filter .sub-gender .gender-item {
+    height: 90rpx;
+    color: #b0b0b0;
+    position: relative;
+}
+
+.product-list-filter .sub-gender .gender-item.active {
+    color: #444;
+}
+
+.product-list-filter .sub-gender .gender-item:after {
+    display: inline-block;
+    content: '';
+    height: 1rpx;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #eee;
+    transform: scaleY(0.5);
+}

+Component({
+    properties: {
+        list: {
+            type: Array,
+            value: [
+                {
+
+                    default_images: 'http://img10.static.yhbimg.com/goodsimg/2017/12/06/11/0186f48aaa66d73d10d4c2037bcadd9896.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
+                    product_name: '测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的',
+                    salePriceStr: '3',
+                    originPriceStr: '3',
+                    showOriginPrice: true
+                },
+                {
+
+                    default_images: 'http://img10.static.yhbimg.com/goodsimg/2017/12/06/11/0186f48aaa66d73d10d4c2037bcadd9896.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
+                    product_name: '测试商品名',
+                    salePriceStr: '3',
+                    originPriceStr: '3',
+                    showOriginPrice: false
+                },
+                {
+
+                    default_images: 'http://img10.static.yhbimg.com/goodsimg/2017/12/06/11/0186f48aaa66d73d10d4c2037bcadd9896.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
+                    product_name: '测试商品名',
+                    salePriceStr: '3',
+                    originPriceStr: '3',
+                    showOriginPrice: false
+                }
+            ]
+        }
+    }
+});

+{
+    "component": true,
+    "usingComponents": {
+        "product-item": "./item"
+    } 
+}

+<view class="product-list">
+    <product-item wx:for="{{list}}" item="{{item}}"></product-item>
+</view>

+.product-list {
+    width: 680rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0 auto;
+}
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}
+
+.product-list {
+}

@@ -14,7 +14,8 @@ Component({
         indicatorDots: false,
         interval: 5000,
         autoplay: true,
-        duration: 1000,
+        duration: 500,
+        circular: true,
         swiperCurrent: 0
     },
     methods: {

 <wxs src="../../../wxs/helper.wxs" module="helper" />
 <view class="resource-focus">
     <swiper class="swiper-wrapper" indicator-dots="{{indicatorDots}}"
-            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
+            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
+            circular="{{circular}}" bindchange="swiperChange">
         <block wx:for="{{swiperList}}" wx:key="{{index}}">
             <swiper-item>
                 <anchor url="{{item.url}}">

@@ -237,5 +237,8 @@ Page({
         // wx.navigateTo({
         //     url: '../goodsDetail/goodsDetail?productSkn=' + productSkn + '&page_name=' + 'home' + '&page_param=' + ''
         // });
+    },
+    sortChange: function (e) {
+        console.log(e.detail);
     }
 });
\ No newline at end of file

@@ -2,8 +2,11 @@
     "navigationBarTitleText": "红人小店",
     "enablePullDownRefresh": true,
     "usingComponents": {
-      "resources": "/components/resources/resources",
-      "copyright": "/components/copyright/copyright",
-      "quickNavigation": "/pages/quickNavigation/quickNavigation"
+        "resources": "/components/resources/resources",
+        "copyright": "/components/layout/copyright/copyright",
+        "view-title": "/components/layout/view-title/view-title",
+        "quickNavigation": "/pages/quickNavigation/quickNavigation",
+        "product-list": "/components/product/list",
+        "product-list-filter": "/components/product/list-filter"
     }
 }
\ No newline at end of file

 <view class="container">
-    <resources content-code="{{resource.home.top}}"></resources>
-    <view class='newtop'>
+    <view class='top-search'>
         <view class="search-section" bindtap="toSearch">
             <view class="tip">
             <span class="tip-text">潮流单品搜一下<image class="image-icon" src="./images/search@2x.png"></image>
@@ -8,9 +7,14 @@
             </view>
         </view>
     </view>
-    <view>
+    <resources content-code="{{resource.home.top}}"></resources>
+    <view class="recommend-product">
+        <view-title title="推荐商品" height="88"></view-title>
+        <view class="filter">
+            <product-list-filter bind:sortchange="sortChange"></product-list-filter>
+        </view>
+        <view class="list"><product-list></product-list></view>
     </view>
-    <view class='container_mask' bindtap='hiddenChannel' wx:if='{{channelSelect}}'></view>
     <view>
         <copyright></copyright>
     </view>

@@ -5,323 +5,13 @@
     background-color: white;
     display: flex;
     flex-direction: column;
+    padding-top: 110rpx;
 }
 .scrollview{
     background-color:white; 
 }
 
-.top {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #3c3d3e;
-    padding-top: 30rpx;
-}
-
-.topIcon {
-    width: 240rpx;
-    height: 135rpx;
-}
-
-.serach {
-    margin-top: 30rpx;
-    margin-left: 35rpx;
-    margin-right: 35rpx;
-    margin-bottom: 30rpx;
-    background-color: white;
-    border-radius: 35rpx;
-    height: 70rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 90%;
-}
-
-.serachIcon {
-  width: 30rpx;
-  height: 30rpx;
-  margin-left: 20rpx;
-}
-
-.serach_view_show {
-    display: block;
-    color: #b0b0b0;
-    font-size: 30rpx;
-    font-family: PingFang SC;
-    padding-left: 10rpx;
-    font-weight: 500;
-    line-height: 2.57;
-    letter-spacing: 1.1px;
-    text-align: left;
-}
-
-.navigator {
-    background-color:white;
-    width:100%;
-    height:88rpx;
-    display:flex;
-    flex-direction:row;
-    justify-content: center;
-}
-
-.default {
-    line-height:88rpx;
-    text-align:center;
-    flex:1;
-    color:#b0b0b0;
-    font-size:30rpx;
-    width: 25%;
-}
-
-.navText {
-    padding-left: 10rpx;
-    padding-right: 10rpx;
-    padding-bottom: 18rpx;
-    color:#b0b0b0;
-    font-family: PingFang SC;
-}
-
-.navTextSelected {
-    font-size:36rpx;
-    font-weight:bold;
-    color:#444444;
-    border-bottom: 4rpx solid;
-}
-
-.sectionContainer {
-    position: relative;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-}
-
-.sectionLine {
-    background-color: #e0e0e0;
-    height: 3rpx;
-    width: 120rpx;
-    margin-left: 20rpx;
-    margin-right: 20rpx;
-}
-
-.sectionTitle {
-    line-height: 80rpx;
-    color: #444444;
-    text-align: center;
-    vertical-align: center;
-    font-family: PingFang SC;
-    font-size: 32rpx;
-    font-weight: bold;
-}
-
-.moreButtonContainer {
-    position: absolute;
-    right: 0rpx;
-    width: 100rpx;
-    height: 88rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.moreButton {
-    width: 44rpx;
-    height: 8rpx;
-}
-
-.brandContainer {
-    background-color: white;
-    width: 100%;
-    height: 250rpx;
-    white-space: nowrap;
-    padding-left: 8rpx;
-}
-
-.brandItem {
-    display: inline-block;
-    margin: 16rpx 8rpx 16rpx 8rpx; 
-}
-
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-}
-
-.brand {
-    white-space: wrap;
-    height: 220rpx;
-    width: 220rpx;
-}
-
-.brandImage {
-    width: 220rpx;
-    height: 220rpx;
-    border-radius: 10rpx;
-}
-
-.catgoryContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-    border-top: 1rpx solid #dddddd;
-}
-
-.category {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-bottom: 1rpx solid #dddddd;
-}
-
-.categoryTitle {
-    margin-top: 15rpx;
-    margin-bottom: 15rpx;
-    line-height: 22rpx;
-    font-family: PingFang SC;
-    font-size: 22rpx;
-    color: rgb(68, 68, 68);
-}
-
-.categoryImage {
-    width: 100%;
-}
-
-.newArrivalContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-}
-
-.likeContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-}
-
-.like {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 20rpx;
-}
-
-.activities {
-    background-color: white;
-}
-
-.activity-container {
-
-}
-
-.activity-container-header {
-    width: 100%;
-    height: 324rpx;
-}
-
-.activity-banner {
-    width: 100%;
-    height: 100%;
-}
-
-.activity-container-footer {
-    white-space: nowrap;
-    background-color: white;
-}
-
-.activity-item {
-    width: 186rpx;
-    height: 296rpx;
-    display: inline-block;
-    margin-top: 30rpx;
-    margin-left: 32rpx;
-}
-
-.activity-item:last-child {
-    margin-right: 32rpx;    
-}
-
-.activity-item-img {
-    width: 100%;
-    height: 77%;
-}
-
-.activity-item-price {
-    width: 100%;
-    height: 23%;
-    text-align: center;
-    line-height: 50rpx;
-    color:#444444;
-    font-size: 24rpx;
-    font-family: PingFang SC;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-}
-
-.activities-footer {
-    height: 100rpx;
-    width: 100%;
-    line-height: 100rpx;
-    text-align: center;
-    font-family: PingFang SC;
-    font-size: 30rpx;
-    border-top: solid 1rpx gainsboro;
-}
-.new-focus-img{
-    width: 100%;
-    height: 100%;
-}
-.swiper-status{
-    width: 750rpx;
-    height:500rpx;
-   
-}
-.titleContainer{
-    background-color: white;
-    display: flex;
-    flex-direction: row;
-    height: 80rpx;
-    align-items:center;
-}
-.titleLine{
-    width: 4rpx;
-    height: 30rpx;
-    background-color: #444444;
-    margin-left: 20rpx;
-}
-.titleDesc{
-    flex: 1;
-    text-align: left;
-    color: #444444;
-    font-family: PingFang SC;
-    font-size:30rpx;
-    margin-left: 16rpx;
-    font-weight: 600;
-}
-.titleMore{
-    width: 48rpx;
-    height: 38rpx;
-    display: flex;
-    margin-right: 30rpx;
-    align-items: center;
-    justify-content: center;
-}
-
-.titleMoreIm{
-    width: 44rpx;
-    height: 8rpx;
-}
-
-.view-splite {
-    height:20rpx;
-}
-
-.newtop{
+.top-search {
     position: fixed;
     top: 0;
     left: 0;
@@ -365,75 +55,35 @@
     left: -40rpx;
 }
 
-.newsearch {
-    height: 70rpx;
-    width: 615rpx;
-    margin-left: 30rpx;
-    background-color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    align-items: center; 
-    border-radius: 10rpx;
-    top: 0rpx;
-    left: 0rpx
-}
-
-.channelContainer {
-    width: 100%;
-    top: 96rpx;
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    height: wrap;
-    z-index: 1000;
-}
-
-.channelItem {
-    height: 100rpx;
-    width: 750rpx;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    align-items: center;
-}
-
-.channelBg {
-    position: fixed;
-    height: 201rpx;
-    width: 750rpx;
-    top: 96rpx;
-    z-index: 999;
+.recommend-product .filter {
+    position: relative;
 }
 
-.indicator {
-    width: 10rpx;
-    height: 10rpx;
-    background-color: white;
+.recommend-product .filter:before {
+    display: inline-block;
+    content: '';
+    height: 1rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #eee;
+    transform: scaleY(0.5);
 }
 
-.channelText {
-    font-family: PingFang-SC;
-    font-size: 40rpx;
-    font-weight: 600;
-    text-align: left;
-    color: #ffffff;
-    margin-left: 20rpx;
+.recommend-product .filter:after {
+    display: inline-block;
+    content: '';
+    height: 1rpx;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #eee;
+    transform: scaleY(0.5);
 }
 
-.channelIcon {
-    width: 48rpx;
-    height: 38rpx;
-    margin-left: 30rpx;
-    margin-right: 30rpx
+.recommend-product .list {
+    padding-bottom: 90rpx;
 }
 
-.container_mask {
-    position: fixed;
-    top: 96;
-    z-index: 555;
-    width: 100%;
-    height: 100%;
-    background: #333;
-    filter: alpha(opacity=0);
-    opacity: 0.0;
-}