You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
11 KiB
335 lines
11 KiB
<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:[ |
|
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
], |
|
list1:[ |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, |
|
|
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
], |
|
list2:[ |
|
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }, |
|
], |
|
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> |