<!--pages/signedFactory/factoryList.wxml-->
<view class="container">
    <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for-items="{{tabs}}" wx:key="{{index}}">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; width:{{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                    <navigator url="factoryDetail" class="factoryList" hover-class="weui-cell_active" wx:for="{{factoryList}}" wx:for-item="list">
                    <view class="factoryList-hd">{{list.factory_name}}</view>
                    <view class="factoryList-bd">
                        <image class="imagesize" src="{{list.factory_img}}"></image>
                        <view class="factoryList-text font-color-999">{{list.factory_Int}}</view>
                    </view>
                     <view class="factoryList-ft">
                        <view class="foods-box">
                           <image src="{{item}}" wx:for="{{list.foods_img}}" ></image>
                        </view>
                        <view class="more font-color-c24e4e arrow-right">了解并签约</view>
                     </view>

                    </navigator>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                    <navigator url="factoryDetail" class="factoryList" hover-class="weui-cell_active" wx:for="{{factoryList}}" wx:for-item="list">
                    <view class="factoryList-hd">{{list.factory_name}}</view>
                    <view class="factoryList-bd">
                        <image class="imagesize" src="{{list.factory_img}}"></image>
                        <view class="factoryList-text font-color-999">{{list.factory_Int}}</view>
                    </view>
                     <view class="factoryList-ft">
                        <view class="foods-box">
                           <image src="{{item}}" wx:for="{{list.foods_img}}" ></image>
                        </view>
                        <view class="more font-color-c24e4e arrow-right">了解并签约</view>
                     </view>

                    </navigator>
                </view>
            </view>
     </view>
</view>

/* pages/signedFactory/factoryList.wxss */
.weui-navbar__item{
    padding: 30rpx 0;
}
.weui-navbar__item.weui-bar__item_on{
    color: #c24e4e;
}
.weui-navbar__slider{
    background-color: #c24e4e;
}
.weui-navbar{
    background-color: #fff;
}

.factoryList{
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
}
.factoryList-hd{
    display: flex;
    align-items: center;
}
.factoryList-bd,.factoryList-ft{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.factoryList-bd{
    padding: 30rpx 0;
}

 
.factoryList-bd .imagesize{
   width: 150rpx;
   height: 150rpx;
   margin-right: 20rpx;
}
.factoryList-bd .factoryList-text{
  width: 490rpx;
  line-height: 1.2;
  text-indent: 2em;
  display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
   overflow: hidden;
 
}
.factoryList-ft image{
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
    
}
.more::before{
    border: 2rpx solid #c24e4e;
    border-top: none;
    border-right: none;
    right: 0rpx;
    
}
.more{
    padding-right: 30rpx;
}

// pages/signedFactory/factoryList.js
Page({
  data:{
      tabs: ["全部厂家", "已签约厂家"],
        activeIndex: 0,
        sliderOffset: 0,
        sliderLeft: 0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
       wx.getSystemInfo({
            success: (res)=>{
                this.setData({
                   sliderWidth: res.windowWidth / this.data.tabs.length,
                    sliderOffset: res.windowWidth / this.data.tabs.length * this.data.activeIndex
                });
            }
        });
        this.setData({
          factoryList:[
            {
              factory_name:'仁怀市茅台镇永泰酒业有限公司',
              factory_img:'/assets/testimages/timg1.jpg',
              factory_Int:'贵州省仁怀市茅台镇永泰酒业股份有限公司位于美丽的赤水河畔，与驰名中外的茅台集团共享得天独厚的土壤、气候、水质和微生物群等优越的自然条件。厂区占地面积60余亩，厂房面积5000多平方米，拥有多口酿造使用多年的老窖池，目前年生产能力约为1千多吨原酒。在茅台镇众多的酒厂中，永泰酒业公司是为数不多的资深厂家之一。',
              foods_img:[
                 '/assets/testimages/timg1.jpg'
              ,'/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg'
              ]
            },
             {
              factory_name:'仁怀市茅台镇永泰酒业有限公司',
              factory_img:'/assets/testimages/timg1.jpg',
              factory_Int:'贵州省仁怀市茅台镇永泰酒业股份有限公司位于美丽的赤水河畔，与驰名中外的茅台集团共享得天独厚的土壤、气候、水质和微生物群等优越的自然条件。厂区占地面积60余亩，厂房面积5000多平方米，拥有多口酿造使用多年的老窖池，目前年生产能力约为1千多吨原酒。在茅台镇众多的酒厂中，永泰酒业公司是为数不多的资深厂家之一。',
              foods_img:[
                 '/assets/testimages/timg1.jpg'
              ,'/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg'
              ]
            }
          ]
        })
  },
  tabClick: function (e) {
      this.setData({
          sliderOffset: e.currentTarget.offsetLeft,
          activeIndex: e.currentTarget.id
      });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})