product_wx/pages/subPackages/housingResources/components/houseList.vue

<template>
  <div class="houseList">
    <div class="selectBody" :style="{ height: height + 'rpx' }">
      <div class="selectRow">
        <span class="rowTitle">园区</span>
        <div class="selectItemBox">
          <span class="unSelectItem" :class="parkSelect?'selectItem':''">科教产业园</span>
        </div>
      </div>
      <van-icon name="arrow-down" class="arrowDown" style="font-size: 40rpx;margin-top: 40rpx;font-weight: 600" @tap="closeSelectBody" v-if="height<200"/>
      <div class="selectRow">
        <span class="rowTitle">楼盘</span>
        <div class="selectItemBox">
          <span class="unSelectItem" v-for="item in properties" :class="item.select?'selectItem':''" @click="clickItem(item)">{{ item.name }}</span>
        </div>
      </div>
      <div class="selectRow">
        <span class="rowTitle">状态</span>
        <div class="selectItemBox">
          <van-checkbox-group :value="avaStatus" @change="avaChange" >
            <van-checkbox name="空置" shape="square">空置</van-checkbox>
            <van-checkbox name="合同临期" shape="square">合同临期</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="selectRow">
        <span class="rowTitle">装修情况</span>
        <div class="selectItemBox selectItemBoxMoreItem">
          <van-checkbox-group :value="rentalStatus" @change="rentalChange" >
            <van-checkbox name="毛坯" shape="square">毛坯</van-checkbox>
            <van-checkbox name="简装" shape="square">简装</van-checkbox>
            <van-checkbox name="精装" shape="square">精装</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="selectRow" >
        <span class="rowTitle">用途</span>
        <div class="selectItemBox">
          <van-checkbox-group :value="useTo" @change="useToChange" >
            <van-checkbox name="研发办公" shape="square">办公</van-checkbox>
            <van-checkbox name="生活配套" shape="square">商铺</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="selectRow">
        <span class="rowTitle">朝向</span>
        <div class="selectItemBox">
          <van-checkbox-group :value="toward" @change="onChange" >
            <van-checkbox name="东" shape="square">东</van-checkbox>
            <van-checkbox name="南" shape="square">南</van-checkbox>
            <van-checkbox name="西" shape="square">西</van-checkbox>
            <van-checkbox name="北" shape="square">北</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="selectRow">
        <span class="rowTitle">指导价</span>
        <div class="selectItemBox">
          <input placeholder="元/㎡/月" class="myIpt"/>
          <span style="margin: 0 18rpx">—</span>
          <input placeholder="元/㎡/月" class="myIpt"/>
        </div>
      </div>
      <div class="selectRow">
        <span class="rowTitle">面积</span>
        <div class="selectItemBox">
          <input placeholder="㎡" class="myIpt" />
          <span style="margin: 0 18rpx">—</span>
          <input placeholder="㎡" class="myIpt" />
        </div>
      </div>
      <div class="btnBox">
        <button class="czBtn">重置</button>
        <button class="ssBtn">搜索</button>
      </div>
      <van-icon name="arrow-up" style="font-size: 40rpx;margin-top: 40rpx;font-weight: 600" @tap="closeSelectBody"/>
    </div>
    <div class="bottomBody">
      <van-tabs :active="active" @change="onChange">
        <van-tab title="全部" :name="0"></van-tab>
        <van-tab title="A" :name="1"></van-tab>
        <van-tab title="B1" :name="2"></van-tab>
        <van-tab title="B2" :name="3"></van-tab>
        <van-tab title="B3" :name="4"></van-tab>
        <van-tab title="C" :name="5"></van-tab>
      </van-tabs>
      <div class="sumBox">
        共 <span style="color: rgba(3, 101, 249, 1);margin: 0 5rpx">20</span> 间
      </div>
      <div class="listBody">
        <div class="listItem" v-for="item in 5" @tap="toDetail(item)">
          <div class="firstRow">
            <span class="itemTitle">中国物联网国际创新园一期A1101</span>
            <span class="tag">正常</span>
          </div>
          <div class="midRow">
            <span style="width: 300rpx">用途：研发办公</span>
            <span>装修情况：未知</span>
          </div>
          <div class="midRow">
            <span style="width: 300rpx">面积（㎡）：356㎡</span>
            <span>朝向：未知</span>
          </div>
          <div class="bottomRow">
            <span>出租指导价（元/㎡/月）：</span>
            <span class="money">30~35</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "maintenance",
  data(){
    return{
      parkSelect:true,
      properties: [
        {name:'一期', select:true},
        {name:'二期', select:false},
        {name:'三期', select:false},
        {name:'四期', select:false},
      ],
      toward: ['东', '北'],
      avaStatus:['空置'],
      rentalStatus:[],
      useTo:[],
      propertyNature:[],
      height: 890,
      active: 0
    }
  },
  methods:{
    clickItem(item){
      item.select = !item.select
    },
    onChange(e){
      this.toward = e.detail
    },
    avaChange(e){
      this.avaStatus = e.detail
    },
    rentalChange(e){
      this.rentalStatus = e.detail
    },
    useToChange(e){
      this.useTo = e.detail
    },
    natureChange(e){
      this.propertyNature = e.detail
    },
    closeSelectBody(){
      if (this.height > 800){
        this.height = 130
      }else{
        this.height = 890
      }
    },
    toDetail(item) {
      uni.navigateTo({
        url:'/pages/subPackages/housingResources/detail'
      })
    }
  }

}
</script>

<style lang="scss">
.houseList{
  padding-bottom: 150rpx;
  .topSearchBox{
    background: white;
    padding:16rpx 32rpx;
    .van-cell{
      background: rgba(245, 247, 250, 1);
      width: 686rpx;
      border: 1px solid rgba(234, 237, 242, 1) ;
      border-radius: 8rpx;
      box-sizing: border-box;
      padding: 12rpx 32rpx;
    }
    .van-icon{
      color: rgba(3, 101, 249, 1);
      font-size: 40rpx;
    }
  }
  .selectBody{
    background: white;
    display: flex;
    flex-direction: column;
    margin: 24rpx 0;
    padding: 12rpx 32rpx 36rpx 32rpx;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .selectRow{
      display: flex;
      align-items: center;
      margin-top: 38rpx;
      .rowTitle{
        min-width: 120rpx;
        color: rgba(51, 51, 51, 1);
        font-size: 30rpx;
        text-align: right;
      }
      .selectItemBox{
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        .unSelectItem{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: rgba(102, 102, 102, 1);
          padding: 8rpx 18rpx;
          background: rgba(245, 247, 250, 1);
          border-radius: 8rpx;
          margin-right: 24rpx;
        }
        .selectItem{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: rgba(3, 101, 249, 1);
          padding: 8rpx 18rpx;
          background: rgba(3, 101, 249, 0.10);
          border-radius: 8rpx;
          margin-right: 24rpx;
        }
        .myIpt{
          width: 240rpx;
          height: 64rpx;
          text-align: center;
          background: rgba(245, 247, 250, 1);
          box-sizing: border-box;
          font-size: 26rpx;
        }
      }
      .selectItemBoxMoreItem{
        .van-checkbox{
          margin:0 24rpx 24rpx 0;
        }
      }
    }
    .btnBox{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 48rpx;
      .czBtn{
        background: rgba(3, 101, 249, 0.10);
        border-radius: 8rpx;
        width: 240rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(3, 101, 249, 1);
        font-size: 34rpx;
        letter-spacing: 2rpx;
      }
      .ssBtn{
        background: rgba(3, 101, 249, 1);
        border-radius: 8rpx;
        width: 300rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 34rpx;
        letter-spacing: 2rpx;
        margin-left: 32rpx;
      }
    }
    .arrowDown{
      position: absolute;
      left: 50%;
      margin-left: -20rpx;
      top: 50rpx;
    }
  }
  .bottomBody{
    padding: 32rpx;
    background: white;
    width: 100%;
    box-sizing: border-box;
    .sumBox{
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      margin: 24rpx 0;
    }
    .listBody{
      display: flex;
      flex-direction: column;
      :last-child{
        border-bottom: none !important;
      }
      .listItem{
        padding: 24rpx 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        .firstRow{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .itemTitle{
            font-size: 32rpx;
            color: rgba(51, 51, 51, 1);
            font-weight: 600;
          }
          .tag{
            width: 120rpx;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            color: rgba(3, 101, 249, 1);
            background: linear-gradient( 316deg, #d1e4ff 0%, #adceff 100%);
            border-radius: 8rpx;
          }
        }
        .midRow{
          display: flex;
          align-items: center;
          color: rgba(136, 136, 136, 1);
          font-size: 28rpx;
          margin: 12rpx 0;
        }
        .bottomRow{
          display: flex;
          align-items: center;
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          margin-top: 8rpx;
          .money{
            color: rgba(226, 81, 0, 1);
            font-size: 40rpx;
          }
        }
      }
    }
  }
}
</style>