微信小程序云开发|基于微信小程序实现房产中介平台系统

作者主页：编程千纸鹤

作者简介：Java、前端、Python开发多年，做过高程，项目经理，架构师

主要内容：Java项目开发、毕业设计开发、面试技术整理、最新技术分享

收藏点赞不迷路  关注作者有好处

文末获得源码

项目编号：BS-XCX-012

一，环境介绍

语言环境：微信小程序

开发工具：微信开发者工具

二，项目简介

移动互联网的发展和应用，是目前的主流，而微信小程序这种轻量级的应用，更是代替了原生的APP应用，在市场中占据了较大的市场份额。本系统以微信小程序云开发技术为基础，开发实现了房产中介平台系统，实现了在线租房、查看新房房源信息、二手房源信息、出租房源信息，前端用户登录后可以在线发布租房信息、发布二手房源信息、发布求租信息，可以实现收藏评论等操作。管理员在线登录可以管理员工信息、管理审核房源信息、管理公司信息等

三，系统展示

下面展示一下系统实现的相关功能界面。

首页：分为新房、二手房、租房三大板块，进不入不同板块可以展示不同的房源信息。下面主菜单中的业务委托可以查看业务委托出租和卖房的信息，这是由中介发布的信息。

 房贷计算器：提供在线计算贷款利率的小工具

 联系中介员工

 查看房源信息

业务登录后可以发布委托出租的房源和售卖的二手房源

 发布出租信息

 发布后进入审核阶段

个人中心模块：可以查看我的委托、我的收藏信息

 管理员管理主界面

 设置管理员

 房源管理：可以设置为首页推荐

 公司信息管理

四，核心代码展示

用户登录

<!--pages/login/login.wxml-->
<view wx:if="{
   
   {showform&!showAuth}}">
	<van-nav-bar title="注册登录" left-text="返回首页" bind:click-left="onClickLeft" />
</view>


<view class="form-box" wx:if="{
   
   {showform&!showAuth}}">
	<!-- 输入框 -->
	<view class="cu-form-group border-top-left-radius">
		<view class='title'>
			<text decode="true">&nbsp;&nbsp;<text decode="true" style="color:#EE0A24;">*</text>姓名：</text>
		</view>
		<input placeholder="输入你的真实姓名" class='radius' id="name" type="text" maxlength='5' style='color:#0080ff;' bindinput="InputData"></input>
	</view>
	<!-- 输入框 -->
	<view class="cu-form-group">
		<view class='title'>
			<text decode="true">&nbsp;&nbsp;<text decode="true" style="color:#EE0A24;">*</text>手机：</text>
		</view>
		<input placeholder="输入你的手机号码" class='radius' id="phone" type="number" maxlength='11' style='color:#0080ff;' bindinput="InputData"></input>
	</view>
	<!-- 说明 -->
	<view class="desc">
		<text decode='true'>说明：请填写你的真实姓名和有效的手机号，方便我们及时联系到您。</text>
	</view>
	<!-- 按钮 -->
	<view class="cu-form-group" style="margin-top:10px;">
		<button class="cu-btn" style="background-color:#1989fa;color:#ffffff;" bindtap="SubmitRegister">注 册</button>
	</view>
</view>



<!-- <view wx:if="{
   
   {showAuth}}">
	<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
</view> -->

<view class="auth-box" wx:if="{
   
   {showAuth}}">
	<view class="card-box">
		<view class="card-content">
			<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确 定</button>
		</view>
		<image src='../image/modal.png'></image>
	</view>
</view>

首页布局

<!--pages/home/home.wxml-->
<!-- 功能选项a -->
<view class="select-box">
	<view data-url="../../Companypackage/newHouse/newHouse" bindtap="Navigate">
		<image src="../image/newHouse.png"></image>
	</view>
	<view data-url="../../Companypackage/secondHandHouse/secondHandHouse" bindtap="Navigate">
		<image src="../image/secondHand.png"></image>
	</view>
	<view data-url="../../Companypackage/rentingHouse/rentingHouse" bindtap="Navigate">
		<image src="../image/rentinghouse.png"></image>
	</view>
</view>

<!-- 功能选项b -->
<view class="header-box">
	<view class="header-row">
		<view class="header-cell" wx:for="{
   
   {headerList}}" wx:key='key' data-url="{
   
   {item.url}}" bindtap="Navigate">
			<view>
				<image src="{
   
   {item.icon}}"></image>
			</view>
			<view class="font-size-12 text-color">{
   
   {item.text}}</view>
		</view>
	</view>
</view>

<!-- bannner -->
<view class="banner-box">
	<image src="../image/banner.png"></image>
</view>

<!-- 公告 -->
<view class="noticeBar-box">
	<van-notice-bar class="noticeBar" left-icon="volume-o" color="#181818;" backgroundColor="#ffffff" text="{
   
   {notice}}" />
</view>

<view class="recommendation-box">
	<view class="recommendation-text">店长推荐</view>
</view>

<!-- 推荐列表 -->
<view class="recommendation-list-box" wx:for="{
   
   {HouseList}}" wx:key='key' data-url="{
   
   {item.url}}" data-id="{
   
   {item._id}}" bindtap="NavigateToDetail">
	<view class="card">
		<view class="card-left">
			<image mode="scaleToFill" src="{
   
   {item.photoInfo[0]}}"></image>
			<view class="card-tag-box card-tag card-tag-mark card-tag-bg">推荐</view>
		</view>
		<view class="card-right">
			<view class="card-title">{
   
   {item.title}}</view>
			<view class="card-content-box">

				<view class="card-content-box-row-top">
					<view class="content-row">
						<view class="float-left font-weight">{
   
   {item.FormData.roomStyle}} {
   
   {item.FormData.area}}㎡</view>
						<view class="float-right price-text">{
   
   {item.FormData.totalPrice}}{
   
   {item.EntrustType=='sale'?'万':'元/月'}}</view>
					</view>
					<view class="content-row">
						<view class="float-left text-grey">{
   
   {item.FormData.location}}</view>
						<view class="float-right text-grey">{
   
   {item.EntrustType=='sale'?item.FormData.averagePrice:''}}{
   
   {item.EntrustType=='sale'?'元/㎡':''}}</view>
					</view>
				</view>

				<view class="card-content-box-row-bottom">
					<view class="content-tag bg-tag bg-cyan light" wx:for="{
   
   {item.FormData.Tags}}" wx:for-item="tag" wx:key='key'>{
   
   {tag}}</view>
				</view>
			</view>
		</view>
	</view>
</view>

<!-- 占位 -->
<view style="height:20px;"></view>

个人中心

<!--pages/mypage/mypage.wxml-->
<!-- 背景图 -->
<view class="bg-box">
	<image src="../image/mypagebg.png"></image>
</view>

<!-- 为登录 -->
<view wx:if="{
   
   {!UserLogin}}" class="head-box" bindtap="NavigateToLogin">
	<view class="userAvatar-box">
		<open-data type="userAvatarUrl"></open-data>
	</view>
	<view class="userlogin">
		<view>登录/注册 (点击登录)</view>
		<view class="font-size-12" style="color:grey;">需要先完成注册登录才能使用哦！</view>
	</view>
</view>

<!-- 已登录 -->
<view wx:else class="head-box" bindtap="ScanPage">
	<view class="userAvatar-box">
		<open-data type="userAvatarUrl"></open-data>
	</view>
	<view class="userlogin">
		<view style="font-weight:bold;">欢迎,{
   
   {userInfo.name}}</view>
		<view class="font-size-12" style="color:grey;">{
   
   {userInfo.nickName}} {
   
   {userInfo.phone}}</view>
	</view>
</view>

<view class="content-box">
	<view class="content-title font-size-16 ">我的服务</view>

	<!-- <view class="content-row" wx:if='{
   
   {Adminstator}}' data-id="managerHome" data-url="../../Adminpackage/managerHome/managerHome" bindtap="Navigate">
        <view class="content-icon float-left">
            <image src="../image/adminstor.png"></image>
        </view>
        <view class="content-text font-size-14">管理员</view>
    </view> -->

	<view class="content-row" data-id="mypage" data-url="../../Companypackage/myentrust/myentrust" bindtap="Navigate">
		<view class="content-icon float-left">
			<image src="../image/entrust.png"></image>
		</view>
		<view class="content-text font-size-14">我的委托</view>
	</view>

	<view class="content-row" data-id="mycollection" data-url="../../Companypackage/mycollection/mycollection" bindtap="Navigate">
		<view class="content-icon float-left">
			<image src="../image/mycollection.png"></image>
		</view>
		<view class="content-text font-size-14">我的收藏</view>
	</view>
</view>

<view class="content-box">
	<view class="content-title font-size-16 ">设置</view>

	<view class="content-row">
		<view class="content-icon float-left">
			<image src="../image/address.png"></image>
		</view>
		<view class="content-text font-size-14">
			<button open-type='contact' style="color:black;height:35px;line-height:35px;font-weight: lighter;padding:0;width:100%;border:none;background:#fff;font-size:14px;text-align:left;">在线客服</button>
		</view>
	</view>

	<view class="content-row" bindtap="CleanInfo">
		<view class="content-icon float-left">
			<image src="../image/history.png"></image>
		</view>
		<view class="content-text font-size-14">清除记录</view>
	</view>
	<!-- <view class="content-row">
        <view class="content-icon float-left">
            <image src="../image/longout.png"></image>
        </view>
        <view class="content-text font-size-14">退出登录</view>
    </view> -->
</view>

五，项目总结

主要实现的功能：

1. 新房、租房、二手房 信息发布及管理

2. 房贷计算器

3. 公司介绍

4. 公告

5. 管理员：房屋发布审核、员工管理、房产首页推荐、管理员添加