warm_man/pages/Shop/index.vue

<template>
  <view class="body-background"></view>
	<u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="screen-body" :class="{pad:(tabCheck === 'item')}">
    <u-row>
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">
        <u-tabs
            :list="list"
            u-sticky
            lineWidth="64"
            lineHeight="8"
            :inactiveStyle="{color:'#AFB5BE'}"
            :activeStyle="{color:'#F47210'}"
            lineColor="#F47210"
            :custom-style="{margin:'auto'}"
            :scrollable="false"
            @change="tabsChenge"
        ></u-tabs>
        <view class="screen-container row"  :class="{show:(tabCheck === 'room')}">
          <view class="screen-search col-12" :style="{width:'100%',display:(tabCheck === 'room'?'flex':'none')}">
            <u-input shape="circle" placeholder="小区/商圈/地铁站" prefixIcon="search" prefix-icon-style="font-size:32rpx;" custom-style="background-color:#F5F5F6;"></u-input>
          </view>
          <view class="screen-search col-12" :style="{width:'100%',display:(tabCheck === 'item'?'flex':'none')}">
            <u-input shape="circle" placeholder="面膜" prefixIcon="search" prefix-icon-style="font-size:32rpx;" custom-style="background-color:#F5F5F6;"></u-input>
          </view>
          <view :style="{width:'100%',display:(tabCheck === 'room'?'flex':'none')}">
            <view class="row" style="justify-content: space-between;margin-top:10rpx;">
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="街道" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="类型" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="户型" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="租金" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>


        </view>
        <view :class="{show:(tabCheck === 'submit')}">
          <SubmitPage v-show="(tabCheck === 'submit')"></SubmitPage>
        </view>
      </u-col>
    </u-row>
  </view>
  <view class="map-container">
    <view class="top-map" :style="{marginTop:size.height+'px'}">
      <view id="map"></view>
    </view>
  </view>

  <view class="room-container">
    <uv-waterfall ref="waterfall"
                  v-model="listWater"
                  left-gap="10"
                  right-gap="10"
                  column-gap="8">
      <template v-slot:list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list1"
                :key="item.id"
                class="waterfall-item">
            <view class="waterfall-item__image">
              <image :src="item.image" mode="widthFix" :style="{width:'100%'}"></image>
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{item.title}}</text>
              </view>
              <view class="waterfall-item__ft__desc uv-line-2">
                <text class="value">{{item.desc}}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template v-slot:list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="(item, index) in list2"
                :key="item.id"
                class="waterfall-item">
            <view class="waterfall-item__image">
              <image :src="item.image" mode="widthFix" :style="{width:'100%'}"></image>
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{item.title}}</text>
              </view>
              <view class="waterfall-item__ft__desc uv-line-2">
                <text class="value">{{item.desc}}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
  </view>

  <view class="screen-button-body" :style="{display:(tabCheck === 'lists'?'flex':'none')}">
    <u-row :custom-style="{padding:'16rpx 26rpx'}">
      <u-col>
        <view class="screen-button-group row">
          <view class="screen-button">
            <u-button text="全部事件" color="#FF9545" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none'}">全部事件</u-button>
          </view>
          <view class="screen-button">
            <u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">待结案</u-button>
          </view>
          <view class="screen-button">
            <u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">已结案</u-button>
          </view>

        </view>
      </u-col>
    </u-row>
  </view>

</template>

<script>
  import SubmitPage from "./components/SubmitPage/index.vue";
  import ListPage from "./components/ListPage/index.vue";
  import api from "@/utils/functions.js";

	export default {
    computed: {

    },
		components: {
      SubmitPage,
      ListPage,
		},
		data() {
			return {
        listWater:[],
        list1:[],
        list2:[],
        list: [{
          name: '公寓出租',
          id:'room'
        }, {
          name: '商品兑换',
          id:'item'
        },],
        tabCheck:'room',
				show: false,
				title: '暖新商城',
        size:{
          height:0
        }
			}
		},
		onLoad() {

		},
    onReady(){
      this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
    },
		methods: {
			// store.
      tabsChenge(e){
        console.log(e)
        this.tabCheck = e.id
      }
		},
		onPageScroll(res) {

		},
		created() {

      },
		mounted() {

		},
	}
</script>

<style lang="scss">
  .room-container{
    box-sizing: border-box;
    width:100%;
  }
  ::v-deep .u-tabs__wrapper__nav__line{
    left:24rpx;
  }
  .body-background{
    background:{
      color:#F5F5F6;
    }
  }
  .screen-type-button{
   justify-content: space-between;
    //border:2rpx solid #eee;
    align-items: center;
    //padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-text{
      margin-right:10rpx;
    }
  }
  .screen-date-button{
    justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-date{
      //margin-right:50rpx;
    }
  }
  .screen-button-group{
    justify-content: flex-start;
    .screen-button + .screen-button{
        margin-left:16rpx;
    }
  }
  .screen-body{
    position: absolute;
    left:0;
    top:91px;
    z-index:9999;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: .2s;

    -webkit-transition-duration:.2s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:.2s;
    padding:16rpx 26rpx;
    background:{
      color:transparent;
    }
    &.pad{
      background:{
        color:#fff;
      }

    }
    .screen-container{
      position: relative;
      opacity: 1;
      margin-top:32rpx;
      margin-bottom:26rpx;
    }

  }
  @keyframes show {
    0% {
      display: block;
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .show {
    animation: show .5s;
  }
  .screen-search{
    padding-bottom:16rpx;
  }
  .top-map{
    width:100%;
    height:1000rpx;
  }
  #map{
    width:100%;
    height:100%;
    background-color:gray;
  }
</style>