目 录
摘 要 I
Abstract II
引 言 1
1 相关技术及开发环境介绍 3
1.1 相关技术 3
1.1.1 微信小程序 3
1.1.2 uni-app 3
1.1.3 JFinal 3
1.1.4 MySQL数据库 3
1.2 开发环境 3
1.2.1 IDEA 3
1.2.2 微信开发者工具 4
1.2.3 HBuilderX 4
1.3 本章小结 4
2 系统分析 5
2.1 系统可行性需求分析 5
2.2 系统功能需求分析 5
2.3 本章小结 6
3 系统设计 7
3.1 系统的功能结构设计 7
3.2 软件体系结构设计 8
3.3 数据库设计 9
3.4 本章小结 16
4 系统实现 17
4.1 开发环境 17
4.2 系统和数据库的配置 17
4.3 开发规范 17
4.3.1 书写规则 17
4.3.2 程序注释 17
4.4 各个功能模块的详细设计 18
4.4.1 首页 18
4.4.2 我要报备模块 18
4.4.3 委托带看模块 19
4.4.4 我的团队模块 21
4.4.5 发圈图文模块 21
4.4.6 我的模块 22
4.4.7 客户模块 23
4.5 本章小结 24
5 系统测试 25
5.1 测试概述 25
5.2 测试用例 25
5.3 性能测试 26
5.4 测试结果 27
5.5 本章小结 27
结 论 28
致 谢 29
参考文献 30
附 录 32
摘 要
现在的社会是计算机技术飞速发展的时代，并取代了人力，而房产行业逐渐兴起，房产经纪人每次带看分佣成为了这个行业的痛点，因此设计了智能高佣报备系统，可以达到节约房产经纪人成本的效果。本系统没有选择移动APP，而是选择现在非常热门的微信小程序软件来展示给用户。截止目前，开发微信小程序的技术是多种多样的，在对比当今几款主流的框架时，由于uni-app相比于其他开发框架技术拥有更多的优势，最终选择了使用uni-app技术开发智能高佣报备系统。通过对房产经纪人工作的调研，并充分考虑未来用户需求，本文运用uni-app技术，采用MySQL数据库对楼盘信息数据进行缓存，本系统突出之处在于对楼盘信息数据针对性的精确分析。
本论文首先介绍项目中运用到的相关技术uni-app、JFinal、MySQL数据库等；说明uni-app框架应用在智能高佣报备系统的原理；描述基于uni-app的智能高佣报备系统的主要功能的应用实现；另外说明选择uni-app技术开发智能高佣报备系统的主要原因，在总结中说明遇到的uni-app技术问题的解决办法或者注意事项；最后对基于uni-app的智能高佣报备系统进行系统测试，并分析测试结果。
关键词：uni-app；微信小程序；JFinal；
Abstract
Modern society is the age of rapid development of computer which has displaced human.However,the real estate industry is gradually rising,every time real estate agents to see the commission has become a agnoy in this industry.Thus,designing an intelligent high commission reporting system in order to save the cost of real estate agents.This system doesn’t choose mobile APP,but choose the extremely popular WeChat small program to show to users.So far,the development of WeChat small program is diverse.Comparing to some present mainstream frameworks,uni-app has more advantages than other development framework,Therefore,finally uni-app is choosed to develop an intelligent high commission reporting system.Through the investigation of real estate brokers’work and the full consideration of the user demand in the future,the paper employs uni-app and MySQL database to cache the real estate information data.The exceptional advantage of this system is the targeted and accurate analysis for real estate information data.
The paper firstly introduces relevant technologies that projects use,such as uni-app,JFinal,MySQL database.It explains the principle of uni-app applied in the intelligent high commission reporting system and describes the application and accomplishment of the main functions of uni-app-based intelligent high commission reporting.Furthermore,it the main reasons for choosing uni-app to develop intelligent high commission reporting system.In conclusion,it moentions the solutions or matters needing attention if uni-app encounters problems.Finally,testing and analyzing the result of the uni-app-based intelligent high commission reporting system.Firstly introduces relevant technologies that projects use,uni-app,JFinal,MySQL database.Secondly,it explains the principle of uni-app framework applied in the intelligent high commission reporting system and describes the application and accomplishment of the main functions of uni-app-based intelligent high commission reporting.The main reasons for choosing uni-app to develop intelligent high commission reporting system.It moentions the solutions or matters needing attention if uni-app encounters problems.Finally,testing uni-app based intelligent high commission reporting system and analyzing its result.
Keywords: Uni - app; WeChat applet; JFinal;
引 言
当今移动互联网日新月异，在《第38次中国互联网络发展状况统计报告》中显示[1]，用户的上网设备由PC端进一步向移动端递进。移动APP的出现，满足了用户多样化的需求，但是用户在使用APP的过程中不可避免的给用户和手机自身造成了很多困扰。因此腾讯公司推出了一个新思路“小程序”，主打一个新概念“轻量级”[2]。
随着移动互联网的不断发展，网络应用和移动互联网产品日益朝着“微、小、轻”的方向不断前进，微信小程序就是一个重要体现。2016年初微信之父张小龙提出一种新的应用形态[3]，那就是基于微信的一种“小程序”应用，其目的是为了让微信用户更好地在网络化的今天方便地享受优质服务[4]。微信小程序具有明显的优点, 如开发成本低、学习成本低以及反应速度快等, 正在不断的赢得用户和市场的广泛认可[5]。相比移动APP，也有很多的优势，开发成本低，只面向微信的所有用户群体，通过微信APP扫一扫、分享小程序、搜索小程序名称等方式即可使用[6]，无需下载安装更新，产品发布只需向微信公众平台提交审核，不占用手机的内存空间，而且小程序不允许主动给用户发送广告等[7]。《人民日报》微信小程序的推出，实现了多媒体内容生产和用户之间的双向交流，在舆论引导和盈利模式的重构等方面取得重大成就[8]。
开发微信小程序的方式主要分为原生开发和框架开发，但是框架开发又有很多，主要是wepy、mpvue、taro、uni-app主流开发框架[9]。
基于uni-app的智能高佣报备系统是一个可以应用在全国各地的楼盘报备信息系统，本课题是从当前沈阳城市房产经纪人报备楼盘信息审核过程困难为切入点，以满足经纪人报备楼盘信息的需求为核心目标设计开发了该项目。本系统旨在服务于工作在房产租赁的经纪人人群，用户使用本系统可直观立体的观察到所在城市的楼盘信息等。本系统具有一定的社会价值和实用价值，能够通过多种方式呈现租房信息分析数据，可有效减轻房产经纪人工作的压力，使广大客户得到最好的服务待遇。
本课题研究微信小程序在房产领域的应用分析与现状以及未来的发展前景，其中主要论述了利用uni-app技术开发微信小程序的应用与实现，对比微信小程序几种主流的开发方式，说明选择用uni-app技术开发智能高佣报备系统的主要原因，文章从以下五个方面分别阐述：系统相关技术以及系统开发环境的介绍，介绍智能高佣报备系统中运用到的相关技术内容以及使用的开发工具，微信小程序、uni-app、JFinal、MySQL等，并对这些技术以及开发工具进行总结；系统分析，系统的可行性需求分析，包括对智能高佣报备系统的前后台进行需求分析等；系统设计，包括基于uni-app智能高佣报备系统的功能结构设计，数据库的选择与应用，以及软件体系结构的设计等；系统功能实现，阐述了针对系统设计方案的具体实现方法，其中包括代码规范，开发环境及注释规范等；系统测试，对基于uni-app智能高佣报备系统所进行得系统测试与功能测试，举例说明包括测试用例与测试计划等。
1 相关技术及开发环境介绍
1.1 相关技术
1.1.1 微信小程序
智能高佣报备系统是基于微信小程序技术的一款应用软件。微信小程序属于小程序的一种，是一种只需要用微信APP扫一扫或者搜索软件的名称就可以使用的应用软件[10]。它避免了下载、安装、更新、卸载、内存占有率以及导致手机卡顿的行为，只需要安装微信应用APP，搜索目标小程序打开即可使用[11]。
1.1.2 uni-app
智能高佣报备系统的前端使用的是uni-app框架。uni-app框架主要的核心是基于Vue.js的前端框架。uni-app框架相比于其他开发框架的优点在于只需要一套利用Vue.js编写的代码即可将其编译到苹果系统、安卓系统、小程序等多个平台，实现了一套代码多端共享。
1.1.3 JFinal
智能高佣报备系统的后台管理系统采用以JFinal为核心的Java MVC架构，是基于Java语言的极速WEB+ORM框架[12]。JFinal框架采用Model View Controller架构，遵循Convention over Configuration原则，而且数据库的开发相比于其他框架速度明显加快，且无第三方依赖等。JFinal框架学习成本低、功能强大，对于小企业公司选择JFinal框架进行后台开发，节约成本。
1.1.4 MySQL数据库
智能高佣报备系统使用的数据库是MySQL数据库。MySQL是一种关系型数据库管理系统，MySQL数据库相比于Oracle、PostgreSQL有很多优势，首先是开源的，不需要支付任何费用，其次可以处理成千上万条记录，还支持多种语言等。
1.2 开发环境
1.2.1 IDEA
使用IDEA开发工具设计本项目的后台管理系统，IDEA全称IntelliJ IDEA，是Java编程语言开发的集成环境。主要支持PostgreSQL、MySQL、Oracle等数据库类，还支持SpringMVC、GWT、Play、Web Services、Struts等框架，以及支持Tomcat、WebLogin等容器。
1.2.2 微信开发者工具
微信开发者工具目前由微信官方网站所公布的相关小程序开发工具为微信Web开发者工具，并由官方网站来提供小程序的前端开发框架[13]。微信开发者工具需要使用微信登录，提前配置好项目的AppID等内容，可以在微信开发者工具上进行上传代码并发布到对应的微信公众平台账号上，更新系统很方便。
1.2.3 HBuilderX
HBuilderX来设计智能高佣报备系统的前端，HBuilderX是推出的一款基于HTML5的最新的Web开发工具。而HBuilderX相对于HBuilder性能更高，启动更快，页面更加美观等，但是响应速度没有HBuilder快，并不影响项目的开发。
1.3 本章小结
在智能高佣报备系统的开发过程里，需要对开发微信小程序的相关技术有着充分的了解，本章主要进行了相关技术知识的阐述，而且介绍在开发微信小程序的过程中主要使用的相关技术以及开发工具。
2 系统分析
2.1 系统可行性需求分析
无论开发人员开发什么项目[14]，可行性需求分析是在程序员开发前必须要做的工作，通常是由专业人员来进行的。下面对基于uni-app的智能高佣报备系统进行实际的需求分析。
基于uni-app的智能高佣报备系统是一个可以应用在全国各地的经纪人在为用户提交报备信息的同时能够得到更好的处理的微信小程序。本课题是从当前沈阳城市房产经纪人在报备楼盘信息时流程复杂等为切入点，以满足经纪人快速报备信息并且能够立即处理的需求为核心目标设计开发了该项目。本系统旨在服务于房产领域的经纪人客户，用户使用本系统可直观立体的观察到各个经纪人报备楼盘、委托带看以及每个人之间的分佣信息等。
本系统具有一定的社会价值和实用价值，能够通过多种方式呈现报备楼盘信息迅速得到处理的数据，可有效减轻经纪人的压力，使广大房产领域在处理报备楼盘信息的时候得到更高的效率。
2.2 系统功能需求分析
基于uni-app的智能高佣报备系统的开发，首先需要确定系统[15]要实现的功能是什么，也就是用户想要这个系统达到怎样的工作效率。用户使用基于uni-app的智能高佣报备系统是按照一定的流程来进行的：用户首先扫码或者其他途径在微信找到该小程序，之后用户注册登录进入小程序，浏览智能高佣报备小程序的几大版块，通过我要报备模块提供给经纪人对自己的服务客户的需求进行上报，房产经纪人还可以通过发起报备单途径寻找更合适的同事进而更好的服务客户；小程序还提供给用户，可以通过发圈图文功能查看最新的话题或者管理员发布的其他相关楼盘的内容等，用户可以通过一键转发分享给自己的亲朋好友，而且可以通过搜索查找已有的话题；管理员要管理楼盘信息、用户的报备情况以及房产经纪人之间的分佣记录等，以上只是本系统的一些核心需求分析，但决定了系统所应具有的功能。
普通用户通过本系统可了解到各大品牌的楼盘信息，知道有哪些利于自己客户的楼盘，节省自己开发楼盘的开销。能够通过本系统找到价格实惠，符合现状的楼盘信息，并更好的提供给自己的客户，让客户都得到最好的待遇。本系统的前后台总共分为两种身份，分别是管理员身份与普通用户身份，如图2.1所示。
图2.1 系统设计图
2.3 本章小结
本章主要阐述了对基于uni-app的智能高佣报备系统的分析。包括需求分析、功能分析、可行性分析等。首先分析了系统的分析原则和设计目标，并给出了基于uni-app的智能高佣报备系统的功能需求分析。
3 系统设计
3.1 系统的功能结构设计
由分功能或功能单元按照其逻辑关系连成的结构称为功能结构[16]。一个项目的功能结构设计是项目开发之前的准备工作，项目在日后开发能否顺利进行，并达到用户的需求，就一定要做好系统的功能结构设计。
基于uni-app的智能高佣报备系统分管理员和普通用户两个用户角色，核心大功能模块分别有报备信息模块、委托带看模块、分佣信息模块、用户信息模块、楼盘信息模块、楼盘展示模块、发圈图文模块、个人中心模块等。每个功能模块之间都有着相关联系，基于uni-app的智能高佣报备系统的管理员可以对用户信息进行操作，对楼盘信息进行操作，对报备信息进行操作等。具体信息如图3.1所示。
图3.1 系统管理员功能结构图
基于uni-app的智能高佣报备系统的用户首先需要注册账户，通过正确的账号密码来登录本系统，登录成功后进入首页。首页中用户可以选择各个菜单进行操作，并且还能够浏览用户提交的报备信息、浏览楼盘信息、查询所在城市楼盘信息、浏览用户的个人信息、浏览地铁附近楼盘信息、浏览发圈图文内容、浏览其他用户发起的委托带看报备单信息并接单等功能。具体信息如图3.2所示。
图3.2 系统用户功能结构图
3.2 软件体系结构设计
计算机技术现如今非常成熟, 当前情况下, 计算机软件呈现多样化的发展形势[17], 因此为了保证计算机软件运行的稳定性, 加强计算机软件应用体系结构分析和规划是非常必要的。基于uni-app的智能高佣报备系统的软件体系结构主要由两部分组成，分为view 模块和 service 模块[18]，其中view模块主要是代表前端展示部分，而service模块主要代表的是与后台的对接部分，这两个模块分别于系统层进行传输数据等操作，从而表达了微信小程序的软件体系结构。具体信息如图3.3.所示。
图3.3 微信小程序view和service的结构示意图
基于uni-app的智能高佣报备系统具有双线程模型的特点，是小程序框架与前端框架的不同软件体系结构。基于双线程模型的特点，可以更好地为本系统提供更安全的环境。具体的双线程模型逻辑如图3.4所示。
图3.4 双线程模型图
3.3 数据库设计
数据库设计在整个系统的运行过程中，是其最为重要的核心，其设计工作的质量时刻关系着系统的工作质量[19]。基于uni-app的智能高佣报备系统创建数据库时采用utf-8的语法规则，然后根据库表名命名遵循的规则所知，数据库表的命名规范：本系统的数据库的所有数据表都是用下划线拼接来命名的。数据表的名称不能取得太长，并且要以英文命名，使用英文是主要的要求，应该说这是一个好的程序员的习惯问题。
在起表名时应该尽量避免用关键字作为前缀或者表名，应该根据每个数据表想要表达的含义翻译成对应的英文，一般的数据表名都是复数形式。在一个项目中的数据库的数据表中肯定有相互关联的数据表，此时可以使用相互关联的数据表的表名或者前缀拼接在一起使用。需要注意的是，字段说明和字段名尽量保持一致，这样可以让一起开发的同事能够提高开发系统的进度。
本系统包含了不低于20个数据库表，存在着主外键的关系，基于uni-app的智能高佣报备系统的数据库设计在项目开发系统设计过程中，数据库表要设计的尽可能完善，预防在后来需求变更、功能扩充的时候，引起不必要的问题。基于uni-app的智能高佣报备系统的具体核心数据表信息如表3.1所示。
表3.1 数据库表列表
序号 表名 说明
1 of_ads 广告表
2 of_agreements 协议表
3 of_attach 附件表
4 of_brokerage 用户佣金记录表
5 of_cities 地区表
6 of_commission_policys 佣金政策表
7 of_companys 开发商表
8 of_greenhand 新手必看表
9 of_houses_applications 盘源合作申请表
10 of_houses_assorts 楼盘配套信息表表
11 of_houses_info 楼盘信息表
12 of_houses_needs 我要找盘申请表
13 of_houses_params 楼盘参数表
14 of_img_text 发圈图文表
15 of_invites 推荐记录表
16 of_members 用户表
17 of_params 参数表
18 of_partner_application 申请合伙人表
19 of_report_companys 报备公司表
20 of_reports 报备单表
21 of_reports_entrust 报备委托带看表
22 of_reports_files 报备单资料表
23 of_sys_user 系统用户表
基于uni-app的智能高佣报备系统其中较为重要的表设计是楼盘信息表(of_houses_info)，用来存储各个城市的各个地区的楼盘信息，使用户在查看楼盘信息的时候更加清晰。其中楼盘信息表包括但不限于编号、开发商ID、开发商名称、报备公司ID、报备公司名称、楼盘名称、省、市、区、联系人、联系人电话、申请人、展示图、简介、户型图片、其他信息等。具体设计如表3.2所示。
表3.2 楼盘信息表
序号 数据字段 数据类型 约束 存储内容
1 id INT(11) PRIMARY KEY 编号
2 company_id VARCHAR(255) 开发商ID
3 company_name VARCHAR(20) 开发商名称
4 report_companyid INT(11) 报备公司id
5 report_companyname VARCHAR(255) 报备公司名称
6 house_name VARCHAR(255) 楼盘名称
7 province VARCHAR(60) 省
8 city VARCHAR(60) 市
9 district VARCHAR(60) 区
10 address VARCHAR(255) 项目地址
11 price DECIMAL(11,2) 在售均价
12 deadline DATE 合作期限
13 contact VARCHAR(60) 联系人
14 telephone VARCHAR(20) 联系人电话
15 apply_member INT(11) 申请人
16 pics TEXT 展示图
17 intro LONGTEXT 简介
18 type_pics TEXT 户型图片
19 other_info TEXT 其他信息
20 sale_area VARCHAR(255) 在售面积
21 data_name VARCHAR(255) 资料标题
22 house_data TEXT 楼盘资料
23 get_commission VARCHAR(255) 到手佣
24 pay_remark VARCHAR(255) 结佣备注
25 report_require VARCHAR(255) 报备要求
26 is_show TINYINT(4) 是否显示手机号
27 is_rec TINYINT(4) 是否推荐
表3.2续页
序号 数据字段 数据类型 约束 存储内容
28 looks INT(11) 浏览量
基于uni-app的智能高佣报备系统其中较为重要的表设计有报备单表(of_reports)，用来存储房源经纪人的报备信息内容，该表以标识每条记录。其中包括但不限于id，订单编号，订单类型，报备人ID、报备人手机号等。具体设计如表3.3所示。
表3.3 报备单表
序号 数据字段 数据类型 约束 存储内容
1 id INT(11) PRIMARY KEY 编号
2 order_num VARCHAR(60) 订单编号
3 type VARCHAR(20) 订单类型
4 member_id INT(11) 报备人ID
5 telephone VARCHAR(15) 报备人手机号
6 report_time DATETIME 报备时间
7 company VARCHAR(255) 报备公司
8 last_name VARCHAR(255) 客户姓氏
9 sex VARCHAR(20) 客户性别
10 custom_telephone VARCHAR(255) 客户手机号
11 house_id VARCHAR(155) 项目id
12 house_name VARCHAR(555) 项目名
13 visit_time DATETIME 到访时间
14 visit_method VARCHAR(20) 到访方式
15 plate_num VARCHAR(60) 车牌号
16 departure VARCHAR(60) 出发地点
17 lead_member INT(11) 带看人
18 rate TINYINT(4) 佣金比例
19 account DECIMAL(11,2) 佣金总额
20 status TINYINT(4) 订单状态
21 deal_user INT(11) 处理人
表3.3续页
序号 数据字段 数据类型 约束 存储内容
22 deal_time DATETIME 处理时间
23 formid VARCHAR(255) 小程序formid
基于uni-app的智能高佣报备系统其中较为重要的表设计有报备委托带看表(of_reports_entrust)，用来存储房源经纪人的报备委托带看信息内容，该表以标识每条记录。其中包括但不限于id，订单编号，订单类型，报备人ID、报备人手机号等。具体信息如表3.4所示。
表3.4 报备委托带看表
序号 数据字段 数据类型 约束 存储内容
1 id INT（11） PRIMARY KEY 编号
2 order_num VARCHAR(60) 订单编号
3 member_id INT（11） 报备人
4 member_mobile VARCHAR(15) 报备人手机
5 last_name VARCHAR(60) 客户姓氏
6 sex VARCHAR(20) 客户性别
7 telephone VARCHAR(15) 客户手机号码
8 is_show TINYINT(4) 手机号是否隐藏
9 source VARCHAR(20) 客户来源
10 house_ids TEXT 项目id
11 house_names TEXT 项目名
12 usefor VARCHAR(20) 用途
13 type VARCHAR(20) 类型
14 district VARCHAR(255) 区域
15 budget VARCHAR(60) 预算
16 area VARCHAR(60) 面积
17 house_type VARCHAR(60) 户型
18 remark VARCHAR(255) 备注
19 rate TINYINT(4) 分佣比例
20 entrust_num INT(11) 委托量
表3.4续页
序号 数据字段 数据类型 约束 存储内容
21 visit_time DATETIME 到访时间
22 report_time DATETIME 报备时间
23 lead_member INT(11) 带看人ID
24 receive_time DATETIME 接单时间
25 is_open TINYINT(4) 是否开放接单权限
26 status TINYINT(4) 状态
27 account DECIMAL(11,2) 佣金总额
28 deal_user INT(11) 处理人
29 deal_time DATETIME 处理时间
基于uni-app的智能高佣报备系统的普通用户的登录信息表，记录了用户的登录信息。其中包含但不限于id、用户类别、手机号、密码、昵称、头像等。具体信息如表3.5所示。
表3.5 用户信息表
序号 数据字段 数据类型 约束 存储内容
1 id INT（11） PRIMARY KEY 编号
2 type TINYINT(4) 用户类别
3 mobile VARCHAR(13) 手机号
4 password VARCHAR(200) 密码
5 nickname VARCHAR(255) 昵称
6 photo VARCHAR(255) 头像
7 openid VARCHAR(255) openid
8 unionid VARCHAR(255) unionid
9 session_key VARCHAR(255) session_key
10 invite_code VARCHAR(60) 邀请码
11 invite_id INT(11) 推荐人ID
12 real_name VARCHAR(60) 真实姓名
13 work_area VARCHAR(255) 工作区域
14 card_name VARCHAR(60) 开户姓名
表3.5续页
序号 数据字段 数据类型 约束 存储内容
15 id_number VARCHAR(60) 身份证号
16 card_number VARCHAR(60) 银行卡号
17 card_bank VARCHAR(255) 开户银行
18 audit_status TINYINT(4) 审核状态
19 todo_account DECIMAL(11,2) 待结佣金
20 done_account DECIMAL(11,2) 已结佣金
21 is_partner TINYINT(4) 是否合伙人
22 is_allow TINYINT(4) 是否可接单
23 status TINYINT(4) 状态
24 last_login_time DATETIME 最后登录时间
25 register_time DATETIME 注册时间
基于uni-app的智能高佣报备系统的佣金政策表，记录了每个楼盘的佣金政策信息等。其中包含但不限于id、楼盘ID、名称、前佣比例、前佣金额、后佣比例、后佣金额以及奖金等。具体信息如表3.6所示。
表3.6 佣金政策表
序号 数据字段 数据类型 约束 存储内容
1 id INT（11） PRIMARY KEY 编号
2 house_id INT（11） 楼盘ID
3 name VARCHAR(60) 名称
4 ratio_bef DECIMAL(4,1) 前佣比例
5 policy_bef DECIMAL(11,2) 前佣金额
6 ratio_aft DECIMAL(4,1) 后佣比例
7 policy_aft DOUBLE(11,2) 后佣金额
8 bonus DECIMAL(11,2) 奖金
9 policy VARCHAR(255) 佣金
10 status TINYINT(4) 状态
基于uni-app的智能高佣报备系统的开发商表，记录了每个楼盘的开发商信息等。其中包含但不限于id、开发商名称、是否品牌开发商、联系人姓名、排序、联系人电话等。具体信息如表3.7所示。
表3.7 开发商表
序号 数据字段 数据类型 约束 存储内容
1 id INT（11） PRIMARY KEY 编号
2 name VARCHAR(255) 开发商名称
3 is_famous TINYINT(4) 是否品牌开发商
4 contact VARCHAR(60) 联系人姓名
5 telephone VARCHAR(15) 联系人电话
6 sort INT(8) 排序
7 status TINYINT(4) 状态
8 is_del TINYINT(4) 删除状态
基于uni-app的智能高佣报备系统的发圈图文表，该表记录了系统管理员发表的图文内容等，其中包含但不限于id、图文类型、文本、图片、楼盘id、楼盘名称等。具体信息如表3.8所示。
表3.8 发圈图文表
序号 数据字段 数据类型 约束 存储内容
1 id INT（11） PRIMARY KEY 编号
2 type VARCHAR(20) 图文类型（楼盘推荐/营销素材）
3 text TEXT 文本
4 imgs TEXT 图片
5 house_id INT(11) 楼盘id
6 house_name VARCHAR(255) 楼盘名称
7 date DATE 日期
8 share_num INT(11) 分享人数
3.4 本章小结
本章主要介绍了基于uni-app的智能高佣报备系统的功能结构设计方案。首先介绍了基于uni-app的智能高佣报备系统的软件体系结构的设计，然后叙述了主要模块的数据库设计，其中有楼盘信息表、开发商表等数据库表。
4 系统实现
4.1 开发环境
基于uni-app的智能高佣报备系统的所在开发环境的操作系统是64位的Win10操作系统；内存为8.00 GB；浏览器是Google；开发工具是IntelliJ IDEA 2019.2.4，微信开发者工具，HbuilderX；以上足以满足基于uni-app的智能高佣报备系统的开发需求。
4.2 系统和数据库的配置
基于uni-app的智能高佣报备系统是按照B/S模式即浏览器与服务器交互进行设计的。B/S模式这种模式相对于C/S的优点有维护和升级方式简单，大大降低了维护与开发的成本，对开发者来说有更多的可能性。如图4.1所示。
图4.1 B/S结构模式图
4.3 开发规范
4.3.1 书写规则
开发一个完整的项目，最需要注意的一点就是在编写代码的时候一定按照书写规则进行编码，其中书写规则包括但不限于大小括号、函数定义、构造函数、判断语句、循环语句等规范。例如，较长的语句或者表达式应该合理的进行换行，不要写在一行；每个关键词和符号之间需要加空格，看起来更加清晰明了；注意几种括号之间的使用规则。
4.3.2 程序注释
每个项目开发人员都要写好相关必要的注释，书写注释也是要求规范的。每个脚本的上方都要有自己的注释规则，其规则必须包含有关本程序，也就是基于uni-app的智能高佣报备系统的信息描述、作者、日期、版本信息、项目名称以及文件的名称，还有重要的使用说明，注意事项，调用关系之间的说明等。
4.4 各个功能模块的详细设计
4.4.1 首页
用户扫描智能高佣报备小程序的二维码进入系统的首页，可以看到底部是系统的底部导航栏，顶部为系统名称，页面由上到下分别为：定位、搜索、轮播图展示等内容。具体的信息如图4.2所示。
图4.2 基于uni-app的智能高佣报备系统首页
4.4.2 我要报备模块
用户进入首页，若要进行楼盘报备，即点击“我要报备”菜单，必须先进行登录，否则无法进行楼盘报备，这样有利于保护楼盘信息的安全等。进入我要报备页面后，根据页面中的提示进行输入内容，输入的内容包括但不限于报备公司，选择楼盘，客户信息等，其中报备公司、选择楼盘以及客户信息为必填项，客户可以添加多个但最少一个，报备时间、到访时间也是必填项，到访方式为默认选择项，车牌号以及出发地点可选填，所有必填项内容输入结束，即可点击“确认报备”按钮，确认报备提交的信息即可。具体的信息如图4.3所示。
图4.3 基于uni-app的智能高佣报备系统“我要报备”页面
4.4.3 委托带看模块
用户进入首页，若要进行楼盘委托带看报备，即点击“委托带看”菜单，继续选择“快速委托”，但是用户必须先进行登录，否则无法进行楼盘委托带看报备，这样有利于保护楼盘信息的安全等。进入委托带看页面后，根据页面中的提示进行输入内容，输入的内容包括但不限于客户信息，客户需求等，内容输入结束，即可点击“确认发单”按钮。
进入委托带看页面还有另一途径，即进入系统首页，点击我要报备模块，进入我要报备页面，在页面中从自己带看菜单可以切换到委托带看菜单，从而进入了委托带看楼盘报备的页面。具体的信息如图4.4所示。
图4.4 基于uni-app的智能高佣报备系统“委托带看”页面
4.4.4 我的团队模块
用户进入首页，点击“我的团队”菜单，即可查看用户所在团队的分佣等其他信息，但是用户必须先进行登录，否则无法进行查看团队相关信息，这样有利于保护用户信息安全等。进入我的团队页面后，页面中显示我的团队人数、团队业绩奖、我的推荐人等信息。而且还可以查看我的团队的直属成员以及外围组员的列表信息，还可以查看团队业绩的奖励规则详情等。具体的信息如图4.5所示。
图4.5 基于uni-app的智能高佣报备系统“我的团队”页面
4.4.5 发圈图文模块
用户进入首页，点击底部导航的发圈图文模块，即可查看系统管理员在后台进行发布的相关图文内容等。用户想要了解某个楼盘的信息，可以在本页面轮播图下面的搜索楼盘名称处输入自己想要查找的楼盘名称，即可快速定位到用户心仪的楼盘名称，并进行相关的了解以及阅读，还可以点击一键发圈按钮，系统会自动复制楼盘的文字以及自动保存楼盘信息中的图片，然后提示用户可以去朋友圈或者跟朋友分享楼盘的相关信息。页面中具体的信息如图4.6所示。
图4.6 基于uni-app的智能高佣报备系统“发圈图文”页面
4.4.6 我的模块
用户扫描智能高佣报备小程序的二维码进入系统的首页，可以看到底部是系统的底部导航栏，顶部为系统名称，页面由上到下分别为：定位、搜索、轮播图展示等内容。点击底部导航栏的“我的”模块，即可进入我的页面，我的页面内容包括但不限于我的推荐码、我的业绩、我的收入以及新手必看等，具体的信息如图4.7所示。
图4.7 基于uni-app的智能高佣报备系统“我的”页面
4.4.7 客户模块
用户扫描智能高佣报备小程序的二维码进入系统的首页，可以看到底部是系统的底部导航栏，顶部为系统名称，页面由上到下分别为：定位、搜索、轮播图展示等内容。点击底部导航栏的“客户”模块，即可进入我的客户页面，客户页面内容包括但不限于我的客户、合作客户等。其中我的客户列表显示的是用户自己报备的楼盘以及客户的信息，并且按照时间的顺序进行排列，根据报备单的不同状态可以明显的查看到所在的楼盘和客户的简略信息，让用户体验感更加舒适。合作客户部分展示的是委托带看的报备单信息，查看委托人、客户信息、楼盘信息等。具体的信息如图4.8所示。
图4.8 基于uni-app的智能高佣报备系统“客户”页面
4.5 本章小结
本章主要介绍了基于uni-app的智能高佣报备系统的详细设计[20]以及系统的实现，首先介绍了系统和数据库的配置，程序的开发规范、注释规范以及部分功能。在系统功能实现的主要模块里，截取了部分核心功能的页面作为演示。
5 系统测试
5.1 测试概述
随着软件开发技术的发展和软件系统规模的不断扩大，传统的软件测试技术已经很难适应新的需求，影响了软件产品的质量[21]。当今社会不可能人为的去逐步测试，这样浪费了大量的人力、才力以及物力，所以未来软件测试技术需要智能化、集成化以及提升测试的准确性[22]。
5.2 测试用例
软件测试用例就是指导开发者对软件执行操作，帮助证明软件功能或发现软件缺陷的一种说明，体现出测试方案、方法、技术和策略[23]。基于uni-app的智能高佣报备系统的测试用例如表6.1所示。
表5.1 测试用例表
项目/软件 基于uni-app的智能高佣报备系统 程序版本 1.0.0
功能模块名 Baobei 编制人 冷雪
用例编号 TC-TEP_Baobei_1 编制时间 2020.04.22
相关的用例 无
功能特性 楼盘报备
测试目的 验证是否能成功报备
预置条件 无
参考信息 无
测试数据 起始链接：https://dean.nat.deanros.com:8443/pdos-admin/admin/index.html
操作步骤 操作描述 数 据 期望结果 实际结果 测试状态（P/F）
1 选择报备公司，按“确认报备”按钮。 报备公司=中华地产，其余为空 显示警告信息“请选择楼盘” 符合 P
表5.1续页
项目/软件 基于uni-app的智能高佣报备系统 程序版本 1.0.0
2 选择报备公司以及楼盘，按“确认报备”按钮。 报备公司=中华地产，楼盘=万科幸福誉，其余为空 显示警告信息“至少添加一个客户” 符合 P
3 选择报备公司以及楼盘，添加一个客户，按“确认报备”按钮。 报备公司=中华地产，楼盘=万科幸福誉，其余为空 显示警告信息“客户信息不完整” 符合 P
4 选择报备公司以及楼盘，添加一个客户，按“确认报备”按钮。 报备公司=中华地产，楼盘=万科幸福誉，客户姓氏=李，客户性别=先生，客户手机号=1551234，其他为选填 显示已经填写的信息预览，询问“返回修改”或“立即提交” 符合 P
5 选择“立即提交“”报备信息按钮 报备公司=中华地产，楼盘=万科幸福誉，客户姓氏=李，客户性别=先生，客户手机号=1551234，其他为选填 提示“报备成功” 符合 P
6 选择首页“客户”模块 提交的报备信息是否与我的客户页面的显示一致 显示的内容全部一致，其中手机号是按照楼盘要求进行显示 符合 P
测试人员 冷雪 开发人员 冷雪 项目负责人 冷雪
5.3 性能测试
对基于uni-app的智能高佣报备系统的进行性能测试[24]，性能测试在测试智能高佣报备小程序的稳定性方面很重要，具体内容如图5. 1所示。
图5.1 性能测试图
5.4 测试结果
对基于uni-app的智能高佣报备系统的各个功能进行验证，测试过程中充分考虑了各个功能，并考虑到了整个软件的内部结构及代码，检查基于uni-app的智能高佣报备系统达到了系统设计预期的功能，基本上满足了需求。测试结果如图5.2所示。
图5.2 性能测试结果图
5.5 本章小结
本章主要叙述了基于uni-app的智能高佣报备系统的系统测试的相关步骤，测试概述、测试用例、测试结果以及遇到的问题以及解决方法。所有测试都由人为手动完成，经测试，基于uni-app的智能高佣报备系统基本满足用户需求。
结 论
系统需求工作是基于uni-app的智能高佣报备系统的重要组成部分，其准确快速的执行对于房产经纪人的需求分析有重要的意义。为此，本文针对经纪人对报备单审核处理的需求，设计并实现了基于uni-app的智能高佣报备系统。本文首先分析了基于uni-app的智能高佣报备系统的开发技术及环境，设计分析了构建基于uni-app的智能高佣报备系统所需要解决的一些问题，最后对基于uni-app的智能高佣报备系统的设计及实现方法进行了详细的说明和探讨。本文所开发的基于uni-app的智能高佣报备系统已经在应用与实际工作当中具备了基本的功能，可以较好的满足当下城市经纪人的业务需求。
本文基于uni-app的智能高佣报备系统在设计与实现的过程中充分考虑了系统在后期程序功能的添加和删除等的需求，所以在代码的编写过程中，大量使用了标准模版的代码，便于后期修改代码，实际应用效果说明了本系统设计的合理性与有效性等。
本系统的设计与实现有效的解决了房产领域的楼盘报备单的处理问题，加快了各类经纪人报备楼盘以及客户信息的效率，对于其它的数据分析项目有借鉴意义和参考价值。由于项目紧，调研范围太不是太广，微信小程序还存在一定的不足[25]，这是将来需要进一步完善的工作。
致 谢
时光荏苒，岁月如梭，毕业设计已经接近了尾声，这也意味着我的大学生活就要结束了，一晃而过，回首走过的岁月，心中倍感充实。这里有我熟悉的一切，有我热爱的一切。恍惚中，在美丽的校园中，我度过了人生中最为宝贵的年华。当我写完这篇毕业论文的时候，有一种如释重负的感觉，感慨良多。
首先，我要特别感谢我的指导老师陈思老师和董超老师。做毕业设计项目的过程是艰辛的，但是在我的努力之下还是完成了。在这个过程中董超老师给了我很大的帮助，没有他的尽心指导和严格的要求，我也不会顺利完成这次毕业设计。每次遇到难题，我最先做的就是向老师寻求帮助，而陈思老师像姐姐一样跟我一起商量解决的办法，她也从没抱怨过什么，一直都是尽心尽力的鼓励我。陈思老师和董超老师平日里工作繁多，但我做毕业设计的每个阶段，从选题到查阅资料，论文提纲的确定，中期论文的修改，后期论文格式调整等各个环节中都给予了我悉心的指导。这几个月以来，陈思老师和董超老师不仅在学业上给我以精心指导，同时还在思想给我以无微不至的关怀，在此谨向陈思老师和董超老师致以诚挚的谢意和崇高的敬意。
其次，还要感谢这四年来教我知识的所有老师们，所有帮助过我的同学们以及各位朋友们，毕业论文能够顺利完成，你们也都有很大的功劳。尤其要感谢系主任在这四年里的教诲，无论是在专业领域或是为人事处上我都受益匪浅。学校让我们提前进入到社会，有了更好的人生规划，更让我的专业技能得到很大的提升，使这次的毕业设计更好的完成。
写作毕业论文是一次再系统学习的过程，毕业论文的完成，同样也意味着新生活的开始。在最后我要感谢学校、学院对我们的培养，为我们的学习以及毕业设计创造良好环境、提供便利条件。伴随着毕业设计的结束，我们也将离开校园，有过少耕耘就有多少收获，相信我们走出校园后能将自己的价值体现出来，回报父母、回报学校，为社会做自己力所能及的贡献。
参考文献
[1]孙月玲.微信小程序的设计与开发[J].科技创新导报,2018,15(14):142-144+146
[2]张艳慧,初雨晴,常宴宁.浅谈微信小程序的发展与未来[J].电脑迷,2018(06):35
[3]洪泽勇,刘厚磊.小程序测试设计特点[J].现代经济信息,2019(23):447
[4]李哲,周灵.微信小程序的架构与开发浅析[J].福建电脑,2019,35(12):66-69
[5]张晓燕.微信“小程序”开发的系统实现及前景[J].电子技术与软件工程,2018(12):49-50
[6]J. W. Li, X. Li, J. W. Jiang, et al. DESIGN AND IMPLEMENTATION OF SCENIC INTELLIGENT GUIDE SYSTEM BASED ON WECHAT APPLET. 2020, XLII-3/W10:457-460
[7]王婷婷.微信小程序开发[J].信息技术与信息化,2018(12):62-63
[8]孙艳华,郝培茹.《人民日报》微信公众号运营现状及启示探析[J].青岛科技大学学报(社会科学版),2020,36(01):111-115
[9]陈思,冷雪.微信小程序开发方式对比[J].电子制作,2020(02):52-53+22
[10]陈雨宁,李鎏,潘红,刘越锋,郭亮,陈俊威,梁丽仪,潘若帆.浅析OCR技术应用于微信小程序的研究[J].电子世界,2019(23):94-95
[11]许婉韵.关于微信小程序与原生APP使用偏好性的研究[J].农家参谋,2018(21):216-217
[12]高勇,阚红星,高红磊,陈光恩.基于JFinal的儿童健康测评系统的设计与实现[J].微型电脑应用,2020,36(03):69-71
[13]袁堂青,亓婧.基于微信小程序的开发与研究[J].网络安全技术与应用,2020(04):66-67
[14]Chen,Shao,Zhi.Examining the Effects of Passive WeChat Use in China[J]. International Journal of Human–Computer Interaction,2019,35(17):1630-1644
[15]Bi Li,Yan Wu,Zhifeng Hao,Xueming Yan,Boyu Chen. The effects of trust on life satisfaction in the context of WeChat use[J]. Telematics and Informatics,2019,42:1-7
[16]蔡亚楠.基于微服务的软件体系结构设计方法研究与应用[D].北京邮电大学,2019
[17]胡昕明.计算机软件的应用体系架构分析与研究[J].电脑编程技巧与维护,2018(05):17-18+41
[18]谢文兰,何小平.基于Bmob后端云的微信小程序[J].内蒙古科技与经济,2020(04):66-68
[19]杨晶晶.网站管理系统中数据库设计的应用[J].福建茶叶,2020,42(04):39
[20]Tu Shuo,Yan Xiaohua,Jie Kemin,Ying Muying,Huang Chunhong. WeChat: An applicable and flexible social app software for mobile teaching.[J]. Biochemistry and molecular biology education : a bimonthly publication of the International Union of Biochemistry and Molecular Biology,2018,46(5):555-560
[21]徐旻.软件测试的新技术应用及发展分析[J].计算机产品与流通,2020(05):26+29
[22]汤希祝.刍议大数据背景下软件测试技术的发展趋势[J].信息系统工程,2019(06):47
[23]Montag Christian,Becker Benjamin,Gan Chunmei. The Multipurpose Application WeChat: A Review on Recent Research.[J]. Frontiers in psychology,2018,9:2247
[24]赵浩翔,韩飞.微信小程序API性能测试[J].河北农机,2020(01):55
[25]张丽莹.《教育技术理论与创新》课程的微信小程序的设计研究[D].内蒙古师范大学,2018
附 录
基于uni-app的智能高佣报备系统的“我要报备”页面的核心代码：
<view class=“company” @click=“onShowPanyPicker()”>
<view class=“company” @click=“navToChoose()”>
客户（{{ cindex + 1 }}）
<view class=“t-button” @click=“del(cindex)”>删除
客户姓氏
<radio color=“#007AFF” :checked=“client.sex == 0” @click=“chooseSex(cindex, 0)” class=“i-radio”>
<view style=“margin-left: 0;margin-right: 4vw;” @click=“chooseSex(cindex, 0)”>先生
<radio color=“#007AFF” :checked=“client.sex == 1” @click=“chooseSex(cindex, 1)” class=“i-radio”>
<view style=“margin-left: 0;” @click=“chooseSex(cindex, 1)”>女士
手机号码
****
<view class=“c-item” style=“height: 8vw;” @click=“addClient()”>
添加客户
报备时间
{{ currentTime }}
<view class=“i-label” @click=“onShowDatePicker()”>
到访时间
{{ visitTime ? visitTime : ‘请选择到访时间’ }}
到访方式
<radio color=“#007AFF” class=“i-radio” :checked=“bySomeWay == 0” @click=“bySomeWay = 0” style=“margin-left: 4vw;”>
<view style=“margin-left: 0;margin-right: 4vw;” @click=“bySomeWay = 0”>自驾
<radio color=“#007AFF” :checked=“bySomeWay == 1” @click=“bySomeWay = 1” class=“i-radio”>
<view style=“margin-left: 0;” @click=“bySomeWay = 1”>大巴
车牌号
出发地点
<image
mode=“aspectFit”
@click=“onShowAreaPicker()”
class=“icon-more”
src=“…/…/static/fft-icon/icon_gengduo@2x.png”
style=“margin-top: 1.5vw;margin-right: 0;”文章来源：https://www.toymoban.com/news/detail-838051.html
></image>
</view>
<view class="divider-line"></view>
<form v-if="outJudge" :report-submit="true" @submit="formSubmit"><button class="label-button-full" form-type="submit">确认报备</button></form>
<form v-if="!outJudge"><button class="label-button-full">确认报备</button></form>
</view>
</view>
基于uni-app的智能高佣报备系统的“委托带看”页面的核心代码：
客户信息
客户姓氏
<view style=“margin-left: 0;float: right;” @click=“weituo_sex = ‘女士’”>女士
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_sex = ‘女士’” :checked=“weituo_sex == ‘女士’”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_sex = ‘先生’”>先生
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_sex = ‘先生’” :checked=“weituo_sex == ‘先生’”>
手机号码
<view style=“margin-left: 0;float: right;” @click=“weituo_mshow = 1”>授权
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_mshow = 1” :checked=“weituo_mshow == 1”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_mshow = 0”>隐藏
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_mshow = 0” :checked=“weituo_mshow == 0”>
客户来源
<view style=“margin-left: 0;float: right;” @click=“weituo_from = ‘街客’”>街客
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_from = ‘街客’” :checked=“weituo_from == ‘街客’”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_from = ‘亲属’”>亲属
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_from = ‘亲属’” :checked=“weituo_from == ‘亲属’”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_from = ‘朋友’”>朋友
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_from = ‘朋友’” :checked=“weituo_from == ‘朋友’”>
<view class=“i-label” @click=“navToChoose()”>
意向楼盘
{{ housesLabel ? housesLabel : ‘请选择意向楼盘’ }}
客户需求（选填）
用途
<view style=“margin-left: 0;float: right;” @click=“weituo_usef = ‘投资’”>投资
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_usef = ‘投资’” :checked=“weituo_usef == ‘投资’”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_usef = ‘自住’”>自住
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_usef = ‘自住’” :checked=“weituo_usef == ‘自住’”>
类型
<view style=“margin-left: 0;float: right;” @click=“weituo_type = ‘商业’”>商业
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_type = ‘商业’” :checked=“weituo_type == ‘商业’”>
<view style=“margin-left: 0;margin-right: 4vw;float: right;” @click=“weituo_type = ‘住宅’”>住宅
<radio color=“#007AFF” class=“i-radio-right” @click=“weituo_type = ‘住宅’” :checked=“weituo_type == ‘住宅’”>
<view class=“i-label” @click=“onShowWTAreaPicker()”>
区域
{{ weituo_area }}
<view
class=“i-label”
@click="
$refs.mpvueWTYSPicker.show();
remarkJudge = false;
"
>
预算
{{ weituo_bala }}
<view
class=“i-label”
@click="
$refs.mpvueWTMJPicker.show();
remarkJudge = false;
"
>
面积
{{ weituo_s }}
<view
class=“i-label”
@click="
$refs.mpvueWTHXPicker.show();
remarkJudge = false;
" >
户型
{{ weituo_htype }}
{{ weituo_remark }}
分佣比例
<view
v-for=“(dot, i) in dotlist”
:key=“dot”
:style=“{ left: dot.pos + ‘vw’, background: dot.check ? ‘#007AFF’ : ‘#D8D8D8’ }”
:class=“dot.type == ‘large’ ? ‘dot’ : ‘dot-small’”
@click=“perDotClick(i)”
>
<view
v-for=“(dot, i) in dotlist”
:key=“dot”
:style=“{ left: dot.pos - 2.2 + ‘vw’, color: dot.check ? ‘#007AFF’ : ‘#333’ }”
class=“value”
@click=“perDotClick(i)” >
{{ dot.val }}
<view v-if=“outJudge” class=“label-button-full” @click=“wt_submit”>确认发单
确认发单
基于uni-app的智能高佣报备系统的“委托带看”页面的核心代码：
我的团队（人）
<view class=“team-link” @click=“navInvite”>
立即邀请
总人数
{{requestData.myteam.headcount}}
<view class=“label-left” @click=“navTeamMembersDA”>
直属组员
{{requestData.myteam.first}}
<view class=“label-right” @click=“navTeamMembersPe”>
外围组员
{{requestData.myteam.second}}
团队业绩奖
<view class=“team-link” @click=“navJiangLiGuiZe”>
奖励规则
总奖励
{{requestData.teamaward.all}}
<view class=“label-left” @click=“jumpDaiQueRen”>
待确认
{{requestData.teamaward.noconfirm}}
<view class=“label-right” @click=“jumpYiQueRen”>
已确认
{{requestData.teamaward.confirm}}
我的推荐人
<view class=“team-link” @click=“navPartner”>
成为合伙人
团队业绩奖(元)
{{requestData.invitereport.allinvite}}
我的贡献
{{requestData.invitereport.my}}
他人贡献
{{requestData.invitereport.other}}
基于uni-app的智能高佣报备系统的“委托带看”页面的核心代码：
<input placeholder=“搜索楼盘名称” @input=“changeJouse_name”/>
<view class=“z-title-label” @click=“select1” :style=“{color: label == 1?‘#000000’:‘#9E9E9E’}”>楼盘推荐
<view class=“z-title-label” @click=“select2” :style=“{color: label == 2?‘#000000’:‘#9E9E9E’}”>营销素材文章来源地址https://www.toymoban.com/news/detail-838051.html
<view class="label-line" :style="{'margin-left': label == 1?'5.5vw':'35.5vw'}"></view>
</view>
<view class="z-message" v-if="label==1" v-for="(i,index) in imgTexts1" :index="index" :key="index">
<view class="m-head">
<image class="head-img" src="../../static/fft-img/logo.png"></image>
<view class="head-content">
<view class="h-name">小编推荐</view>
<view class="h-date">{{i.date}}</view>
</view>
</view>
<view class="m-content">
{{i.text}}
</view>
<view class="m-gird-img">
<uni-grid :column="3" :show-border="false" :square="true" :highlight="false">
<uni-grid-item>
<image mode="aspectFill" :src="getImagePath(i.imgs)"></image>
</uni-grid-item>
</uni-grid>
</view>
<view class="m-foot">
<view class="f-position">{{i.house_name}}</view>
<view class="f-share">{{i.share_num}}人分享</view>
<view class="f-button">
<button @click="sharingLocal(i)">一键发圈</button>
</view>
</view>
</view>
<view class="z-message" v-if="label==2" v-for="(j,index) in imgTexts2" :index="index" :key="index">
<view class="m-head">
<image class="head-img" src="../../static/fft-img/logo.png"></image>
<view class="head-content">
<view class="h-name">小编推荐</view>
<view class="h-date">{{j.date}}</view>
</view>
</view>
<view class="m-content">
{{j.text}}
</view>
<view class="m-gird-img">
<uni-grid :column="3" :show-border="false" :square="true" :highlight="false">
<uni-grid-item>
<image mode="aspectFill" :src="getImagePath(j.imgs)"></image>
</uni-grid-item>
</uni-grid>
</view>
<view class="m-foot">
<view class="f-position">{{j.house_name}}</view>
<view class="f-share">{{j.share_num}}人分享</view>
<view class="f-button">
<button @click="sharingLocal(j)">一键发圈</button>
</view>
</view>
</view>
</view>
<view class="full-shadow" v-if="sharing">
<view class="share-shadow">
<text>{{shareText}}</text>
<image mode="aspectFill" :src="shareImage"></image>
<button @tap="sharing=false">确定</button>
</view>
</view>
</view>
到了这里，关于基于uni-app的智能高佣报备系统设计与实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
