项目简介及背景
优房数据B端产品是为海内外投资人提供完全与美国同步的第三方精准数据，对不同区域的房源做对应分析并提供专业报告，通过深度分析，做出房价及租金的预测，并把房源及投资人进行精准推送，促使投资人做出最明智投资决策。
我们会利用数据分层、智能报表、数据分析、数据切片为服务机构提供全面数据服务，同时会根据企业不同层级要求精确描绘投资人画像，再不泄露任何投资人个人信息的前提下进行精准广告投放，高效为企业海外业务营销进行全方位服务。
系统功能体系
①、账户体系：公司账户、顾问账户、账户中心。
②、大平台营销体系：房源管理、数据分析、营销工具、二级平台、客户注册。
系统主要页面
①、公司账户：公司信息管理、房源列表、客户管理、顾问管理、公司落地页管理、公司二级主页管理等功能。
②、顾问账户：房源列表、客户管理、分享组管理、Ping++聚合支付-支付宝微信扫码支付功能、房产报告管理、订单管理、收藏房源等功能。
③、公共组件对外页面：公司落地页、房源详情页、移动端-房源列表分享页、移动端-房源视频分享页、。
技术栈
Client: Vue全家桶、ElementUI，及其他第三方Vue插件，例如：axios、moment、lodash、lazyload、qrcoder、vue-ripple-directive、clipboard、ali-oss等等。Pages目录总计37个.vue组件，Components目录总计169个公共组件，Router配置共计35个页面。
PS：本项目17年开发第一版为Java+jQuery前后分离架构，18年采用Vue重构。
整个系统的页面布局是我参考借鉴其他国内外同行门户网站，独立进行设计开发，例如：Redfin、Zillow、Trulia等等。早期地图是Google maps，后期因为Google改版，取消了免费额度，改为了会员制并每个月送100刀（没什么卵用），随改为Mapbox GL进行重构替换，数据可视化图表是Echarts。
第三方库
- Vue: cn.vuejs.org/v2/guide/in…
- Vuex：vuex.vuejs.org/zh/guide/
- Axios: axios-http.com/docs/api_in…
- Lodash: www.lodashjs.com/
- Vue-Lazyload: www.npmjs.com/package/vue…
- Vue-Router: router.vuejs.org/zh/api/
- clipboard: www.npmjs.com/package/cli…
- qrcoder: www.npmjs.com/package/qrc…
- moment：www.npmjs.com/package/mom…
- vue-ripple-directive：www.npmjs.com/package/vue…
- ali-oss：help.aliyun.com/document_de…
API 接口说明
获取房源列表数据
GET /house/search
| Parameter | Type | Description |
|---|---|---|
filed | String | Required, 排序字段 |
direction | String | Required, 排序顺序，desc：降序，asc：升序 |
page | Number | Required, 分页页数 |
pageSize | Number | Required, 分页大小 |
action | String | 搜索方法：房源地址/MLS、城市、邮编 |
keyword | String | 搜索关键字 |
type | Number | 房源类型 |
beds | Number | 卧室数量 |
baths | Number | 卫浴数量 |
year | Number | 房龄 |
minPrice | Number | 最低价格 |
maxPrice | Number | 最高价格 |
minSize | Number | 最小面积 |
maxSize | Number | 最大面积 |
maxX | Number | 地图拖动搜索房源——北 |
minX | Number | 地图拖动搜索房源——南 |
maxY | Number | 地图拖动搜索房源——东 |
minY | Number | 地图拖动搜索房源——西 |
isShowShareGroup | Boolean | 是否展示分享组名称 |
安装、运行及部署构建步骤
# 安装依赖（第一次生成项目后）
npm install
# 开始本地开发，通过webpack-dev-server实时编译代码
npm run dev
# 构建测试环境的代码
npm run build:test
# 构建生产环境的代码
npm run build:prod
链接地址
生产环境：beta-business.mf-data.com
核心代码逻辑
①、公司账户下的公司二级主页管理功能，包括新建、修改、提交审核、发布等功能。类似于简易的低代码系统，搭建完成后可预览并发布，赋能B端客户搭建的自己公司的PC端LandingPage落地页。
②、关于地图的具体解决方案可以详看：juejin.cn/post/707202…
③、房屋贷款公式：Principal and Interest-本金和利息公式、Property Taxes-房产税公式，Homeowners' Insurance-业主保险公式，Mortgage Insurance-抵押贷款保险公式、每月还款本息(月供)。
④、房源详情页的10个图表模块的交互体验优化，如果数据齐全的情况下大概累计有上百个图表，没有数据的图表则不会展示，大多数房源的房源详情页里至少有50个图表以上。
初始技术方案是进入详情页后，就默认并发请求所有业务模块的图表数据接口，并展示全部图表实例，这样性能很差，页面会卡2~5s左右😅。
最终解决方案是默认进来页面后不请求业务模块的图表数据接口，只展示这10个业务模块的标题，每个模块都做成折叠面板的形式，点击标题则请求接口并展开该模块下的图表，并且只在第一次展开时请求一次接口即可，接口数据缓存起来，之后关闭再打开不会再请求接口，这样做以后性能比之前好了很多，详情页加载耗时大大缩短，性能极大改善。
⑤、顾问账户下的房源分享组管理功能，此为移动端页面，B端公司的顾问通过朋友圈分享出这条分享组后，该顾问的客户查看此分享组并感兴趣有意向时，又通过微信将该分享组分享给其他朋友时，此时该分享组的level层级计算比较复杂。
⑥、房源视频增删改查管理，上传阿里云OSS bucket，并支持弱网场景及断点续传，页面功能操作流程：
业务逻辑视图
目录结构
├── build // 构建工具配置文件夹
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js // Webpack基础配置
│ ├── webpack.dev.conf.js // 开发环境配置
│ └── webpack.prod.conf.js // 生产环境配置
├── config // 项目配置
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── src // 源码目录
│ ├── api // 接口配置，对接口进行统一管理
│ ├── axios // 公共静态资源
│ │ └── index.js // axios封装配置
│ ├── components // 公共通用、业务组件
│ │ ├── companyHomePage // 落地页
│ │ ├── houseDetails // 房源详情页
│ │ ├── houseListMap // 房源列表页，含左侧地图及右侧房源列表
│ │ ├── massEmail // 群发邮件页
│ │ ├── massSMS // 群发短信页
│ │ ├── TagsView // 标签导航栏切换菜单功能
│ │ ├── videoPlayer // 视频播放组件
│ │ ├── houseListMapInfowindow // 地图的InfoWindow/Popup弹窗交互组件
│ │ ├── clientShareHouse // 移动端-客户看的分享房源页
│ │ ├── clientShareVideo // 移动端-客户看的分享视频页
│ │ ├── Breadcrumb // 面包屑导航二次封装
│ │ └── BackTop // 自定义返回顶部组件
│ ├── mixin // 公共混入组件
│ │ └── echarts_radio // Echarts图表封装组件
│ ├── pages // 业务组件页面
│ │ ├── Company // 公司领导账户页
│ │ ├── Consultant // 顾问账户页
│ │ ├── YFSJinfo // 页底公司介绍信息页
│ │ └── errorPage // 错误页，例如404
│ ├── router // 路由配置
│ │ ├── index.js // 路由配置及相关鉴权逻辑等等
│ │ └── routerMap.js // 路由枚举字典表
│ ├── utils // 工具方法类库
│ │ └── globalBase.js // 挂载全局方法工具函数
│ ├── App.vue // 页面入口根实例
│ └── main.js // 程序入口文件，加载各种公共组件及插件配置
├── static // 公共静态资源
│ ├── css // 公共通用样式
│ ├── img // 公共图片
│ └── js // 第三方库及插件的js文件
└──index.html // 入口html文件
4 directories, 207 .vue组件，11 .js文件
