436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
|
||
<div class="header" :style="{ paddingTop: top + 'px', height: localHeight + 'px' }">
|
||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||
</div>
|
||
<div class="communityList">
|
||
<div class="communityItem">
|
||
<div class="communityItem_img">
|
||
<image mode="aspectFill" src="https://static.hshuishang.com/property-img-file/com_act2Img.png" alt="" />
|
||
</div>
|
||
|
||
<div class="communityItem_msg">
|
||
<div>
|
||
<div class="communityItem_msg_title">岸芷汀兰(东区)</div>
|
||
<div class="communityItem_msg_addr">
|
||
河北省衡水市桃城区红旗大街与河
|
||
阳路交叉口西北300米东车辆入口
|
||
</div>
|
||
</div>
|
||
|
||
<div class="communityItem_msg_more">
|
||
<image src="https://static.hshuishang.com/property-img-file/com_communityMore.png" alt="" />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
|
||
<div v-if="step == '0' && type == '0'">
|
||
<div class="chooseTit">请选择楼栋</div>
|
||
<div class="communityInfoList">
|
||
<div v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo active' : 'communityInfo'" @click="choseTower(item + 1)">
|
||
1栋{{index +1}}单元
|
||
</div>
|
||
</div>
|
||
<div class="addCommunityBtn" @click="addCommunity">
|
||
新建楼栋
|
||
</div>
|
||
</div>
|
||
<div v-if="step == '0' && type == '1'">
|
||
<div class="chooseTit">新建楼栋</div>
|
||
<view class="item">
|
||
<view class="label">
|
||
<view class="item_desc">楼栋号</view>
|
||
</view>
|
||
<input class="right_input" type="text" @input="headerInputClick" data-name="addStorey" :value="addStorey" placeholder="请输入楼栋号" />
|
||
</view>
|
||
|
||
<view class="item">
|
||
<view class="label">
|
||
<view class="item_desc">单元号</view>
|
||
</view>
|
||
<input class="right_input" type="text" @input="headerInputClick" data-name="addUnit" :value="addUnit" placeholder="请输入单元号" />
|
||
</view>
|
||
|
||
<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>
|
||
|
||
<div class="addCommunityBtn" @click="saveCommunity">
|
||
确定
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="step == '1' && type == '0'">
|
||
<div class="chooseTit">请选择楼层（1栋{{storey}}单元）</div>
|
||
<div class="communityInfoList">
|
||
<div v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseFloor(item +1)">
|
||
{{ index + 1 }}层
|
||
</div>
|
||
</div>
|
||
<div class="addCommunityBtn" @click="addCommunity">
|
||
新建楼层
|
||
</div>
|
||
</div>
|
||
<div v-if="step == '1' && type == '1'">
|
||
<div class="chooseTit">新建楼层</div>
|
||
<view class="item">
|
||
<view class="label">
|
||
<view class="item_desc">楼层</view>
|
||
</view>
|
||
<input class="right_input" type="text" @input="headerInputClick" data-name="addFloor" :value="addFloor" placeholder="请输入楼层(仅为数字)" />
|
||
</view>
|
||
|
||
|
||
<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>
|
||
|
||
<div class="addCommunityBtn" @click="saveFloor">
|
||
确定
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="step == '2' && type == '0'">
|
||
<div class="chooseTit">请选择房间（1栋{{storey}}单元/{{unit}}层）</div>
|
||
<div class="communityInfoList">
|
||
<div v-for="(item, index) in 11" :key="index" :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseRoom(item)">
|
||
{{unit}}0{{ index +1 }}
|
||
</div>
|
||
</div>
|
||
<div class="addCommunityBtn" @click="addRoom1">
|
||
新建房间号
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="step == '2' && type == '1'">
|
||
<div class="chooseTit">新建房间号</div>
|
||
<view class="item">
|
||
<view class="label">
|
||
<view class="item_desc">房间号</view>
|
||
</view>
|
||
<input class="right_input" type="text" @input="headerInputClick" data-name="addRoom" :value="addRoom" placeholder="请输入房间号" />
|
||
</view>
|
||
|
||
|
||
<div class="tip">注意：新建的房间号需经物业或平台的核实后自动建立。如核实未通过，将会创建失败！</div>
|
||
|
||
<div class="addCommunityBtn" @click="saveRoom">
|
||
确定
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 创建 -->
|
||
<div class="dialog" v-if="show1" @click="cancel1">
|
||
<div class="dialogCon">
|
||
<div class="dialogCon_Tit">
|
||
您是要创建：{{ createName }}
|
||
</div>
|
||
<div class="dialogCon_Con">
|
||
新建的楼层需经物业或平台的核实 后才会创建成功。如核实未通过， 将会创建失败！
|
||
</div>
|
||
<div class="dialogCon_BtnList">
|
||
<div class="dialogCon_BtnList1" @click="cancel1">取消</div>
|
||
<div class="dialogCon_BtnList2" @click="confirm1">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 已存在 -->
|
||
<div class="dialog" v-if="show2" @click="cancel2">
|
||
<div class="dialogCon">
|
||
<div class="dialogCon_Con">
|
||
您输入的楼层已存在， <br>
|
||
您是否确认入住：{{ createName}}
|
||
</div>
|
||
<div class="dialogCon_BtnList">
|
||
<div class="dialogCon_BtnList1" @click="cancel2">取消</div>
|
||
<div class="dialogCon_BtnList2" @click="confirm2">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最后创建房间并入住 -->
|
||
<div class="dialog" v-if="show3" @click="cancel3">
|
||
<div class="dialogCon">
|
||
<div class="dialogCon_Tit">
|
||
您是要创建并入驻：
|
||
</div>
|
||
<div class="dialogCon_room">
|
||
{{ createName }}
|
||
</div>
|
||
<div class="dialogCon_Con">
|
||
新建的楼层需经物业或平台的核实 后才会创建成功。如核实未通过， 将会创建失败！
|
||
</div>
|
||
<div class="dialogCon_BtnList">
|
||
<div class="dialogCon_BtnList1" @click="cancel3">取消</div>
|
||
<div class="dialogCon_BtnList2" @click="confirm3">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 最后入驻 -->
|
||
<div class="dialog" v-if="show4" @click="cancel4">
|
||
<div class="dialogCon">
|
||
<div class="dialogCon_Tit">
|
||
您是要创建并入驻：
|
||
</div>
|
||
<div class="dialogCon_room1">
|
||
岸芷汀兰(东区)
|
||
</div>
|
||
<div class="dialogCon_room2">
|
||
{{ createName }}
|
||
</div>
|
||
<div class="dialogCon_BtnList">
|
||
<div class="dialogCon_BtnList1" @click="cancel4">取消</div>
|
||
<div class="dialogCon_BtnList2" @click="confirm4">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<u-popup :show="selectShow" @close="close" mode="center" customStyle="width: 500rpx;" round="20rpx">
|
||
<view class="popup_container">
|
||
<view class="popup_title">请确认要入驻的房产：</view>
|
||
<view class="popup_community_name">岸芷汀兰(东区)</view>
|
||
<view class="popup_desc">1栋4单元2层208室</view>
|
||
<view class="popup_btn_List">
|
||
<view class="popup_btn" @click="headerCloseClick">取消</view>
|
||
<view class="popup_btn popup_btn1" @click="headerPopupSubmitClick">确定</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { apiArr } from '../../../api/community';
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
localHeight: "",
|
||
top: "",
|
||
active: "1",
|
||
step: "0",
|
||
type: "0", //1新建 0选择
|
||
createName: "8层",
|
||
|
||
addStorey: '', // 新增楼栋号
|
||
addUnit: '', // 新增单元楼号
|
||
addFloor: '', // 新增楼层
|
||
addRoom: '', // 新增房间号
|
||
|
||
storey: '', // xx号楼
|
||
unit: '', // 单元楼号
|
||
room: '', // 房间号
|
||
|
||
|
||
show1: false, //是否显示
|
||
|
||
show2: false,
|
||
show3: false,
|
||
show4: false,
|
||
selectShow: false, // 入驻房间号
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
headerInputClick(e) {
|
||
const { name } = e.currentTarget.dataset;
|
||
const { value } = e.detail;
|
||
this[name] = value;
|
||
},
|
||
|
||
//弹窗创建变成创建
|
||
addCommunity() {
|
||
this.type = "1"
|
||
},
|
||
|
||
//保存楼栋
|
||
saveCommunity() {
|
||
let that = this;
|
||
if(!this.addStorey) {
|
||
uni.showToast({
|
||
title: '请输入楼栋号',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if(!this.addUnit) {
|
||
uni.showToast({
|
||
title: '请输入单元号',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: `您是要创建:${this.addStorey}栋${this.addUnit}单元吗？`,
|
||
content: '新建的楼栋号需经物业或平台的核 实后才会创建成功。如核实未通过， 将会创建失败！',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
that.type = "0"
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//选择楼栋
|
||
choseTower(item) {
|
||
console.log('111', item);
|
||
this.storey = item;
|
||
this.step = "1"
|
||
},
|
||
|
||
|
||
//创建楼层
|
||
saveFloor() {
|
||
// this.type = "0"
|
||
let that = this;
|
||
if(!this.addFloor) {
|
||
uni.showToast({
|
||
title: '请输入楼层',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showModal({
|
||
title: `您是要创建:${this.addFloor}层吗？`,
|
||
content: '新建的楼层需经物业或平台的核实后才会创建成功。如核实未通过，将会创建失败！',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
that.type = "0"
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//选择楼层
|
||
choseFloor(item) {
|
||
this.step = "2";
|
||
this.unit = item;
|
||
},
|
||
|
||
|
||
//选择房间
|
||
choseRoom(item) {
|
||
// this.step = "3"
|
||
console.log('1');
|
||
this.room = item;
|
||
this.selectShow = true
|
||
},
|
||
|
||
headerPopupSubmitClick () {
|
||
console.log('提交');
|
||
|
||
},
|
||
headerCloseClick() {
|
||
this.selectShow = false;
|
||
},
|
||
|
||
addRoom1() {
|
||
this.type = '1'
|
||
},
|
||
saveRoom() {
|
||
// this.type = "0"
|
||
let that = this;
|
||
if(!this.addRoom) {
|
||
uni.showToast({
|
||
title: '请输入房间号',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: `您是要创建:${this.addRoom}房间吗？`,
|
||
content: '注意：新建的房间号需经物业或平台的核实后自动建立。如核实未通过，将会创建失败！',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
that.type = "0"
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
back() {
|
||
if (this.step == "0") {
|
||
if (this.type == "1") {
|
||
return this.type = "0"
|
||
}
|
||
NavgateTo("1")
|
||
}
|
||
if (this.step == "1") {
|
||
if (this.type == "1") {
|
||
return this.type = "0"
|
||
}
|
||
this.step = "0"
|
||
}
|
||
if (this.step == "2") {
|
||
if (this.type == "1") {
|
||
return this.type = "0"
|
||
}
|
||
this.step = "1"
|
||
}
|
||
if (this.step == "3") {
|
||
if (this.type == "1") {
|
||
return this.type = "0"
|
||
}
|
||
this.step = "2"
|
||
}
|
||
},
|
||
|
||
cancel4(){
|
||
this.show4 = false
|
||
},
|
||
confirm4(){
|
||
},
|
||
|
||
cancel3(){
|
||
this.show3 = false
|
||
},
|
||
confirm3(){},
|
||
|
||
cancel2(){
|
||
this.show2 = false
|
||
},
|
||
confirm2(){},
|
||
|
||
cancel1(){
|
||
this.show1 = false
|
||
},
|
||
confirm1(){},
|
||
},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
|
||
onReachBottom() {
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style>
|