|
@@ -0,0 +1,395 @@
|
|
|
+<template>
|
|
|
+ <div class="maintenance">
|
|
|
+ <div class="topSearchBox">
|
|
|
+ <van-field
|
|
|
+ v-model="value1"
|
|
|
+ right-icon="search"
|
|
|
+ class="input-item"
|
|
|
+ placeholder="请输入房号"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <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="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">
|
|
|
+ <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" style="align-items: start;">
|
|
|
+ <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 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" style="margin-top: 12rpx">
|
|
|
+ <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 name="生产用房" shape="square">生产用房</van-checkbox>
|
|
|
+ </van-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="selectRow">
|
|
|
+ <span class="rowTitle">物业性质</span>
|
|
|
+ <div class="selectItemBox">
|
|
|
+ <van-checkbox-group :value="propertyNature" @change="natureChange" >
|
|
|
+ <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="toEdit(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{
|
|
|
+ value1:'',
|
|
|
+ parkSelect:true,
|
|
|
+ properties: [
|
|
|
+ {name:'一期', select:true},
|
|
|
+ {name:'二期', select:false},
|
|
|
+ {name:'三期', select:false},
|
|
|
+ {name:'四期', select:false},
|
|
|
+ ],
|
|
|
+ toward: ['东', '北'],
|
|
|
+ avaStatus:['可用'],
|
|
|
+ rentalStatus:[],
|
|
|
+ useTo:[],
|
|
|
+ propertyNature:[],
|
|
|
+ height: 1036,
|
|
|
+ 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 > 1000){
|
|
|
+ this.height = 130
|
|
|
+ }else{
|
|
|
+ this.height = 1036
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toEdit(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/subPackages/propertyManagement/propertyEditor'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .maintenance{
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .van-checkbox-group{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .van-checkbox{
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ .van-checkbox__label {
|
|
|
+ padding-left: 6rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ }
|
|
|
+ .van-checkbox__icon{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ .van-icon, .van-icon:before {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .van-checkbox__icon--checked {
|
|
|
+ background: rgba(3, 101, 249, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|