screen

src/app.js

@@ -123,6 +123,7 @@ class App extends Component {
           'pages/detail/index',
           'pages/detail/resultPage',
           'pages/selectionRecord/index',
+          'pages/screenHouse/index',
         ],
       }
     ],

src/onlineSelling/pages/houseList/index.js

@@ -200,7 +200,9 @@ export default class HouseList extends Component {
     this.goto('/onlineSelling/pages/help/index')
   }
 
-  handleSearchClick = e => {}
+  handleSearchClick = e => {
+    this.goto('/onlineSelling/pages/screenHouse/index')
+  }
 
   renderBar () {
     const summary = {

src/onlineSelling/pages/screenHouse/index.js

@@ -0,0 +1,136 @@
+import Taro, { Component } from '@tarojs/taro';
+import './index.scss'
+import { connect } from '@tarojs/redux'
+import ready from '@/utils/ready'
+
+@connect(
+  ({ user }) => ({ ...user })
+)
+
+export default class Index extends Component {
+  config = {
+    navigationBarTitleText: '筛选房源',
+  }
+
+  state = {
+    current: 0,
+    priceCurrent: 0,
+    startPrice: '100',
+    endPrice: null,
+  }
+
+  componentWillMount() {
+
+    ready.queue(() => {
+
+
+    })
+  }
+  handleCondition(value) {
+    this.setState({
+      current: value,
+    })
+  }
+  handlePriceItem(item) {
+    this.setState({
+      priceCurrent: item.value,
+      startPrice: item.startPrice,
+      endPrice: item.endPrice,
+    })
+  }
+
+  render() {
+    const { current, priceCurrent, startPrice, endPrice } = this.state
+    const condition = [{ title: '按价格', value: 0 }, { title: '按户型', value: 1 }]
+    const priceList = [
+      { startPrice: null, endPrice: '100', value: 0 },
+      { startPrice: '100', endPrice: '150', value: 1 },
+      { startPrice: '150', endPrice: '200', value: 2 },
+      { startPrice: '200', endPrice: '250', value: 3 },
+      { startPrice: '250', endPrice: '300', value: 4 },
+      { startPrice: '300', endPrice: '400', value: 5 },
+      { startPrice: '400', endPrice: '500', value: 6 },
+      { startPrice: '500', endPrice: '600', value: 7 },
+      { startPrice: '600', endPrice: null, value: 8 },
+    ]
+    const apartmentList = [
+      { name: 'A 户型', area1: '149', area2: '131' },
+      { name: 'B 户型', area1: '95', area2: '84.7' },
+      { name: 'C 户型', area1: '95', area2: '84.7' },
+    ]
+    return (
+      <View className="screen-page">
+        <View className="screen-top">
+          筛选房源
+            {condition.map(item => (
+            <View key={item.value} onClick={() => this.handleCondition(item.value)} className={current == item.value ? 'top-item active' : 'top-item'}>
+              {item.title}
+            </View>
+          ))}
+        </View>
+        {current == 0 &&
+          <View>
+            <View className="price-con">
+              {priceList.map(priceItem => (
+                <View key={priceItem.value} className={priceCurrent == priceItem.value ? 'active-item' : 'price-item'} onClick={() => { this.handlePriceItem(priceItem) }}>
+                  {!priceItem.startPrice && <View className="item-con">{priceItem.endPrice}万以下</View>}
+                  {priceItem.startPrice && priceItem.endPrice && <View className="item-con">{priceItem.startPrice}万-{priceItem.endPrice}万</View>}
+                  {!priceItem.endPrice && <View className="item-con">{priceItem.startPrice}万以上</View>}
+                </View>
+              ))}
+            </View>
+            <View style="color:#666;font-size:28rpx;margin-left:40rpx">
+              填写价格（万元）
+        </View>
+            <View className="search">
+              <Input
+                type="number"
+                placeholder="最低价"
+                class="search-input"
+                placeholder-style="color:#dcdcdc;font-size:28rpx"
+                maxlength="6"
+                value={startPrice}
+                onInput={() => this.handleInput}
+              />
+              <Text style="margin:0 8rpx;color:#999;font-size:28rpx">-</Text>
+              <Input
+                type="number"
+                placeholder="最低价"
+                class="search-input"
+                placeholder-style="color:#dcdcdc;font-size:28rpx"
+                maxlength="6"
+                value={endPrice}
+                onInput={() => this.handleInput}
+              />
+              <View className="sure-btn">
+                确定
+              </View>
+            </View>
+          </View>}
+        {
+          current == 1 &&
+          <View style="padding:40rpx 20rpx">
+            {apartmentList.map((apartmentItem, index) => (
+              <View className='item' key={index + 'apartment'}>
+                <View className='house__img-info'>
+                  <Image className='house__img' src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581369637322&di=6065c2aee90f790b00d0c815f465ebc5&imgtype=0&src=http%3A%2F%2Fcyzs97.com%2FUploads%2FEditor%2FPicture%2F2018-10-18%2F5bc8330f2d06f.jpg" mode="widthFix"></Image>
+                </View>
+                <View className="rest-info">
+                  <View className='house-type__name'>{apartmentItem.name || ''}</View>
+                  <View className='construction__area'>
+                    <Text>{apartmentItem.area1 ? '建筑面积约' + apartmentItem.area1 + 'm²' : '建筑面积待定'}</Text>
+                    {
+                      apartmentItem.area2 ? <Text>使用面积约{apartmentItem.area2}m²</Text> : <Text>使用面积待定</Text>
+                    }
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        }
+
+      </View>
+
+    );
+  }
+}

src/onlineSelling/pages/screenHouse/index.scss

@@ -0,0 +1,125 @@
+@import "@/styles/mixins.scss";
+@import "@/styles/theme.scss";
+.screen-page{
+  .screen-top{
+    display: flex;
+    align-items: center;
+    height:100px;
+    background:rgba(248,248,248,1);
+    font-size: 34px;
+    color: #666;
+    padding: 0 30px;
+    font-size: 400;
+    .top-item{
+      font-size: 28px;
+      color: #999;
+      padding: 0 18px;
+      border-radius: 32px;
+      line-height: 60px;
+      background-color: #EEEEEE;
+      margin-left: 22px;
+
+    }
+    .active{
+      background-color: #fff;
+      box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+    }
+  }
+  .price-con{
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    .price-item{
+      flex: 0 0 33.3%;
+      .item-con{
+        text-align: center;
+        margin: 18px;
+        line-height:60px;
+        background:rgba(248,248,248,1);
+        border-radius:6px;
+        font-size: 28px;
+        color: #999;
+      }
+    }
+    .active-item{
+      flex: 0 0 33.3%;
+      .item-con{
+        text-align: center;
+        margin: 18px;
+        line-height:60px;
+        background-color: #fff;
+        box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+        border-radius:6px;
+        font-size: 28px;
+        color: #999;
+      }
+    }
+  }
+  .search{
+    padding: 20px 40px;
+    display: flex;
+    align-items: center;
+    .search-input{
+      width:209px;
+      line-height:60px;
+      height:60px;
+      background:rgba(250,250,250,1);
+      border-radius:30px;
+      text-align: center;
+    }
+    .sure-btn{
+      width:120px;
+      line-height:60px;
+      background:rgba(187,156,121,1);
+      border-radius:10px;
+      text-align: center;
+      color: #fff;
+      font-size: 28px;
+      margin-left: 60px;
+    }
+  }
+  .item {
+    position: relative;
+    width: 340px;
+    margin: 2px 7.5px 20px 7.5px;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(232, 232, 232, 1);
+    border-radius: 12px;
+    display: inline-block;
+
+    .house__img-info {
+      position: relative;
+      padding: 30px;
+      border-bottom: 1px solid #eee;
+
+      .house__img {
+        width: 100%;
+        border-radius: 10px;
+        height: 200px !important;
+      }
+    }
+    .rest-info {
+      padding: 10px  20px;
+
+      .house-type__name {
+        font-weight: bold;
+        margin: 10px 0;
+        font-size: 32px;
+        color: #333;
+      }
+      .construction__area {
+        color: rgba(0, 0, 0, 0.54);
+        font-size: 25px;
+        height: 80px;
+        display: flex;
+        flex-direction: column;
+        font-size: 28px;
+        text-align: left;
+
+      }
+    }
+
+  
+  }
+}