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

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

微信小程序云开发|基于微信小程序实现房产中介平台系统(一)https://developer.aliyun.com/article/1423386


设置管理员

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

公司信息管理

四,核心代码展示

用户登录

<!--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. 管理员:房屋发布审核、员工管理、房产首页推荐、管理员添加
相关文章
|
1天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
15天前
|
小程序 开发工具
微信小程序云开发的开通
微信小程序云开发的开通
21 0
微信小程序云开发的开通
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
2月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
2月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
3月前
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
5天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
78 7
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
57 1
|
19天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
68 7
ly~
|
1月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
67 6