108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<style lang='scss' scoped>
|
|
.placeManage{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #FBF8FB;
|
|
&-header{
|
|
display: flex;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
justify-content: space-between;
|
|
&-picker{
|
|
width: 200rpx;
|
|
text-align: center;
|
|
}
|
|
&-search{
|
|
width: calc(100% - 280rpx);
|
|
}
|
|
&-icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
background-color: #1C9AFF;
|
|
}
|
|
}
|
|
&-list{
|
|
padding: 30rpx $paddingLR;
|
|
}
|
|
&-box{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 28rpx;
|
|
border-radius: 26rpx;
|
|
box-shadow: $box-shadow;
|
|
margin-bottom: 28rpx;
|
|
background-color: #fff;
|
|
&-info{
|
|
width: 90%;
|
|
&-address{
|
|
color: #666666;
|
|
font-size: $uni-font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<template>
|
|
<view class="placeManage">
|
|
<view class="placeManage-header">
|
|
<view class="placeManage-header-picker flex-center" @click="selectShow = true">
|
|
<text>{{currentLabel}}</text>
|
|
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
|
</view>
|
|
<u-search class="placeManage-header-search" :show-action="false"></u-search>
|
|
<view class="placeManage-header-icon flex-center">
|
|
<u-icon name="plus" color="#fff"></u-icon>
|
|
</view>
|
|
</view>
|
|
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="placeManage-list">
|
|
<view class="placeManage-box" v-for="(item,index) in 3" :key="index" @click="goPlaceDetailFn">
|
|
<view class="placeManage-box-info">
|
|
<view class="placeManage-box-info-name pb15">楼道南区</view>
|
|
<view class="placeManage-box-info-address">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#999DB2"></u-icon>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentLabel:"德润项目A1",
|
|
selectShow:false, // 选择框开关
|
|
stateList:[{
|
|
label:"德润项目A1",
|
|
value:1
|
|
},{
|
|
label:"德润项目A2",
|
|
value:2
|
|
},{
|
|
label:"德润项目A3",
|
|
value:3
|
|
}]
|
|
}
|
|
},
|
|
mixins:[MescrollMixin],
|
|
onLoad() {},
|
|
methods: {
|
|
goPlaceDetailFn(){
|
|
uni.navigateTo({
|
|
url:"./placeDetail"
|
|
})
|
|
},
|
|
onConfirmSelectFn(e){
|
|
console.log(e,"eeeeees");
|
|
this.currentLabel = e[0].label;
|
|
},
|
|
}
|
|
}
|
|
</script>
|