项目编号: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"> <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"> <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>
五,项目总结
主要实现的功能:
- 新房、租房、二手房 信息发布及管理
- 房贷计算器
- 公司介绍
- 公告
- 管理员:房屋发布审核、员工管理、房产首页推荐、管理员添加