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.
516 lines
12 KiB
516 lines
12 KiB
<template> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#fff" |
|
></u-navbar> |
|
<view class="body-background"></view> |
|
<mz-sticky> |
|
<view class="screen-body row "> |
|
<u-row :custom-style="{boxSizing:'border-box',width:'100%',flexWrap:'wrap'}"> |
|
<u-col |
|
:custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx',boxSizing:'border-box'}"> |
|
<view class="screen-container row"> |
|
<view class="screen-search col-12" :style="{width:'100%',display:'flex',padding:'16rpx 40rpx'}"> |
|
<u-input @blur="getAdvisorList(true)" v-model="pages.keyword" shape="circle" placeholder="小区/商圈/地铁站" |
|
prefixIcon="search" prefix-icon-style="font-size:32rpx;" |
|
border="none" |
|
custom-style="background-color:#F5F5F6;padding:16rpx 32rpx;"></u-input> |
|
</view> |
|
<view :style="{width:'100%',display:'flex'}"> |
|
<view class="row" style="justify-content: space-around;margin-top:10rpx;"> |
|
<view class="screen-type"> |
|
<view class="screen-type-button row " @click="openTypePicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(pages.type!=='')" :text="shows.type_name || '顾问类型'" 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 " @click="openStreetPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(shows.street_name!=='')" :text="shows.street_name || '选择街道'" 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 " @click="openCommunityPicker"> |
|
<view class="button-text"> |
|
<u-text :bold="(shows.community_name!=='')" :text="shows.community_name || '选择社区'" 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> |
|
|
|
</u-col> |
|
</u-row> |
|
</view> |
|
</mz-sticky> |
|
|
|
|
|
<view class="room-container" style=""> |
|
<view class="gradient-background"></view> |
|
<view class="item-container" style="padding:16rpx 26rpx;position: relative;z-index: 2"> |
|
<view class="item" v-for="item in lists" style="padding:20rpx;background-color:#fff;border-radius:20rpx;margin-bottom:16rpx;"> |
|
<view class="body row"> |
|
<view class="cover" style="margin-right:24rpx;"> |
|
<u-image mode="aspectFill" width="160" height="160" :src="item.avatar" radius="10"></u-image> |
|
</view> |
|
<view class="content col "> |
|
<view class="content-title row" style="margin-bottom:32rpx;justify-content: space-between;"> |
|
<u-text :text="item.name" color="#020B18" size="32"></u-text> |
|
<view class="content-button" v-if="userInfo.id !== item.user_id"> |
|
<u-text text="留言" color="#fff" size="28" line-height="28" @click="api.navTo('/pages/LeaveMsg/index?id='+item.id)"></u-text> |
|
</view> |
|
</view> |
|
<view class="content-body"> |
|
<view class="body-address row" style="margin-bottom:10rpx;"> |
|
<view class="value col row" style="align-items: center;"> |
|
<view class=""> |
|
<u-text :lines="2" line-height="40" :text="'服务范围：'+item.type_name.join(',')" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
<view class="body-phone row" style="justify-content: flex-start"> |
|
<view class="value row col"> |
|
<view class="" style="margin-right:10rpx;"> |
|
<u-text :text="'所属地：'+item.address" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28" |
|
marginBottom="30" marginTop="30" @loadmore="getAdvisorList()"/> |
|
</view> |
|
|
|
|
|
<uv-picker |
|
ref="type" |
|
:columns="[typeList]" |
|
keyName="label" |
|
@confirm="selectType"></uv-picker> |
|
<uv-picker |
|
ref="street" |
|
:columns="[streetList]" |
|
keyName="name" |
|
@confirm="selectStreet"></uv-picker> |
|
<uv-picker |
|
ref="community" |
|
:columns="[communityList]" |
|
keyName="name" |
|
@confirm="selectCommunity"></uv-picker> |
|
</template> |
|
|
|
<script> |
|
import api from "@/utils/functions.js"; |
|
import {imghost} from "@/config/host"; |
|
import shop from "@/pages/Shop/index.vue"; |
|
import {getCommonStreet, systemConfig} from "@/api/other"; |
|
import {advisorList} from "@/api/advisor"; |
|
|
|
export default { |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
topStyle(){ |
|
return uni.getStorageSync('sysInfo').sysAndMenuHeight+'px'; |
|
} |
|
}, |
|
components: { |
|
|
|
}, |
|
data() { |
|
return { |
|
lists: [], |
|
current: 0, |
|
show: false, |
|
pages: { |
|
page: 1, |
|
limit: 10, |
|
street_id:'', |
|
community_id:'', |
|
type:'', |
|
keyword:'', |
|
}, |
|
communityList:[{name:'全部',id:''}], |
|
streetList:[{name:'全部',id:''}], |
|
typeList:[{name:'全部',id:''}], |
|
shows:{ |
|
street_name:'', |
|
community_name:'', |
|
}, |
|
status: 'loadmore', |
|
staticImage:{ |
|
listPosition:imghost+'/service-position.png', |
|
listPhone:imghost+'/service-phone.png', |
|
}, |
|
userInfo:{}, |
|
} |
|
}, |
|
onLoad(option) { |
|
console.log('shop', option) |
|
if (option.tabCheck) { |
|
this.tabCheck = option.tabCheck; |
|
if(this.tabCheck === 'item'){ |
|
this.current = 1; |
|
} |
|
} |
|
}, |
|
onReady() { |
|
|
|
}, |
|
onReachBottom() { |
|
this.getAdvisorList(); |
|
}, |
|
methods: { |
|
selectStreet(e){ |
|
this.shows.street_name = e.value[0].name !== '全部'?e.value[0].name:''; |
|
this.pages.street_id = e.value[0].id; |
|
this.communityList = [{name:'全部',id:''}]; |
|
console.log(this.communityList) |
|
if (e.value[0]?.children) { |
|
this.communityList = this.communityList.concat(e.value[0].children) |
|
} |
|
console.log(this.communityList) |
|
this.getAdvisorList(true); |
|
}, |
|
selectCommunity(e){ |
|
this.shows.community_name = e.value[0].name !== '全部'?e.value[0].name:''; |
|
this.pages.community_id = e.value[0].id; |
|
this.getAdvisorList(true); |
|
}, |
|
selectType(e){ |
|
this.shows.type_name = e.value[0].label !== '全部'?e.value[0].label:''; |
|
this.pages.type = e.value[0].value !== '全部'?e.value[0].value:''; |
|
this.getAdvisorList(true); |
|
}, |
|
getPickerData(){ |
|
getCommonStreet({}).then(res => { |
|
this.streetList = res.data.length > 0 && this.streetList.concat(res.data); |
|
}); |
|
systemConfig({ |
|
type:'advisor_type' |
|
}).then(res => { |
|
this.typeList = res.data; |
|
}) |
|
}, |
|
openTypePicker(){ |
|
this.$refs.type.open(); |
|
}, |
|
openStreetPicker(){ |
|
this.$refs.street.open(); |
|
}, |
|
openCommunityPicker(){ |
|
this.$refs.community.open(); |
|
}, |
|
getAdvisorList(clear = false) { |
|
if (clear) { |
|
this.status = 'loadmore' |
|
this.pages.page = 1; |
|
this.lists = []; |
|
} |
|
if (this.status === 'nomore') { |
|
return false; |
|
} |
|
this.status = 'loading' |
|
advisorList(this.pages).then(res => { |
|
this.lists.push.apply(this.lists, res.data); |
|
if (res.data.length === 0) { |
|
this.status = 'nomore' |
|
} else { |
|
this.status = 'loadmore' |
|
} |
|
this.pages.page++; |
|
}); |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
mounted() { |
|
this.userInfo = uni.getStorageSync('user'); |
|
this.getPickerData(); |
|
this.getAdvisorList(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.room-container { |
|
box-sizing: border-box; |
|
width: 100%; |
|
} |
|
|
|
.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: sticky; |
|
z-index: 9; |
|
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; |
|
background: { |
|
color: transparent; |
|
} |
|
padding: 0; |
|
|
|
&.pad { |
|
padding: 0rpx 26rpx 16rpx 26rpx; |
|
position: sticky; |
|
background: #fff; |
|
|
|
.screen-container { |
|
margin-bottom: 0; |
|
} |
|
|
|
} |
|
|
|
.screen-container { |
|
position: relative; |
|
opacity: 1; |
|
margin-top: 32rpx; |
|
margin-bottom: 26rpx; |
|
} |
|
|
|
} |
|
|
|
.item-screen { |
|
|
|
} |
|
|
|
@keyframes show { |
|
0% { |
|
display: block; |
|
opacity: 0; |
|
} |
|
|
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.show { |
|
animation: show .5s; |
|
} |
|
|
|
.screen-search { |
|
padding-bottom: 16rpx; |
|
} |
|
|
|
.top-map { |
|
width: 100%; |
|
} |
|
|
|
#map { |
|
width: 100%; |
|
height: 1000rpx; |
|
background-color: gray; |
|
} |
|
|
|
.room-container { |
|
position: relative; |
|
bottom:20rpx; |
|
width: 100%; |
|
box-sizing: border-box; |
|
background: rgba(245, 245, 246, 1); |
|
border-radius: 20rpx 20rpx 0 0; |
|
padding: 24rpx 0; |
|
|
|
&.item-container { |
|
padding: 0rpx 0; |
|
background: none; |
|
margin-top: 16rpx; |
|
} |
|
} |
|
|
|
.waterfall-item { |
|
overflow: hidden; |
|
background-color: #fff; |
|
border-radius: 20rpx; |
|
margin-bottom: 16rpx; |
|
|
|
.waterfall-item-body { |
|
padding: 18rpx 16rpx; |
|
|
|
.title { |
|
margin-bottom: 12rpx; |
|
} |
|
|
|
.ext-container { |
|
margin-bottom: 8rpx; |
|
font-size: 28rpx; |
|
font-weight: 400; |
|
color: #AFB5BE; |
|
|
|
.street { |
|
color: #178AF2; |
|
margin-left: auto; |
|
} |
|
} |
|
|
|
.tags { |
|
margin-bottom: 10rpx; |
|
|
|
.tag { |
|
font-size: 24rpx; |
|
color: #AFB5BE; |
|
font-weight: 400; |
|
padding: 10rpx 12rpx; |
|
background-color: rgba(175, 181, 190, 0.1); |
|
border-radius: 8rpx; |
|
margin-right: 8rpx; |
|
margin-bottom: 8rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.item-screen { |
|
background-color: #fff; |
|
} |
|
|
|
#map, .map { |
|
width: 100%; |
|
height: 1000rpx; |
|
} |
|
|
|
#popMap, .popMap { |
|
position: absolute; |
|
z-index: 9999; |
|
width: 100%; |
|
left: 0; |
|
justify-content: center; |
|
|
|
.pop-container { |
|
position: relative; |
|
background: { |
|
color: #fff; |
|
}; |
|
width: 550rpx; |
|
border-radius: 10rpx; |
|
padding: 26rpx; |
|
|
|
.title { |
|
justify-content: space-between; |
|
margin-bottom: 18rpx; |
|
} |
|
|
|
.address { |
|
justify-content: space-between; |
|
} |
|
|
|
.pop-add { |
|
position: absolute; |
|
bottom: -15rpx; |
|
left: 20%; |
|
width: 30rpx; |
|
height: 30rpx; |
|
transform: rotateZ(45deg); |
|
z-index: -1; |
|
background: { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.content-button{ |
|
padding:10rpx 22rpx; |
|
background-color:#FF9545; |
|
border-radius: 8rpx; |
|
} |
|
|
|
.map-container { |
|
position: relative; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
::v-deep .u-tabs__wrapper__nav__line { |
|
left: 24rpx; |
|
} |
|
::v-deep .u-text__price{ |
|
display:none; |
|
} |
|
.room-container{ |
|
position: relative; |
|
overflow:hidden; |
|
.gradient-background{ |
|
height:500rpx; |
|
width:100%; |
|
position: absolute; |
|
top:0; |
|
left:0; |
|
z-index:1; |
|
//background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); |
|
} |
|
.water-container{ |
|
position: relative; |
|
z-index: 2; |
|
} |
|
} |
|
</style> |