t

src/pages/index/index.jsx

@@ -59,6 +59,7 @@ class Index extends Component {
       hot2RowArr: [],
       scrollTop: 0,
       curScrollObj: {},
+      newRoomList: [],
     }
   }
 
@@ -81,6 +82,14 @@ class Index extends Component {
     //     isFirstOpen
     //   })
     // }
+
+    Taro.api.room.apieshouselist({page_size: 2}).then(res => {
+      console.log(res.list)
+      this.setState({
+        newRoomList: res.list || []
+      })
+    })
+
     Taro.api.base.apiindex().then(res => {
       const resObj = res || {}
       // 轮播图广告
@@ -660,7 +669,85 @@ class Index extends Component {
   }
 
 
-
+  renderNewRoom () {
+    const { newRoomList } = this.state
+    const hpV = require('@img/icon_hp_v.png')
+    const itemsList = newRoomList.map((item, index) => {
+      let FHstr = '未知楼层'
+      if (item.floor) {
+        const FH = Number(item.floor) || 1
+        const H = Number(item.storeys) || 1
+        if (FH > H * 0.6666) {
+          FHstr = '中高层'
+        } else if (FH > H * 0.33333) {
+          FHstr = '中楼层'
+        } else {
+          FHstr = '中低层'
+        }
+        if (FH === 1) FHstr = '一楼'
+        if (FH === H) FHstr = '顶楼'
+      }
+      let houseTypeStr = '未知户型'
+      if (item.house_type) {
+        let arr = item.house_type.split('-')
+        houseTypeStr = `${arr[0]}室${arr[1]}厅${arr[2]}卫`
+      }
+      const cTagStr = item.custom_tag || ''
+      const tagViews = cTagStr.split(',').map((tag, tagIndex) => {
+        return (
+          <View className="s" key={tagIndex}>{tag}</View>
+        )
+      })
+      return (
+        <View className="ilr-item" key={index} onClick={this.linkHandle.bind(this, item)}>
+          <View className="ilr-img">
+            {
+              item.video
+              ?
+              <View className="vr-icon">
+                <Image src={hpV} className="i i1" />
+              </View>
+              : ''
+            }
+            <Image src={item.pri_image + '_white'} className="img" />
+            <View className="f-t">{houseTypeStr} | {parseInt(item.area)}㎡</View>
+            <View className="t-t">{item.title}</View>
+          </View>
+          <View className="ilr-info">
+            {/* <View className="ilr-p1">{item.title}</View> */}
+            <View className="ilr-p2">{item.price}万
+              <View className="sub">单价:{parseInt(item.price * 10000 / item.area)}元/平</View>
+            </View>
+            <View className="ilr-p3">{item.estate_name}-{FHstr}</View>
+            {/* <View className="ilr-sign">
+              {tagViews}
+            </View> */}
+          </View>
+        </View>
+      )
+    })
+    const bgTitle = require('./img/room_tit.png')
+    return (
+      <View className="index-list">
+        <View className="il-header">
+          <Image className="bg" src={bgTitle} />
+          <Navigator url={'/pagesRoom/list'} className="r"></Navigator>
+        </View>
+        {
+          newRoomList.length > 0
+          &&
+          <View className="il-room">
+            {itemsList}
+          </View>
+        }
+      </View>
+    )
+  }
+  linkHandle (item) {
+    Taro.navigateTo({
+      url: `/pagesRoom/dtl?id=${item.id}`
+    })
+  }
 
   
   closeTips () {
@@ -879,10 +966,11 @@ class Index extends Component {
 
           {this.renderTopNav()}
           {/* {this.renderLine()} */}
-          {this.renderHotRecommend()}
           <Pendant />
           {/* {this.renderEntry()} */}
+          {this.renderNewRoom()}
           <InfoMore onRef={this.onInfoMoreRef} />
+          {this.renderHotRecommend()}
           {/* <News2 onRef={this.onNews2Ref} /> */}
           <NewsNews onRef={this.onNewsRef} />
           <Channel onRef={this.onChannelRef} />

src/pages/index/index.scss

@@ -309,6 +309,96 @@ page {
   }
 }
 
+.il-room {
+  display: flex;
+  padding: 10rpx 24rpx;
+  justify-content: space-between;
+  .ilr-item {
+    width: 320px;
+    box-sizing: border-box;
+    .ilr-img {
+      width: 320px;
+      height: 260px;
+      overflow: hidden;
+      border-radius: 10px;
+      position: relative;
+      .vr-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 80px;
+        height: 80px;
+        margin-left: -40px;
+        margin-top: -40px;
+        .i {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 80px;
+          height: 80px;
+          &.i1 {
+            z-index: 1;
+          }
+          &.i2 {
+            z-index: 1;
+          }
+        }
+      }
+      .img {
+        width: 320px;
+        height: 260px;
+      }
+      .f-t {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        overflow: hidden;
+        background-color: rgba(139,148,177, 0.7);
+        color: #fff;
+        font-weight: bold;
+        font-size: 24px;
+        text-align: center;
+      }
+      .t-t {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        overflow: hidden;
+        background-color: rgba(54,154,247, 0.7);
+        color: #fff;
+        font-weight: bold;
+        font-size: 24px;
+        text-align: center;
+      }
+    }
+    .ilr-p2 {
+      font-size: 30px;
+      font-weight: bold;
+      color: #f15264;
+      margin-bottom: 6px;
+      @include textOverflows();
+      .sub {
+        display: inline-block;
+        color: #999;
+        font-size: 24px;
+        font-weight: normal;
+      }
+    }
+    .ilr-p3 {
+      font-size: 24px;
+      color: $greyColor;
+      margin-bottom: 6px;
+      @include textOverflows();
+    }
+  }
+}
+
 .scoped-share {
   position: fixed;
   bottom: 180px;