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

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

项目编号: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. 管理员:房屋发布审核、员工管理、房产首页推荐、管理员添加
相关文章
|
3月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
141 0
|
7月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
613 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
6月前
|
小程序 UED
拓展校友网络的创新解决方案:校园论坛圈子小程序+跑腿+二手市场系统
这是一款基于小程序的校园跑腿服务平台,支持多种注册登录方式、下单支付、跑腿接单配送、订单跟踪评价及物流查询功能,并配备客服模块提升用户体验。系统包含用户、客服、物流、跑腿员和订单五大核心模块,功能完善。此外,平台还拓展了校友网络功能,如信息咨询发布、校园社区建设和活动组织等,旨在增强校友互动与联系,形成紧密的校友生态。
166 4
|
9月前
|
小程序 数据安全/隐私保护
跑腿小程序系统源码
这是一款跑腿小程序,带有智能派单、系统派单、同城配送、校园跑腿、预约取件、用户端+骑手端 基于FastAdmin+thinkphp和uniapp开发的优创同城跑腿系统,支持帮取、帮送模式,包含用户端、骑手端、运营后台。
303 32
|
9月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
260 0
|
10月前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
378 4
|
10月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
328 8
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
315 0
|
11月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
790 3
|
12月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。

热门文章

最新文章