uniapp-ZHSQ/packages/community/chooseMsgInfo/index.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="http://192.168.0.172:5500/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="http://192.168.0.172:5500/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">
				<template v-for="(item, index) in 11">
					<div :class="active == index ? 'communityInfo active' : 'communityInfo'" @click="choseTower">
						1栋2单元
					</div>
				</template>
			</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" placeholder="请输入楼栋号" />
			</view>

			<view class="item">
				<view class="label">
					<view class="item_desc">单元号</view>
				</view>
				<input class="right_input" type="text" placeholder="请输入单元号" />
			</view>

			<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>

			<div class="addCommunityBtn" @click="saveCommunity">
				确定
			</div>
		</div>

		<div v-if="step == '1' && type == '0'">
			<div class="chooseTit">请选择楼层（1栋3单元）</div>
			<div class="communityInfoList">
				<template v-for="(item, index) in 11">
					<div :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseFloor">
						{{ index + 1 }}层
					</div>
				</template>
			</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" placeholder="请输入楼层(仅为数字)" />
			</view>


			<div class="tip">注意：新建的楼栋号需经物业或平台的核实后自动建 立。如核实未通过，将会创建失败！</div>

			<div class="addCommunityBtn" @click="saveFloor">
				确定
			</div>
		</div>

		<div v-if="step == '2' && type == '0'">
			<div class="chooseTit">请选择房间（1栋3单元/2层）</div>
			<div class="communityInfoList">
				<template v-for="(item, index) in 11">
					<div :class="active == index ? 'communityInfo2 active' : 'communityInfo2'" @click="choseRoom">
						201
					</div>
				</template>
			</div>
			<div class="addCommunityBtn" @click="addRoom">
				新建房间号
			</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" 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>


	</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层",
			show1: false, //是否显示

			show2: false,
			show3: false,
			show4: true,
		}
	},
	methods: {
		//弹窗创建变成创建
		addCommunity() {
			this.type = "1"
		},

		//保存楼栋
		saveCommunity() {
			let that = this
			uni.showModal({
				title: `您是要创建:${this.step}`,
				content: '新建的楼栋号需经物业或平台的核 实后才会创建成功。如核实未通过， 将会创建失败！',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						that.type = "0"
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//选择楼栋
		choseTower() {
			this.step = "1"
		},


		//创建楼层
		saveFloor() {
			this.type = "0"
		},
		//选择楼层
		choseFloor() {
			this.step = "2"
		},


		//选择房间
		choseRoom() {
			this.step = "3"
		},
		saveRoom() {
			this.type = "0"
		},

		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>