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

这篇具有很好参考价值的文章主要介绍了微信小程序云开发|基于微信小程序实现房产中介平台系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者主页:编程千纸鹤

作者简介: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. 管理员:房屋发布审核、员工管理、房产首页推荐、管理员添加文章来源地址https://www.toymoban.com/news/detail-857845.html

到了这里,关于微信小程序云开发|基于微信小程序实现房产中介平台系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 房屋中介系统springboot框架jsp房产信息管理java源代码

    本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 房屋中介系统springboot框架 系统有1权限:管理员 该项目中介端有房屋管理、账户权限管理、订单管理、广告

    2024年02月13日
    浏览(44)
  • 基于微信小程序云开发实现考研题库小程序项目(完整版)

    今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码.下载与项目部署。 考研题库小程序云开发实战,完整版提供给大家学习。题库小程序,基于云开发的微信答题小程序,软件架构是微信原生小程序+云开发。 首页 答题页 结果页 我的页

    2024年02月03日
    浏览(28)
  • 微信小程序开发|基于微信小程序的健身陪练系统的设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月12日
    浏览(27)
  • uniapp小程序开发|基于微信小程序实现小型比赛自动编排系统

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月11日
    浏览(32)
  • Uni-app开发小程序|基于微信小程序报修系统设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月15日
    浏览(40)
  • 基于Android水果蔬菜果蔬到家商城系统 微信小程序uniAPP的开发与实现

    果蔬到家是商家针对用户必不可少的一个部分。在商铺发展的整个过程中,果蔬到家担负着最重要的角色。为满足如今日益复杂的管理需求,各类果蔬到家程序也在不断改进。本课题所设计的springboot基于HBuilder X的果蔬到家APP,使用SpringBoot框架,HBuilder X技术进行开发,它的优

    2024年02月11日
    浏览(28)
  • 【物联网开发】-微信小程序之MQTT连接,基于MQTT实现设备-服务器-小程序的消息传输

    想要开发微信小程序,首先要有一些基础知识:html、cs、js、json等,小程序中要用到的知识框架大体相同,一个页面包括js、json、wxml、wxss格式的文件。 由于本人此前从未接触过小程序开发,本篇文章将会以新手小白的角度一步步剖析如何使用微信小程序通过MQTT服务器连接设

    2023年04月24日
    浏览(36)
  • uniapp开发中基于vue的混入(mixin) 实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】

    一、在开发微信小程序的时候,发现【发送给朋友】、【分享到朋友圈】、【复制链接】功能,灰色不可用。 很常见的功能,但是这几个功能,并不是你项目建起来了就有的。 1.【发送给朋友】使用 onShareAppMessage 这个方法 如果你的小程序,发现他的【转发给朋友】的按钮时

    2024年01月17日
    浏览(40)
  • 计算机毕业论文内容参考|基于微信小程序和云开发的小区垃圾分类知识手册平台的设计与实现

    计算机毕业论文内容参考|基于微信小程序和云开发的小区垃圾分类知识手册平台的设计与实现 本文介绍了基于微信小程序和云开发的小区垃圾分类知识手册平台设计与实现。在城市化进程中,垃圾分类成为一项迫切的环保任务。该平台通过提供简洁明了的界面和全面详细的

    2024年02月12日
    浏览(43)
  • 【微信小程序】基于SpringBoot开发后端

    微信小程序登录流程: 主要步骤: 1、小程序端调用 wx.login()向微信接口服务获取临时登录凭证code,并上传至开发者服务端。 2、开发者服务端向微信服务接口服务调用 auth.code2Session 接口,换取用户唯一标识OpenID和会话密钥session_key。 3、开发者服务端根据session_key等信息,基于

    2024年02月10日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包