初始化项目

.eslintignore

@@ -0,0 +1,3 @@
+unpackage
+node_modules
+uview-ui

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules/
+dist/
+unpackage/
+.hbuilderx/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+.env.development
+
+package-lock.json
+yarn.lock

App.vue

@@ -0,0 +1,77 @@
+<script>
+	import { calcDate } from '@/utils/date.js'
+	import { tokenTime } from '@/common/setting.js'
+	export default {
+		data() {
+			return { refreshLock: false }
+		},
+		onLaunch: function() {
+			this.refreshToken()
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		},
+		methods: {
+			// 定时检测token
+			refreshToken() {
+				this.refreshTime = setInterval(() => {
+					const token = uni.getStorageSync('token')
+					const date = calcDate(token.datetime, new Date().getTime())
+					if (!date) return
+					if (date.seconds >= tokenTime && !this.refreshLock) {
+						this.refreshLock = true
+						this.$u.api
+							.refreshToken(token.content, '000000')
+							.then(res => {
+								this.$u.func
+									.refreshToken(res)
+									.then(() => {
+										this.refreshLock = false
+									})
+									.catch(() => {
+										this.refreshLock = false
+									})
+							})
+							.catch(() => {
+								this.refreshLock = false
+							})
+					}
+				}, 30000)
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	/*uview全局样式*/
+	@import 'uview-ui/index.scss';
+	/*app全局样式*/
+	@import 'static/style/app.scss';
+
+	// 修改checkbox样式
+	checkbox.curdCheck .wx-checkbox-input,
+	checkbox.curdCheck .uni-checkbox-input {
+		border-radius: 50% !important;
+		border-color: #c8c9cc !important;
+		color: #5f88ff !important;
+	}
+
+	checkbox.curdCheck .wx-checkbox-input-checked,
+	checkbox.curdCheck .uni-checkbox-input-checked {
+		// background-color: #5f88ff;
+		color: #5f88ff !important;
+		border-color: #5f88ff !important;
+	}
+
+	.uni-picker-container,
+	.wx-picker-container {
+		z-index: 10074;
+	}
+
+	uni-modal {
+		z-index: 19999 !important;
+	}
+</style>

LICENSE

@@ -0,0 +1,34 @@
+BladeX商业授权许可协议
+
+一、 知识产权：
+BladeX系列产品知识产权归上海布雷德科技有限公司所有
+
+二、 许可：
+1. 在您完全接受并遵守本协议的基础上，本协议授予您使用BladeX的某些权利和非独占性许可。
+2. 本协议中，将本产品使用用途分为“专业版用途”和“企业版用途”。
+3. “专业版用途”定义：指个人在非团体机构中出于任何目的使用本产品（任何目的包括商业目的或非盈利目的）。
+4. “企业版用途”定义：指团体机构（例如公司企业、政府、学校、军队、医院、社会团体等各类组织）（不包含集团，若集团使用则需为各个子公司分别购买企业授权）出于任何目的使用本产品（任何目的包括商业目的或非盈利目的）。
+
+三、 约束和限制：
+1. 本产品只能由您为本协议许可的目的而使用，您不得透露给任何第三方；
+2. 从本产品取得的任何信息、软件、产品或服务，您不得对其进行修改、改编或基于以上内容创建同种类别的衍生产品并售卖。
+3. 您不得对本产品以及与之关联的商业授权进行发布、出租、销售、分销、抵押、转让、许可或发放子许可证。
+4. 本产品商业授权版可能包含一些独立功能或特性，这些功能只有在您购买商业授权后才可以使用。在未取得商业授权的情况下，您不得使用、尝试使用或复制这些授权版独立功能。
+5. 若您的客户要求以源码方式交付软件，需缴纳企业版授权费用，否则本产品部分不得提供源码。
+
+四、 不得用于非法或禁止的用途：
+您在使用本产品或服务时，不得将本产品产品或服务用于任何非法用途或本协议条款、条件和声明禁止的用途。
+
+五、 免责说明：
+1. 本产品按“现状”授予许可，您须自行承担使用本产品的风险。BladeX团队不对此提供任何明示、暗示或任何其它形式的担保和表示。在任何情况下，对于因使用或无法使用本软件而导致的任何损失（包括但不仅限于商业利润损失、业务中断或业务信息丢失），BladeX团队无需向您或任何第三方负责，即使BladeX团队已被告知可能会造成此类损失。在任何情况下， BladeX团队均不就任何直接的、间接的、附带的、后果性的、特别的、惩戒性的和处罚性的损害赔偿承担任何责任，无论该主张是基于保证、合同、侵权（包括疏忽）或是基于其他原因作出。
+2. 本产品可能内置有第三方服务，您应自行评估使用这些第三方服务的风险，由使用此类第三方服务而产生的纠纷，全部责任由您自行承担。
+3. BladeX团队不对使用本产品构建的网站中任何信息内容以及导致的任何版权纠纷、法律争议和后果承担任何责任，全部责任由您自行承担。
+4. BladeX团队可能会经常提供产品更新或升级，但BladeX团队没有为根据本协议许可的产品提供维护或更新的责任。
+5. BladeX团队可能会按照官方制定的答疑规则为您进行答疑，但BladeX团队没有为根据本协议许可的产品提供技术支持的义务或责任。
+
+六、 权利和所有权的保留：
+BladeX团队保留所有未在本协议中明确授予您的所有权利。BladeX团队保留随时更新本协议的权利，并只需公示于对应产品项目的LICENSE文件，无需征得您的事先同意且无需另行通知，更新后的内容应于公示即时生效。您可以随时访问产品地址并查阅最新版许可条款，在更新生效后您继续使用本产品则被视作您已接受了新的条款。
+
+七、 协议终止
+1. 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款，在享有上述条款授予的许可权力同时，也受到相关的约束和限制，本协议许可范围以外的行为，将直接违反本协议并构成侵权。
+2. 一旦您违反本协议的条款，BladeX团队随时可能终止本协议、收回许可和授权，并要求您承担相应法律和经济责任。

README.md

@@ -0,0 +1,43 @@
+## 版权声明
+* BladeX是一个商业化软件，系列产品知识产权归**上海布雷德网络科技**独立所有
+* 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款
+* 更多详情请看：[BladeX商业授权许可协议](/LICENSE)
+
+## 答疑流程
+>1. 遇到问题或Bug
+>2. 业务型问题打断点调试尝试找出问题所在
+>3. 系统型问题通过百度、谷歌、社区查找解决方案
+>4. 未解决问题则进入技术社区进行发帖提问：[https://sns.bladex.vip/](https://sns.bladex.vip/)
+>5. 将帖子地址发至商业群，特别简单三言两语就能描述清楚的也可在答疑时间内发至商业群提问
+>6. 发帖的时候一定要描述清楚，详细描述遇到问题的**重现步骤**、**报错详细信息**、**相关代码与逻辑**、**使用软件版本**以及**操作系统版本**，否则随意发帖提问将会提高我们的答疑难度。
+
+## 答疑时间
+* 工作日：9:00 ~ 17:00 提供答疑，周末、节假日休息，暂停答疑
+* 请勿**私聊提问**，以免被其他用户的消息覆盖从而无法获得答疑
+* 答疑时间外遇到问题可以将问题发帖至[技术社区](https://sns.bladex.vip/)，我们后续会逐个回复
+
+## 授权范围
+* 专业版：只可用于**个人学习**及**个人私活**项目，不可用于公司或团队，不可泄露给任何第三方
+* 企业版：可用于**企业名下**的任何项目，企业版员工在**未购买**专业版授权前，只授权开发**所在授权企业名下**的项目，**不得将BladeX用于个人私活**
+* 共同遵守：若甲方需要您提供项目源码，则需代为甲方购买BladeX企业授权，甲方购买后续的所有项目都无需再次购买授权
+
+## 商用权益
+* ✔️ 遵守[商业协议](/LICENSE)的前提下，将BladeX系列产品用于授权范围内的商用项目，并上线运营
+* ✔️ 遵守[商业协议](/LICENSE)的前提下，不限制项目数，不限制服务器数
+* ✔️ 遵守[商业协议](/LICENSE)的前提下，将自行编写的业务代码申请软件著作权
+
+## 何为侵权
+* ❌ 不遵守商业协议，私自销售商业源码
+* ❌ 以任何理由将BladeX源码用于申请软件著作权
+* ❌ 将商业源码以任何途径任何理由泄露给未授权的单位或个人
+* ❌ 开发完毕项目，没有为甲方购买企业授权，向甲方提供了BladeX代码
+* ❌ 基于BladeX拓展研发与BladeX有竞争关系的衍生框架，并将其开源或销售
+
+## 侵权后果
+* 情节较轻：第一次发现警告处理
+* 情节较重：封禁账号，踢出商业群，并保留追究法律责任的权利
+* 情节严重：与本地律师事务所合作，以公司名义起诉侵犯计算机软件著作权
+
+## 举报有奖
+* 向官方提供有用线索并成功捣毁盗版个人或窝点，将会看成果给予 500～10000 不等的现金奖励
+* 官方唯一指定QQ：1272154962

api/demo.js

@@ -0,0 +1,14 @@
+import http from '@/http/api.js'
+
+// 获取验证码
+const captcha = (data) => {
+	return http.request({
+		url: '/api/blade-auth/oauth/captcha',
+		method: 'GET',
+		data
+	})
+}
+
+export default {
+	captcha,
+}

api/login.js

@@ -0,0 +1,17 @@
+import http from '@/http/api.js'
+
+/**
+ * 登录
+ * @param {*} params
+ * @returns
+ */
+export const login = params => {
+	return http.request({
+		url: '/api/blade-auth/oauth/token',
+		method: 'POST',
+		data: params,
+		header: {
+			'Content-Type': 'application/x-www-form-urlencoded'
+		}
+	});
+};

api/mock/home.js

@@ -0,0 +1,147 @@
+// 获取部门数据
+export function fakePosition() {
+	return new Promise((resolute, reject) => {
+		try {
+			const detail = {
+				position: "研发部",
+				positionArr: ['研发部', '产品部']
+			}
+			resolute(detail);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}
+
+// 获取公告数据
+export function fakeBannerList() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+				id: '1',
+				img: '/static/images/home/banner1.png',
+				url: 'https://bladex.vip'
+			}, {
+				id: '2',
+				img: '/static/images/home/banner2.png',
+				url: 'https://bladex.vip'
+			}, {
+				id: '3',
+				img: '/static/images/home/banner3.png',
+				url: 'https://sns.bladex.vip'
+			}];
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}
+
+// 获取公告数据
+export function fakeNoticeList() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+				id: '1',
+				img: '/static/images/home/focus.png',
+				title: '天舟五号创造多个航天新纪录'
+			}, {
+				id: '2',
+				img: '/static/images/home/service.png',
+				title: '全国累计报告接种新冠疫苗超9亿剂次'
+			}];
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}
+
+// 获取顶部按钮数据
+export function fakeNavButton() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+					name: '公积金',
+					img: '/static/images/home/n1.png',
+					url: ''
+				},
+				{
+					name: '社保',
+					img: '/static/images/home/n2.png',
+					url: ''
+				},
+				{
+					name: '医保',
+					img: '/static/images/home/n3.png',
+					url: ''
+				},
+				{
+					name: '企业',
+					img: '/static/images/home/n4.png',
+					url: ''
+				},
+				{
+					name: '教育',
+					img: '/static/images/home/n5.png',
+					url: ''
+				}
+			];
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}
+
+// 获取服务按钮数据
+export function fakeServiceButton() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+					name: '工作流',
+					img: '/static/images/home/s1.png',
+					url: '/pages/plugin/workflow/pages/workbench/index'
+				},
+				{
+					name: '工商年报',
+					img: '/static/images/home/s2.png',
+					url: ''
+				},
+				{
+					name: '税务登记',
+					img: '/static/images/home/s3.png',
+					url: ''
+				},
+				{
+					name: '健康码',
+					img: '/static/images/home/s4.png',
+					url: ''
+				},
+				{
+					name: '便民服务',
+					img: '/static/images/home/s5.png',
+					url: ''
+				},
+				{
+					name: '通办大厅',
+					img: '/static/images/home/s6.png',
+					url: ''
+				},
+				{
+					name: '智能问答',
+					img: '/static/images/home/s7.png',
+					url: ''
+				}
+			];
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}

api/mock/service.js

@@ -0,0 +1,152 @@
+// 获取服务数据
+export function fakeSubscribeList() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+					img: '/static/images/service/s1.png',
+					name: '违章查询',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s2.png',
+					name: '限行信息',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s3.png',
+					name: '油价查询',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s4.png',
+					name: '消费记录',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s5.png',
+					name: '保养记录',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s6.png',
+					name: '油耗记录',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s7.png',
+					name: '周边查询',
+					url: ''
+				},
+				{
+					img: '/static/images/service/s8.png',
+					name: '教育咨询',
+					url: ''
+				}
+			];
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}
+
+export function fakeServiceList() {
+	return new Promise((resolute, reject) => {
+		try {
+			const list = [{
+					name: '交通出行',
+					list: [{
+							img: '/static/images/service/t1.png',
+							name: '地铁',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t2.png',
+							name: '公交',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t3.png',
+							name: '自驾',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t4.png',
+							name: '飞机',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t5.png',
+							name: '动车',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t6.png',
+							name: '火车',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t7.png',
+							name: '摩托车',
+							url: ''
+						},
+						{
+							img: '/static/images/service/t8.png',
+							name: '自行车',
+							url: ''
+						}
+					]
+				},
+				{
+					name: '社会保险',
+					list: [{
+							img: '/static/images/service/b1.png',
+							name: '人身保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b2.png',
+							name: '财产保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b3.png',
+							name: '火灾保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b4.png',
+							name: '运输保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b5.png',
+							name: '工程保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b6.png',
+							name: '盗窃保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b7.png',
+							name: '农业保险',
+							url: ''
+						},
+						{
+							img: '/static/images/service/b8.png',
+							name: '信用保险',
+							url: ''
+						}
+					]
+				},
+			]
+			resolute(list);
+		} catch (e) {
+			//模拟接口请求失败
+			reject(e);
+		}
+	})
+}

api/notice.js

@@ -0,0 +1,36 @@
+import http from '@/http/api.js'
+
+// 获取通知公告列表
+export const getList = (params) => {
+	return http.request({
+		url: '/api/blade-desk/notice/list',
+		method: 'GET',
+		params
+	})
+}
+
+export const remove = (ids) => {
+  return http.request({
+    url: '/api/blade-desk/notice/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return http.request({
+    url: '/api/blade-desk/notice/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return http.request({
+    url: '/api/blade-desk/notice/submit',
+    method: 'post',
+    data: row
+  })
+}

api/reserve.js

@@ -0,0 +1,151 @@
+import http from '@/http/api.js'
+
+/**
+ * 获取部门列表
+ * @param {*} params
+ * @returns
+ */
+export const deptList = params => {
+	return http.request({
+		url: '/api/blade-system/dept/list-page',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 获取事项列表
+ * @param {*} params
+ * @returns
+ */
+export const itemList = params => {
+	return http.request({
+		url: '/api/blade-biz/item/list',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 预约须知
+ * @param {*} params
+ * @returns
+ */
+export const noticeData = params => {
+	return http.request({
+		url: '/api/blade-noticeinfo/noticeInfo/list',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 获取可用日历
+ * @param {*} params
+ * @returns
+ */
+export const availableDate = params => {
+	return http.request({
+		url: '/api/blade-bookingdate/bookingDate/available-week-dates',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 查询用户信息
+ * @param {*} params
+ * @returns
+ */
+export const getUserInfo = params => {
+	return http.request({
+		url: '/api/blade-system/user/info',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 提交预约
+ * @param {*} params
+ * @returns
+ */
+export const submit = params => {
+	return http.request({
+		url: '/api/blade-biz/booking/submit-booking',
+		method: 'POST',
+		data: {
+			...params
+		},
+	});
+};
+
+/**
+ * 查询我的预约
+ * @param {*} params
+ * @returns
+ */
+export const myReserve = params => {
+	return http.request({
+		url: '/api/blade-biz/booking/list',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 取消预约
+ * @param {*} params
+ * @returns
+ */
+export const cancel = params => {
+	return http.request({
+		url: '/api/blade-biz/booking/cancel',
+		method: 'POST',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 获取详情
+ * @param {*} params
+ * @returns
+ */
+export const getDetail = params => {
+	return http.request({
+		url: '/api/blade-biz/booking/detail',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};
+
+/**
+ * 获取是否无感取号成功
+ * @param {*} params
+ * @returns
+ */
+export const getIsSuccessTicket = params => {
+	return http.request({
+		url: '/api/blade-onlineticket/onlineTicket/getByYyNo',
+		method: 'GET',
+		params: {
+			...params
+		},
+	});
+};

api/system/dept.js

@@ -0,0 +1,43 @@
+import http from '@/http/api.js'
+
+// 部门管理
+export const getList = (params) => {
+	return http.request({
+		url: '/api/blade-system/dept/lazy-list',
+		method: 'GET',
+		params
+	})
+}
+export const deptTree = (params) => {
+	return http.request({
+		url: '/api/blade-system/dept/tree',
+		method: 'GET',
+		params
+	})
+}
+
+export const remove = (ids) => {
+  return http.request({
+    url: '/api/blade-system/dept/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return http.request({
+    url: '/api/blade-system/dept/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return http.request({
+    url: '/api/blade-system/dept/submit',
+    method: 'post',
+    data: row
+  })
+}

api/system/dict.js

@@ -0,0 +1,61 @@
+import http from '@/http/api.js'
+
+// 	
+export const dictionary = (params) => {
+	return http.request({
+		url: '/api/blade-system/dict/dictionary',
+		method: 'GET',
+		params
+	})
+}
+
+
+export const parentList = (params) => {
+	return http.request({
+		url: '/api/blade-system/dict/parent-list',
+		method: 'GET',
+		params
+	})
+}
+
+export const remove = (ids) => {
+  return http.request({
+    url: '/api/blade-system/dict/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return http.request({
+    url: '/api/blade-system/dict/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return http.request({
+    url: '/api/blade-system/dict/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const dictTree = (params) => {
+	return http.request({
+		url: '/api/blade-system/dict/tree?code=DICT',
+		method: 'GET',
+		params
+	})
+}
+
+export const child = (params) => {
+	return http.request({
+		url: '/api/blade-system/dict/child-list',
+		method: 'GET',
+		params
+	})
+}

api/system/post.js

@@ -0,0 +1,36 @@
+import http from '@/http/api.js'
+
+// 部门管理
+export const getList = (params) => {
+	return http.request({
+		url: '/api/blade-system/post/list',
+		method: 'GET',
+		params
+	})
+}
+
+export const remove = (ids) => {
+  return http.request({
+    url: '/api/blade-system/post/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return http.request({
+    url: '/api/blade-system/post/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return http.request({
+    url: '/api/blade-system/post/submit',
+    method: 'post',
+    data: row
+  })
+}

api/system/role.js

@@ -0,0 +1,69 @@
+import http from '@/http/api.js'
+
+// 角色管理
+export const getList = (params) => {
+	return http.request({
+		url: '/api/blade-system/role/list',
+		method: 'GET',
+		params
+	})
+}
+
+export const remove = (ids) => {
+  return http.request({
+    url: '/api/blade-system/role/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return http.request({
+    url: '/api/blade-system/role/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return http.request({
+    url: '/api/blade-system/role/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+
+export const roleTree = (params) => {
+	return http.request({
+		url: '/api/blade-system/role/tree-by-id',
+		method: 'GET',
+		params
+	})
+}
+
+export const menuTree = (params) => {
+	return http.request({
+		url: '/api/blade-system/menu/grant-tree',
+		method: 'GET',
+		params
+	})
+}
+
+export const menuTreeKey = (params) => {
+	return http.request({
+		url: '/api/blade-system/menu/role-tree-keys',
+		method: 'GET',
+		params
+	})
+}
+
+export const grant = (data) => {
+  return http.request({
+    url: '/api/blade-system/role/grant',
+    method: 'post',
+    data,
+  })
+}

api/system/tenant.js

@@ -0,0 +1,10 @@
+import http from '@/http/api.js'
+
+// 租户
+export const tenantSelect= (params) => {
+	return http.request({
+		url: '/api/blade-system/tenant/select',
+		method: 'GET',
+		params
+	})
+}

api/user.js

@@ -0,0 +1,61 @@
+import http from '@/http/api.js'
+
+// 获取token
+const token = (tenantId, username, password, type) => {
+	return http.request({
+		url: '/api/blade-auth/oauth/token',
+		method: 'POST',
+		header: {
+			'Tenant-Id': tenantId
+		},
+		params: {
+			tenantId,
+			username,
+			mmword: password,
+			grant_type: "password",
+			scope: "all",
+			type
+		}
+	})
+}
+
+const refreshToken = (refresh_token, tenantId) => {
+	return http.request({
+		url: '/api/blade-auth/oauth/token',
+		method: 'post',
+		headers: {
+			'Tenant-Id': tenantId
+		},
+		params: {
+			tenantId,
+			refresh_token,
+			grant_type: "refresh_token",
+			scope: "all",
+		}
+	})
+}
+
+// 获取用户信息
+const userInfo = () => {
+	return http.request({
+		url: '/api/blade-system/user/info',
+		method: 'GET',
+	})
+}
+
+// 获取用户信息
+export const getUser = (id) => {
+	return http.request({
+		url: '/api/blade-system/user/detail',
+		method: 'GET',
+		params: {
+			id
+		}
+	})
+}
+
+export default {
+	token,
+	userInfo,
+	refreshToken
+}

common/setting.js

@@ -0,0 +1,36 @@
+/**
+ * 全局变量配置
+ */
+module.exports = {
+	// 应用名
+	name: 'Rider',
+	// 应用logo，支持本地路径和网络路径
+	logo: '/static/images/logo.png',
+	// 版本号
+	version: '2.1.0',
+	// 开发环境接口Url
+	// #ifdef H5
+	devUrl: '',
+	// #endif
+	// #ifndef H5
+	devUrl: 'http://127.0.0.1',
+	// #endif
+	// 线上环境接口Url
+	prodUrl: '/housingAssuranceBookingMobile',
+	// 后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
+	contentType: 'application/json;charset=UTF-8',
+	// 后端返回状态码
+	codeName: 'code',
+	// 操作正常code
+	successCode: 200,
+	// 登录失效code
+	invalidCode: 401,
+	// 客户端ID
+	clientId: 'rider',
+	// 客户端密钥
+	clientSecret: 'rider_secret',
+	// token过期时间
+	tokenTime: 3000,
+	// 国密sm2公钥使用后端工程 @org.springblade.test.Sm2KeyGenerator 获取
+	publicKey: '049bb83747f21a4f6ecfd4984e02b611f6bf8180b49818edb7349632416aa65a2e267ae14fcac6f82054888774262244424ab629357a7d98cdd23f4c4eee9f2269'
+}

components/page-nav/page-nav.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="nav-wrap">
+		<view class="nav-title">
+			<image class="logo" src="/static/images/logo.png" mode="widthFix"></image>
+			<view class="nav-info">
+				<view class="nav-title__text">
+					{{title}}
+				</view>
+			</view>
+		</view>
+		<view class="nav-desc">
+			{{desc}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			desc: String,
+			title: String,
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav-wrap {
+		margin-top: 15px;
+		padding: 15px;
+		position: relative;
+	}
+	
+	.lang {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+	}
+	
+	.nav-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+	}
+	
+	.nav-info {
+		margin-left: 15px;
+	}
+	
+	.nav-title__text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		color: $u-main-color;
+		font-size: 20px;
+		font-weight: bold;
+	}
+	
+	.logo {
+		width: 100px;
+		/* #ifndef APP-NVUE */
+		height: auto;
+		/* #endif */
+	}
+	
+	.nav-slogan {
+		color: $u-tips-color;
+		font-size: 14px;
+	}
+	
+	.nav-desc {
+		margin-top: 10px;
+		font-size: 14px;
+		color: $u-content-color;
+	}
+</style>

components/pick-regions/pick-regions.vue

@@ -0,0 +1,153 @@
+<template>
+	<picker
+		mode="multiSelector"
+		:value="multiIndex"
+		:range="multiArray"
+		@change="handleValueChange"
+		@columnchange="handleColumnChange"
+	>
+		<slot></slot>
+	</picker>
+</template>
+
+<script>
+const CHINA_REGIONS = require('./regions.json');
+export default {
+	props: {
+		defaultRegions: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		defaultRegionCode: {
+			type: String
+		},
+		defaultRegion: [String, Array],
+		value: [String, Array]
+	},
+	data() {
+		return {
+			cityArr: CHINA_REGIONS[0].childs,
+			districtArr: CHINA_REGIONS[0].childs[0].childs,
+			multiIndex: [0, 0, 0],
+			isInitMultiArray: true
+		};
+	},
+	watch: {
+		defaultRegion: {
+			handler(region, oldRegion) {
+				if (Array.isArray(region)) {
+					// 避免传的是字面量的时候重复触发
+					oldRegion = oldRegion || [];
+					if (region.join('') !== oldRegion.join('')) {
+						this.handleDefaultRegion(region);
+					}
+				} else if (region && region.length == 6) {
+					this.handleDefaultRegion(region);
+				} else {
+					console.warn('defaultRegion非有效格式');
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		multiArray() {
+			return this.pickedArr.map(arr => arr.map(item => item.name));
+		},
+		pickedArr() {
+			// 进行初始化
+			if (this.isInitMultiArray) {
+				return [
+					CHINA_REGIONS,
+					CHINA_REGIONS[0].childs,
+					CHINA_REGIONS[0].childs[0].childs
+				];
+			}
+			return [CHINA_REGIONS, this.cityArr, this.districtArr];
+		}
+	},
+	methods: {
+		handleColumnChange(e) {
+			// console.log(e);
+			this.isInitMultiArray = false;
+			const that = this;
+			let col = e.detail.column;
+			let row = e.detail.value;
+			that.multiIndex[col] = row;
+			try {
+				switch (col) {
+					case 0:
+						if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
+							that.cityArr = that.districtArr = [
+								CHINA_REGIONS[that.multiIndex[0]]
+							];
+							break;
+						}
+						that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs;
+						that.districtArr =
+							CHINA_REGIONS[that.multiIndex[0]].childs[
+								that.multiIndex[1]
+							].childs;
+						break;
+					case 1:
+						that.districtArr =
+							CHINA_REGIONS[that.multiIndex[0]].childs[
+								that.multiIndex[1]
+							].childs;
+						break;
+					case 2:
+						break;
+				}
+			} catch (e) {
+				// console.log(e);
+				that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs;
+			}
+		},
+		handleValueChange(e) {
+			// 结构赋值
+			let [index0, index1, index2] = e.detail.value;
+			let [arr0, arr1, arr2] = this.pickedArr;
+			let address = [arr0[index0], arr1[index1], arr2[index2]];
+			// console.log(address);
+			this.$emit('getRegion', address);
+			this.$emit(
+				'input',
+				`${address[0].name}${address[1].name}${address[2].name}`
+			);
+		},
+		handleDefaultRegion(region) {
+			const isCode = !Array.isArray(region);
+			this.isInitMultiArray = false;
+			let children = CHINA_REGIONS;
+			for (let i = 0; i < 3; i++) {
+				for (let j = 0; j < children.length; j++) {
+					let condition = isCode
+						? children[j].code == region.slice(0, (i + 1) * 2)
+						: children[j].name.includes(region[i]);
+					if (condition) {
+						// 匹配成功进行赋值
+						// console.log(i,j,children.length-1);
+						children = children[j].childs;
+						if (i == 0) {
+							this.cityArr = children;
+						} else if (i == 1) {
+							this.districtArr = children;
+						}
+						this.$set(this.multiIndex, i, j);
+						// console.log(this.multiIndex);
+						break;
+					} else {
+						// 首次匹配失败就用默认的初始化
+						// console.log(i,j,children.length-1);
+						if (i == 0 && j == children.length - 1) {
+							this.isInitMultiArray = true;
+						}
+					}
+				}
+			}
+		}
+	}
+};
+</script>

components/rider-crud/components/crud-item/index.vue

@@ -0,0 +1,212 @@
+<template>
+	<view class="">
+		<rider-swipe-action :actions="option.actions" @click="onActionClick($event, nodeIndex, list)">
+			<template v-slot:content>
+				<view class="crud flex flex-c">
+					<view class="crud-checkbox">
+						<checkbox-group @change="e => onChecked(e, node.id)" v-if="checkShow">
+							<label>
+								<checkbox
+									style="transform: scale(0.7)"
+									:value="node.id"
+									:checked="checkList.includes(node.id)"
+									class="curdCheck"
+								></checkbox>
+							</label>
+						</checkbox-group>
+					</view>
+					<view class="flex-one" @click.stop="onActionClick({ index: -1 }, nodeIndex, list)">
+						<view v-for="(col, i) in option.column" :key="i" class="crud-row flex">
+							<view class="crud-row-label">{{ col.label }}：</view>
+							<view class="crud-row-value">{{ node[col.prop] }}</view>
+						</view>
+					</view>
+				</view>
+				<block v-if="node.hasChildren || (node.children && node.children.length > 0)">
+					<view class="crud-child" @click="onToggle(node, nodeIndex)">
+						{{ !collapsed ? '查看下级' : '收起' }}
+						<u-icon :name="`arrow-${!collapsed ? 'down' : 'up'}`"></u-icon>
+					</view>
+				</block>
+			</template>
+		</rider-swipe-action>
+		<!-- 下级 -->
+		<template v-if="node.hasChildren || (node.children && node.children.length > 0)">
+			<!-- 	<block v-if="collapsed">
+				<view class="" v-for="(item, index) in node.children" :key="index">
+					<crud-item :ref="`crud-itemc${index}`" :node="item" :list="node.children" :option="option" :checkShow="checkShow" :nodeIndex="index" :checkList="checkList"></crud-item>
+				</view>
+			</block> -->
+			<u-popup v-model="collapsed" mode="bottom" closeable :mask-close-able="false" :z-index="zIndex">
+				<view class="form-head"><u-section title="查看下级" :right="false" line-color="#5f88ff"></u-section></view>
+				<scroll-view scroll-y="true" style="height: 75vh; background: #f5f5f5">
+					<crud-item
+						v-for="(item, index) in node.children"
+						:key="index"
+						:ref="`crud-item${index}`"
+						:node="item"
+						:list="node.children"
+						:option="option"
+						:checkShow="checkShow"
+						:nodeIndex="index"
+						:checkList="checkList"
+						:random-num="randomNum"
+						:z-index="zIndex + 1"
+					></crud-item>
+				</scroll-view>
+			</u-popup>
+		</template>
+	</view>
+</template>
+
+<script>
+import riderSwipeAction from '../swipe-action/index'
+// #ifdef MP
+import crudItem from '@/components/rider-crud/components/crud-item/index'
+// #endif
+export default {
+	name: 'crud-item',
+	components: {
+		riderSwipeAction,
+		// #ifndef MP
+		crudItem: () => import('@/components/rider-crud/components/crud-item/index'),
+		// #endif
+		// #ifdef MP
+		crudItem
+		// #endif
+	},
+	props: {
+		// 节点数据
+		node: {
+			type: Object,
+			default: {}
+		},
+		list: Array,
+		// 节点角标
+		nodeIndex: {
+			type: Number,
+			default: 0
+		},
+		// 配置
+		option: {
+			type: Object,
+			default: {
+				column: [],
+				manageSwitch: true
+			}
+		},
+		checkList: Array,
+		checkShow: {
+			type: Boolean,
+			default: false
+		},
+		randomNum: Number,
+		zIndex: {
+			type: Number,
+			default: 10075
+		}
+	},
+	data() {
+		return {
+			collapsed: false
+		}
+	},
+	methods: {
+		setLazyLoad(func) {
+			this.option.lazyLoad = func
+		},
+		onActionClick({ index }, i, list) {
+			uni.$emit(`action${this.randomNum}`, { index }, i, list)
+		},
+		onChecked(e, id) {
+			uni.$emit(`checked${this.randomNum}`, e, id)
+		},
+		onToggle(item, index) {
+			if (item.hasChildren && this.collapsed == false) {
+				if (!item.children || item.children.length == 0) {
+					// #ifdef MP
+					uni.showToast({
+						title: '小程序暂不支持懒加载查看下级',
+						icon: 'none'
+					})
+					return
+					// #endif
+					if (typeof this.option.lazyLoad == 'function') {
+						const cb = list => {
+							this.$set(item, 'children', list)
+							this.collapsed = true
+						}
+						this.option.lazyLoad(item, index, cb)
+					}
+				} else this.collapsed = true
+				setTimeout(() => {
+					if (this.node.children)
+						this.node.children.forEach((l, i) => {
+							this.$refs[`crud-item${i}`][0].setLazyLoad(this.option.lazyLoad)
+						})
+				}, 100)
+			} else {
+				this.collapsed = !this.collapsed
+			}
+		},
+		hide() {
+			this.collapsed = false
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.flex {
+	display: flex;
+	justify-content: space-between;
+}
+
+.flex-c {
+	align-items: center;
+}
+
+.flex-one {
+	flex: 1;
+}
+
+.form-head {
+	padding: 36rpx 30rpx;
+	border-bottom: 2rpx dashed #efefef;
+}
+
+.crud {
+	background: #fff;
+	padding: 26rpx;
+	border-radius: 8rpx;
+
+	.crud-row + .crud-row {
+		margin-top: 14rpx;
+	}
+
+	&-child {
+		color: #5f88ff;
+		font-size: 30rpx;
+		text-align: center;
+		padding: 20rpx 0;
+		border-top: 2rpx dashed #f5f5f5;
+	}
+
+	&-row {
+		&-label {
+			color: #999;
+			font-size: 28rpx;
+			margin-right: 6rpx;
+		}
+
+		&-value {
+			flex: 1;
+			color: #565656;
+			font-size: 28rpx;
+			word-break: break-all;
+			word-wrap: break-word;
+			white-space: pre-wrap;
+		}
+	}
+}
+</style>

components/rider-crud/components/mp-html/editable/config.js

@@ -0,0 +1,11 @@
+// 以下项目可以删减或更换顺序，但不能添加或更改名字
+export default {
+  // 普通标签的菜单项
+  node: ['大小', '斜体', '粗体', '下划线', '居中', '缩进', '上移', '下移', '删除'],
+  // 图片的菜单项
+  img: ['换图', '宽度', '超链接', '预览图', '禁用预览', '上移', '下移', '删除'],
+  // 链接的菜单项
+  link: ['更换链接', '上移', '下移', '删除'],
+  // 音视频的菜单项
+  media: ['封面', '循环', '自动播放', '上移', '下移', '删除']
+}

components/rider-crud/components/mp-html/editable/index.js

@@ -0,0 +1,532 @@
+/**
+ * @fileoverview editable 插件
+ */
+import config from './config'
+import Parser from '../parser'
+
+function Editable (vm) {
+  this.vm = vm
+  this.editHistory = [] // 历史记录
+  this.editI = -1 // 历史记录指针
+  vm._mask = [] // 蒙版被点击时进行的操作
+
+  vm._setData = function (path, val) {
+    const paths = path.split('.')
+    let target = vm
+    for (let i = 0; i < paths.length - 1; i++) {
+      target = target[paths[i]]
+    }
+    vm.$set(target, paths.pop(), val)
+  }
+
+  /**
+   * @description 移动历史记录指针
+   * @param {Number} num 移动距离
+   */
+  const move = num => {
+    setTimeout(() => {
+      const item = this.editHistory[this.editI + num]
+      if (item) {
+        this.editI += num
+        vm._setData(item.key, item.value)
+      }
+    }, 200)
+  }
+  vm.undo = () => move(-1) // 撤销
+  vm.redo = () => move(1) // 重做
+
+  /**
+   * @description 更新记录
+   * @param {String} path 更新内容路径
+   * @param {*} oldVal 旧值
+   * @param {*} newVal 新值
+   * @param {Boolean} set 是否更新到视图
+   * @private
+   */
+  vm._editVal = (path, oldVal, newVal, set) => {
+    // 当前指针后的内容去除
+    while (this.editI < this.editHistory.length - 1) {
+      this.editHistory.pop()
+    }
+
+    // 最多存储 30 条操作记录
+    while (this.editHistory.length > 30) {
+      this.editHistory.pop()
+      this.editI--
+    }
+
+    const last = this.editHistory[this.editHistory.length - 1]
+    if (!last || last.key !== path) {
+      if (last) {
+        // 去掉上一次的新值
+        this.editHistory.pop()
+        this.editI--
+      }
+      // 存入这一次的旧值
+      this.editHistory.push({
+        key: path,
+        value: oldVal
+      })
+      this.editI++
+    }
+
+    // 存入本次的新值
+    this.editHistory.push({
+      key: path,
+      value: newVal
+    })
+    this.editI++
+
+    // 更新到视图
+    if (set) {
+      vm._setData(path, newVal)
+    }
+  }
+
+  /**
+   * @description 获取菜单项
+   * @private
+   */
+  vm._getItem = function (node, up, down) {
+    let items
+    let i
+    if (node.name === 'img') {
+      items = config.img.slice(0)
+      if (!vm.getSrc) {
+        i = items.indexOf('换图')
+        if (i !== -1) {
+          items.splice(i, 1)
+        }
+        i = items.indexOf('超链接')
+        if (i !== -1) {
+          items.splice(i, 1)
+        }
+        i = items.indexOf('预览图')
+        if (i !== -1) {
+          items.splice(i, 1)
+        }
+      }
+      i = items.indexOf('禁用预览')
+      if (i !== -1 && node.attrs.ignore) {
+        items[i] = '启用预览'
+      }
+    } else if (node.name === 'a') {
+      items = config.link.slice(0)
+      if (!vm.getSrc) {
+        i = items.indexOf('更换链接')
+        if (i !== -1) {
+          items.splice(i, 1)
+        }
+      }
+    } else if (node.name === 'video' || node.name === 'audio') {
+      items = config.media.slice(0)
+      i = items.indexOf('封面')
+      if (!vm.getSrc && i !== -1) {
+        items.splice(i, 1)
+      }
+      i = items.indexOf('循环')
+      if (node.attrs.loop && i !== -1) {
+        items[i] = '不循环'
+      }
+      i = items.indexOf('自动播放')
+      if (node.attrs.autoplay && i !== -1) {
+        items[i] = '不自动播放'
+      }
+    } else {
+      items = config.node.slice(0)
+    }
+    if (!up) {
+      i = items.indexOf('上移')
+      if (i !== -1) {
+        items.splice(i, 1)
+      }
+    }
+    if (!down) {
+      i = items.indexOf('下移')
+      if (i !== -1) {
+        items.splice(i, 1)
+      }
+    }
+    return items
+  }
+
+  /**
+   * @description 显示 tooltip
+   * @param {object} obj
+   * @private
+   */
+  vm._tooltip = function (obj) {
+    vm.$set(vm, 'tooltip', {
+      top: obj.top,
+      items: obj.items
+    })
+    vm._tooltipcb = obj.success
+  }
+
+  /**
+   * @description 显示滚动条
+   * @param {object} obj
+   * @private
+   */
+  vm._slider = function (obj) {
+    vm.$set(vm, 'slider', {
+      min: obj.min,
+      max: obj.max,
+      value: obj.value,
+      top: obj.top
+    })
+    vm._slideringcb = obj.changing
+    vm._slidercb = obj.change
+  }
+
+  /**
+   * @description 点击蒙版
+   * @private
+   */
+  vm._maskTap = function () {
+    // 隐藏所有悬浮窗
+    while (vm._mask.length) {
+      (vm._mask.pop())()
+    }
+    if (vm.tooltip) {
+      vm.$set(vm, 'tooltip', null)
+    }
+    if (vm.slider) {
+      vm.$set(vm, 'slider', null)
+    }
+  }
+
+  /**
+   * @description 插入节点
+   * @param {Object} node
+   */
+  function insert (node) {
+    if (vm._edit) {
+      vm._edit.insert(node)
+    } else {
+      const nodes = vm.nodes.slice(0)
+      nodes.push(node)
+      vm._editVal('nodes', vm.nodes, nodes, true)
+    }
+  }
+
+  /**
+   * @description 在光标处插入指定 html 内容
+   * @param {String} html 内容
+   */
+  vm.insertHtml = html => {
+    this.inserting = true
+    const arr = new Parser(vm).parse(html)
+    this.inserting = undefined
+    for (let i = 0; i < arr.length; i++) {
+      insert(arr[i])
+    }
+  }
+
+  /**
+   * @description 在光标处插入图片
+   */
+  vm.insertImg = function () {
+    vm.getSrc && vm.getSrc('img').then(src => {
+      if (typeof src === 'string') {
+        src = [src]
+      }
+      const parser = new Parser(vm)
+      for (let i = 0; i < src.length; i++) {
+        insert({
+          name: 'img',
+          attrs: {
+            src: parser.getUrl(src[i])
+          }
+        })
+      }
+    }).catch(() => { })
+  }
+
+  /**
+   * @description 在光标处插入一个链接
+   */
+  vm.insertLink = function () {
+    vm.getSrc && vm.getSrc('link').then(url => {
+      insert({
+        name: 'a',
+        attrs: {
+          href: url
+        },
+        children: [{
+          type: 'text',
+          text: url
+        }]
+      })
+    }).catch(() => { })
+  }
+
+  /**
+   * @description 在光标处插入一个表格
+   * @param {Number} rows 行数
+   * @param {Number} cols 列数
+   */
+  vm.insertTable = function (rows, cols) {
+    const table = {
+      name: 'table',
+      attrs: {
+        style: 'display:table;width:100%;margin:10px 0;text-align:center;border-spacing:0;border-collapse:collapse;border:1px solid gray'
+      },
+      children: []
+    }
+    for (let i = 0; i < rows; i++) {
+      const tr = {
+        name: 'tr',
+        attrs: {},
+        children: []
+      }
+      for (let j = 0; j < cols; j++) {
+        tr.children.push({
+          name: 'td',
+          attrs: {
+            style: 'padding:2px;border:1px solid gray'
+          },
+          children: [{
+            type: 'text',
+            text: ''
+          }]
+        })
+      }
+      table.children.push(tr)
+    }
+    insert(table)
+  }
+
+  /**
+   * @description 插入视频/音频
+   * @param {Object} node
+   */
+  function insertMedia (node) {
+    if (typeof node.src === 'string') {
+      node.src = [node.src]
+    }
+    const parser = new Parser(vm)
+    // 拼接主域名
+    for (let i = 0; i < node.src.length; i++) {
+      node.src[i] = parser.getUrl(node.src[i])
+    }
+    insert({
+      name: 'div',
+      attrs: {
+        style: 'text-align:center'
+      },
+      children: [node]
+    })
+  }
+
+  /**
+   * @description 在光标处插入一个视频
+   */
+  vm.insertVideo = function () {
+    vm.getSrc && vm.getSrc('video').then(src => {
+      insertMedia({
+        name: 'video',
+        attrs: {
+          controls: 'T'
+        },
+        children: [],
+        src,
+        // #ifdef APP-PLUS
+        html: `<video src="${src}" style="width:100%;height:100%"></video>`
+        // #endif
+      })
+    }).catch(() => { })
+  }
+
+  /**
+   * @description 在光标处插入一个音频
+   */
+  vm.insertAudio = function () {
+    vm.getSrc && vm.getSrc('audio').then(attrs => {
+      let src
+      if (attrs.src) {
+        src = attrs.src
+        attrs.src = undefined
+      } else {
+        src = attrs
+        attrs = {}
+      }
+      attrs.controls = 'T'
+      insertMedia({
+        name: 'audio',
+        attrs,
+        children: [],
+        src
+      })
+    }).catch(() => { })
+  }
+
+  /**
+   * @description 在光标处插入一段文本
+   */
+  vm.insertText = function () {
+    insert({
+      name: 'p',
+      attrs: {},
+      children: [{
+        type: 'text',
+        text: ''
+      }]
+    })
+  }
+
+  /**
+   * @description 清空内容
+   */
+  vm.clear = function () {
+    vm._maskTap()
+    vm._edit = undefined
+    vm.$set(vm, 'nodes', [{
+      name: 'p',
+      attrs: {},
+      children: [{
+        type: 'text',
+        text: ''
+      }]
+    }])
+  }
+
+  /**
+   * @description 获取编辑后的 html
+   */
+  vm.getContent = function () {
+    let html = '';
+    // 递归遍历获取
+    (function traversal (nodes, table) {
+      for (let i = 0; i < nodes.length; i++) {
+        let item = nodes[i]
+        if (item.type === 'text') {
+          html += item.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>').replace(/\xa0/g, '&nbsp;') // 编码实体
+        } else {
+          if (item.name === 'img') {
+            item.attrs.i = ''
+            // 还原被转换的 svg
+            if ((item.attrs.src || '').includes('data:image/svg+xml;utf8,')) {
+              html += item.attrs.src.substr(24).replace(/%23/g, '#').replace('<svg', '<svg style="' + (item.attrs.style || '') + '"')
+              continue
+            }
+          } else if (item.name === 'video' || item.name === 'audio') {
+            // 还原 video 和 audio 的 source
+            item = JSON.parse(JSON.stringify(item))
+            if (item.src.length > 1) {
+              item.children = []
+              for (let j = 0; j < item.src.length; j++) {
+                item.children.push({
+                  name: 'source',
+                  attrs: {
+                    src: item.src[j]
+                  }
+                })
+              }
+            } else {
+              item.attrs.src = item.src[0]
+            }
+          } else if (item.name === 'div' && (item.attrs.style || '').includes('overflow:auto') && (item.children[0] || {}).name === 'table') {
+            // 还原滚动层
+            item = item.children[0]
+          }
+          // 还原 table
+          if (item.name === 'table') {
+            item = JSON.parse(JSON.stringify(item))
+            table = item.attrs
+            if ((item.attrs.style || '').includes('display:grid')) {
+              item.attrs.style = item.attrs.style.split('display:grid')[0]
+              const children = [{
+                name: 'tr',
+                attrs: {},
+                children: []
+              }]
+              for (let j = 0; j < item.children.length; j++) {
+                item.children[j].attrs.style = item.children[j].attrs.style.replace(/grid-[^;]+;*/g, '')
+                if (item.children[j].r !== children.length) {
+                  children.push({
+                    name: 'tr',
+                    attrs: {},
+                    children: [item.children[j]]
+                  })
+                } else {
+                  children[children.length - 1].children.push(item.children[j])
+                }
+              }
+              item.children = children
+            }
+          }
+          html += '<' + item.name
+          for (const attr in item.attrs) {
+            let val = item.attrs[attr]
+            if (!val) continue
+            if (val === 'T' || val === true) {
+              // bool 型省略值
+              html += ' ' + attr
+              continue
+            } else if (item.name[0] === 't' && attr === 'style' && table) {
+              // 取消为了显示 table 添加的 style
+              val = val.replace(/;*display:table[^;]*/, '')
+              if (table.border) {
+                val = val.replace(/border[^;]+;*/g, $ => $.includes('collapse') ? $ : '')
+              }
+              if (table.cellpadding) {
+                val = val.replace(/padding[^;]+;*/g, '')
+              }
+              if (!val) continue
+            }
+            html += ' ' + attr + '="' + val.replace(/"/g, '&quot;') + '"'
+          }
+          html += '>'
+          if (item.children) {
+            traversal(item.children, table)
+            html += '</' + item.name + '>'
+          }
+        }
+      }
+    })(vm.nodes)
+
+    // 其他插件处理
+    for (let i = vm.plugins.length; i--;) {
+      if (vm.plugins[i].onGetContent) {
+        html = vm.plugins[i].onGetContent(html) || html
+      }
+    }
+
+    return html
+  }
+}
+
+Editable.prototype.onUpdate = function (content, config) {
+  if (this.vm.editable) {
+    this.vm._maskTap()
+    config.entities.amp = '&'
+    if (!this.inserting) {
+      this.vm._edit = undefined
+      if (!content) {
+        setTimeout(() => {
+          this.vm.$set(this.vm, 'nodes', [{
+            name: 'p',
+            attrs: {},
+            children: [{
+              type: 'text',
+              text: ''
+            }]
+          }])
+        }, 0)
+      }
+    }
+  }
+}
+
+Editable.prototype.onParse = function (node) {
+  // 空白单元格可编辑
+  if (this.vm.editable && (node.name === 'td' || node.name === 'th') && !this.vm.getText(node.children)) {
+    node.children.push({
+      type: 'text',
+      text: ''
+    })
+  }
+}
+
+export default Editable

components/rider-crud/components/mp-html/mp-html.vue

@@ -0,0 +1,540 @@
+<template>
+  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="(editable?'min-height:200px;':'')+containerStyle" @tap="_containTap">
+    <slot v-if="!nodes[0]" />
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable,editable,placeholder,'nodes']" name="span" />
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <!-- #endif -->
+    <view v-if="tooltip" class="_tooltip_contain" :style="'top:'+tooltip.top+'px'">
+      <view class="_tooltip">
+        <view v-for="(item, index) in tooltip.items" v-bind:key="index" class="_tooltip_item" :data-i="index" @tap="_tooltipTap">{{item}}</view>
+      </view>
+    </view>
+    <view v-if="slider" class="_slider" :style="'top:'+slider.top+'px'">
+      <slider :value="slider.value" :min="slider.min" :max="slider.max" handle-size="14" block-size="14" show-value activeColor="white" style="padding:3px" @changing="_sliderChanging" @change="_sliderChange" />
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.3.2
+ * @description 富文本组件
+ * @tutorial https://github.com/jin-yufeng/mp-html
+ * @property {String} container-style 容器的样式
+ * @property {String} content 用于渲染的 html 字符串
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
+ * @property {String} domain 主域名，用于拼接链接
+ * @property {String} error-img 图片出错时的占位图链接
+ * @property {Boolean} lazy-load 是否开启图片懒加载
+ * @property {string} loading-img 图片加载过程中的占位图链接
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
+ * @property {Boolean | String} selectable 是否开启长按复制
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
+ * @property {Object} tag-style 标签的默认样式
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
+ * @event {Function} load dom 结构加载完毕时触发
+ * @event {Function} ready 所有图片加载完毕时触发
+ * @event {Function} imgtap 图片被点击时触发
+ * @event {Function} linktap 链接被点击时触发
+ * @event {Function} play 音视频播放时触发
+ * @event {Function} error 媒体加载出错时触发
+ */
+// #ifndef APP-PLUS-NVUE
+import node from './node/node'
+// #endif
+import Parser from './parser'
+import editable from './editable/index.js'
+const plugins=[editable,]
+// #ifdef APP-PLUS-NVUE
+const dom = weex.requireModule('dom')
+// #endif
+export default {
+  name: 'mp-html',
+  data() {
+    return {
+      tooltip: null,
+      slider: null,
+      nodes: [],
+      // #ifdef APP-PLUS-NVUE
+      height: 3
+      // #endif
+    }
+  },
+  props: {
+    editable: Boolean,
+    placeholder: String,
+    containerStyle: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    copyLink: {
+      type: [Boolean, String],
+      default: true
+    },
+    domain: String,
+    errorImg: {
+      type: String,
+      default: ''
+    },
+    lazyLoad: {
+      type: [Boolean, String],
+      default: false
+    },
+    loadingImg: {
+      type: String,
+      default: ''
+    },
+    pauseVideo: {
+      type: [Boolean, String],
+      default: true
+    },
+    previewImg: {
+      type: [Boolean, String],
+      default: true
+    },
+    scrollTable: [Boolean, String],
+    selectable: [Boolean, String],
+    setTitle: {
+      type: [Boolean, String],
+      default: true
+    },
+    showImgMenu: {
+      type: [Boolean, String],
+      default: true
+    },
+    tagStyle: Object,
+    useAnchor: [Boolean, Number]
+  },
+  // #ifdef VUE3
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  // #endif
+  // #ifndef APP-PLUS-NVUE
+  components: {
+    node
+  },
+  // #endif
+  watch: {
+    editable(val) {
+      this.setContent(val ? this.content : this.getContent())
+      if (!val)
+        this._maskTap()
+    },
+    content (content) {
+      this.setContent(content)
+    }
+  },
+  created () {
+    this.plugins = []
+    for (let i = plugins.length; i--;) {
+      this.plugins.push(new plugins[i](this))
+    }
+  },
+  mounted () {
+    if ((this.content || this.editable) && !this.nodes.length) {
+      this.setContent(this.content)
+    }
+  },
+  beforeDestroy () {
+    this._hook('onDetached')
+    clearInterval(this._timer)
+  },
+  methods: {
+    _containTap() {
+      if (!this._lock && !this.slider) {
+        this._edit = undefined
+        this._maskTap()
+      }
+    },
+    _tooltipTap(e) {
+      this._tooltipcb(e.currentTarget.dataset.i)
+      this.$set(this, 'tooltip', null)
+    },
+    _sliderChanging(e) {
+      this._slideringcb(e.detail.value)
+    },
+    _sliderChange(e) {
+      this._slidercb(e.detail.value)
+    },
+    /**
+     * @description 将锚点跳转的范围限定在一个 scroll-view 内
+     * @param {Object} page scroll-view 所在页面的示例
+     * @param {String} selector scroll-view 的选择器
+     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
+     */
+    in (page, selector, scrollTop) {
+      // #ifndef APP-PLUS-NVUE
+      if (page && selector && scrollTop) {
+        this._in = {
+          page,
+          selector,
+          scrollTop
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 锚点跳转
+     * @param {String} id 要跳转的锚点 id
+     * @param {Number} offset 跳转位置的偏移量
+     * @returns {Promise}
+     */
+    navigateTo (id, offset) {
+      return new Promise((resolve, reject) => {
+        if (!this.useAnchor) {
+          reject(Error('Anchor is disabled'))
+          return
+        }
+        offset = offset || parseInt(this.useAnchor) || 0
+        // #ifdef APP-PLUS-NVUE
+        if (!id) {
+          dom.scrollToElement(this.$refs.web, {
+            offset
+          })
+          resolve()
+        } else {
+          this._navigateTo = {
+            resolve,
+            reject,
+            offset
+          }
+          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
+        }
+        // #endif
+        // #ifndef APP-PLUS-NVUE
+        let deep = ' '
+        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+        deep = '>>>'
+        // #endif
+        const selector = uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this._in ? this._in.page : this)
+          // #endif
+          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
+        if (this._in) {
+          selector.select(this._in.selector).scrollOffset()
+            .select(this._in.selector).boundingClientRect()
+        } else {
+          // 获取 scroll-view 的位置和滚动距离
+          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
+        }
+        selector.exec(res => {
+          if (!res[0]) {
+            reject(Error('Label not found'))
+            return
+          }
+          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
+          if (this._in) {
+            // scroll-view 跳转
+            this._in.page[this._in.scrollTop] = scrollTop
+          } else {
+            // 页面跳转
+            uni.pageScrollTo({
+              scrollTop,
+              duration: 300
+            })
+          }
+          resolve()
+        })
+        // #endif
+      })
+    },
+
+    /**
+     * @description 获取文本内容
+     * @return {String}
+     */
+    getText (nodes) {
+      let text = '';
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]
+          if (node.type === 'text') {
+            text += node.text.replace(/&amp;/g, '&')
+          } else if (node.name === 'br') {
+            text += '\n'
+          } else {
+            // 块级标签前后加换行
+            const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
+            if (isBlock && text && text[text.length - 1] !== '\n') {
+              text += '\n'
+            }
+            // 递归获取子节点的文本
+            if (node.children) {
+              traversal(node.children)
+            }
+            if (isBlock && text[text.length - 1] !== '\n') {
+              text += '\n'
+            } else if (node.name === 'td' || node.name === 'th') {
+              text += '\t'
+            }
+          }
+        }
+      })(nodes || this.nodes)
+      return text
+    },
+
+    /**
+     * @description 获取内容大小和位置
+     * @return {Promise}
+     */
+    getRect () {
+      return new Promise((resolve, reject) => {
+        uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
+      })
+    },
+
+    /**
+     * @description 暂停播放媒体
+     */
+    pauseMedia () {
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].pause()
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置内容
+     * @param {String} content html 内容
+     * @param {Boolean} append 是否在尾部追加
+     */
+    setContent (content, append) {
+      if (!append || !this.imgList) {
+        this.imgList = []
+      }
+      const nodes = new Parser(this).parse(content)
+      // #ifdef APP-PLUS-NVUE
+      if (this._ready) {
+        this._set(nodes, append)
+      }
+      // #endif
+      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
+
+      // #ifndef APP-PLUS-NVUE
+      this._videos = []
+      this.$nextTick(() => {
+        this._hook('onLoad')
+        this.$emit('load')
+      })
+
+      // 等待图片加载完毕
+      let height
+      clearInterval(this._timer)
+      this._timer = setInterval(() => {
+        this.getRect().then(rect => {
+          // 350ms 总高度无变化就触发 ready 事件
+          if (rect.height === height) {
+            this.$emit('ready', rect)
+            clearInterval(this._timer)
+          }
+          height = rect.height
+        }).catch(() => { })
+      }, 350)
+      // #endif
+    },
+
+    /**
+     * @description 调用插件钩子函数
+     */
+    _hook (name) {
+      for (let i = plugins.length; i--;) {
+        if (this.plugins[i][name]) {
+          this.plugins[i][name]()
+        }
+      }
+    },
+
+    // #ifdef APP-PLUS-NVUE
+    /**
+     * @description 设置内容
+     */
+    _set (nodes, append) {
+      this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes) + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
+    },
+
+    /**
+     * @description 接收到 web-view 消息
+     */
+    _onMessage (e) {
+      const message = e.detail.data[0]
+      switch (message.action) {
+        // web-view 初始化完毕
+        case 'onJSBridgeReady':
+          this._ready = true
+          if (this.nodes) {
+            this._set(this.nodes)
+          }
+          break
+        // 内容 dom 加载完毕
+        case 'onLoad':
+          this.height = message.height
+          this._hook('onLoad')
+          this.$emit('load')
+          break
+        // 所有图片加载完毕
+        case 'onReady':
+          this.getRect().then(res => {
+            this.$emit('ready', res)
+          }).catch(() => { })
+          break
+        // 总高度发生变化
+        case 'onHeightChange':
+          this.height = message.height
+          break
+        // 图片点击
+        case 'onImgTap':
+          this.$emit('imgtap', message.attrs)
+          if (this.previewImg) {
+            uni.previewImage({
+              current: parseInt(message.attrs.i),
+              urls: this.imgList
+            })
+          }
+          break
+        // 链接点击
+        case 'onLinkTap': {
+          const href = message.attrs.href
+          this.$emit('linktap', message.attrs)
+          if (href) {
+            // 锚点跳转
+            if (href[0] === '#') {
+              if (this.useAnchor) {
+                dom.scrollToElement(this.$refs.web, {
+                  offset: message.offset
+                })
+              }
+            } else if (href.includes('://')) {
+              // 打开外链
+              if (this.copyLink) {
+                plus.runtime.openWeb(href)
+              }
+            } else {
+              uni.navigateTo({
+                url: href,
+                fail () {
+                  uni.switchTab({
+                    url: href
+                  })
+                }
+              })
+            }
+          }
+          break
+        }
+        case 'onPlay':
+          this.$emit('play')
+          break
+        // 获取到锚点的偏移量
+        case 'getOffset':
+          if (typeof message.offset === 'number') {
+            dom.scrollToElement(this.$refs.web, {
+              offset: message.offset + this._navigateTo.offset
+            })
+            this._navigateTo.resolve()
+          } else {
+            this._navigateTo.reject(Error('Label not found'))
+          }
+          break
+        // 点击
+        case 'onClick':
+          this.$emit('tap')
+          this.$emit('click')
+          break
+        // 出错
+        case 'onError':
+          this.$emit('error', {
+            source: message.source,
+            attrs: message.attrs
+          })
+      }
+    }
+    // #endif
+  }
+}
+</script>
+
+<style>
+/* #ifndef APP-PLUS-NVUE */
+/* 根节点样式 */
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 长按复制 */
+._select {
+  user-select: text;
+}
+/* #endif */
+
+/* 提示条 */
+._tooltip_contain {
+  position: absolute;
+  right: 20px;
+  left: 20px;
+  text-align: center;
+}
+
+._tooltip {
+  box-sizing: border-box;
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  height: 30px;
+  padding: 0 3px;
+  overflow: scroll;
+  font-size: 14px;
+  line-height: 30px;
+  white-space: nowrap;
+}
+
+._tooltip_item {
+  display: inline-block;
+  width: auto;
+  padding: 0 2vw;
+  line-height: 30px;
+  background-color: black;
+  color: white;
+}
+
+/* 图片宽度滚动条 */
+._slider {
+  position: absolute;
+  left: 20px;
+  width: 220px;
+}
+
+._tooltip,
+._slider {
+  background-color: black;
+  border-radius: 3px;
+  opacity: 0.75;
+}
+</style>

components/rider-crud/components/mp-html/node/node.vue

@@ -0,0 +1,972 @@
+<template>
+  <view @tap="nodeTap" :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="(ctrl.root?'border:1px solid black;padding:5px;display:block;':'')+attrs.style">
+    <block v-for="(n, i) in childs" v-bind:key="i">
+      <!-- 图片 -->
+      <!-- 占位图 -->
+      <image v-if="n.name==='img'&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
+      <!-- 显示图片 -->
+      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || APP-PLUS -->
+      <image v-if="n.name==='img'" :id="n.attrs.id||('n'+i)" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:'+(ctrl['h'+i]||1)+'px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':'')" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="!opts[5]&&opts[3]&&!n.attrs.ignore" :image-menu-prevent="opts[5]||!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS && VUE3 -->
+      <image v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- 文本 -->
+      <text v-else-if="n.type==='text'&&!ctrl['e'+i]" :data-i="i" :user-select="opts[4]" :decode="!opts[5]" @tap="editStart">{{n.text}}
+        <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
+      </text>
+      <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:50px;width:auto;padding:5px;display:block" @tap.stop="editStart">{{n.text}}
+        <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
+      </text>
+      <textarea v-else-if="n.type==='text'" style="border:1px dashed black;min-width:50px;width:auto;padding:5px" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
+      <text v-else-if="n.name==='br'">\n</text>
+      <!-- 链接 -->
+      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
+        <node name="span" :childs="n.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children']" style="display:inherit" />
+      </view>
+      <!-- 视频 -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-else-if="n.html" :data-i="i" @tap="mediaTap" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+      <video :show-center-play-btn="!opts[5]" @tap="mediaTap" v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
+      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
+      <!-- #endif -->
+      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
+      <!-- 音频 -->
+      <audio @tap="mediaTap" v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <view v-else-if="(n.name==='table'&&(n.c||opts[5]))||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
+        <node v-if="n.name==='li'" :childs="n.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children']" />
+        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
+          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children.'+x+'.children']" />
+          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
+            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <node :childs="tr.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children.'+x+'.children.'+y+'.children']" />
+            </view>
+            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
+                <node :childs="td.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children.'+x+'.children.'+y+'.children.'+z+'.children']" />
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      
+      <!-- 富文本 -->
+      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!opts[5]&&!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!opts[5]&&!n.c" :id="n.attrs.id" :style="n.f+';display:inline'" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- 继续递归 -->
+      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
+        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children.'+j+'.children']" />
+      </view>
+      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children']" />
+    </block>
+  </view>
+</template>
+<script module="handler" lang="wxs">
+// 行内标签列表
+var inlineTags = {
+  abbr: true,
+  b: true,
+  big: true,
+  code: true,
+  del: true,
+  em: true,
+  i: true,
+  ins: true,
+  label: true,
+  q: true,
+  small: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true
+}
+/**
+ * @description 判断是否为行内标签
+ */
+module.exports = {
+  isInline: function (tagName, style) {
+    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
+  }
+}
+</script>
+<script>
+function getTop(e) {
+  let top
+  // #ifdef H5 || APP-PLUS
+  top = e.touches[0].pageY
+  // #endif
+  // #ifdef MP-ALIPAY
+  top = e.detail.pageY
+  // #endif
+  // #ifndef H5 || MP-ALIPAY || APP-PLUS
+  top = e.detail.y
+  // #endif
+  if (top - e.currentTarget.offsetTop < 150)
+    top = e.currentTarget.offsetTop
+  if (top < 30)
+    top += 70
+  return top - 30
+}
+
+import node from './node'
+export default {
+  name: 'node',
+  options: {
+    // #ifdef MP-WEIXIN
+    virtualHost: true,
+    // #endif
+    // #ifdef MP-TOUTIAO
+    addGlobalClass: false
+    // #endif
+  },
+  data () {
+    return {
+      ctrl: {}
+    }
+  },
+  props: {
+    name: String,
+    attrs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    childs: Array,
+    opts: Array
+  },
+  components: {
+
+    // #ifndef H5 && VUE3
+    node
+    // #endif
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
+    })
+    // #ifdef H5 || APP-PLUS
+    if (this.opts[0]) {
+      let i
+      for (i = this.childs.length; i--;) {
+        if (this.childs[i].name === 'img') break
+      }
+      if (i !== -1) {
+        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+          top: 500,
+          bottom: 500
+        })
+        this.observer.observe('._img', res => {
+          if (res.intersectionRatio) {
+            this.$set(this.ctrl, 'load', 1)
+            this.observer.disconnect()
+          }
+        })
+      }
+    }
+    // #endif
+  },
+  beforeDestroy () {
+  if (this.root._edit === this) {
+    this.root._edit = undefined
+  }
+    // #ifdef H5 || APP-PLUS
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    // #endif
+  },
+  methods:{editStart (e) {
+      if (this.opts[5]) {
+        const i = e.currentTarget.dataset.i
+        if (!this.ctrl['e' + i]) {
+          // 显示虚线框
+          this.$set(this.ctrl, 'e' + i, 1)
+          setTimeout(() => {
+            this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0))
+          }, 50)
+          this.root._edit = this
+          this.i = i
+          this.cursor = this.childs[i].text.length
+        } else {
+          this.root._mask.pop()
+          this.root._maskTap()
+          // 将 text 转为 textarea
+          this.$set(this.ctrl, 'e' + i, 2)
+          // 延时对焦，避免高度错误
+          setTimeout(() => {
+            this.$set(this.ctrl, 'e' + i, 3)
+          }, 50)
+        }
+      }
+    },editInput (e) {
+      const i = e.target.dataset.i
+      // 替换连续空格
+      const value = e.detail.value.replace(/ {2,}/, $ => {
+        let res = '\xa0'
+        for (let i = 1; i < $.length; i++) {
+          res += '\xa0'
+        }
+        return res
+      })
+      this.root._editVal(`${this.opts[7]}.${i}.text`, this.childs[i].text, value) // 记录编辑历史
+      this.cursor = e.detail.cursor
+    },editEnd (e) {
+      const i = e.target.dataset.i
+      this.$set(this.ctrl, 'e' + i, 0)
+      // 更新到视图
+      this.root._setData(`${this.opts[7]}.${i}.text`, e.detail.value.replace(/ {2}/g, '\xa0 '))
+      if (e.detail.cursor !== undefined) {
+        this.cursor = e.detail.cursor
+      }
+    },insert (node) {
+      setTimeout(() => {
+        const childs = this.childs.slice(0)
+        if (!childs[this.i]) {
+          childs.push(node)
+        } else if (childs[this.i].text) {
+          // 在文本中插入
+          const text = childs[this.i].text
+          const list = []
+          if (this.cursor) {
+            list.push({
+              type: 'text',
+              text: text.substring(0, this.cursor)
+            })
+          }
+          list.push(node)
+          if (this.cursor < text.length) {
+            list.push({
+              type: 'text',
+              text: text.substring(this.cursor)
+            })
+          }
+          childs.splice(this.i, 1, ...list)
+        } else {
+          childs.splice(parseInt(this.i) + 1, 0, node)
+        }
+        this.root._editVal(this.opts[7], this.childs, childs, true)
+        this.i = parseInt(this.i) + 1
+      }, 200)
+    },remove (i) {
+      const arr = this.childs.slice(0)
+      const delEle = arr.splice(i, 1)[0]
+      if (delEle.name === 'img' || delEle.name === 'video' || delEle.name === 'audio') {
+        let src = delEle.attrs.src
+        if (delEle.src) {
+          src = delEle.src.length === 1 ? delEle.src[0] : delEle.src
+        }
+        this.root.$emit('remove', {
+          type: delEle.name,
+          src
+        })
+      }
+      this.root._edit = undefined
+      this.root._maskTap()
+      this.root._editVal(this.opts[7], this.childs, arr, true)
+    },nodeTap (e) {
+      if (this.opts[5]) {
+        if (this.root._lock) return
+        this.root._lock = true
+        setTimeout(() => {
+          this.root._lock = false
+        }, 50)
+        if (this.ctrl['e' + this.i] === 3) return
+        this.root._maskTap()
+        this.root._edit = this
+        let start = this.opts[7].lastIndexOf('children.')
+        if (start !== -1) {
+          start += 9
+        } else {
+          start = 6
+        }
+        const i = parseInt(this.opts[7].substring(start, this.opts[7].lastIndexOf('.children')))
+        let parent = this.$parent
+        while (parent && parent.$options.name !== 'node') {
+          parent = parent.$parent
+        }
+        if (!parent || this.opts[7].length - parent.opts[7].length > 15) return
+        // 显示实线框
+        this.$set(this.ctrl, 'root', 1)
+        this.root._mask.push(() => this.$set(this.ctrl, 'root', 0))
+        if (this.childs.length === 1 && this.childs[0].type === 'text' && !this.ctrl.e0) {
+          this.$set(this.ctrl, 'e0', 1)
+          this.root._mask.push(() => this.$set(this.ctrl, 'e0', 0))
+          this.i = 0
+          this.cursor = this.childs[0].text.length
+        }
+        const items = this.root._getItem(parent.childs[i], i !== 0, i !== parent.childs.length - 1)
+        this.root._tooltip({
+          top: getTop(e),
+          items,
+          success: tapIndex => {
+            if (items[tapIndex] === '大小') {
+              // 改变字体大小
+              const style = parent.childs[i].attrs.style || ''
+              let value = style.match(/;font-size:([0-9]+)px/)
+              if (value) {
+                value = parseInt(value[1])
+              } else {
+                value = 16
+              }
+              this.root._slider({
+                min: 10,
+                max: 30,
+                value,
+                top: getTop(e),
+                changing: val => {
+                  if (Math.abs(val - value) > 2) {
+                    // 字号变换超过 2 时更新到视图
+                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                    value = e.detail.value
+                  }
+                },
+                change: val => {
+                  if (val !== value) {
+                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                  }
+                  this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
+                }
+              })
+            } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') {
+              const arr = parent.childs.slice(0)
+              const item = arr[i]
+              if (items[tapIndex] === '上移') {
+                arr[i] = arr[i - 1]
+                arr[i - 1] = item
+              } else {
+                arr[i] = arr[i + 1]
+                arr[i + 1] = item
+              }
+              this.root._editVal(parent.opts[7], parent.childs, arr, true)
+            } else if (items[tapIndex] === '删除') {
+              parent.remove(i)
+            } else {
+              const style = parent.childs[i].attrs.style || ''
+              let newStyle = ''
+              const item = items[tapIndex]
+              let name
+              let value
+              if (item === '斜体') {
+                name = 'font-style'
+                value = 'italic'
+              } else if (item === '粗体') {
+                name = 'font-weight'
+                value = 'bold'
+              } else if (item === '下划线') {
+                name = 'text-decoration'
+                value = 'underline'
+              } else if (item === '居中') {
+                name = 'text-align'
+                value = 'center'
+              } else if (item === '缩进') {
+                name = 'text-indent'
+                value = '2em'
+              }
+              if (style.includes(name + ':')) {
+                // 已有则取消
+                newStyle = style.replace(new RegExp(name + ':[^;]+'), '')
+              } else {
+                // 没有则添加
+                newStyle = style + ';' + name + ':' + value
+              }
+              this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, newStyle, true)
+            }
+          }
+        })
+      }
+    },mediaTap (e) {
+      if (this.opts[5]) {
+        const i = e.target.dataset.i
+        const node = this.childs[i]
+        const items = this.root._getItem(node)
+        this.root._edit = this
+        this.i = i
+        this.root._tooltip({
+          top: e.target.offsetTop - 30,
+          items,
+          success: tapIndex => {
+            switch (items[tapIndex]) {
+              case '封面':
+                // 设置封面
+                this.root.getSrc('img', node.attrs.poster || '').then(url => {
+                  this.root._editVal(`${this.opts[7]}.${i}.attrs.poster`, node.attrs.poster, url instanceof Array ? url[0] : url, true)
+                }).catch(() => { })
+                break
+              case '删除':
+                this.remove(i)
+                break
+              case '循环':
+              case '不循环':
+                // 切换循环播放
+                this.root._setData(`${this.opts[7]}.${i}.attrs.loop`, !node.attrs.loop)
+                uni.showToast({
+                  title: '成功'
+                })
+                break
+              case '自动播放':
+              case '不自动播放':
+                // 切换自动播放播放
+                this.root._setData(`${this.opts[7]}.${i}.attrs.autoplay`, !node.attrs.autoplay)
+                uni.showToast({
+                  title: '成功'
+                })
+                break
+            }
+          }
+        })
+        // 避免上层出现点击态
+        this.root._lock = true
+        setTimeout(() => {
+          this.root._lock = false
+        }, 50)
+      }
+    },changeStyle (name, i, value, oldVal) {
+      let style = this.childs[i].attrs.style || ''
+      if (style.includes(';' + name + ':' + oldVal)) {
+        // style 中已经有
+        style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value)
+      } else {
+        // 没有则新增
+        style += ';' + name + ':' + value
+      }
+      this.root._setData(`${this.opts[7]}.${i}.attrs.style`, style)
+    },
+    // #ifdef MP-WEIXIN
+    toJSON () { },
+    // #endif
+    /**
+     * @description 播放视频事件
+     * @param {Event} e
+     */
+    play (e) {
+      this.root.$emit('play')
+      // #ifndef APP-PLUS
+      if (this.root.pauseVideo) {
+        let flag = false
+        const id = e.target.id
+        for (let i = this.root._videos.length; i--;) {
+          if (this.root._videos[i].id === id) {
+            flag = true
+          } else {
+            this.root._videos[i].pause() // 自动暂停其他视频
+          }
+        }
+        // 将自己加入列表
+        if (!flag) {
+          const ctx = uni.createVideoContext(id
+            // #ifndef MP-BAIDU
+            , this
+            // #endif
+          )
+          ctx.id = id
+          this.root._videos.push(ctx)
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片点击事件
+     * @param {Event} e
+     */
+    imgTap (e) {
+      if (!this.opts[5]) {
+      const node = this.childs[e.currentTarget.dataset.i]
+      if (node.a) {
+        this.linkTap(node.a)
+        return
+      }
+      if (node.attrs.ignore) return
+      // #ifdef H5 || APP-PLUS
+      node.attrs.src = node.attrs.src || node.attrs['data-src']
+      // #endif
+      this.root.$emit('imgtap', node.attrs)
+      // 自动预览图片
+      if (this.root.previewImg) {
+        uni.previewImage({
+          // #ifdef MP-WEIXIN
+          showmenu: this.root.showImgMenu,
+          // #endif
+          // #ifdef MP-ALIPAY
+          enablesavephoto: this.root.showImgMenu,
+          enableShowPhotoDownload: this.root.showImgMenu,
+          // #endif
+          current: parseInt(node.attrs.i),
+          urls: this.root.imgList
+        })
+      }
+    } else {
+        const i = e.currentTarget.dataset.i
+        const node = this.childs[i]
+        const items = this.root._getItem(node)
+        this.root._edit = this
+        this.i = i
+        this.root._maskTap()
+        this.$set(this.ctrl, 'e' + i, 1)
+        this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0))
+        this.root._tooltip({
+          top: getTop(e),
+          items,
+          success: tapIndex => {
+            if (items[tapIndex] === '换图') {
+              // 换图
+              this.root.getSrc('img', node.attrs.src || '').then(url => {
+                this.root._editVal(this.opts[7] + '.' + i + '.attrs.src', node.attrs.src, url instanceof Array ? url[0] : url, true)
+              }).catch(() => { })
+            } else if (items[tapIndex] === '宽度') {
+              // 更改宽度
+              const style = node.attrs.style || ''
+              let value = style.match(/max-width:([0-9]+)%/)
+              if (value) {
+                value = parseInt(value[1])
+              } else {
+                value = 100
+              }
+              this.root._slider({
+                min: 0,
+                max: 100,
+                value,
+                top: getTop(e),
+                changing: val => {
+                  // 变化超过 5% 更新时视图
+                  if (Math.abs(val - value) > 5) {
+                    this.changeStyle('max-width', i, val + '%', value + '%')
+                    value = val
+                  }
+                },
+                change: val => {
+                  if (val !== value) {
+                    this.changeStyle('max-width', i, val + '%', value + '%')
+                    value = val
+                  }
+                  this.root._editVal(this.opts[7] + '.' + i + '.attrs.style', style, this.childs[i].attrs.style)
+                }
+              })
+            } else if (items[tapIndex] === '超链接') {
+              // 将图片设置为链接
+              this.root.getSrc('link', node.a ? node.a.href : '').then(url => {
+                // 如果有 a 标签则替换 href
+                if (node.a) {
+                  this.root._editVal(this.opts[7] + '.' + i + '.a.href', node.a.href, url, true)
+                } else {
+                  const link = {
+                    name: 'a',
+                    attrs: {
+                      href: url
+                    },
+                    children: [node]
+                  }
+                  node.a = link.attrs
+                  this.root._editVal(this.opts[7] + '.' + i, node, link, true)
+                }
+                wx.showToast({
+                  title: '成功'
+                })
+              }).catch(() => { })
+            } else if (items[tapIndex] === '预览图') {
+              // 设置预览图链接
+              this.root.getSrc('img', node.attrs['original-src'] || '').then(url => {
+                this.root._editVal(this.opts[7] + '.' + i + '.attrs.original-src', node.attrs['original-src'], url instanceof Array ? url[0] : url, true)
+                uni.showToast({
+                  title: '成功'
+                })
+              }).catch(() => { })
+            } else if (items[tapIndex] === '删除') {
+              this.remove(i)
+            } else {
+              // 禁用 / 启用预览
+              this.root._setData(this.opts[7] + '.' + i + '.attrs.ignore', !node.attrs.ignore)
+              uni.showToast({
+                title: '成功'
+              })
+            }
+          }
+        })
+        this.root._lock = true
+        setTimeout(() => {
+          this.root._lock = false
+        }, 50)
+      }
+    },
+    /**
+     * @description 图片长按
+     */
+    imgLongTap (e) {
+      // #ifdef APP-PLUS
+      const attrs = this.childs[e.currentTarget.dataset.i].attrs
+      if (this.opts[3] && !attrs.ignore) {
+        uni.showActionSheet({
+          itemList: ['保存图片'],
+          success: () => {
+            const save = path => {
+              uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success () {
+                  uni.showToast({
+                    title: '保存成功'
+                  })
+                }
+              })
+            }
+            if (this.root.imgList[attrs.i].startsWith('http')) {
+              uni.downloadFile({
+                url: this.root.imgList[attrs.i],
+                success: res => save(res.tempFilePath)
+              })
+            } else {
+              save(this.root.imgList[attrs.i])
+            }
+          }
+        })
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片加载完成事件
+     * @param {Event} e
+     */
+    imgLoad(e) {
+      // #ifdef MP-WEIXIN || MP-QQ
+      if (this.opts[5])
+        this.$nextTick(() => {
+          const id = this.childs[i].attrs.id || ('n' + i)
+          uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect().exec(res => {
+            this.$set(this.ctrl, 'h'+i, res[0].height)
+          })
+        })
+      // #endif
+      const i = e.currentTarget.dataset.i
+      /* #ifndef H5 || (APP-PLUS && VUE2) */
+      if (!this.childs[i].w) {
+        this.$set(this.ctrl, i, e.detail.width)
+        if (this.opts[5]) {
+          const path = this.opts[7] + '.' + i + '.attrs.'
+          if (e.detail.width < 150)
+            this.root._setData(path + 'ignore', 'T')
+          this.root._setData(path + 'width', e.detail.width.toString())
+        }
+      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
+        // 加载完毕，取消加载中占位图
+        this.$set(this.ctrl, i, 1)
+      }
+    },
+
+    /**
+     * @description 链接点击事件
+     * @param {Event} e
+     */
+    linkTap (e) {
+      if (!this.opts[5]) {
+      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+      const attrs = node.attrs || e
+      const href = attrs.href
+      this.root.$emit('linktap', Object.assign({
+        innerText: this.root.getText(node.children || []) // 链接内的文本内容
+      }, attrs))
+      if (href) {
+        if (href[0] === '#') {
+          // 跳转锚点
+          this.root.navigateTo(href.substring(1)).catch(() => { })
+        } else if (href.split('?')[0].includes('://')) {
+          // 复制外部链接
+          if (this.root.copyLink) {
+            // #ifdef H5
+            window.open(href)
+            // #endif
+            // #ifdef MP
+            uni.setClipboardData({
+              data: href,
+              success: () =>
+                uni.showToast({
+                  title: '链接已复制'
+                })
+            })
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openWeb(href)
+            // #endif
+          }
+        } else {
+          // 跳转页面
+          uni.navigateTo({
+            url: href,
+            fail () {
+              uni.switchTab({
+                url: href,
+                fail () { }
+              })
+            }
+          })
+        }
+      }
+    } else {
+        const i = e.currentTarget.dataset.i
+        const node = this.childs[i]
+        const items = this.root._getItem(node)
+        this.root._tooltip({
+          top: getTop(e),
+          items,
+          success: tapIndex => {
+            if (items[tapIndex] === '更换链接') {
+              this.root.getSrc('link', node.attrs.href).then(url => {
+                this.root._editVal(this.opts[7] + '.' + i + '.attrs.href', node.attrs.href, url, true)
+                uni.showToast({
+                  title: '成功'
+                })
+              }).catch(() => { })
+            } else {
+              this.remove(i)
+            }
+          }
+        })
+      }
+    },
+    /**
+     * @description 错误事件
+     * @param {Event} e
+     */
+    mediaError (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      // 加载其他源
+      if (node.name === 'video' || node.name === 'audio') {
+        let index = (this.ctrl[i] || 0) + 1
+        if (index > node.src.length) {
+          index = 0
+        }
+        if (index < node.src.length) {
+          this.$set(this.ctrl, i, index)
+          return
+        }
+      } else if (node.name === 'img') {
+        // #ifdef H5 && VUE3
+        if (this.opts[0] && !this.ctrl.load) return
+        // #endif
+        // 显示错误占位图
+        if (this.opts[2]) {
+          this.$set(this.ctrl, i, -1)
+        }
+      }
+      if (this.root) {
+        this.root.$emit('error', {
+          source: node.name,
+          attrs: node.attrs,
+          // #ifndef H5 && VUE3
+          errMsg: e.detail.errMsg
+          // #endif
+        })
+      }
+    }
+  }
+}
+</script>
+<style>/* #ifndef H5 || MP-ALIPAY || APP-PLUS */
+  /deep/ ._address,
+  /deep/ ._article,
+  /deep/ ._aside,
+  /deep/ ._body,
+  /deep/ ._caption,
+  /deep/ ._center,
+  /deep/ ._cite,
+  /deep/ ._footer,
+  /deep/ ._header,
+  /deep/ ._html,
+  /deep/ ._nav,
+  /deep/ ._pre,
+  /deep/ ._section {
+    display: block;
+  }
+  
+  /* #endif */
+  /deep/ ._video {
+    width: 300px;
+    height: 225px;
+    display: inline-block;
+    background-color: black;
+  }
+/* a 标签默认效果 */
+._a {
+  padding: 1.5px 0 1.5px 0;
+  color: #366092;
+  word-break: break-all;
+}
+
+/* a 标签点击态效果 */
+._hover {
+  text-decoration: underline;
+  opacity: 0.7;
+}
+
+/* 图片默认效果 */
+._img {
+  max-width: 100%;
+  -webkit-touch-callout: none;
+}
+
+/* 内部样式 */
+
+._block {
+  display: block;
+}
+
+._b,
+._strong {
+  font-weight: bold;
+}
+
+._code {
+  font-family: monospace;
+}
+
+._del {
+  text-decoration: line-through;
+}
+
+._em,
+._i {
+  font-style: italic;
+}
+
+._h1 {
+  font-size: 2em;
+}
+
+._h2 {
+  font-size: 1.5em;
+}
+
+._h3 {
+  font-size: 1.17em;
+}
+
+._h5 {
+  font-size: 0.83em;
+}
+
+._h6 {
+  font-size: 0.67em;
+}
+
+._h1,
+._h2,
+._h3,
+._h4,
+._h5,
+._h6 {
+  display: block;
+  font-weight: bold;
+}
+
+._image {
+  height: 1px;
+}
+
+._ins {
+  text-decoration: underline;
+}
+
+._li {
+  display: list-item;
+}
+
+._ol {
+  list-style-type: decimal;
+}
+
+._ol,
+._ul {
+  display: block;
+  padding-left: 40px;
+  margin: 1em 0;
+}
+
+._q::before {
+  content: '"';
+}
+
+._q::after {
+  content: '"';
+}
+
+._sub {
+  font-size: smaller;
+  vertical-align: sub;
+}
+
+._sup {
+  font-size: smaller;
+  vertical-align: super;
+}
+
+._thead,
+._tbody,
+._tfoot {
+  display: table-row-group;
+}
+
+._tr {
+  display: table-row;
+}
+
+._td,
+._th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+._th {
+  font-weight: bold;
+  text-align: center;
+}
+
+._ul {
+  list-style-type: disc;
+}
+
+._ul ._ul {
+  margin: 0;
+  list-style-type: circle;
+}
+
+._ul ._ul ._ul {
+  list-style-type: square;
+}
+
+._abbr,
+._b,
+._code,
+._del,
+._em,
+._i,
+._ins,
+._label,
+._q,
+._span,
+._strong,
+._sub,
+._sup {
+  display: inline;
+}
+
+/* #ifdef APP-PLUS */
+._video {
+  width: 300px;
+  height: 225px;
+}
+/* #endif */
+</style>

components/rider-crud/components/swipe-action/index.vue

@@ -0,0 +1,320 @@
+<template>
+	<view class="rider-swipeout-wrap" :style="{ backgroundColor: backgroundColor }">
+		<view class="rider-swipeout-item" :class="[isShowBtn ? 'swipe-action-show' : '']" :style="{ transform: 'translate(' + position.pageX + 'px,0)' }">
+			<view class="rider-swipeout-content" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend" @mousedown="handlerTouchstart" @mousemove="handlerTouchmove" @mouseup="handlerTouchend">
+				<slot name="content"></slot>
+			</view>
+			<view class="rider-swipeout-button-right-group" v-if="actions.length > 0" @touchend.stop="loop">
+				<view class="rider-swipeout-button-right-item" v-for="(item, index) in actions" :key="index" :style="{ backgroundColor: item.background || '#f7f7f7', color: item.color, width: item.width + 'px', height: item.width + 'px', }" :data-index="index" @tap="handlerButton">
+					<!-- <image :src="item.icon" v-if="item.icon" :style="{ width: px(item.imgWidth), height: px(item.imgHeight) }"></image> -->
+					<u-icon v-if="item.icon" :name="item.icon" :size="item.fontsize"></u-icon>
+					<text v-else :style="{ fontSize: `${item.fontsize}rpx`}">{{ item.name }}</text>
+				</view>
+			</view>
+			<!--actions长度设置为0，可直接传按钮进来-->
+			<view class="rider-swipeout-button-right-group" @touchend.stop="loop" @tap="handlerParentButton" v-if="actions.length === 0" :style="{ width: operateWidth + 'px', right: '-' + operateWidth + 'px' }">
+				<slot name="button"></slot>
+			</view>
+		</view>
+		<view v-if="isShowBtn && showMask" class="swipe-action_mask" @tap.stop="closeButtonGroup" @touchstart.stop.prevent="closeButtonGroup"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'riderSwipeAction',
+		emits: ['click'],
+		props: {
+			// name: '删除',
+			// color: '#fff',
+			// fontsize: 32,//单位rpx
+			// width: 80, //单位px
+			// icon: 'like.png',//此处为图片地址
+			// background: '#ed3f14'
+			actions: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			//点击按钮时是否自动关闭
+			closable: {
+				type: Boolean,
+				default: true
+			},
+			//设为false，可以滑动多行不关闭菜单
+			showMask: {
+				type: Boolean,
+				default: true
+			},
+			operateWidth: {
+				type: Number,
+				default: 80
+			},
+			params: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			//禁止滑动
+			forbid: {
+				type: Boolean,
+				default: false
+			},
+			//手动开关
+			open: {
+				type: Boolean,
+				default: false
+			},
+			//背景色
+			backgroundColor: {
+				type: String,
+				default: '#fff'
+			}
+		},
+		watch: {
+			actions(newValue, oldValue) {
+				this.updateButtonSize();
+			},
+			open(newValue) {
+				this.manualSwitch(newValue);
+			}
+		},
+		data() {
+			return {
+				//start position
+				tStart: {
+					pageX: 0,
+					pageY: 0
+				},
+				//限制滑动距离
+				limitMove: 0,
+				//move position
+				position: {
+					pageX: 0,
+					pageY: 0
+				},
+				isShowBtn: false,
+				move: false
+			};
+		},
+		mounted() {
+			this.updateButtonSize();
+		},
+		methods: {
+			swipeDirection(x1, x2, y1, y2) {
+				return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' :
+					'Down';
+			},
+			//阻止事件冒泡
+			loop() {},
+			updateButtonSize() {
+				const actions = this.actions;
+				if (actions.length > 0) {
+					const query = uni.createSelectorQuery().in(this);
+					let limitMovePosition = 0;
+					actions.forEach(item => {
+						limitMovePosition += item.width || 0;
+					});
+					this.limitMove = limitMovePosition;
+				} else {
+					this.limitMove = this.operateWidth;
+				}
+			},
+			handlerTouchstart(event) {
+				if (this.forbid) return;
+				let touches = event.touches
+				if (touches && touches.length > 1) return;
+				this.move = true;
+				touches = touches ? event.touches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				const tStart = this.tStart;
+				if (touches) {
+					for (let i in tStart) {
+						if (touches[i]) {
+							tStart[i] = touches[i];
+						}
+					}
+				}
+			},
+			swipper(touches) {
+				const start = this.tStart;
+				const spacing = {
+					pageX: touches.pageX - start.pageX,
+					pageY: touches.pageY - start.pageY
+				};
+				if (this.limitMove < Math.abs(spacing.pageX)) {
+					spacing.pageX = -this.limitMove;
+				}
+				this.position = spacing;
+				// console.log('===', this.position )
+			},
+			handlerTouchmove(event) {
+				if (this.forbid || !this.move) return;
+				const start = this.tStart;
+				let touches = event.touches ? event.touches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				if (touches) {
+					const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+					if (direction === 'Left' && Math.abs(this.position.pageX) !== this.limitMove) {
+						this.swipper(touches);
+					}
+				}
+			},
+			handlerTouchend(event) {
+				if (this.forbid || !this.move) return;
+				this.move = false;
+				const start = this.tStart;
+				let touches = event.changedTouches ? event.changedTouches[0] : {};
+				if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+					touches = {
+						pageX: event.pageX,
+						pageY: event.pageY
+					};
+				}
+				if (touches) {
+					const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
+					const spacing = {
+						pageX: touches.pageX - start.pageX,
+						pageY: touches.pageY - start.pageY
+					};
+					if (Math.abs(spacing.pageX) >= 40 && direction === 'Left') {
+						spacing.pageX = spacing.pageX < 0 ? -(this.limitMove + this.actions.length * 8 + 8) : this.limitMove;
+						this.isShowBtn = true;
+					} else {
+						spacing.pageX = 0;
+					}
+					if (spacing.pageX == 0) {
+						this.isShowBtn = false;
+					}
+					this.position = spacing;
+
+				}
+			},
+			handlerButton(event) {
+				if (this.closable) {
+					this.closeButtonGroup();
+				}
+				const dataset = event.currentTarget.dataset;
+				this.$emit('click', {
+					index: Number(dataset.index),
+					item: this.params
+				});
+			},
+			closeButtonGroup() {
+				this.position = {
+					pageX: 0,
+					pageY: 0
+				};
+				this.isShowBtn = false;
+			},
+			//控制自定义按钮菜单
+			handlerParentButton(event) {
+				if (this.closable) {
+					this.closeButtonGroup();
+				}
+			},
+			manualSwitch(isOpen) {
+				let x = 0;
+				if (isOpen) {
+					if (this.actions.length === 0) {
+						x = this.operateWidth;
+					} else {
+						let width = 0;
+						this.actions.forEach(item => {
+							width += item.width;
+						});
+						x = width;
+					}
+				}
+				this.position = {
+					pageX: -x,
+					pageY: 0
+				};
+			},
+			px(num) {
+				return uni.upx2px(num) + 'px';
+			}
+		}
+	};
+</script>
+
+<style scoped>
+
+	.rider-swipeout-wrap {
+		width: 710rpx;
+		margin: 20rpx;
+		border-radius: 16rpx;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.swipe-action-show {
+		position: relative;
+		z-index: 998;
+	}
+
+	.rider-swipeout-item {
+		width: 100%;
+		/* padding: 15px 20px; */
+		box-sizing: border-box;
+		transition: transform 0.2s ease;
+		font-size: 14px;
+		cursor: pointer;
+	}
+
+	.rider-swipeout-content {
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.rider-swipeout-button-right-group {
+		position: absolute;
+		right: -100%;
+		top: 0;
+		height: 100%;
+		z-index: 1;
+		width: 100%;
+		padding: 0 8px;
+		background: #f6f6f6;
+		display: flex;
+		align-items: center;
+	}
+
+	.rider-swipeout-button-right-item+.rider-swipeout-button-right-item {
+		margin-left: 8px;
+	}
+
+	.rider-swipeout-button-right-item {
+		border-radius: 50%;
+		/* float: left; */
+		white-space: nowrap;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.swipe-action_mask {
+		display: block;
+		opacity: 0;
+		position: fixed;
+		z-index: 997;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

components/rider-crud/components/tree-picker/index.vue

@@ -0,0 +1,624 @@
+<template xlang="wxml">
+	<view class="rider-tree">
+		<view class="rider-tree-mask" :class="{ show: showTree }" @tap="_cancel"></view>
+		<view class="rider-tree-cnt" :class="{ show: showTree }">
+			<view class="rider-tree-bar">
+				<view class="rider-tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel">取消</view>
+				<view class="rider-tree-bar-title" :style="{ color: titleColor }">{{ title }}</view>
+				<view class="rider-tree-bar-confirm" :style="{ color: confirmColor }" hover-class="hover-c" @tap="_confirm">确定</view>
+			</view>
+			<view class="rider-tree-view">
+				<scroll-view class="rider-tree-view-sc" :scroll-y="true">
+					<block v-for="(item, index) in treeList" :key="index">
+						<view
+							class="rider-tree-item"
+							:style="[{ paddingLeft: item.rank * 15 + 'px', zIndex: item.rank * -1 + 50 }]"
+							:class="{ show: item.show, last: item.lastRank, showchild: item.showChild, open: item.open }"
+						>
+							<view class="rider-tree-label" @tap.stop="onTreeItemTap(item, index)">
+								<image
+									class="rider-tree-icon"
+									:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"
+								></image>
+								{{ item.name }}
+							</view>
+							<view class="rider-tree-check" @tap.stop="onTreeItemSelect(item, index)" v-if="selectParent ? true : item.lastRank">
+								<view
+									class="rider-tree-check-yes"
+									v-if="item.checked"
+									:class="{ radio: !multiple }"
+									:style="{ 'border-color': confirmColor }"
+								>
+									<view class="rider-tree-check-yes-b" :style="{ 'background-color': confirmColor }"></view>
+								</view>
+								<view
+									class="rider-tree-check-no"
+									v-else
+									:class="{ radio: !multiple }"
+									:style="{ 'border-color': confirmColor }"
+								></view>
+							</view>
+						</view>
+					</block>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'rider-tree',
+	props: {
+		range: {
+			type: Array,
+			default: function() {
+				return []
+			}
+		},
+		idKey: {
+			//字段key值
+			type: String,
+			default: 'id'
+		},
+		nameKey: {
+			//字段value值
+			type: String,
+			default: 'name'
+		},
+		allKey: {
+			//冗余字段
+			type: String,
+			default: 'value'
+		},
+		title: {
+			//头
+			type: String,
+			default: ''
+		},
+		multiple: {
+			// 是否可以多选
+			type: Boolean,
+			default: true
+			// default: true
+		},
+		cascade: {
+			// 是否级联选择
+			type: Boolean,
+			default: false
+			// default: true
+		},
+		selectParent: {
+			//是否可以选父级
+			type: Boolean,
+			default: true
+		},
+		foldAll: {
+			//折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
+			type: Boolean,
+			default: false
+		},
+		confirmColor: {
+			// 确定按钮颜色
+			type: String,
+			default: '' // #007aff
+		},
+		cancelColor: {
+			// 取消按钮颜色
+			type: String,
+			default: '' // #757575
+		},
+		titleColor: {
+			// 标题颜色
+			type: String,
+			default: '' // #757575
+		},
+		currentIcon: {
+			// 展开时候的ic
+			type: String,
+			default:
+				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
+		},
+		defaultIcon: {
+			// 折叠时候的ic
+			type: String,
+			default:
+				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
+		},
+		lastIcon: {
+			// 没有子集的ic
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			showTree: false,
+			treeList: [],
+			selectIndex: -1,
+			returnedItem: [], //定义一个空数组
+			pids: [],
+			ancestorsIds: [],
+			childNums: []
+		}
+	},
+	computed: {},
+	methods: {
+		_show() {
+			this.showTree = true
+		},
+		_hide() {
+			this.showTree = false
+		},
+		_cancel() {
+			this._hide()
+			this.$emit('cancel', [])
+		},
+		_confirm() {
+			// 处理所选数据
+			let rt = [],
+				obj = {}
+			this.treeList.forEach((v, i) => {
+				if (this.treeList[i].checked) {
+					rt.push({
+						id: this.treeList[i].id,
+						name: this.treeList[i].name,
+						value: this.treeList[i].value
+					})
+				}
+			})
+			this._hide()
+			this.$emit('confirm', rt)
+		},
+		//扁平化树结构
+		_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
+			list.forEach(item => {
+				this.treeList.push({
+					id: item[this.idKey],
+					name: item[this.nameKey],
+					value: item[this.allKey],
+					source: item,
+					parentId, // 父级id数组
+					parents, // 父级id数组
+					rank, // 层级
+					showChild: false, //子级是否显示
+					open: false, //是否打开
+					show: rank === 0, // 自身是否显示
+					hideArr: [],
+					orChecked: item.checked ? item.checked : false,
+					checked: item.checked ? item.checked : false,
+					childNum: 0
+				})
+
+				if (Array.isArray(item.children) && item.children.length > 0) {
+					// console.log(item)
+					let parentid = [...parentId],
+						parentArr = [...parents]
+					delete parentArr.children
+					parentid.push(item[this.idKey])
+					parentArr.push({
+						[this.idKey]: item[this.idKey],
+						[this.nameKey]: item[this.nameKey],
+						[this.allKey]: item[this.allKey]
+					})
+					this._renderTreeList(item.children, rank + 1, parentid, parentArr)
+				} else {
+					this.treeList[this.treeList.length - 1].lastRank = true
+				}
+			})
+		},
+		// 处理默认选择
+		_defaultSelect() {
+			this.treeList.forEach((v, i) => {
+				if (v.checked) {
+					this.treeList.forEach((v2, i2) => {
+						if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
+							v2.show = true
+							if (v.parentId.includes(v2.id)) {
+								v2.showChild = true
+								v2.open = true
+							}
+						}
+					})
+				}
+			})
+		},
+		getOwn(id, arr) {
+			//利用foreach循环遍历
+			arr.forEach(item => {
+				//判断递归结束条件
+				if (item[this.idKey] == id) {
+					// 存储数据到空数组
+					this.returnedItem = item
+				} else if (item.children != null) {
+					//判断chlidren是否有数据
+					//递归调用
+					this.getOwn(id, item.children)
+				}
+			})
+			return this.returnedItem
+		},
+		setShow(id, arr, isShow) {
+			arr.forEach((item, index) => {
+				if (item.parentId.includes(id)) {
+					this.treeList[index].showChild = isShow
+					this.treeList[index].show = isShow
+				} else if (item.children !== undefined) {
+					this.setShow(id, item.children, isShow)
+				}
+			})
+		},
+		// 点击
+		onTreeItemTap(item, index) {
+			// console.log(item)
+			if (item.lastRank === true) {
+				//点击最后一级时触发事件
+				this.treeList[index].checked = !this.treeList[index].checked
+				this._fixMultiple(index)
+				return
+			}
+			let id = item.id
+			item.showChild = !item.showChild
+			// qingqian
+			if (item.showChild) {
+				const range = this.range
+				const parentIdArr = item.parentId
+				// 找到当前元素
+				const own = this.getOwn(id, range)
+				const checkedChildren = own.children
+				// 子元素插入的索引位置
+				const nextIndex = this.treeList.findIndex(itemT => itemT.id === item.id)
+				if (checkedChildren === undefined || checkedChildren.length < 1) {
+					return
+				}
+				// 子节点数量
+				this.treeList[index].childNum = checkedChildren.length
+				const newRank = item.rank + 1
+				checkedChildren.forEach(itemC => {
+					const childObj = {
+						id: itemC[this.idKey],
+						name: itemC[this.nameKey],
+						value: itemC[this.allKey],
+						source: {},
+						parentId: [item.id], // 父级id数组
+						parents: [item], // 父级id数组
+						rank: newRank, // 层级
+						showChild: false, //子级是否显示
+						open: false, //是否打开
+						show: 1, // 自身是否显示
+						hideArr: [],
+						lastRank: itemC.children && itemC.children.length > 0 ? false : true,
+						orChecked: this.treeList[index].checked,
+						checked: this.cascade ? this.treeList[index].checked : false
+					}
+					if (!this.treeList.some(itemT => itemT.id === itemC[this.idKey])) {
+						this.treeList.splice(nextIndex + 1, 0, childObj)
+					}
+				})
+			}
+			// 展开/隐藏子级/孙级
+			let list = this.treeList
+			item.open = item.showChild ? true : !item.open
+			list.forEach((childItem, i) => {
+				if (item.showChild === false) {
+					//隐藏所有子级
+					if (!childItem.parentId.includes(id)) {
+						return
+					}
+					//TODO: 修改
+					if (!this.foldAll) {
+						if (childItem.lastRank !== true && !childItem.open) {
+							childItem.showChild = false
+							this.setShow(childItem.id, this.treeList, false)
+						}
+						// 为隐藏的内容添加一个标记
+						if (childItem.show) {
+							childItem.hideArr[item.rank] = id
+						}
+					} else {
+						if (childItem.lastRank !== true) {
+							childItem.showChild = false
+							// 继续隐藏子级的的子级
+							this.setShow(childItem.id, this.treeList, false)
+						}
+					}
+					if (childItem.children !== undefined) {
+						childItem.children.forEach((childItem1, i1) => {
+							if (!childItem1.parentId.includes(childItem.id)) {
+								return
+							}
+							childItem.children[i1].showChild = false
+							childItem.children[i1].show = false
+						})
+					}
+					childItem.show = false
+				} else {
+					// 打开子集
+					if (childItem.parentId[childItem.parentId.length - 1] === id) {
+						childItem.show = true
+					}
+					// 打开被隐藏的子集
+					if (childItem.parentId.includes(id) && !this.foldAll) {
+						// console.log(childItem.hideArr)
+						if (childItem.hideArr[item.rank] === id) {
+							childItem.show = true
+							if (childItem.open && childItem.showChild) {
+								childItem.showChild = true
+							} else {
+								childItem.showChild = false
+							}
+							childItem.hideArr[item.rank] = null
+						}
+					}
+				}
+			})
+		},
+		// 通过父id处理子级
+		syncChecked(trees, pid, checked) {
+			trees.forEach((item, index) => {
+				if (item.parentId.includes(pid)) {
+					this.treeList[index].checked = checked
+					this.syncChecked(trees, item.id, checked)
+				} else if (item.children !== undefined) {
+					this.syncChecked(item.children, pid, checked)
+				}
+			})
+		},
+		// 获取父级往上所有层级的id 并同步状态
+		setAncestors(pids, checked) {
+			this.treeList.forEach((item, index) => {
+				if (pids.includes(item.id)) {
+					if (checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
+						// 子级全部选中, 父级才选中
+						this.treeList[index].checked = true
+					} else {
+						this.treeList[index].checked = false
+					}
+					this.setAncestors(item.parentId, checked)
+				}
+			})
+		},
+		onTreeItemSelect(item, index) {
+			this.treeList[index].checked = !this.treeList[index].checked
+			// 选父级, 子级自动全选
+			if (this.cascade) {
+				this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
+			}
+
+			if (item.rank > 0) {
+				item.parentId.forEach((pid, indexP) => {
+					const parent = this.treeList.filter(i => i.id === pid)
+					const childNum = parent.length > 0 ? parent[0].childNum : 0
+					if (this.childNums[pid] === undefined) {
+						this.childNums[pid] = 1
+					} else if (this.childNums[pid] < childNum) {
+						this.childNums[pid]++
+					}
+				})
+				//子级选择/选满/取消选择, 父级往上同步状态
+				if (this.cascade) {
+					this.setAncestors(item.parentId, this.treeList[index].checked)
+				}
+			}
+			this._fixMultiple(index)
+		},
+		// 处理单选多选
+		_fixMultiple(index) {
+			if (!this.multiple) {
+				// 如果是单选
+				this.treeList.forEach((v, i) => {
+					if (i != index) {
+						this.treeList[i].checked = false
+					} else {
+						this.treeList[i].checked = true
+					}
+				})
+			}
+		},
+		// 重置数据
+		_reTreeList() {
+			this.treeList.forEach((v, i) => {
+				this.treeList[i].checked = v.orChecked
+			})
+		},
+		_initTree(range = this.range) {
+			this.treeList = []
+			this._renderTreeList(range)
+			this.$nextTick(() => {
+				this._defaultSelect(range)
+			})
+		}
+	},
+	watch: {
+		range(list) {
+			this._initTree(list)
+		},
+		multiple() {
+			if (this.range.length) {
+				this._reTreeList()
+			}
+		},
+		selectParent() {
+			if (this.range.length) {
+				this._reTreeList()
+			}
+		}
+	},
+	mounted() {
+		this._initTree()
+	}
+}
+</script>
+
+<style scoped>
+.rider-tree-mask {
+	position: fixed;
+	top: 0rpx;
+	right: 0rpx;
+	bottom: 0rpx;
+	left: 0rpx;
+	z-index: 9998;
+	background-color: rgba(0, 0, 0, 0.6);
+	opacity: 0;
+	transition: all 0.3s ease;
+	visibility: hidden;
+}
+
+.rider-tree-mask.show {
+	visibility: visible;
+	opacity: 1;
+}
+
+.rider-tree-cnt {
+	position: fixed;
+	top: 0rpx;
+	right: 0rpx;
+	bottom: 0rpx;
+	left: 0rpx;
+	z-index: 19999;
+	top: 15vh;
+	transition: all 0.3s ease;
+	transform: translateY(100%);
+}
+
+.rider-tree-cnt.show {
+	transform: translateY(0);
+}
+
+.rider-tree-bar {
+	background-color: #fff;
+	height: 72rpx;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	border-bottom-width: 1rpx !important;
+	border-bottom-style: solid;
+	border-bottom-color: #f5f5f5;
+	font-size: 32rpx;
+	color: #757575;
+	line-height: 1;
+}
+
+.rider-tree-bar-confirm {
+	color: #007aff;
+}
+
+.rider-tree-view {
+	position: absolute;
+	top: 0rpx;
+	right: 0rpx;
+	bottom: 0rpx;
+	left: 0rpx;
+	top: 72rpx;
+	background-color: #fff;
+	padding-top: 20rpx;
+	padding-right: 20rpx;
+	padding-bottom: 20rpx;
+	padding-left: 20rpx;
+}
+
+.rider-tree-view-sc {
+	height: 100%;
+	overflow: hidden;
+}
+
+.rider-tree-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 26rpx;
+	color: #757575;
+	line-height: 1;
+	height: 0;
+	opacity: 0;
+	transition: 0.2s;
+	position: relative;
+	overflow: hidden;
+}
+
+.rider-tree-item.show {
+	height: 80rpx;
+	opacity: 1;
+}
+
+.rider-tree-item.showchild:before {
+	transform: rotate(90deg);
+}
+
+.rider-tree-item.last:before {
+	opacity: 0;
+}
+
+.rider-tree-icon {
+	width: 26rpx;
+	height: 26rpx;
+	margin-right: 8rpx;
+}
+
+.rider-tree-label {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	height: 100%;
+	line-height: 1.2;
+}
+
+.rider-tree-check {
+	width: 40px;
+	height: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.rider-tree-check-yes,
+.rider-tree-check-no {
+	width: 20px;
+	height: 20px;
+	border-top-left-radius: 20%;
+	border-top-right-radius: 20%;
+	border-bottom-right-radius: 20%;
+	border-bottom-left-radius: 20%;
+	border-top-width: 1rpx;
+	border-left-width: 1rpx;
+	border-bottom-width: 1rpx;
+	border-right-width: 1rpx;
+	border-style: solid;
+	border-color: #007aff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.rider-tree-check-yes-b {
+	width: 12px;
+	height: 12px;
+	border-top-left-radius: 20%;
+	border-top-right-radius: 20%;
+	border-bottom-right-radius: 20%;
+	border-bottom-left-radius: 20%;
+	background-color: #007aff;
+}
+
+.rider-tree-check .radio {
+	border-top-left-radius: 50%;
+	border-top-right-radius: 50%;
+	border-bottom-right-radius: 50%;
+	border-bottom-left-radius: 50%;
+}
+
+.rider-tree-check .radio .rider-tree-check-yes-b {
+	border-top-left-radius: 50%;
+	border-top-right-radius: 50%;
+	border-bottom-right-radius: 50%;
+	border-bottom-left-radius: 50%;
+}
+
+.hover-c {
+	opacity: 0.6;
+}
+</style>

components/rider-crud/index.vue

@@ -0,0 +1,475 @@
+<template>
+	<view>
+		<!-- head -->
+		<view class="head-area" :style="{ height: `${headHeight}rpx` }">
+			<u-navbar
+				:is-fixed="false"
+				:border-bottom="false"
+				:is-back="true"
+				:custom-back="navBack"
+				:title="isWeixin ? '' : option.navTitle"
+				:back-icon-name="option.navBackIcon || 'arrow-leftward'"
+				back-icon-color="#fff"
+				back-icon-size="35"
+				:background="{ background: 'transparent' }"
+				title-color="#fff"
+			>
+				<view class="nav-title" v-if="isWeixin">{{ option.navTitle }}</view>
+				<view class="nav-right" slot="right" v-if="option.manageBtn" @click="manageSwitch = !manageSwitch">
+					{{ manageSwitch ? '完成' : '管理' }}
+				</view>
+			</u-navbar>
+			<view class="search-item" v-if="option.searchShow">
+				<u-search
+					placeholder="搜索内容"
+					v-model="searchValue"
+					@search="onSearch(searchValue)"
+					@clear="onSearch(searchValue)"
+					shape="square"
+					bg-color="#8EAAFF"
+					placeholder-color="#5470C4"
+					color="#fff"
+					search-icon-color="#ffffffE5"
+					:clearabled="true"
+					:show-action="false"
+				></u-search>
+			</view>
+		</view>
+		<!-- head seat -->
+		<view :style="{ height: `${headHeight}rpx` }"></view>
+		<!-- list -->
+		<block v-if="data && data.length > 0">
+			<view class="" v-for="(item, index) in data" :key="index">
+				<crud-item
+					:ref="`crud-item${index}`"
+					:list="data"
+					:node="item"
+					:option="option"
+					:nodeIndex="index"
+					:checkList="checkList"
+					:checkShow="manageSwitch"
+					:random-num="randomNum"
+				></crud-item>
+			</view>
+			<view style="padding: 20rpx 0;"><slot name="loadmore"></slot></view>
+		</block>
+		<!-- foot -->
+		<block v-if="manageSwitch">
+			<view :style="[{ height: isFullSucreen ? '168rpx' : '100rpx' }]"></view>
+			<view class="foot flex" v-if="manageSwitch" :class="[isFullSucreen ? 'foot-ipx' : '']">
+				<checkbox-group @change="onCheckedAll">
+					<label class="well-check flex flex-c">
+						<checkbox
+							color="#fff"
+							style="transform: scale(0.7)"
+							value="allSelect"
+							:checked="checkedAll"
+							class="curdCheck"
+						></checkbox>
+						<text class="checkAll">全选 ({{ checkList.length }})</text>
+					</label>
+				</checkbox-group>
+				<view class=""><view class="foot-del-btn" @click="onRemove">删除</view></view>
+			</view>
+		</block>
+		<!-- form -->
+		<u-popup
+			v-model="createShow"
+			safe-area-inset-bottom
+			border-radius="14"
+			mode="bottom"
+			closeable
+			@close="onCreateClose"
+			:mask-close-able="false"
+		>
+			<view class="popup-head"><u-section :title="action" :right="false" line-color="#5f88ff"></u-section></view>
+			<scroll-view scroll-y="true" style="height: 68vh;">
+				<view class="form">
+					<block v-if="formType == 'uviewForm'">
+						<u-form :model="value" ref="uForm" :label-width="option.labelWidth || 160"><slot name="form"></slot></u-form>
+					</block>
+					<block v-else><slot name="form"></slot></block>
+				</view>
+			</scroll-view>
+			<view class="form-btn">
+				<u-button
+					v-if="action != '查看'"
+					@click="onSubmit"
+					:loading="disabled"
+					shape="circle"
+					ripple
+					:custom-style="{ width: '100%', background: 'linear-gradient(90deg, #69b0ff, #5f88ff)', color: '#fff' }"
+				>
+					保存
+				</u-button>
+			</view>
+		</u-popup>
+		<!-- addBtn -->
+		<movable-area class="movable-area">
+			<movable-view class="movable-view" :x="moveX" :y="moveY" direction="all">
+				<image src="@/static/images/crud/create.png" @click="onCreateOpen"></image>
+			</movable-view>
+		</movable-area>
+		<!-- empty -->
+		<slot name="empty">
+			<block v-if="data.length == 0">
+				<u-empty text="工作再忙，也要记得喝水～" margin-top="200" :src="require('@/static/images/crud/empty.png')"></u-empty>
+			</block>
+		</slot>
+	</view>
+</template>
+
+<script>
+import crudItem from './components/crud-item/index'
+import { checkModel } from './util/tool.js'
+import validate from './util/validate.js'
+export default {
+	name: 'rider-crud',
+	components: { crudItem },
+	props: {
+		value: {}, // 表单
+		data: Array, // 列表
+		// 配置
+		option: {
+			type: Object,
+			default: {
+				column: []
+			}
+		},
+		// 表单类型
+		formType: {
+			type: String,
+			default: 'uviewForm'
+		},
+		// 返回事件
+		navBack: {
+			type: Function,
+			default: null
+		},
+		rules: {}, // 校验规则
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isFullSucreen: checkModel(),
+			moveX: 320, //添加按钮坐标
+			moveY: 580,
+			checkedAll: false, //全选
+			checkList: [], //选中值
+			createShow: false, //form弹窗
+			disabled: false, // 操作按钮
+			action: '新增',
+			searchValue: '',
+			isWeixin: false,
+			manageSwitch: false,
+			headHeight: 0,
+			randomNum: Math.round(Math.random() * 99999) // 随机数，防止uni.on重复调用
+		}
+	},
+	watch: {
+		manageSwitch: {
+			handler(newVal, oldVal) {
+				this.checkList = []
+				this.checkedAll = false
+			},
+			deep: true,
+			immediate: true
+		},
+		'option.searchShow': {
+			handler(newVal, oldVal) {
+				const that = this
+				this.headHeight = newVal ? 192 : 98
+				// #ifndef H5
+				uni.getSystemInfo({
+					success: function(res) {
+						const statusBarHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ? 44 : 48)
+						that.headHeight = newVal ? statusBarHeight + 192 : statusBarHeight + 98
+					}
+				})
+				// #endif
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	// 通信事件
+	created() {
+		let that = this
+		uni.$on(`action${this.randomNum}`, ({ index }, i, list) => {
+			that.onActionClick({ index }, i, list)
+		})
+		uni.$on(`checked${this.randomNum}`, (e, id) => {
+			that.onChecked(e, id)
+		})
+
+		// #ifdef MP-WEIXIN
+		this.isWeixin = true
+		//  #endif
+		// #ifndef MP-WEIXIN
+		this.isWeixin = false
+		// #endif
+	},
+
+	methods: {
+		setLazyLoad(func) {
+			this.option.lazyLoad = func
+			setTimeout(() => {
+				this.data.forEach((d, i) => {
+					this.$refs[`crud-item${i}`][0].setLazyLoad(func)
+				})
+			}, 100)
+		},
+
+		// 选择
+		onChecked(e, id) {
+			const i = e.detail.value[0]
+			if (i) this.checkList.push(i)
+			else this.checkList.splice(this.checkList.findIndex(e => e === id), 1)
+			this.checkedAll = this.checkList.length === this.data.length
+		},
+		// 全选
+		onCheckedAll() {
+			if (!this.checkedAll) {
+				this.checkedAll = true
+				this.checkList = []
+				this.data.map(e => {
+					this.checkList.push(e.id)
+				})
+			} else {
+				this.checkedAll = false
+				this.checkList = []
+			}
+		},
+		// 元素点击
+		onClick(item, index) {
+			const action = { name: '查看' }
+			const data = JSON.parse(JSON.stringify(item))
+			this.$emit('input', data)
+			this.$emit('action-click', { index, data, actionIndex: -1, action, done: this.show })
+			this.action = action.name
+		},
+		// 底部删除
+		onRemove() {
+			if (this.checkList.length === 0) {
+				uni.showToast({
+					title: '请选择至少一条数据',
+					icon: 'none',
+					duration: 2000
+				})
+				return
+			}
+			this.$emit('del', this.checkList.join(','))
+		},
+		// 打开弹窗
+		onCreateOpen() {
+			this.action = '新增'
+			this.$emit('action-click', { action: { name: this.action }, done: this.show })
+		},
+		// 关闭弹窗
+		onCreateClose() {
+			this.hide()
+		},
+		// 添加保存
+		onSubmit() {
+			this.disabled = true
+			const data = JSON.parse(JSON.stringify(this.value))
+			if (this.formType == 'uviewForm') {
+				// #ifdef MP
+				validate(this.value, this.rules)
+					.then(() => {
+						this.$emit('submit', data, this.action, this.unloading, this.hide)
+					})
+					.catch(() => {
+						this.unloading()
+					})
+				// #endif
+				// #ifndef MP
+				this.$refs.uForm.validate(valid => {
+					if (valid) {
+						this.$emit('submit', data, this.action, this.unloading, this.hide)
+					} else {
+						this.unloading()
+					}
+				})
+				// #endif
+			} else {
+				validate(this.value, this.rules)
+					.then(() => {
+						debugger
+						this.$emit('submit', data, this.action, this.unloading, this.hide)
+					})
+					.catch(() => {
+						this.unloading()
+					})
+			}
+		},
+		// 左滑按钮点击
+		onActionClick({ index }, i, list) {
+			let action
+			if (index == -1) action = { name: '查看' }
+			else action = this.option.actions[index]
+			const data = JSON.parse(JSON.stringify(list[i]))
+			if (['新增', '编辑', '查看'].includes(action.name)) this.$emit('input', data)
+			this.$emit('action-click', { index: i, data, actionIndex: index, action, done: this.show })
+			// this.action = action.name
+			this.$set(this, 'action', action.name)
+		},
+
+		//全选删除后回调
+		allCheckHide(val) {
+			if (this.checkedAll) this.manageSwitch = val
+			this.checkList = []
+		},
+
+		// 搜索
+		onSearch(val) {
+			this.$emit('search', val)
+		},
+		show() {
+			this.createShow = true
+			setTimeout(() => {
+				if (this.rules && this.$refs['uForm'] && typeof this.$refs['uForm'].setRules == 'function') {
+					this.$refs['uForm'].setRules(this.rules)
+				}
+			}, 100)
+		},
+		hide() {
+			this.createShow = false
+			this.disabled = false
+			this.$emit('input', {})
+			this.$emit('update:readonly', false)
+		},
+		unloading() {
+			this.disabled = false
+		},
+		hideChildren() {
+			this.data.forEach((d, i) => {
+				this.$refs[`crud-item${i}`][0].hide()
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.flex-one {
+	flex: 1;
+}
+
+.head-area {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 999;
+	width: 100%;
+	background: url('/static/images/head_bg.png') no-repeat center bottom;
+	background-size: 100% 100%;
+
+	.nav-right {
+		color: #fff;
+		font-size: 30rpx;
+		font-weight: normal;
+		padding-right: 30rpx;
+	}
+
+	.nav-title {
+		color: #fff;
+		font-size: 32rpx;
+		font-weight: normal;
+	}
+
+	.search-item {
+		padding: 0 30rpx;
+	}
+}
+
+.head-h {
+	height: 200rpx;
+}
+
+/* 底部 */
+/* 适配 */
+.foot-ipx {
+	bottom: 68rpx !important;
+}
+
+.foot-ipx::after {
+	content: ' ';
+	position: fixed;
+	bottom: 0 !important;
+	left: 0;
+	right: 0;
+	height: 68rpx !important;
+	width: 100%;
+	background: #fff;
+}
+
+.foot {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 99;
+	width: 100%;
+	padding: 0 26rpx;
+	height: 100rpx;
+	background: #fff;
+	border-top: 2px solid #eee;
+
+	&-del-btn {
+		width: 160rpx;
+		height: 64rpx;
+		line-height: 64rpx;
+		font-size: 26rpx;
+		// color: #fff;
+		text-align: center;
+		border-radius: 34px;
+		// background: linear-gradient(180deg, #5f88ff, #69b0ff);
+		color: #f56c6c;
+		background: #fef0f0;
+	}
+}
+
+.form {
+	padding: 0 30rpx 20rpx;
+}
+
+.popup-head {
+	padding: 36rpx 30rpx;
+	border-bottom: 2rpx dashed #efefef;
+}
+
+.form-btn {
+	margin: 30rpx;
+	min-height: 80rpx;
+}
+
+.movable-area {
+	height: 100vh;
+	width: 100%;
+	top: 0;
+	position: fixed;
+	pointer-events: none;
+
+	.movable-view {
+		width: 96rpx;
+		height: 96rpx;
+		pointer-events: auto;
+
+		image {
+			width: 96rpx;
+			height: 96rpx;
+		}
+	}
+}
+</style>

components/rider-crud/util/tool.js

@@ -0,0 +1,22 @@
+// 判断是否全面屏
+export function checkModel(isFlag) {
+	uni.getSystemInfo({
+		success: res => {
+			let model = res.model;
+			for (var i = 11; i < 30; i++) {
+				isFlag = (model.indexOf("iPhone X") > -1 || model.indexOf("iPhone " + i) > -1) ? true : false
+			}
+		}
+	})
+	return isFlag
+}
+
+// 获取字典文本
+export function getDicLabel(id, list, props = { label: 'dictValue', value: 'dictKey' }) {
+	if (!list) return {}
+	for (let i = 0; i < list.length; i++) {
+		const item = list[i]
+		if (item[props.value] == id) return item[props.label]
+		if (item.children) return getDicLabel(id, item.children, props)
+	}
+}

components/rider-crud/util/validate.js

@@ -0,0 +1,47 @@
+export default (form, rules) => {
+	return new Promise((resolve, reject) => {
+		if (form && rules) {
+			let pass = true
+			a: for (let key in rules) {
+				let rule = rules[key]
+				if (Array.isArray(rule)) {
+					for (let i = 0; i < rule.length; i++) {
+						const result = validate(rule[i], form[key])
+						if (!result) {
+							pass = false
+							break a
+						}
+					}
+				} else {
+					const result = validate(rule, form[key])
+					if (!result) {
+						pass = false
+						break a
+					}
+				}
+			}
+			if (pass) resolve()
+			else reject()
+		} else {
+			reject('需校验的对象为空')
+		}
+	})
+}
+
+const validate = (rule, value) => {
+	let pass = true
+	if (rule && rule.pattern && !rule.pattern.test(value)) {
+		uni.showToast({
+			title: rule.message || '校验失败',
+			icon: 'none'
+		})
+		pass = false
+	} else if (rule && rule.required && !value) {
+		uni.showToast({
+			title: rule.message || '校验失败',
+			icon: 'none'
+		})
+		pass = false
+	}
+	return pass
+}

deploy.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+scp -r ./unpackage/dist/build/h5/* root@127.0.0.1:/data/wwwroot/rider.bladex.vip
+

http/api.js

@@ -0,0 +1,83 @@
+import {
+	clientId,
+	clientSecret
+} from '@/common/setting'
+import {
+	options
+} from '@/http/config.js';
+import {
+	Base64
+} from '@/utils/base64.js';
+import Request from '@/utils/luch-request/index.js';
+const http = new Request(options);
+http.interceptors.request.use((config) => { // 可使用async await 做异步操作
+	// 假设有token值需要在头部需要携带
+	let accessToken = uni.getStorageSync('accessToken');
+	if (accessToken) {
+		config.header['Blade-Auth'] = 'bearer ' + accessToken;
+	}
+	// 安全请求header
+	config.header['Blade-Requested-With'] = 'BladeHttpRequest';
+	// 客户端认证参数
+	config.header['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
+	
+	// #ifndef H5
+	let url = config.url
+	if (process.env.NODE_ENV == 'development' && !url.startsWith("http")) {
+		url = url.substring(url.indexOf('/api') + 4)
+		config.url = url
+	}
+	// #endif
+
+	// 额外参数
+	// config.data = config.data || {};
+	// config.data.pf = uni.getSystemInfoSync().platform;
+	// config.data.sys = uni.getSystemInfoSync().system;
+
+	// 演示custom 用处
+	// if (config.custom.auth) {
+	//   config.header.token = 'token'
+	// }
+	// if (config.custom.loading) {
+	//  uni.showLoading()
+	// }
+	/**
+	 /* 演示
+	 if (!token) { // 如果token不存在，return Promise.reject(config) 会取消本次请求
+	    return Promise.reject(config)
+	  }
+	 **/
+	return config
+}, config => { // 可使用async await 做异步操作
+	return Promise.reject(config)
+})
+http.interceptors.response.use((response) => {
+	// 若有数据返回则通过
+	if (response.data.access_token || response.data.key) {
+		return response.data
+	}
+	// 服务端返回的状态码不等于200，则reject()
+	if (response.data.code !== 200) {
+		uni.showToast({
+			title: response.data.msg,
+			icon: 'none'
+		});
+		return Promise.reject(response);
+	}
+	return response.data;
+}, (response) => {
+	/*  对响应错误做点什么 （statusCode !== 200）*/
+	uni.showToast({
+		title: response.data.msg,
+		icon: 'none'
+	});
+	if (response.statusCode == 401) {
+		const pages = getCurrentPages()
+		const currentPage = pages[pages.length - 1]
+		uni.redirectTo({
+			url: `/pages/login/login-account?redirect=/${currentPage.route}`
+		})
+	}
+	return Promise.reject(response)
+})
+export default http;

http/config.js

@@ -0,0 +1,44 @@
+import {
+	devUrl,
+	prodUrl,
+	contentType
+} from '@/common/setting'
+
+var options = {
+	baseURL: process.env.NODE_ENV === 'development' ? devUrl : prodUrl,
+	header: {
+		'Content-Type': contentType
+	},
+	method: 'POST',
+	dataType: 'json',
+	// #ifndef MP-ALIPAY || APP-PLUS
+	responseType: 'text',
+	// #endif
+	// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
+	custom: {}, // 全局自定义参数默认值
+	// #ifdef MP-ALIPAY || MP-WEIXIN
+	timeout: 30000,
+	// #endif
+	// #ifdef APP-PLUS
+	sslVerify: true,
+	// #endif
+	// #ifdef H5
+	// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
+	//withCredentials: false,
+	// #endif
+	// #ifdef APP-PLUS
+	firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
+	// #endif
+	// 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
+	// getTask: (task, options) => {
+	// 相当于设置了请求超时时间500ms
+	//   setTimeout(() => {
+	//     task.abort()
+	//   }, 500)
+	// },
+	// 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
+	// validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
+	// 	return statusCode >= 200 && statusCode < 300
+	// }
+};
+export { options };

http/install.js

@@ -0,0 +1,18 @@
+// 获取api目录所有js文件
+const files = require.context('@/api', false, /\.js$/)
+// 此处第二个参数vm，就是我们在页面使用的this，可以通过vm获取vuex等操作
+const install = (Vue, vm) => {
+	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api下(因为vm就是this，也即this.$u.api)
+	// 自动将所有api挂载到vm.$u.api中
+	vm.$u.api = {}
+	files.keys().forEach(key => {
+		const api = files(key).default
+		for (let item in api) {
+			vm.$u.api[item] = api[item]
+		}
+	})
+}
+
+export default {
+	install
+}

main.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import App from './App'
+import store from '@/store';
+
+Vue.config.productionTip = false;
+
+App.mpType = 'app';
+
+// 引入全局uView
+import uView from 'uview-ui'
+Vue.use(uView);
+
+// 引入vuex
+const vuexStore = require("@/store/$u.mixin.js");
+Vue.mixin(vuexStore);
+
+// 创建对象
+const app = new Vue({
+	store,
+    ...App
+});
+
+// 接口集中管理
+import httpInstall from '@/http/install.js'
+Vue.use(httpInstall, app)
+
+import http from '@/http/api.js'
+Vue.prototype.$http = http
+
+// 公共函数
+import globalFunc from '@/utils/func.js'
+Vue.use(globalFunc, app);
+
+app.$mount()

manifest.json

@@ -0,0 +1,155 @@
+{
+	"name": "住房保障预约",
+	"appid": "__UNI__8FD82FF",
+	"description": "",
+	"versionName": "2.0.0",
+	"versionCode": "100",
+	"transformPx": false,
+	/* 5+App特有相关 */
+	"app-plus": {
+		"safearea": {
+			"bottom": {
+				"offset": "none"
+			}
+		},
+		"usingComponents": true,
+		"nvueCompiler": "uni-app",
+		"compilerVersion": 3,
+		"splashscreen": {
+			"alwaysShowBeforeRender": true,
+			"waiting": true,
+			"autoclose": true,
+			"delay": 0
+		},
+		/* 模块配置 */
+		"modules": {},
+		/* 应用发布信息 */
+		"distribute": {
+			/* android打包配置 */
+			"android": {
+				"permissions": [
+					"<uses-feature android:name=\"android.hardware.camera\"/>",
+					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+				]
+			},
+			/* ios打包配置 */
+			"ios": {},
+			/* SDK配置 */
+			"sdkConfigs": {
+				"ad": {}
+			}
+		},
+		"uniStatistics": {
+			"enable": false
+		}
+	},
+	/* 快应用特有相关 */
+	"quickapp": {},
+	/* 小程序特有相关 */
+	"mp-weixin": {
+		"appid": "wxa79f37f7f9375f47",
+		"setting": {
+			"urlCheck": false,
+			"minified": true,
+			"postcss": true,
+			"es6": true
+		},
+		"usingComponents": true,
+		"uniStatistics": {
+			"enable": false
+		}
+	},
+	"mp-alipay": {
+		"usingComponents": true,
+		"uniStatistics": {
+			"enable": false
+		}
+	},
+	"mp-baidu": {
+		"usingComponents": true,
+		"uniStatistics": {
+			"enable": false
+		}
+	},
+	"mp-toutiao": {
+		"usingComponents": true,
+		"setting": {
+			"es6": true,
+			"minified": true,
+			"postcss": true,
+			"urlCheck": false
+		},
+		"uniStatistics": {
+			"enable": false
+		}
+	},
+	"h5": {
+		"template": "template.h5.html",
+		"publicPath": "/housingAssuranceBookingMobile/",
+		"router": {
+			"mode": "hash",
+			"base": "/housingAssuranceBookingMobile"
+		},
+		"optimization": {
+			"treeShaking": {
+				"enable": true
+			}
+		},
+		"devServer": {
+			"proxy": {
+				"/api": {
+					"target": "http://192.168.3.111:8181",
+					// "target" : "http://192.168.3.100:2891",
+					//"target" : "https://rider.bladex.vip/api",
+					"pathRewrite": {
+						"^/api": "/"
+					}
+				},
+				"/epoint-web-cs": {
+					"target": "https://gxqzzfbzzx.cn",
+					"pathRewrite": {
+						"^/epoint-web-cs": "/"
+					}
+				}
+			},
+			"port": ""
+		},
+		"uniStatistics": {
+			"enable": false
+		},
+		"sdkConfigs": {
+			"maps": {
+				"qqmap": {
+					"key": ""
+				}
+			}
+		}
+	},
+	"uniStatistics": {
+		"enable": false
+	},
+	"mp-qq": {
+		"uniStatistics": {
+			"enable": false
+		}
+	}
+}

package.json

@@ -0,0 +1,19 @@
+{
+    "id": "ba-tree-picker",
+    "displayName": "ba-tree-picker树形层级选择器（支持单选、多选、父级选择、映射）",
+    "version": "1.2",
+    "description": "树形层级选择器，支持单选、多选、父级选择 、Object对象属性自定义映射、自定义样式等，采用弹窗形式，样式和比例参照uniapp官方的picker和uni-data-picker组件",
+    "keywords": [
+        "选择器",
+        "树形",
+        "层级",
+        "多选",
+        "ba-tree-picker"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

pages.json

@@ -0,0 +1,99 @@
+{
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
+		"^wf-(.*)": "@/components/wf-ui/components/wf-$1/wf-$1.vue"
+	},
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/loading/index",
+			"style": {
+				"navigationBarTitleText": "云预约",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/home/home",
+			"style": {
+				"navigationBarTitleText": "云预约",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reserve/index",
+			"style": {
+				"navigationBarTitleText": "网上预约",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reserve/notice",
+			"style": {
+				"navigationBarTitleText": "预约须知",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reserve/timeSelect",
+			"style": {
+				"navigationBarTitleText": "预约时间",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reserve/confirm",
+			"style": {
+				"navigationBarTitleText": "预约确认",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/myReserve/index",
+			"style": {
+				"navigationBarTitleText": "我的预约",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/myReserve/detail",
+			"style": {
+				"navigationBarTitleText": "预约详情",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+
+
+
+
+		{
+			"path": "pages/login/login-phone",
+			"style": {
+				"navigationBarTitleText": "手机登录",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/login/login-account",
+			"style": {
+				"navigationBarTitleText": "账号登录",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "",
+		"navigationBarBackgroundColor": "#fff",
+		"backgroundColor": "#F7F7F7"
+	}
+}

pages/demo/crud.vue

@@ -0,0 +1,24 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="CRUD 操作"
+			title-color="#fff">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">很快到来</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		data() {
+			return {
+				data: {}
+			};
+		},
+	}
+</script>

pages/demo/crud1.vue

@@ -0,0 +1,441 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				formType="uniForm"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<template #form>
+					<view class="uni-form">
+						<view class="uni-form-item">
+							<view class="uni-form-item-label uni-form-item-required">通知标题</view>
+							<view class="uni-form-item-input">
+								<input
+									class="uni-input"
+									v-model="form.title"
+									placeholder="通知标题"
+									:placeholder-style="placeholderStyle"
+									:disabled="readonly"
+								/>
+							</view>
+						</view>
+						<view class="uni-form-item">
+							<view class="uni-form-item-label uni-form-item-required">通知类型</view>
+							<view class="uni-form-item-input">
+								<picker
+									@change="e => onConfirm(e, 'category')"
+									:range="categoryList"
+									range-key="dictValue"
+									class="curdPicker"
+									:disabled="readonly"
+								>
+									<input
+										class="uni-input"
+										v-model="formLabel.category"
+										disabled
+										placeholder="通知类型"
+										:placeholder-style="placeholderStyle"
+									/>
+								</picker>
+							</view>
+							<view class="uni-form-item-icon"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
+						</view>
+						<view class="uni-form-item">
+							<view class="uni-form-item-label uni-form-item-required">通知日期</view>
+							<view class="uni-form-item-input">
+								<picker
+									@change="e => onConfirm(e, 'releaseTime')"
+									mode="date"
+									:value="form.releaseTime"
+									:start="startDate"
+									:end="endDate"
+									class="curdPicker"
+									:disabled="readonly"
+								>
+									<input
+										class="uni-input"
+										v-model="form.releaseTime"
+										disabled
+										placeholder="通知日期"
+										:placeholder-style="placeholderStyle"
+									/>
+								</picker>
+							</view>
+							<view class="uni-form-item-icon"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
+						</view>
+						<view class="uni-form-item">
+							<view class="uni-form-item-label">通知内容</view>
+							<view v-if="!readonly" class="uni-form-item-btn" @click="onRichEdit(form.content)">去编辑</view>
+						</view>
+						<mp-html :content="form.content"></mp-html>
+					</view>
+				</template>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
+import { getList, add, update, remove } from '@/api/notice.js'
+import { dictionary } from '@/api/system/dict.js'
+import { logo } from '../../common/setting'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd, mpHtml },
+	data() {
+		return {
+			form: {
+				content: ''
+			},
+			formLabel: { 
+				category: '' ,
+			},
+			list: [],
+			params: {
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			labelWidth: 160,
+			placeholderStyle: 'color:rgb(192, 196, 204); font-size:14px',
+			option: {
+				navTitle: 'CRUD 操作', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				column: [
+					{
+						label: '通知标题',
+						prop: 'title'
+					},
+					{
+						label: '通知类型',
+						prop: 'categoryName'
+					},
+					{
+						label: '通知日期',
+						prop: 'releaseTime'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
+				category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
+				releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
+			},
+			loadStatus: 'loadmore', // 列表加载状态
+			checkedSwitch: false,
+			timeShow: false,
+			timeParams: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: true,
+				second: true
+			},
+			categoryShow: false,
+			categoryList: [], //类型
+			category: '',
+			pagesTotal: 0
+		}
+	},
+	computed: {
+		startDate() {
+			return this.getDate('start')
+		},
+		endDate() {
+			return this.getDate('end')
+		}
+	},
+	onShow() {
+		let that = this
+		uni.$on('richBack', function(data) {
+			that.$set(that.form, 'content', data)
+		})
+	},
+	onReady() {
+		this.getList(true)
+		this.getCategoryList()
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		getDate(type) {
+			const date = new Date()
+			let year = date.getFullYear()
+			let month = date.getMonth() + 1
+			let day = date.getDate()
+			if (type === 'start') {
+				year = year - 60
+			} else {
+				year = year + 2
+			}
+			month = month > 9 ? month : '0' + month
+			day = day > 9 ? day : '0' + day
+			return `${year}-${month}-${day}`
+		},
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const { records, current } = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+					this.params.current++
+
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		// 通知类型
+		getCategoryList() {
+			dictionary({ code: 'notice' }).then(res => {
+				this.categoryList = res.data
+			})
+		},
+		// picker确定
+		onConfirm(e, type) {
+			if (type == 'category') {
+				const i = this.categoryList[e.detail.value]
+				this.$set(this.formLabel, type, i.dictValue)
+				this.$set(this.form, type, Number(i.dictKey))
+			} else {
+				this.$set(this.form, type, `${e.detail.value} 12:00:00`)
+			}
+		},
+		// 编辑富文本
+		onRichEdit(e) {
+			uni.navigateTo({
+				url: `/pages/rich/index?data=${e}`
+			})
+		},
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				title: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			switch (name) {
+				case '新增':
+					this.formLabel = { category: '' }
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.formLabel.category = getDicLabel(data.category, this.categoryList)
+					done()
+					break
+			}
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						this.formLabel = { category: '' }
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						this.formLabel = { category: '' }
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+
+.uni-picker-container {
+	z-index: 99999 !important;
+}
+</style>
+<style lang="scss" scoped>
+.nav-right {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: normal;
+	padding-right: 24rpx;
+}
+
+.uni-form {
+	&-item {
+		position: relative;
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 0;
+		font-size: 14px;
+		color: #303133;
+		line-height: 70rpx;
+		box-sizing: border-box;
+
+		&-label {
+			width: 160rpx;
+
+			.required {
+				color: #fa3534;
+				vertical-align: middle;
+			}
+		}
+
+		&-required {
+			position: relative;
+
+			&:after {
+				content: '*';
+				position: absolute;
+				left: -8px;
+				color: #fa3534;
+				vertical-align: middle;
+			}
+		}
+
+		&-input {
+			flex: 1;
+
+			.uni-input {
+				font-size: 14px;
+				color: #303133;
+			}
+		}
+
+		&-btn {
+			color: #fff;
+			width: auto;
+			font-size: 22rpx;
+			line-height: 50rpx;
+			padding: 0 20rpx;
+			border-radius: 6rpx;
+			background: linear-gradient(rgb(95, 136, 255), rgb(105, 176, 255));
+		}
+	}
+
+	&-item:after {
+		content: ' ';
+		border-bottom-width: 2rpx;
+		position: absolute;
+		left: 0;
+		top: 0;
+		pointer-events: none;
+		box-sizing: border-box;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		width: 199.8%;
+		height: 199.7%;
+		-webkit-transform: scale(0.5, 0.5);
+		transform: scale(0.5, 0.5);
+		border: 0 solid #e4e7ed;
+		z-index: 2;
+	}
+
+	&-item:after {
+		border-bottom-width: 2rpx;
+	}
+}
+</style>

pages/demo/crud2.vue

@@ -0,0 +1,326 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<view slot="form">
+					<u-form-item label="通知标题" prop="title" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.title" :disabled="readonly" placeholder="通知标题" />
+					</u-form-item>
+					<u-form-item label="通知类型" prop="category" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="formLabel.category"
+							:disabled="readonly"
+							placeholder="通知类型"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) categoryShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="通知日期" prop="releaseTime" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="form.releaseTime"
+							:disabled="readonly"
+							placeholder="通知日期"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) timeShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="通知内容" :label-width="option.labelWidth || 160" :border-bottom="false">
+						<template #right v-if="!readonly">
+							<u-button
+								@click="onRichEdit(form.content)"
+								ripple
+								:custom-style="{ background: '#FFF6E9', color: '#FAA646' }"
+								size="mini"
+							>
+								去编辑
+							</u-button>
+						</template>
+					</u-form-item>
+					<mp-html :content="form.content"></mp-html>
+				</view>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<!-- 通知类型 -->
+		<u-select
+			v-model="categoryShow"
+			:list="categoryList"
+			value-name="dictKey"
+			label-name="dictValue"
+			@confirm="e => onConfirm(e, 'category')"
+			safe-area-inset-bottom
+		></u-select>
+		<!-- 通知日期 -->
+		<u-picker
+			mode="time"
+			v-model="timeShow"
+			:params="timeParams"
+			start-year="2000"
+			end-year="2050"
+			@confirm="e => onConfirm(e, 'releaseTime')"
+			safe-area-inset-bottom
+		></u-picker>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
+import { getList, add, update, remove } from '@/api/notice.js'
+import { dictionary } from '@/api/system/dict.js'
+import { logo } from '../../common/setting'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd, mpHtml },
+	data() {
+		return {
+			loadStatus: 'loadmore', // 列表加载状态
+			checkedSwitch: false, // 默认打开管理
+			form: { content: '' }, // 表单
+			formLabel: {}, // 表单label
+			list: [], // 列表数据
+			params: {
+				// 分页
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			option: {
+				// 组件选项
+				navTitle: '通知公告', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '通知标题',
+						prop: 'title'
+					},
+					{
+						label: '通知类型',
+						prop: 'categoryName'
+					},
+					{
+						label: '通知日期',
+						prop: 'releaseTime'
+					}
+				],
+				actions: [
+					// 左滑操作按钮
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				// 表单校验规则
+				title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
+				category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
+				releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
+			},
+			timeShow: false,
+			timeParams: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: true,
+				second: true
+			},
+			categoryShow: false,
+			categoryList: [] //类型
+		}
+	},
+	onShow() {
+		let that = this
+		uni.$on('richBack', function(data) {
+			that.$set(that.form, 'content', data)
+		})
+	},
+	onReady() {
+		this.getList(true)
+		this.getCategoryList()
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const { records, current } = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+					this.params.current++
+
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		// 通知类型
+		getCategoryList() {
+			dictionary({ code: 'notice' }).then(res => {
+				this.categoryList = res.data
+			})
+		},
+		// 类型回调
+		onConfirm(e, type) {
+			if (type == 'category') {
+				this.formLabel[type] = e[0].label
+				this.form.category = Number(e[0].value)
+			} else {
+				this.$set(this.form, 'releaseTime', e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
+			}
+		},
+		// 编辑富文本
+		onRichEdit(e) {
+			uni.navigateTo({
+				url: `/pages/rich/index?data=${e}`
+			})
+		},
+
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				title: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			switch (name) {
+				case '新增':
+					this.formLabel = {}
+					this.form = { content: '' }
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.formLabel.category = getDicLabel(data.category, this.categoryList)
+					done()
+					break
+			}
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>

pages/demo/demo.config.js

@@ -0,0 +1,40 @@
+export default [{
+		groupName: '基础功能',
+		list: [{
+			path: '/pages/demo/storage',
+			icon: 'cell',
+			title: 'Storage 操作',
+		}, {
+			path: '/pages/demo/vuex',
+			icon: 'sticky',
+			title: 'Vuex 操作',
+		}]
+	},
+	{
+		groupName: '网络功能',
+		list: [{
+			path: '/pages/demo/mock',
+			icon: 'layout',
+			title: 'Mock 调用',
+		}, {
+			path: '/pages/demo/request',
+			icon: 'tabbar',
+			title: 'API 调用',
+		}]
+	}, {
+		groupName: '业务功能',
+		list: [{
+			path: '/pages/demo/crud1',
+			icon: 'tag',
+			title: 'CRUD 操作（基于Uniapp）',
+		},{
+			path: '/pages/demo/crud2',
+			icon: 'tag',
+			title: 'CRUD 操作（基于Uview）',
+		},{
+			path: '/pages/componentsA/parse/index',
+			icon: 'loading',
+			title: '未完待续',
+		}]
+	},
+]

pages/demo/demo.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="wrap">
+		<page-nav :desc="desc" :title="title"></page-nav>
+		<view class="list-wrap">
+			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
+				:key="index">
+				<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
+					v-for="(item1, index1) in item.list" :key="index1">
+					<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<u-gap height="70"></u-gap>
+	</view>
+</template>
+
+<script>
+	import pageNav from '@/components/page-nav/page-nav.vue';
+	import list from "./demo.config.js";
+	export default {
+		components: {
+			pageNav
+		},
+		data() {
+			return {
+				list: list,
+				title: '基础功能示例合集',
+				desc: '众多示例覆盖开发过程的各个需求，正在不断完善中。可让您快速集成，开箱即用。'
+			}
+		},
+		computed: {
+			getIcon() {
+				return path => {
+					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
+				}
+			},
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: "233"
+			});
+		},
+		created() {
+
+		},
+		methods: {
+			openPage(path) {
+				this.$u.route({
+					url: path
+				})
+			},
+			getGroupTitle(item) {
+				return item.groupName
+			},
+			getFieldTitle(item) {
+				return item.title
+			}
+		}
+	}
+</script>
+
+<style>
+	/* page {
+		background-color: rgb(240, 242, 244);
+	} */
+</style>
+
+<style lang="scss" scoped>
+	.u-cell-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+</style>

pages/demo/mock.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Mock 调用"
+			title-color="#fff">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">演示效果</view>
+				<view class="u-demo-area u-flex u-row-center">
+					数据为：{{data}}
+				</view>
+			</view>
+			<view class="u-config-wrap">
+				<view class="u-config-title u-border-bottom">参数操作</view>
+				<view class="u-config-item">
+					<view class="u-item-title">按钮点击</view>
+					<u-button @click="doRequest">获取数据</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		fakeBannerList
+	} from "@/api/mock/home.js";
+	export default {
+		data() {
+			return {
+				data: {}
+			};
+		},
+		methods: {
+			doRequest() {
+				let keyword = "";
+				fakeBannerList().then(data => {
+					this.data = data;
+					this.$u.func.showToast({
+						title: '数据获取成功',
+					})
+				}).catch(() => {
+
+				})
+			}
+		},
+	}
+</script>

pages/demo/request.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="API 请求"
+			title-color="#fff">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">演示效果</view>
+				<view class="u-demo-area u-flex u-row-center">
+					<u-image width="300rpx" height="100rpx" :src="url"></u-image>
+				</view>
+			</view>
+			<view class="u-config-wßrap">
+				<view class="u-config-title u-border-bottom">参数操作</view>
+				<view class="u-config-item">
+					<view class="u-item-title">按钮点击</view>
+					<u-button @click="doRequest">刷新验证码</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				url: ''
+			};
+		},
+		methods: {
+			doRequest() {
+				let keyword = "";
+				// 自动挂载至this.$u.api,无需引入
+				// captcha 在 /api/demo.js 内定义
+				this.$u.api.captcha().then(data => {
+					this.url = data.image;
+					this.$u.func.showToast({
+						title: '数据获取成功',
+					})
+				}).catch(() => {
+
+				})
+			}
+		},
+	}
+</script>

pages/demo/storage.vue

@@ -0,0 +1,42 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Storage 操作"
+			title-color="#fff">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">演示效果</view>
+				<view class="u-demo-area u-flex u-row-center">
+					[ BladeX ] 的官网为：{{domain}}
+				</view>
+			</view>
+			<view class="u-config-wrap">
+				<view class="u-config-title u-border-bottom">参数操作</view>
+				<view class="u-config-item">
+					<view class="u-item-title">按钮点击</view>
+					<u-button @click="modifyStorage">修改变量</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				domain: ''
+			}
+		},
+		onLoad() {
+			this.domain = uni.getStorageSync('domain');
+		},
+		methods: {
+			modifyStorage() {
+				uni.setStorageSync('domain', 'https://bladex.vip');
+				this.domain = uni.getStorageSync('domain');
+			}
+		},
+	}
+</script>

pages/demo/vuex.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Vuex 操作"
+			title-color="#fff">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">演示效果</view>
+				<view class="u-demo-area u-flex u-row-center">
+					<!-- vuex已做过封装，可以直接使用state内的变量 -->
+					版本号为：{{version}}
+				</view>
+				<view class="u-demo-area u-flex u-row-center">
+					[ BladeX ] 的作者为：{{userInfo.nickName}}
+				</view>
+			</view>
+			<view class="u-config-wrap">
+				<view class="u-config-title u-border-bottom">参数操作</view>
+				<view class="u-config-item">
+					<view class="u-item-title">按钮点击</view>
+					<u-button @click="modifyVuex">修改变量</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			// vuex已做过封装，可以直接this.$u.vuex(key, value)修改，无需引入
+			modifyVuex() {
+				// version不在lifeData，每次刷新会丢失
+				this.$u.vuex('version', '1.0.1');
+				// userInfo在lifeData，刷新重启会保留
+				this.$u.vuex('userInfo.nickName', '翼');
+			}
+		},
+	}
+</script>

pages/home/home.vue

@@ -0,0 +1,253 @@
+<template>
+	<view class="container">
+		<!-- 顶部标题栏 -->
+		<view class="header">
+			<text class="title">广西区直住房保障中心</text>
+		</view>
+
+		<!-- 预约功能区 -->
+		<view class="reserve-section">
+			<view class="reserve-card" @click="handleOnlineReserve">
+				<view class="icon online-icon"></view>
+				<text class="card-text">网上预约</text>
+			</view>
+			<view class="reserve-card" @click="handleMyReserve">
+				<view class="icon my-icon"></view>
+				<text class="card-text">我的预约</text>
+			</view>
+		</view>
+
+		<!-- 热门服务区 -->
+		<view class="service-section">
+			<text class="section-title">热门服务</text>
+
+			<view class="service-item" v-for="(item, index) in serviceList" :key="index"
+				@click="handleServiceClick(item)">
+				<view class="item-left">
+					<view class="dot"></view>
+					<text class="item-text">{{ item.name }}</text>
+				</view>
+				<view class="arrow"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		deptList,
+		itemList
+	} from '@/api/reserve.js'
+	import {
+		dictionary
+	} from '@/api/system/dict.js'
+
+	export default {
+		data() {
+			return {
+				// 热门服务列表（和设计图完全一致）
+				serviceList: [],
+				statusList: []
+			}
+		},
+		onLoad() {
+			this.getItemList()
+			this.getDictionary()
+		},
+		methods: {
+			getDictionary() {
+				dictionary({
+					code: 'booking_status'
+				}).then(res => {
+					if (res.code === 200) {
+						this.statusList = res.data
+						uni.setStorageSync('statusList', this.statusList);
+					}
+				})
+			},
+			// 网上预约点击事件
+			handleOnlineReserve() {
+				uni.navigateTo({
+					url: '/pages/reserve/index'
+				})
+			},
+			// 我的预约点击事件
+			handleMyReserve() {
+				uni.navigateTo({
+					url: '/pages/myReserve/index'
+				})
+			},
+			getItemList() {
+				let params = {
+					size: 5,
+					current: 1,
+					status: 1,
+				}
+				itemList(params).then(res => {
+					if (res.code === 200) {
+						this.serviceList = res.data.records
+					}
+				})
+			},
+			// 服务项点击事件
+			handleServiceClick(item) {
+				const data = JSON.stringify(item)
+				uni.navigateTo({
+					url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
+				})
+				// uni.navigateTo({
+				// 	url: `/pages/reserve/index?id=${item.id}`
+				// })
+			},
+			// // 获取部门列表
+			// getDeptList() {
+			// 	let params = {
+			// 		size: 10,
+			// 		current: 1
+			// 	}
+			// 	deptList(params).then(res => {
+			// 		if (res.code === 200) {
+			// 			this.serviceList = res.data.records.filter(item => item.parentId != 0)
+			// 		}
+			// 	})
+			// }
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	* {
+		box-sizing: border-box;
+	}
+
+	/* 全局容器 */
+	.container {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	}
+
+	/* 顶部标题栏 */
+	.header {
+		width: 100%;
+		height: 200rpx;
+		background: linear-gradient(to bottom, #e8f3ff 0%, #f5f5f5 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.header::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-image: url('/static/images/newImg/home_bg.png');
+		background-size: cover;
+		background-repeat: no-repeat;
+		z-index: 0;
+	}
+
+	.title {
+		font-size: 40rpx;
+		font-weight: 700;
+		color: rgba(49, 134, 255, 1);
+		z-index: 1;
+	}
+
+	/* 预约功能区 */
+	.reserve-section {
+		display: flex;
+		padding: 0 30rpx 30rpx;
+		gap: 20rpx;
+	}
+
+	.reserve-card {
+		flex: 1;
+		background-color: #ffffff;
+		border-radius: 32rpx;
+		padding: 40rpx 20rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.icon {
+		width: 80rpx;
+		height: 80rpx;
+		margin-bottom: 20rpx;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	.online-icon {
+		background-image: url('@/static/images/newImg/online_icon.png');
+	}
+
+	.my-icon {
+		background-image: url('@/static/images/newImg/my_icon.png');
+	}
+
+	.card-text {
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	/* 热门服务区 */
+	.service-section {
+		padding: 0 30rpx;
+	}
+
+	.section-title {
+		display: block;
+		font-size: 34rpx;
+		font-weight: 600;
+		color: #333333;
+		margin-bottom: 20rpx;
+	}
+
+	.service-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		padding: 30rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.item-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
+		margin-right: 16rpx;
+	}
+
+	.item-text {
+		font-size: 34rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	.arrow {
+		width: 16rpx;
+		height: 16rpx;
+		border-right: 4rpx solid #165dff;
+		border-top: 4rpx solid #165dff;
+		transform: rotate(45deg);
+	}
+</style>

pages/loading/index.vue

@@ -0,0 +1,164 @@
+<template>
+	<!-- 空白loading页 -->
+	<view class="loading-container">
+		<view class="loading-text">正在登录中，请稍候...</view>
+	</view>
+</template>
+
+<script>
+	import {
+		login
+	} from '@/api/login.js'
+
+	export default {
+		onLoad(options) {
+			// 页面加载 → 自动执行流程
+			this.getToken()
+			this.autoLogin(options)
+		},
+
+		methods: {
+			getToken() {
+
+				return new Promise((resolve, reject) => {
+					uni.request({
+						url: '/epoint-web-cs/rest/oauth2/token',
+						method: 'POST',
+						header: {
+							'Content-Type': 'application/x-www-form-urlencoded',
+						},
+						data: {
+							client_id: '316f983b-2b93-4c57-b912-c00e05aceed2', // 你接口需要的参数名
+							client_secret: 'cd2cf239-1506-47bb-9b63-507b6b759a06',
+							grant_type: 'password',
+							platform: 'mobile',
+							username: '马贤宝',
+							password: 'Epoint@123',
+							// 其他需要的参数继续加
+						},
+						success: (res) => {
+							const data = res.data
+							console.log(data, 'data')
+
+							// 接口返回成功判断（根据接口标准结构）
+							if (data.status.code === 1) {
+								resolve(data.custom) // 返回用户信息：name, phone, idCard
+							} else {
+								reject(new Error(data.status.text || '获取用户信息失败'))
+							}
+						}
+					})
+				})
+			},
+			/**
+			 * 自动登录流程
+			 */
+			async autoLogin(options) {
+				try {
+					// 1. 从URL获取token
+					const token = options.token
+					if (!token) {
+						uni.showToast({
+							title: '未获取到登录凭证',
+							icon: 'none'
+						})
+						return
+					}
+
+					// 2. 使用token 请求【获取用户信息接口】
+					const userInfo = await this.getUserInfo(token)
+
+
+					// 4. 执行你系统的登录逻辑（保存信息）
+					this.doLocalLogin(userInfo)
+
+					// 5. 登录成功 → 跳首页
+					// uni.switchTab({
+					// 	url: '/pages/home/home' // 你的首页路径
+					// })
+
+				} catch (err) {
+					console.error('登录失败：', err)
+					uni.showToast({
+						title: err.message || '登录失败，请重试',
+						icon: 'none',
+						duration: 3000
+					})
+				}
+			},
+
+			/**
+			 * 请求接口：获取用户信息（你给的正式接口）
+			 * @param {string} token 
+			 */
+			getUserInfo(token) {
+				return new Promise((resolve, reject) => {
+					let url = '/epoint-web-cs/rest/wechatloginrest/getuserinfo'
+					
+					// if (process.env.NODE_ENV === 'development') {
+					//   // 开发环境接口地址
+					//   url = 'epoint-web-cs/rest/wechatloginrest/getuserinfo'
+					// } else if (process.env.NODE_ENV === 'production') {
+					//   // 正式环境接口地址
+					//   url = 'epoint-web/rest/wechatloginrest/getuserinfo'
+					// }
+					
+					uni.request({
+						url: url,
+						method: 'POST',
+						header: {
+							'Content-Type': 'application/x-www-form-urlencoded',
+							'authorization': 'Bearer ' + token // 按接口要求携带token
+						},
+						success: (res) => {
+							const data = res.data
+
+							// 接口返回成功判断（根据接口标准结构）
+							if (data.status.code === 1) {
+								resolve(data.custom) // 返回用户信息：name, phone, idCard
+							} else {
+								reject(new Error(data.status.text || '获取用户信息失败'))
+							}
+						}
+					})
+				})
+			},
+
+			/**
+			 * 你系统本地登录：缓存token + 用户信息
+			 */
+			doLocalLogin(userInfo) {
+				login({
+						// username: userInfo.idnumber,
+						username: userInfo.mobile,
+						
+						grant_type: "third"
+					})
+					.then(data => {
+						this.$u.func.login(data, '/pages/home/home')
+					})
+					.catch(err => {
+						this.$u.func.showToast({
+							title: '用户名或密码错误'
+						})
+					})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.loading-container {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #fff;
+	}
+
+	.loading-text {
+		font-size: 28rpx;
+		color: #666;
+	}
+</style>

pages/login/login-account.vue

@@ -0,0 +1,261 @@
+<template>
+	<view class="container">
+
+
+		<view class="content">
+			<view class="top">
+				<view class="cell">
+					<view class="name">账号</view>
+					<view class="input-box">
+						<input type="text" v-model="username" placeholder="请输入账号" class="ipt" placeholder-class="hold"
+							@blur="handleInputCheck" />
+					</view>
+				</view>
+				<view class="cell">
+					<view class="name">密码</view>
+					<view class="input-box">
+						<input type="password" v-model="password" placeholder="请输入密码" class="ipt"
+							placeholder-class="hold" @blur="handleInputCheck" />
+					</view>
+				</view>
+
+				<button class="submit" @click="submit" :disabled="disabled">登录</button>
+
+			</view>
+
+
+		</view>
+		<!--  -->
+	</view>
+</template>
+
+<script>
+	import sm2 from '@/utils/sm2.js'
+	import {
+		publicKey
+	} from '@/common/setting'
+	export default {
+		onLoad(option) {
+			const {
+				redirect
+			} = option
+			if (redirect) this.redirect = redirect
+		},
+		data() {
+			return {
+				tenantId: '000000',
+				username: '',
+				password: '',
+				disabled: false,
+				redirect: '/pages/home/home'
+			}
+		},
+		methods: {
+			submit() {
+				this.$u.api
+					.token(this.tenantId, this.username, sm2.doEncrypt(this.password, publicKey, 0))
+					.then(data => {
+						this.$u.func.login(data, this.redirect)
+					})
+					.catch(err => {
+						console.log(err)
+						this.$u.func.showToast({
+							title: '用户名或密码错误'
+						})
+					})
+			},
+			handleInputCheck() {
+				this.disabled = false
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		min-height: 100vh;
+		overflow: hidden;
+
+		.set-icon {
+			vertical-align: middle;
+			width: 41rpx;
+			height: auto;
+			margin-right: 35rpx;
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+
+		height: 90vh;
+		width: 100%;
+
+		.top {
+			width: 100%;
+		}
+
+		.logo {
+			display: block;
+			width: 281rpx;
+			height: auto;
+			margin: 0 auto 120rpx;
+		}
+
+		.cell {
+			width: 100%;
+			padding: 0 85rpx;
+			box-sizing: border-box;
+			margin-top: 36rpx;
+
+			.name {
+				font-size: 22rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #3e4a59;
+				line-height: 30rpx;
+				opacity: 0.72;
+			}
+
+			.input-box {
+				padding: 30rpx 0;
+				border-bottom: 2rpx solid #f6f6f6;
+				display: flex;
+				align-items: center;
+
+				.code {
+					font-size: 22rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #0d0d0d;
+					line-height: 30rpx;
+
+					text {
+						// color: #14b9c8;
+						color: #5f88ff;
+					}
+				}
+
+				.ipt {
+					flex: 1;
+					// height: 24rpx;
+					font-size: 24rpx;
+				}
+
+				.hold {
+					font-size: 26rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #3e4a59;
+					line-height: 30px;
+					opacity: 0.45;
+				}
+			}
+		}
+
+		.agree {
+			margin: 27rpx 95rpx 0;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #cacaca;
+			line-height: 34rpx;
+
+			.a {
+				color: #000000;
+			}
+		}
+
+		.submit {
+			margin: 60rpx 90rpx 0;
+			border: none;
+			width: 572rpx;
+			height: 86rpx;
+			line-height: 86rpx;
+			box-sizing: border-box;
+			border-radius: 15rpx;
+			background-color: #5f88ff;
+			color: #ffffff;
+
+			&::after {
+				content: none;
+			}
+
+			&::before {
+				content: none;
+			}
+
+			&[disabled='true'] {
+				background: #e4e4e4;
+				font-size: 36rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 500;
+				color: #ffffff;
+			}
+		}
+
+		.tip {
+			margin-top: 30rpx;
+			text-align: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #cacaca;
+			line-height: 34rpx;
+		}
+
+		.change {
+			margin-top: 20rpx;
+			text-align: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			// color: #14b9c8;
+			color: #5f88ff;
+			line-height: 34rpx;
+		}
+
+		.tag {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #9f9f9f;
+			line-height: 34rpx;
+
+			&::before {
+				content: '';
+				display: block;
+				width: 160rpx;
+				height: 1px;
+				background: #d8d8d8;
+				opacity: 0.86;
+			}
+
+			&::after {
+				content: '';
+				display: block;
+				width: 160rpx;
+				height: 1px;
+				background: #d8d8d8;
+				opacity: 0.86;
+			}
+		}
+
+		.chat-arr {
+			margin-top: 50rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.icon {
+				width: 73rpx;
+				height: 73rpx;
+			}
+		}
+	}
+</style>

pages/login/login-phone.vue

@@ -0,0 +1,291 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" back-icon-name="arrow-leftward" title="登录"
+			:background="{ background: '#fff' }" title-color="#000000">
+			<view class="" slot="right">
+				<image src="/static/images/user/c8.png" class="set-icon" mode="widthFix"></image>
+			</view>
+		</u-navbar>
+
+		<view class="content">
+			<view class="top">
+				<image src="/static/images/logo.png" class="logo" mode="widthFix"></image>
+				<view class="cell">
+					<view class="name">手机号</view>
+					<view class="input-box">
+						<input type="number" v-model="phone" placeholder="请输入手机号码" class="ipt" placeholder-class="hold"
+							@blur="handleInputCheck" />
+					</view>
+				</view>
+				<view class="cell">
+					<view class="name">短信验证码</view>
+					<view class="input-box">
+						<input type="number" v-model="code" placeholder="请输入验证码" class="ipt" placeholder-class="hold"
+							@blur="handleInputCheck" />
+						<view class="code" @click="sendCode" v-if="count === 60">获取验证码</view>
+						<view class="code" v-else><text>{{ count }}</text>秒重新获取</view>
+					</view>
+				</view>
+				<!-- <view class="agree">
+					登录即代表同意
+					<text class="a">《用户协议》</text>
+					和
+					<text class="a">《隐私政策》</text>
+				</view> -->
+				<button class="submit" @click="submit" :disabled="disabled">登录</button>
+				<view class="tip">未注册用户验证后将自动注册并登录</view>
+				<navigator url="/pages/login/login-account" hover-class="none" class="change">密码登录 ></navigator>
+			</view>
+
+			<!-- 社交账号登录 -->
+			<view class="bottom">
+				<view class="tag">社交账号登录</view>
+				<view class="chat-arr">
+					<image src="/static/images/wx.png" class="icon" mode=""></image>
+					<image src="/static/images/qq.png" class="icon" mode=""></image>
+					<image src="/static/images/wb.png" class="icon" mode=""></image>
+				</view>
+			</view>
+		</view>
+		<!--  -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				phone: '',
+				code: '',
+				disabled: true,
+				count: 60,
+				timer: ''
+			};
+		},
+		methods: {
+			submit() {
+				this.$u.func.showToast({
+					title: '新版本即将到来',
+				})
+			},
+			handleInputCheck() {
+				if (!this.phone && !/^1\d{10}$/.test(this.phone)) {
+					this.disabled = true
+					return uni.showToast({
+						title: '请输入正确的手机号',
+						duration: 2000,
+						icon: 'none'
+					});
+				}
+				if (!this.code) {
+					this.disabled = true
+					return uni.showToast({
+						title: '请输入验证码',
+						duration: 2000,
+						icon: 'none'
+					});
+				}
+				this.disabled = false
+			},
+			async sendCode() {
+				this.count = this.count - 1;
+				this.timer = setInterval(() => {
+					if (this.count == 0) {
+						clearInterval(this.timer);
+						this.count = 60;
+						return;
+					}
+					this.count = this.count - 1;
+				}, 1000);
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		min-height: 100vh;
+		overflow: hidden;
+
+		.set-icon {
+			vertical-align: middle;
+			width: 41rpx;
+			height: auto;
+			margin-right: 35rpx;
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+
+		height: 90vh;
+		width: 100%;
+
+		.top {
+			width: 100%;
+		}
+
+		.logo {
+			display: block;
+			width: 281rpx;
+			height: auto;
+			margin: 0 auto 120rpx;
+		}
+
+		.cell {
+			width: 100%;
+			padding: 0 85rpx;
+			box-sizing: border-box;
+			margin-top: 36rpx;
+
+			.name {
+				font-size: 22rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #3e4a59;
+				line-height: 30rpx;
+				opacity: 0.72;
+			}
+
+			.input-box {
+				padding: 30rpx 0;
+				border-bottom: 2rpx solid #f0f2f5;
+				display: flex;
+				align-items: center;
+
+				.code {
+					font-size: 22rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #0d0d0d;
+					line-height: 30rpx;
+
+					text {
+						// color: #14b9c8;
+						color: #5f88ff;
+					}
+				}
+
+				.ipt {
+					flex: 1;
+					// height: 24rpx;
+					font-size: 24rpx;
+				}
+
+				.hold {
+					font-size: 26rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #3e4a59;
+					line-height: 30px;
+					opacity: 0.45;
+				}
+			}
+		}
+
+		.agree {
+			margin: 27rpx 95rpx 0;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #cacaca;
+			line-height: 34rpx;
+
+			.a {
+				color: #000000;
+			}
+		}
+
+		.submit {
+			margin: 60rpx 90rpx 0;
+			border: none;
+			width: 572rpx;
+			height: 86rpx;
+			line-height: 86rpx;
+			box-sizing: border-box;
+			border-radius: 15rpx;
+			background-color: #5f88ff;
+			color: #ffffff;
+
+			&::after {
+				content: none;
+			}
+
+			&::before {
+				content: none;
+			}
+
+			&[disabled='true'] {
+				background: #e4e4e4;
+				font-size: 36rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 500;
+				color: #ffffff;
+			}
+		}
+
+		.tip {
+			margin-top: 30rpx;
+			text-align: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #cacaca;
+			line-height: 34rpx;
+		}
+
+		.change {
+			margin-top: 20rpx;
+			text-align: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #69b0ff;
+			line-height: 34rpx;
+		}
+
+		.tag {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 22rpx;
+			font-family: Adobe Heiti Std;
+			font-weight: normal;
+			color: #9f9f9f;
+			line-height: 34rpx;
+
+			&::before {
+				content: '';
+				display: block;
+				width: 160rpx;
+				height: 1px;
+				background: #d8d8d8;
+				opacity: 0.86;
+			}
+
+			&::after {
+				content: '';
+				display: block;
+				width: 160rpx;
+				height: 1px;
+				background: #d8d8d8;
+				opacity: 0.86;
+			}
+		}
+
+		.chat-arr {
+			margin-top: 50rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.icon {
+				width: 73rpx;
+				height: 73rpx;
+			}
+		}
+	}
+</style>

pages/manage/dept.vue

@@ -0,0 +1,377 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@child="onChildren"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<template #form>
+					<u-form-item label="机构名称" prop="deptName" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.deptName" :disabled="readonly" placeholder="机构名称" />
+					</u-form-item>
+					<u-form-item label="机构全称" prop="fullName" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.fullName" :disabled="readonly" placeholder="机构全称" />
+					</u-form-item>
+					<u-form-item label="上级机构" prop="parentId" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-if="!isAddChild"
+							v-model="formLabel.parentName"
+							placeholder="机构全称"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) $refs.treePicker._show()
+								}
+							"
+						/>
+						<u-input v-else v-model="formLabel.parentName" placeholder="机构全称" disabled />
+					</u-form-item>
+					<u-form-item label="机构类型" prop="deptCategory" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="formLabel.category"
+							placeholder="机构类型"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) categoryShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="排序" prop="sort" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="排序" />
+					</u-form-item>
+					<u-form-item label="描述" :label-width="option.labelWidth || 160" prop="remark">
+						<u-input v-model="form.remark" :disabled="readonly" type="textarea" :maxlength="-1" :height="35" placeholder="描述" />
+					</u-form-item>
+				</template>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<u-select
+			v-model="categoryShow"
+			:list="categoryList"
+			value-name="dictKey"
+			label-name="dictValue"
+			@confirm="onConfirm"
+			safe-area-inset-bottom
+		></u-select>
+		<!-- 上级机构tree -->
+		<rider-tree
+			ref="treePicker"
+			:range="deptTreeList"
+			idKey="id"
+			nameKey="title"
+			:multiple="false"
+			:cascade="false"
+			:foldAll="false"
+			confirmColor="#4E7FF9"
+			cancelColor="#757575"
+			title="上级机构"
+			titleColor="#757575"
+			@cancel="$refs.treePicker._hide()"
+			@confirm="onTreeConfirm"
+		></rider-tree>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import riderTree from '@/components/rider-crud/components/tree-picker'
+import { getList, add, update, remove, deptTree } from '@/api/system/dept.js'
+import { tenantSelect } from '@/api/system/tenant.js'
+import { dictionary } from '@/api/system/dict.js'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd, riderTree },
+	data() {
+		return {
+			checkedSwitch: false,
+			form: {},
+			formLabel: {},
+			list: [],
+			params: {
+				current: 1,
+				size: 10,
+				parentId: 0
+			},
+			loadStatus: 'loadmore', // 列表加载状态
+			readonly: false, // 查看时控制表单只读
+			option: {
+				navTitle: '部门管理', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '机构名称',
+						prop: 'deptName'
+					},
+					{
+						label: '所属租户',
+						prop: 'tenantName'
+					},
+					{
+						label: '机构全称',
+						prop: 'fullName'
+					},
+					{
+						label: '机构类型',
+						prop: 'deptCategoryName'
+					},
+					{
+						label: '排序',
+						prop: 'sort'
+					},
+					{
+						label: '描述',
+						prop: 'remark'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					},
+					{
+						name: '新增子项',
+						icon: 'plus',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				deptCategory: [{ required: true, message: '请选择机构类型', trigger: 'change', type: 'number' }],
+				deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
+				fullName: [{ required: true, message: '请输入机构全称', trigger: 'blur' }],
+				sort: [{ required: true, message: '请输入排序', trigger: 'blur', type: 'number' }]
+			},
+			categoryShow: false,
+			categoryList: [],
+			tenantList: [],
+			deptTreeList: [],
+			isAddChild: false
+		}
+	},
+
+	onReady() {
+		this.getList(true)
+		this.getTenant().then(() => {
+			this.getList(true)
+		})
+		this.getCategoryList()
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const records = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) this.list = records
+					else this.list = this.list.concat(records)
+					if (this.list && this.list.length > 0) {
+						this.list.map(e => {
+							e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
+							e.children = []
+						})
+						this.$refs.crud.setLazyLoad((item, index, cb) => {
+							getList({ parentId: item.id }).then(res => {
+								res.data.map(e => {
+									e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
+								})
+								cb(res.data)
+							})
+						})
+					}
+
+					this.params.current++
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+
+		// 获取类型
+		getCategoryList() {
+			dictionary({ code: 'org_category' }).then(res => {
+				this.categoryList = res.data
+			})
+		},
+
+		// 租户类型
+		getTenant() {
+			return new Promise(resolve => {
+				deptTree().then(res => {
+					this.deptTreeList = res.data
+				})
+				tenantSelect().then(res => {
+					this.tenantList = res.data
+					resolve()
+				})
+			})
+		},
+		// 类型回调
+		onConfirm(e) {
+			this.$set(this.formLabel, 'category', e[0].label)
+			this.$set(this.form, 'deptCategory', Number(e[0].value))
+		},
+		//上级机构选择回调
+		onTreeConfirm(e) {
+			this.$set(this.form, 'parentId', e[0].id)
+			this.$set(this.formLabel, 'parentName', e[0].name)
+		},
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				deptName: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			switch (name) {
+				case '新增':
+					this.form = {}
+					this.formLabel = {}
+					this.isAddChild = false
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.isAddChild = false
+					this.formLabel = {
+						category: getDicLabel(data.deptCategory, this.categoryList),
+						parentName: getDicLabel(data.parentId, this.deptTreeList, { label: 'title', value: 'id' })
+					}
+					done()
+					break
+				case '新增子项':
+					this.isAddChild = true
+					this.form = {}
+					this.formLabel = {
+						parentName: getDicLabel(data.id, this.deptTreeList, { label: 'title', value: 'id' })
+					}
+					this.$set(this.form, 'parentId', data.id)
+					done()
+					break
+			}
+			if (['删除', '编辑', '新增子项'].includes(name)) this.$refs['crud'].hideChildren()
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增' || action == '新增子项') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>
+<style lang="scss" scoped>
+.nav-right {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: normal;
+	padding-right: 24rpx;
+}
+</style>

pages/manage/dict.vue

@@ -0,0 +1,489 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<template #form>
+					<u-form-item label="字典编号" prop="code" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.code" :disabled="readonly" placeholder="字典编号" />
+					</u-form-item>
+					<u-form-item label="字典名称" prop="dictValue" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.dictValue" :disabled="readonly" placeholder="字典名称" />
+					</u-form-item>
+					<u-form-item label="字典排序" prop="sort" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="字典排序" />
+					</u-form-item>
+					<u-form-item label="封存" prop="isSealed" :label-width="option.labelWidth || 160" required>
+						<u-radio-group v-model="form.isSealed" :disabled="readonly">
+							<u-radio shape="circle" :name="1" active-color="#4E7FF9">是</u-radio>
+							<u-radio shape="circle" :name="0" active-color="#4E7FF9">否</u-radio>
+						</u-radio-group>
+					</u-form-item>
+					<u-form-item label="字典备注" :label-width="option.labelWidth || 160" prop="remark">
+						<u-input
+							v-model="form.remark"
+							:disabled="readonly"
+							type="textarea"
+							:maxlength="-1"
+							:height="35"
+							placeholder="字典备注"
+						/>
+					</u-form-item>
+				</template>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<!-- 字典配置 -->
+		<u-popup v-model="configShow" mode="bottom" height="100vh" @close="onConfigClose" :mask-close-able="false">
+			<scroll-view scroll-y="true" style="height: 100vh; background: #f5f5f5">
+				<rider-curd
+					ref="childCrud"
+					v-model="childForm"
+					:navBack="onConfigClose"
+					@search="onChildSearch"
+					:option="{ ...configOption, navTitle: `${configName} - 字典配置` }"
+					:data="childList"
+					:rules="rules"
+					:readonly.sync="readonly"
+					@action-click="onActionClick"
+					@submit="onSubmit"
+					@del="onRemove"
+				>
+					<template #form>
+						<u-form-item label="字典编号" prop="code" :label-width="configOption.labelWidth || 160" required>
+							<u-input v-model="childForm.code" disabled placeholder="字典编号" />
+						</u-form-item>
+						<u-form-item label="字典名称" prop="dictValue" :label-width="configOption.labelWidth || 160" required>
+							<u-input v-model="childForm.dictValue" :disabled="readonly" placeholder="字典名称" />
+						</u-form-item>
+						<u-form-item label="上级字典" :label-width="configOption.labelWidth || 160">
+							<u-input v-model="parentData.dictValue" disabled placeholder="上级字典" />
+						</u-form-item>
+						<u-form-item label="字典键值" prop="dictKey" :label-width="configOption.labelWidth || 160" required>
+							<u-input v-model="childForm.dictKey" :disabled="readonly" placeholder="字典键值" />
+						</u-form-item>
+						<u-form-item label="字典排序" prop="sort" :label-width="configOption.labelWidth || 160" required>
+							<u-input v-model="childForm.sort" :disabled="readonly" type="number" placeholder="字典排序" />
+						</u-form-item>
+						<u-form-item label="封存" prop="isSealed" :label-width="configOption.labelWidth || 160" required>
+							<u-radio-group v-model="childForm.isSealed" :disabled="readonly">
+								<u-radio shape="circle" :name="1" active-color="#4E7FF9">是</u-radio>
+								<u-radio shape="circle" :name="0" active-color="#4E7FF9">否</u-radio>
+							</u-radio-group>
+						</u-form-item>
+						<u-form-item label="字典备注" prop="remark" :label-width="configOption.labelWidth || 160">
+							<u-input
+								v-model="childForm.remark"
+								:disabled="readonly"
+								type="textarea"
+								:maxlength="-1"
+								:height="35"
+								placeholder="字典备注"
+							/>
+						</u-form-item>
+					</template>
+					<template #loadmore>
+						<u-loadmore :status="childLoadStatus" @loadmore="getChild()" />
+					</template>
+				</rider-curd>
+			</scroll-view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import { parentList, add, update, remove, dictionary, child, dictTree } from '@/api/system/dict.js'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd },
+	data() {
+		return {
+			configShow: false, //字典管理弹窗
+			form: {
+				isSealed: 0
+			},
+			list: [],
+			params: {
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			parentData: {}, // 上级数据信息
+			childList: [],
+			childForm: {
+				isSealed: 0
+			},
+			childParams: {
+				current: 1,
+				size: 10,
+				parentId: null
+			},
+			loadStatus: 'loadmore', // 列表加载状态
+			childLoadStatus: 'loadmore', // 列表加载状态
+			option: {
+				navTitle: '字典管理', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '字典编号',
+						prop: 'code'
+					},
+					{
+						label: '字典名称',
+						prop: 'dictValue'
+					},
+
+					{
+						label: '字典排序',
+						prop: 'sort'
+					},
+					{
+						label: '封存',
+						prop: 'sealedName'
+					},
+					{
+						label: '字典备注',
+						prop: 'remark'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					},
+					{
+						name: '设置',
+						icon: 'setting',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			configName: '',
+			configOption: {
+				navBackIcon: 'close', //导航栏左上角icon
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '字典编号',
+						prop: 'code'
+					},
+					{
+						label: '字典名称',
+						prop: 'dictValue'
+					},
+					{
+						label: '字典键值',
+						prop: 'dictKey'
+					},
+					{
+						label: '字典排序',
+						prop: 'sort'
+					},
+					{
+						label: '封存',
+						prop: 'sealedName'
+					},
+					{
+						label: '字典备注',
+						prop: 'remark'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					},
+					{
+						name: '新增子项',
+						icon: 'plus',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				code: [{ required: true, message: '请输入字典编号', trigger: 'blur' }],
+				dictValue: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
+				sort: [{ required: true, message: '请输入字典排序', trigger: 'blur', type: 'number' }],
+				isSealed: [{ required: true, message: '请选择是否封存', trigger: 'blur', type: 'number' }],
+				dictKey: [{ required: true, message: '请输入字典键值', trigger: 'blur' }]
+			}
+		}
+	},
+
+	onReady() {
+		this.getList(true)
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+		this.getChild(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+
+		if (this.childLoadStatus == 'nomore') return
+		this.getChild()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			parentList(this.params)
+				.then(res => {
+					const { records } = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+					if (this.list && this.list.length > 0) {
+						this.list.map(e => {
+							e.sealedName = e.isSealed ? '是' : '否'
+						})
+					}
+					this.params.current++
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		// 获取子类列表
+		getChild(override = false) {
+			if (override) {
+				this.childParams.current = 1
+			}
+			const { size } = this.childParams
+			child(this.childParams)
+				.then(res => {
+					const records = res.data
+					if (records.length < size) this.childLoadStatus = 'nomore'
+					else this.childLoadStatus = 'loadmore'
+					if (override) {
+						this.childList = records
+					} else {
+						this.childList = this.childList.concat(records)
+					}
+					if (this.childList && this.childList.length > 0) {
+						this.childList.map(e => {
+							e.sealedName = e.isSealed ? '是' : '否'
+						})
+					}
+					this.childParams.current++
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			switch (name) {
+				case '新增':
+					if (this.parentData.code) {
+						this.$set(this.childForm, 'code', this.parentData.code)
+						this.$set(this.childForm, 'parentId', this.parentData.id)
+						this.$set(this.childParams, 'parentId', this.parentData.id)
+					}
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					if (data.id) done()
+					break
+				case '设置':
+					this.childForm = {}
+					this.parentData = data
+					this.configName = data.dictValue
+					this.$set(this.childParams, 'parentId', data.id)
+					this.getChild(true)
+					setTimeout(() => {
+						this.configShow = true
+					}, 100)
+					break
+				case '新增子项':
+					this.childForm = {}
+					this.parentData = data
+					this.$set(this.childForm, 'code', data.code)
+					this.$set(this.childForm, 'parentId', data.id)
+					this.$set(this.childParams, 'parentId', data.id)
+					done()
+					break
+			}
+			if (['删除', '编辑', '新增子项'].includes(name)) {
+				this.$refs['crud'].hideChildren()
+				this.$refs['childCrud'].hideChildren()
+			}
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增' || action == '新增子项') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		},
+		//字典配置关闭
+		onConfigClose() {
+			this.configShow = false
+			this.childParams = {
+				current: 1,
+				size: 10,
+				parentId: null
+			}
+			this.parentData = {}
+			this.form = { isSealed: 0 }
+			this.childForm = { isSealed: 0 }
+			setTimeout(() => {
+				this.getChild(true)
+			})
+		},
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				dictValue: val
+			}
+			this.getList(true)
+		},
+		// 子级搜索
+		onChildSearch(val) {
+			this.childForm = {
+				current: 1,
+				size: 10,
+				dictValue: val
+			}
+			this.getChild(true)
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>
+<style lang="scss" scoped>
+.nav-right {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: normal;
+	padding-right: 24rpx;
+}
+
+.config-title {
+	padding: 30rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 20rpx solid #f5f5f5;
+	color: #fff;
+	background: linear-gradient(45deg, #4e7ff9 0%, #59a5fb 100%);
+}
+</style>

pages/manage/manage.vue

@@ -0,0 +1,166 @@
+<template>
+	<view class="container">
+		<u-navbar
+			:is-fixed="false"
+			:border-bottom="false"
+			:is-back="false"
+			title="管理"
+			:background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }"
+			title-color="#fff"
+		>
+			<image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
+		</u-navbar>
+
+		<view class="tab">
+			<u-tabs
+				:list="list"
+				:is-scroll="false"
+				:current="current"
+				active-color="#5f88ff"
+				inactive-color="#595959"
+				height="100"
+				@change="change"
+			></u-tabs>
+		</view>
+
+		<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
+			
+			<swiper-item class="swiper-item" key="0">
+				<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
+					<view class="content">
+						<u-grid :col="3">
+							<u-grid-item v-for="(_item, _index) in deskList" :key="_index">
+								<navigator :url="_item.path" hover-class="none" class="gitem">
+									<image :src="require(`@/static/images/manage/${_item.type}.png`)" class="img" mode="widthFix"></image>
+									<view class="name">{{ _item.name }}</view>
+								</navigator>
+							</u-grid-item>
+						</u-grid>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			
+			<swiper-item class="swiper-item" key="1">
+				<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
+					<view class="content">
+						<u-grid :col="3">
+							<u-grid-item v-for="(_item, _index) in systemList" :key="_index">
+								<navigator :url="_item.path" hover-class="none" class="gitem">
+									<image :src="require(`@/static/images/manage/${_item.type}.png`)" class="img" mode="widthFix"></image>
+									<view class="name">{{ _item.name }}</view>
+								</navigator>
+							</u-grid-item>
+						</u-grid>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			current: 0,
+			swiperHeight: 0,
+			list: [
+				{
+					name: '工作台'
+				},
+				{
+					name: '系统'
+				},
+			],
+			deskList: [
+				{
+					name: '公告',
+					type: 'notice',
+					path: '/pages/manage/notice'
+				},
+			],
+			systemList: [
+				{
+					name: '角色',
+					type: 'role',
+					path: '/pages/manage/role'
+				},
+				{
+					name: '部门',
+					type: 'dept',
+					path: '/pages/manage/dept'
+				},
+				{
+					name: '字典',
+					type: 'dict',
+					path: '/pages/manage/dict'
+				},
+				{
+					name: '岗位',
+					type: 'post',
+					path: '/pages/manage/post'
+				}
+			]
+		}
+	},
+	onReady() {
+		let that = this
+		uni.getSystemInfo({
+			success(e) {
+				console.log(e)
+				let { windowWidth, windowHeight, safeArea } = e
+				const query = uni.createSelectorQuery().in(that)
+				query
+					.select('#swiperBox')
+					.boundingClientRect(data => {
+						that.swiperHeight = safeArea.bottom - data.top
+					})
+					.exec()
+			}
+		})
+	},
+	methods: {
+		tabsChange(e) {
+			this.current = e.detail.current
+		},
+		change(index) {
+			this.current = index
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.swiper-box {
+	height: 100vh;
+}
+
+.message-icon {
+	width: 32rpx;
+	height: auto;
+	margin-right: 27rpx;
+}
+
+.tab {
+	margin-bottom: 10rpx;
+}
+
+.gitem {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+
+	.img {
+		width: 54rpx;
+		height: auto;
+		margin-bottom: 26rpx;
+	}
+
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #030305;
+	line-height: 36rpx;
+}
+</style>

pages/manage/notice.vue

@@ -0,0 +1,326 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<view slot="form">
+					<u-form-item label="通知标题" prop="title" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.title" :disabled="readonly" placeholder="通知标题" />
+					</u-form-item>
+					<u-form-item label="通知类型" prop="category" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="formLabel.category"
+							:disabled="readonly"
+							placeholder="通知类型"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) categoryShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="通知日期" prop="releaseTime" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="form.releaseTime"
+							:disabled="readonly"
+							placeholder="通知日期"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) timeShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="通知内容" :label-width="option.labelWidth || 160" :border-bottom="false">
+						<template #right v-if="!readonly">
+							<u-button
+								@click="onRichEdit(form.content)"
+								ripple
+								:custom-style="{ background: '#FFF6E9', color: '#FAA646' }"
+								size="mini"
+							>
+								去编辑
+							</u-button>
+						</template>
+					</u-form-item>
+					<mp-html :content="form.content"></mp-html>
+				</view>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<!-- 通知类型 -->
+		<u-select
+			v-model="categoryShow"
+			:list="categoryList"
+			value-name="dictKey"
+			label-name="dictValue"
+			@confirm="e => onConfirm(e, 'category')"
+			safe-area-inset-bottom
+		></u-select>
+		<!-- 通知日期 -->
+		<u-picker
+			mode="time"
+			v-model="timeShow"
+			:params="timeParams"
+			start-year="2000"
+			end-year="2050"
+			@confirm="e => onConfirm(e, 'releaseTime')"
+			safe-area-inset-bottom
+		></u-picker>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
+import { getList, add, update, remove } from '@/api/notice.js'
+import { dictionary } from '@/api/system/dict.js'
+import { logo } from '../../common/setting'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd, mpHtml },
+	data() {
+		return {
+			loadStatus: 'loadmore', // 列表加载状态
+			checkedSwitch: false, // 默认打开管理
+			form: { content: '' }, // 表单
+			formLabel: {}, // 表单label
+			list: [], // 列表数据
+			params: {
+				// 分页
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			option: {
+				// 组件选项
+				navTitle: '通知公告', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '通知标题',
+						prop: 'title'
+					},
+					{
+						label: '通知类型',
+						prop: 'categoryName'
+					},
+					{
+						label: '通知日期',
+						prop: 'releaseTime'
+					}
+				],
+				actions: [
+					// 左滑操作按钮
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				// 表单校验规则
+				title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
+				category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
+				releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
+			},
+			timeShow: false,
+			timeParams: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: true,
+				second: true
+			},
+			categoryShow: false,
+			categoryList: [] //类型
+		}
+	},
+	onShow() {
+		let that = this
+		uni.$on('richBack', function(data) {
+			that.$set(that.form, 'content', data)
+		})
+	},
+	onReady() {
+		this.getList(true)
+		this.getCategoryList()
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const { records, current } = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+					this.params.current++
+
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		// 通知类型
+		getCategoryList() {
+			dictionary({ code: 'notice' }).then(res => {
+				this.categoryList = res.data
+			})
+		},
+		// 类型回调
+		onConfirm(e, type) {
+			if (type == 'category') {
+				this.formLabel[type] = e[0].label
+				this.form.category = Number(e[0].value)
+			} else {
+				this.$set(this.form, 'releaseTime', e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
+			}
+		},
+		// 编辑富文本
+		onRichEdit(e) {
+			uni.navigateTo({
+				url: `/pages/rich/index?data=${e}`
+			})
+		},
+
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				title: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			switch (name) {
+				case '新增':
+					this.formLabel = {}
+					this.form = { content: '' }
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.formLabel.category = getDicLabel(data.category, this.categoryList)
+					done()
+					break
+			}
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>

pages/manage/post.vue

@@ -0,0 +1,311 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<template #form>
+					<u-form-item label="岗位类型" prop="category" :label-width="option.labelWidth || 160" required>
+						<u-input
+							v-model="formLabel.category"
+							placeholder="角色名称"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) categoryShow = true
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="岗位编号" prop="postCode" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.postCode" :disabled="readonly" placeholder="岗位编号" />
+					</u-form-item>
+					<u-form-item label="岗位名称" prop="postName" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.postName" :disabled="readonly" placeholder="岗位名称" />
+					</u-form-item>
+					<u-form-item label="岗位排序" prop="sort" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="岗位排序" />
+					</u-form-item>
+					<u-form-item label="岗位描述" prop="remark" :label-width="option.labelWidth || 160">
+						<u-input
+							v-model="form.remark"
+							:disabled="readonly"
+							type="textarea"
+							:maxlength="-1"
+							:height="35"
+							placeholder="岗位描述"
+						/>
+					</u-form-item>
+				</template>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<u-select
+			v-model="categoryShow"
+			:list="categoryList"
+			value-name="dictKey"
+			label-name="dictValue"
+			@confirm="onConfirm"
+			safe-area-inset-bottom
+		></u-select>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import { getList, add, update, remove } from '@/api/system/post.js'
+import { tenantSelect } from '@/api/system/tenant.js'
+import { dictionary } from '@/api/system/dict.js'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd },
+	data() {
+		return {
+			checkedSwitch: false,
+			form: {},
+			formLabel: {},
+			list: [],
+			params: {
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			loadStatus: 'loadmore', // 列表加载状态
+			option: {
+				navTitle: '岗位管理', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '岗位名称',
+						prop: 'postName'
+					},
+					{
+						label: '岗位编号',
+						prop: 'postCode'
+					},
+					{
+						label: '所属租户',
+						prop: 'tenantName'
+					},
+					{
+						label: '岗位类型',
+						prop: 'categoryName'
+					},
+					{
+						label: '岗位排序',
+						prop: 'sort'
+					},
+					{
+						label: '岗位描述',
+						prop: 'remark'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				category: [{ required: true, message: '请选择岗位类型', trigger: 'change', type: 'number' }],
+				postCode: [{ required: true, message: '请输入岗位编号', trigger: 'blur' }],
+				postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
+				sort: [{ required: true, message: '请输入岗位排序', trigger: 'blur', type: 'number' }]
+			},
+			categoryShow: false,
+			categoryList: [],
+			category: '',
+			tenantList: []
+		}
+	},
+
+	onReady() {
+		this.getTenant().then(() => {
+			this.getList(true)
+		})
+		this.getCategoryList()
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const { records, current } = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+
+					if (this.list && this.list.length > 0) {
+						this.list.map(e => {
+							e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
+						})
+					}
+					this.params.current++
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		// 获取类型
+		getCategoryList() {
+			dictionary({ code: 'post_category' }).then(res => {
+				this.categoryList = res.data
+			})
+		},
+		// 租户类型
+		getTenant() {
+			return new Promise(resolve => {
+				tenantSelect().then(res => {
+					this.tenantList = res.data
+					resolve()
+				})
+			})
+		},
+		// 类型回调
+		onConfirm(e) {
+			this.$set(this.form, 'category', Number(e[0].value))
+			this.$set(this.formLabel, 'category', e[0].label)
+		},
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				postName: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			console.log(name, index)
+			switch (name) {
+				case '新增':
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.formLabel.category = getDicLabel(data.category, this.categoryList)
+					done()
+					break
+			}
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						this.formLabel = {}
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>
+<style lang="scss" scoped>
+.nav-right {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: normal;
+	padding-right: 24rpx;
+}
+</style>

pages/manage/role.vue

@@ -0,0 +1,372 @@
+<template>
+	<view class="container">
+		<view class="safe-area-inset-bottom">
+			<rider-curd
+				v-model="form"
+				:option="option"
+				:data="list"
+				:rules="rules"
+				:readonly.sync="readonly"
+				@search="onSearch"
+				@action-click="onActionClick"
+				@submit="onSubmit"
+				@del="onRemove"
+				ref="crud"
+			>
+				<template #form>
+					<u-form-item label="角色名称" prop="roleName" :label-width="option.labelWidth || 160" required>
+						<u-input v-model="form.roleName" :disabled="readonly" placeholder="角色名称" />
+					</u-form-item>
+					<u-form-item label="上级角色" prop="parentId" :label-width="option.labelWidth || 160">
+						<u-input
+							v-model="formLabel.parentName"
+							placeholder="上级角色"
+							type="select"
+							@click="
+								() => {
+									if (!readonly) $refs.treePicker._show()
+								}
+							"
+						/>
+					</u-form-item>
+					<u-form-item label="角色别名" prop="roleAlias" required :label-width="option.labelWidth || 160">
+						<u-input v-model="form.roleAlias" :disabled="readonly" placeholder="角色别名" />
+					</u-form-item>
+					<u-form-item label="角色排序" prop="sort" required :label-width="option.labelWidth || 160">
+						<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="角色排序" />
+					</u-form-item>
+				</template>
+				<template #loadmore>
+					<u-loadmore :status="loadStatus" @loadmore="getList()" />
+				</template>
+			</rider-curd>
+		</view>
+		<!-- 上级角色tree -->
+		<rider-tree
+			ref="treePicker"
+			:range="roleTreeList"
+			@cancel="$refs.treePicker._hide()"
+			@confirm="onTreeConfirm"
+			idKey="id"
+			nameKey="title"
+			:multiple="false"
+			:cascade="false"
+			:foldAll="false"
+			confirmColor="#4E7FF9"
+			cancelColor="#757575"
+			title="上级角色"
+			titleColor="#757575"
+		></rider-tree>
+		<!-- 菜单权限 -->
+		<rider-tree
+			ref="menuPicker"
+			:range="menuTreeList"
+			@cancel="$refs.menuPicker._hide()"
+			@confirm="onMenuConfirm"
+			idKey="id"
+			nameKey="title"
+			:multiple="true"
+			:cascade="true"
+			:foldAll="true"
+			confirmColor="#4E7FF9"
+			cancelColor="#757575"
+			title="菜单权限"
+			titleColor="#757575"
+		></rider-tree>
+	</view>
+</template>
+
+<script>
+import riderCurd from '@/components/rider-crud/index'
+import riderTree from '@/components/rider-crud/components/tree-picker'
+import { getList, add, update, remove, roleTree, menuTree, menuTreeKey, grant } from '@/api/system/role.js'
+import { tenantSelect } from '@/api/system/tenant.js'
+import { getDicLabel } from '@/components/rider-crud/util/tool.js'
+export default {
+	components: { riderCurd, riderTree },
+	data() {
+		return {
+			checkedSwitch: false,
+			form: {},
+			formLabel: {},
+			list: [],
+			params: {
+				current: 1,
+				size: 10
+			},
+			readonly: false, // 查看时控制表单只读
+			loadStatus: 'loadmore', // 列表加载状态
+			option: {
+				navTitle: '角色管理', //标题
+				manageBtn: true, // 右上角管理按钮，默认不显示
+				searchShow: true, //是否显示搜索，默认不显示
+				labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
+				column: [
+					{
+						label: '角色名称',
+						prop: 'roleName'
+					},
+					{
+						label: '所属租户',
+						prop: 'tenantName'
+					},
+					{
+						label: '角色别名',
+						prop: 'roleAlias'
+					},
+					{
+						label: '角色排序',
+						prop: 'sort'
+					}
+				],
+				actions: [
+					{
+						name: '编辑', // 操作名称
+						icon: 'edit-pen', //操作图标，有图标文字不显示
+						color: '#333', // 字体颜色
+						fontsize: 30, //字体大小，单位rpx
+						width: 40, // 宽度，单位px
+						background: '#fff' // 菜单按钮背景色
+					},
+					{
+						name: '删除',
+						icon: 'trash',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					},
+					{
+						name: '菜单权限',
+						icon: 'setting',
+						color: '#333',
+						fontsize: 30,
+						width: 40,
+						background: '#fff'
+					}
+				]
+			},
+			rules: {
+				roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+				roleAlias: [{ required: true, message: '请输入角色别名', trigger: 'blur' }],
+				sort: [{ required: true, message: '请输入角色排序', trigger: 'blur', type: 'number' }]
+			},
+			tenantList: [],
+			roleTreeList: [],
+			menuTreeList: [],
+			menuCheckIds: [],
+			roleIds: null
+		}
+	},
+
+	onReady() {
+		this.getTenant().then(() => {
+			this.getList(true)
+		})
+	},
+	onPullDownRefresh() {
+		this.getList(true)
+	},
+	onReachBottom() {
+		if (this.loadStatus == 'nomore') return
+		this.getList()
+	},
+	methods: {
+		// 获取列表
+		getList(override = false) {
+			if (override) {
+				this.params.current = 1
+			}
+			const { size } = this.params
+			getList(this.params)
+				.then(res => {
+					const records = res.data
+					if (records.length < size) this.loadStatus = 'nomore'
+					else this.loadStatus = 'loadmore'
+					if (override) {
+						this.list = records
+					} else {
+						this.list = this.list.concat(records)
+					}
+					if (this.list && this.list.length > 0) {
+						this.list = this.filterList(this.list)
+					}
+					this.params.current++
+					uni.stopPullDownRefresh()
+				})
+				.catch(err => {
+					uni.stopPullDownRefresh()
+				})
+		},
+		filterList(list) {
+			if (!list || list.length == 0) return list
+			list.forEach(e => {
+				e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
+				if (e.children) this.filterList(e.children)
+			})
+			return list
+		},
+		// 租户类型
+		getTenant() {
+			return new Promise(resolve => {
+				roleTree().then(res => {
+					this.roleTreeList = res.data
+				})
+				tenantSelect().then(res => {
+					this.tenantList = res.data
+					resolve()
+				})
+			})
+		},
+		// 获取菜单权限内容
+		getMenu(roleIds) {
+			menuTreeKey({ roleIds }).then(res => {
+				this.menuCheckIds = res.data.menu
+			})
+			menuTree().then(res => {
+				this.recursion(this.menuCheckIds, res.data.menu)
+				this.menuTreeList = res.data.menu
+				setTimeout(() => {
+					this.$refs.menuPicker._show()
+				}, 10)
+			})
+		},
+		// 递归
+		recursion(arr, menu) {
+			menu.forEach(e => {
+				if (arr.includes(e.id)) e.checked = true
+				if (e.hasChildren || (e.children && e.children.length > 0)) {
+					this.recursion(arr, e.children)
+				}
+			})
+		},
+		// 菜单权限勾选回调
+		onMenuConfirm(e) {
+			let arr = []
+			e.forEach(e => {
+				arr.push(e.id)
+			})
+			const params = {
+				apiScopeIds: [],
+				dataScopeIds: [],
+				roleIds: [this.roleIds],
+				menuIds: arr
+			}
+			grant(params).then(res => {
+				uni.showToast({
+					icon: 'none',
+					title: '操作成功'
+				})
+			})
+		},
+		//机构选择回调
+		onTreeConfirm(e) {
+			this.$set(this.form, 'parentId', e[0].id)
+			this.$set(this.formLabel, 'parentName', e[0].name)
+		},
+		// 搜索 (自行配置搜索内容)
+		onSearch(val) {
+			this.params = {
+				current: 1,
+				size: 10,
+				roleName: val
+			}
+			this.getList(true)
+		},
+		// 左滑按钮点击
+		onActionClick({ index, data, action, done }) {
+			const { name } = action
+			console.log(name, index)
+			switch (name) {
+				case '新增':
+					done()
+					break
+				case '删除':
+					this.onRemove(data.id)
+					break
+				case '查看':
+					this.readonly = true
+				case '编辑':
+					this.$set(this.formLabel, 'parentName', data.parentName)
+					done()
+					break
+				case '菜单权限':
+					this.roleIds = data.id
+					this.getMenu(data.id)
+					break
+			}
+			if (['删除', '编辑'].includes(name)) this.$refs['crud'].hideChildren()
+		},
+		// 删除
+		onRemove(id) {
+			uni.showModal({
+				title: '确定要删除吗？',
+				success: action => {
+					if (action.confirm) {
+						remove(id).then(() => {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								this.$refs['crud'].allCheckHide(false)
+							}, 100)
+							// #ifdef APP
+							this.getList(true)
+							// #endif
+							// #ifndef APP
+							uni.startPullDownRefresh({})
+							// #endif
+						})
+					}
+				}
+			})
+		},
+		// 表单提交
+		onSubmit(form, action, unloading, done) {
+			if (action == '新增') {
+				add(form)
+					.then(res => {
+						uni.showToast({
+							title: '新增成功',
+							icon: 'none'
+						})
+						// this.category = ''
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			} else if (action == '编辑') {
+				update(form)
+					.then(res => {
+						uni.showToast({
+							title: '编辑成功',
+							icon: 'none'
+						})
+						// this.category = ''
+						done()
+						uni.startPullDownRefresh({})
+					})
+					.catch(() => {
+						unloading()
+					})
+			}
+		}
+	}
+}
+</script>
+<style>
+page {
+	background: #f6f6f6;
+}
+</style>
+<style lang="scss" scoped>
+.nav-right {
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: normal;
+	padding-right: 24rpx;
+}
+</style>

pages/myReserve/detail.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="container">
+
+		<!-- 蓝色头部信息区 -->
+		<view class="header-section">
+			<view class="serial-no">流水号：{{orderInfo.code}}</view>
+			<view class="time-info">{{orderInfo.bookingTime}}</view>
+			<view class="project-info"> {{orderInfo.itemName}} </view>
+		</view>
+
+		<!-- 取号信息卡片 -->
+		<view class="info-card new-card" v-if="isTicketInfoShow">
+			<view class="ticket_status">无感取号成功</view>
+			<view class="info-row">
+				<text class="info-label">排队号</text>
+				<text class="info-value">{{ticketInfo.queueNum}}</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">窗口号</text>
+				<text class="info-value">{{ticketInfo.counterlist}}</text>
+			</view>
+		</view>
+
+		<!-- 详情信息卡片 -->
+		<view class="info-card">
+			<view class="info-row">
+				<text class="info-label">预约大厅</text>
+				<text class="info-value">广西区直住房保障中心</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">预约部门</text>
+				<text class="info-value">{{orderInfo.deptName}}</text>
+			</view>
+		</view>
+
+		<view class="info-card">
+			<view class="info-row">
+				<text class="info-label">姓名</text>
+				<text class="info-value">{{ userinfo.name }}</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">手机号</text>
+				<text class="info-value">{{ userinfo.phone }}</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">证件类型</text>
+				<text class="info-value">身份证</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">证件号码</text>
+				<text class="info-value">{{ userinfo.idCard }}</text>
+			</view>
+		</view>
+
+		<!-- 取消预约按钮 -->
+		<view class="btn-wrap">
+			<button class="btn-cancel" v-if="orderInfo.status==1" @click="handleCancel">取消预约</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getDetail,
+		getUserInfo,
+		cancel,
+		getIsSuccessTicket
+	} from '@/api/reserve.js'
+
+	export default {
+		data() {
+			return {
+				// 可通过页面传参动态获取以下数据
+				isTicketInfoShow: false,
+				ticketInfo: {},
+				orderInfo: {},
+				userinfo: {},
+				id: '',
+
+			}
+		},
+		onLoad(options) {
+			this.id = options.id
+			this.getTicketInfo()
+			this.getUserInfo()
+			this.getDetail()
+
+		},
+		methods: {
+			// 取号详情
+			getTicketInfo() {
+				getIsSuccessTicket({
+					yyNo: this.id
+				}).then(res => {
+					if (res.code) {
+						this.isTicketInfoShow = Object.keys(res.data).length > 0 ? true : false
+						this.ticketInfo = res.data
+					}
+				})
+			},
+			// 预约详情
+			getDetail() {
+				getDetail({
+					id: this.id
+				}).then(res => {
+					this.orderInfo = res.data
+
+				})
+			},
+			// 个人信息详情
+			getUserInfo() {
+				getUserInfo().then(res => {
+					this.userinfo = res.data
+				})
+			},
+			// 返回上一页
+			handleGoBack() {
+				uni.navigateBack()
+			},
+			// 取消预约
+			handleCancel() {
+				uni.showModal({
+					title: '提示',
+					content: '确定要取消该预约吗？',
+					success: (res) => {
+						if (res.confirm) {
+							cancel({
+								id: this.orderInfo.id
+							}).then(res => {
+								if (res.code == 200) {
+									uni.showToast({
+										title: '取消成功',
+										icon: 'success'
+									})
+
+									setTimeout(() => {
+										uni.navigateBack({
+											delta: 1 // 返回的页面数
+										})
+									}, 2000)
+								}
+							})
+
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	* {
+		box-sizing: border-box;
+	}
+
+	/* 全局容器 */
+	.container {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* 蓝色头部信息区 */
+	.header-section {
+		width: 100%;
+		background: linear-gradient(to right, rgba(75, 112, 252, 1), rgba(67, 195, 252, 1));
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+	}
+
+	.serial-no {
+		font-size: 32rpx;
+		color: #ffffff;
+		text-align: center;
+		margin-bottom: 30rpx;
+		opacity: 0.9;
+	}
+
+	.time-info {
+		font-size: 38rpx;
+		font-weight: 500;
+		color: #ffffff;
+		margin-bottom: 15rpx;
+		line-height: 1.4;
+	}
+
+	.project-info {
+		font-size: 32rpx;
+		color: #ffffff;
+		line-height: 1.5;
+		background-color: rgba(255, 255, 255, 0.1);
+		border-radius: 16rpx;
+		padding: 20rpx;
+	}
+
+	/* 信息卡片 */
+	.info-card {
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		margin: 20rpx 30rpx;
+		padding: 0 30rpx;
+	}
+
+	.new-card {
+		padding-top: 20rpx;
+	}
+
+	.ticket_status {
+		margin: 0 auto;
+		padding: 10rpx 32rpx;
+		width: fit-content;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: rgba(3, 195, 106, 1);
+		background-color: rgba(220, 255, 239, 1);
+		border-radius: 10rpx;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: flex-start;
+		padding: 20rpx 0;
+	}
+
+	.info-label {
+		width: 220rpx;
+		font-size: 34rpx;
+		font-weight: 500;
+		color: #333333;
+		flex-shrink: 0;
+	}
+
+	.info-value {
+		flex: 1;
+		font-size: 34rpx;
+		color: #333333;
+		text-align: right;
+		line-height: 1.5;
+	}
+
+	/* 取消预约按钮 */
+	.btn-wrap {
+		padding: 20rpx 30rpx 40rpx;
+	}
+
+	.btn-cancel {
+		width: 100%;
+		height: 88rpx;
+		line-height: 88rpx;
+		background-color: rgba(255, 239, 239, 1);
+		color: rgba(244, 54, 54, 1);
+		border-radius: 44rpx;
+		font-size: 34rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(255, 195, 195, 1);
+	}
+</style>

pages/myReserve/index.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="container">
+		<!-- 预约列表 -->
+		<view class="list-container">
+			<!-- 预约成功状态 -->
+			<view class="reserve-item" v-for="(item, index) in successList" :key="`success-${index}`">
+				<view class="item-header">
+					<text class="item-time">{{ item.bookingTime }}</text>
+					<text
+						:class="['status', item.status == 1 ? 'success' : 'canceled']">{{ item.status == 1 ? '预约成功' : '已取消' }}</text>
+				</view>
+				<view class="item-content">
+					<text class="item-project">{{ item.itemName }}</text>
+				</view>
+				<view class="item-btns">
+					<button class="btn-cancel" v-if="item.status == 1" @click="handleCancel(item)">取消预约</button>
+					<button class="btn-cancel" v-if="item.status == 4">{{getStatus(item.status)}}</button>
+					<button class="btn-detail" @click="handleDetail(item)">查看详情</button>
+				</view>
+			</view>
+
+			<!-- 空状态 -->
+			<view class="empty-tip" v-if="successList.length === 0"> 暂无预约记录 </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getUserInfo,
+		myReserve,
+		cancel
+	} from '@/api/reserve.js'
+
+	export default {
+		data() {
+			return {
+				// 预约成功列表（和设计图完全一致）
+				successList: [],
+				userinfo: {},
+				statusList: [],
+			}
+		},
+		onLoad() {
+			this.getUserInfo()
+			this.statusList = uni.getStorageSync('statusList');
+		},
+		methods: {
+			getStatus(code){
+				return this.statusList.find(item=>item.dictKey == code)?.dictValue
+			},
+			getUserInfo() {
+				getUserInfo().then(res => {
+					this.userinfo = res.data
+					this.getList()
+				})
+			},
+			getList() {
+				let params = {
+					size: 10,
+					current: 1,
+					idCard: this.userinfo.idCard,
+					descs: 'update_time'
+				}
+				myReserve(params).then(res => {
+					this.successList = res.data.records
+				})
+			},
+			// 返回上一页
+			handleGoBack() {
+				uni.navigateBack()
+			},
+			// 取消预约
+			handleCancel(item) {
+				uni.showModal({
+					title: '提示',
+					content: '确定要取消该预约吗？',
+					success: res => {
+						if (res.confirm) {
+							cancel({
+								id: item.id
+							}).then(res => {
+								if (res.code == 200) {
+									this.getList()
+								}
+							})
+						}
+					}
+				})
+			},
+			// 查看详情
+			handleDetail(item) {
+				uni.navigateTo({
+					url: `/pages/myReserve/detail?id=${item.id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	/* 全局容器 */
+	.container {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* 列表容器 */
+	.list-container {
+		flex: 1;
+		padding: 20rpx 30rpx;
+	}
+
+	/* 预约项卡片 */
+	.reserve-item {
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.item-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20rpx;
+	}
+
+	.item-time {
+		font-size: 34rpx;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.status {
+		font-size: 30rpx;
+		font-weight: 500;
+		padding: 6rpx 16rpx;
+		border-radius: 8rpx;
+	}
+
+	.status.success {
+		background-color: #e6f9e6;
+		color: #00b578;
+	}
+
+	.status.canceled {
+		background-color: #f0f0f0;
+		color: #999999;
+	}
+
+	.item-content {
+		margin-bottom: 30rpx;
+	}
+
+	.item-project {
+		font-size: 32rpx;
+		color: #333333;
+		line-height: 1.5;
+	}
+
+	.item-btns {
+		display: flex;
+		justify-content: flex-end;
+		gap: 20rpx;
+	}
+
+	.btn-cancel {
+		margin: 0;
+		width: 200rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		background-color: rgba(255, 239, 239, 1);
+		color: rgba(244, 54, 54, 1);
+		border-radius: 35rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(255, 195, 195, 1);
+	}
+
+	.btn-detail {
+		margin: 0;
+		width: 200rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		background-color: rgba(242, 247, 255, 1);
+		color: rgba(49, 134, 255, 1);
+		border-radius: 35rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(208, 227, 255, 1);
+	}
+
+	/* 空状态提示 */
+	.empty-tip {
+		text-align: center;
+		padding: 100rpx 0;
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

pages/news/detail.vue

@@ -0,0 +1,290 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward" title="新闻详情页"
+			:background="{ background: '#fff' }" title-color="#000000">
+			<view class="right-nav" slot="right">
+				<image src="/static/images/news/search.png" class="icon icon-search" mode="widthFix"></image>
+				<image src="/static/images/news/menu.png" class="icon icon-menu" mode="widthFix"></image>
+			</view>
+		</u-navbar>
+
+		<view class="header">
+			<image src="" class="avatar" mode=""></image>
+			<view class="info">
+				<view class="name">
+					中国空间站
+					<text class="tag">专栏作家</text>
+				</view>
+				<view class="date">11-12</view>
+			</view>
+			<view class="btn">+关注</view>
+		</view>
+
+		<view class="content">
+			<view class="title">
+				天舟五号创造多个航天新纪录
+			</view>
+			<view class="static">
+				<view class="left">
+					<view class="block">
+						<image src="/static/images/news/gf.png" class="gf"></image>
+						官方
+					</view>
+					<view class="block">
+						<image src="/static/images/news/x.png" class="gf"></image>
+						焦点新闻
+					</view>
+				</view>
+				<view class="right">
+					<image src="/static/images/news/l.png" class="l" mode="widthFix"></image>
+					66666
+				</view>
+			</view>
+			<view class="detail">
+				<u-parse :html="content"></u-parse>
+			</view>
+		</view>
+
+		<view class="footer">
+			<input type="text" value="" placeholder="说点什么..." class="ipt" />
+			<view class="control">
+				<view class="block">
+					<image src="/static/images/news/c.png" class="icon c" mode="widthFix"></image>
+					458
+				</view>
+				<view class="block">
+					<image src="/static/images/news/s.png" class="icon s" mode="widthFix"></image>
+				</view>
+				<view class="block">
+					<image src="/static/images/news/t.png" class="icon t" mode="widthFix"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+
+<script>
+	export default {
+		data() {
+			return {
+				content: `<p>在北京航天飞行控制中心拍摄的天舟五号货运飞船与空间站组合体完成自主快速交会对接示意图。孙丰晓摄（新华社发）</p>
+				<p>北京时间2022年11月12日10时03分，在文昌航天发射场，搭载天舟五号货运飞船的长征七号遥六运载火箭点火发射，将天舟五号货运飞船送入预定轨道。随后，天舟五号货运飞船与在轨运行的空间站组合体进行自主快速交会对接，中国航天员首次在空间站迎接货运飞船来访。</p>
+				<p>朝着在距离地面约400公里轨道上运行的中国空间站组合体，天舟五号首次实现2小时自主快速交会对接，创造世界纪录。这一技术突破对于提升我国空间交会对接水平，提升空间站任务应急物资补给能力具有重要意义。</p>
+				<p>空间站阶段最快交会对接，让人类航天器交会对接用时进入“2小时”时代。</p>
+				<p>此次任务是中国空间站“T”字基本构型在轨组装完成后，“太空快递”首次送达，执行运输任务的仍是长七火箭。</p>`
+			};
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		padding: 0 0 150rpx;
+	}
+
+	.right-nav {
+		display: flex;
+		align-items: center;
+		margin-right: 40rpx;
+
+		.icon {
+			height: auto;
+
+			&-search {
+				width: 40rpx;
+				margin-right: 40rpx;
+			}
+
+			&-menu {
+				width: 40rpx;
+			}
+		}
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		padding: 44rpx;
+
+		.avatar {
+			flex-shrink: 0;
+			width: 69rpx;
+			height: 69rpx;
+			background: #ffffff;
+			border: 1px solid #69b0ff;
+			border-radius: 50%;
+		}
+
+		.info {
+			flex: 1;
+			margin-left: 14rpx;
+
+			.name {
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #000000;
+				line-height: 36rpx;
+
+				.tag {
+					margin-left: 10rpx;
+					display: inline-block;
+					padding: 8rpx 10rpx;
+					font-size: 14rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #4cbeca;
+					line-height: 21rpx;
+					border: 1px solid #0bb9c8;
+					border-radius: 6px;
+				}
+			}
+
+			.date {
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #a3a3a3;
+				line-height: 36rpx;
+			}
+		}
+
+		.btn {
+			padding: 8rpx 19rpx;
+			background: #e6e6e6;
+			border-radius: 6rpx;
+			font-size: 20rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #4cbeca;
+			line-height: 1;
+		}
+	}
+
+	.content {
+		padding: 0 44rpx;
+
+		.title {
+			font-size: 40rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #000000;
+			line-height: 47rpx;
+		}
+
+		.static {
+			margin-top: 34rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.left,
+			.right {
+				display: flex;
+				align-items: center;
+
+				.block {
+					display: flex;
+					align-items: center;
+					margin-right: 10rpx;
+				}
+			}
+
+			.left {
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #787878;
+				line-height: 1;
+
+				.gf {
+					width: 24rpx;
+					height: 24rpx;
+					margin-right: 8rpx;
+				}
+			}
+
+			.right {
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #787878;
+				line-height: 1;
+
+				.l {
+					width: 25rpx;
+					height: auto;
+					margin-right: 6rpx;
+				}
+			}
+		}
+
+		.detail {
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #000000;
+			line-height: 47rpx;
+			margin-top: 50rpx;
+		}
+	}
+
+	.footer {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		height: 100rpx;
+		padding: 20rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #ffffff;
+
+		.ipt {
+			width: 380rpx;
+			height: 77rpx;
+			background: #f7f7f7;
+			border-radius: 38px;
+			padding: 0 37rpx;
+			box-sizing: border-box;
+			margin-right: 20rpx;
+		}
+
+		.control {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+
+			.block {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex: 1;
+			}
+
+			.icon {
+				height: auto;
+			}
+
+			.c {
+				width: 41rpx;
+				margin-right: 10rpx;
+			}
+
+			.s {
+				width: 36rpx;
+			}
+
+			.t {
+				width: 31rpx;
+			}
+		}
+	}
+</style>

pages/news/list.vue

@@ -0,0 +1,259 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-color="#fff" back-icon-size="35" title="新闻动态" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }"
+			title-color="#fff">
+			<image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
+		</u-navbar>
+
+		<view class="tab">
+			<u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#69b0ff" inactive-color="#595959"
+				height="100" @change="change"></u-tabs>
+		</view>
+
+		<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
+			<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
+				<scroll-view scroll-y style="width: 100%;height: 100%;" refresher-enabled
+					:refresher-triggered="pitem.triggered" @scrolltolower="onreachBottom"
+					@refresherrefresh="refresherrefresh(pindex)" @refresherrestore="refresherrestore(pindex)"
+					@refresherabort="refresherabort(pindex)">
+					<view class="content">
+						<navigator class="news" v-for="(item, index) in contentList[pindex].list" :key="index"
+							url="/pages/news/detail" hover-class="none">
+							<view class="head">
+								<image src="" class="avatar" mode=""></image>
+								<view class="info">
+									<view class="name">
+										中国空间站
+										<text class="tag">专栏作家</text>
+									</view>
+									<view class="date">11-12</view>
+								</view>
+								<u-icon name="arrow-right" size="35" color="#C5C5C5"></u-icon>
+							</view>
+							<view class="des">
+								天舟五号创造多个航天新纪录。
+							</view>
+						</navigator>
+						<view class="nomore">
+							<u-loadmore :status="contentList[pindex].status" />
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				swiperHeight: 0,
+				tabs: [{
+						name: '互动',
+						triggered: false,
+						_triggered: false
+					},
+					{
+						name: '动态',
+						triggered: false,
+						_triggered: false
+					},
+					{
+						name: '通知',
+						triggered: false,
+						_triggered: false
+					}
+				],
+				contentList: [{
+						list: 8,
+						page: 1,
+						status: 'loadmore'
+					},
+					{
+						list: 8,
+						page: 1,
+						status: 'loadmore'
+					},
+					{
+						list: 8,
+						page: 1,
+						status: 'loadmore'
+					}
+				],
+				current: 0
+			};
+		},
+		onLoad() {},
+		onReady() {
+			let that = this;
+			uni.getSystemInfo({
+				success(e) {
+					console.log(e);
+					let {
+						windowWidth,
+						windowHeight,
+						safeArea
+					} = e;
+					const query = uni.createSelectorQuery().in(that);
+					query
+						.select('#swiperBox')
+						.boundingClientRect(data => {
+							that.swiperHeight = safeArea.bottom - data.top;
+						})
+						.exec();
+				}
+			});
+		},
+		onPullDownRefresh() {
+			setTimeout(() => {
+				uni.stopPullDownRefresh();
+			}, 1500);
+		},
+		methods: {
+			tabsChange(e) {
+				this.current = e.detail.current;
+			},
+			refresherrefresh(index) {
+				console.log('自定义下拉刷新被触发');
+				let _this = this;
+				if (_this.tabs[index]._triggered) {
+					return;
+				}
+				_this.tabs[index]._triggered = true;
+				//界面下拉触发，triggered可能不是true，要设为true
+				if (!_this.tabs[index].triggered) {
+					_this.tabs[index].triggered = true;
+				}
+
+				setTimeout(() => {
+					_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
+					_this.tabs[index]._triggered = false;
+				}, 10);
+			},
+			refresherrestore(index) {
+				console.log('自定义下拉刷新被复位');
+				let _this = this;
+				_this.tabs[index].triggered = false;
+				_this.tabs[index]._triggered = false;
+			},
+			refresherabort(index) {
+				console.log('自定义下拉刷新被中止	');
+				let _this = this;
+				_this.tabs[index].triggered = false;
+				_this.tabs[index]._triggered = false;
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				let current = this.current;
+				if (this.contentList[current].page >= 3) return;
+				this.contentList[current].status = 'loading';
+				setTimeout(() => {
+					this.contentList[current].page = ++this.contentList[current].page;
+					this.contentList[current].list += 10;
+					if (this.contentList[current].page >= 3)
+						this.contentList[current].status = 'nomore';
+					else this.contentList[current].status = 'loading';
+				}, 2000);
+			},
+			change(index) {
+				this.current = index;
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.message-icon {
+		width: 32rpx;
+		height: auto;
+		margin-right: 27rpx;
+	}
+
+	.tab {
+		margin: 0 0 10rpx;
+		border-bottom: 1px solid #e4e7ed;
+	}
+
+	.content {
+		padding: 0 0 150rpx;
+
+		.news {
+			&:not(:last-of-type) {
+				border-bottom: 2rpx solid #e4e7ed;
+			}
+		}
+	}
+
+	.nomore {
+		padding: 30rpx 20rpx;
+	}
+
+	.news {
+		margin: 30rpx 30rpx 0;
+		padding: 0 0 30rpx;
+
+		.head {
+			display: flex;
+
+			.avatar {
+				flex-shrink: 0;
+				width: 69rpx;
+				height: 69rpx;
+				background: #ffffff;
+				// border: 1px solid #14b9c8;
+				border: 1px solid #5f88ff;
+				border-radius: 50%;
+			}
+
+			.info {
+				flex: 1;
+				margin-left: 14rpx;
+
+				.name {
+					display: flex;
+					align-items: center;
+					font-size: 28rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #000000;
+					line-height: 36rpx;
+
+					.tag {
+						margin-left: 15rpx;
+						display: inline-block;
+						padding: 8rpx 10rpx;
+						font-size: 14rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #69b0ff;
+						line-height: 21rpx;
+						border: 1px solid #69b0ff;
+						border-radius: 6px;
+					}
+				}
+
+				.date {
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #a3a3a3;
+					line-height: 36rpx;
+				}
+			}
+		}
+
+		.des {
+			margin-top: 40rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			color: #000000;
+			line-height: 47rpx;
+		}
+	}
+
+	.swiper-box {
+		height: 100vh;
+	}
+</style>

pages/reserve/confirm.vue

@@ -0,0 +1,199 @@
+<template>
+	<view class="container">
+		<!-- 预约信息卡片 -->
+		<view class="info-card">
+			<view class="info-row">
+				<text class="info-label">预约项目</text>
+				<text class="info-value">{{ itemData.name }}</text>
+			</view>
+			<view class="info-row split-row">
+				<text class="info-label">预约时间</text>
+				<text class="info-value">{{ reserveTime }}</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">预约大厅</text>
+				<text class="info-value">广西区直住房保障中心</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">预约部门</text>
+				<text class="info-value">{{ itemData.deptName }}</text>
+			</view>
+		</view>
+
+		<!-- 个人信息卡片 -->
+		<view class="info-card">
+			<view class="info-row">
+				<text class="info-label">姓名</text>
+				<text class="info-value">{{ userinfo.name }}</text>
+			</view>
+			<view class="info-row split-row">
+				<text class="info-label">手机号</text>
+				<text class="info-value">{{ userinfo.phone }}</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">证件类型</text>
+				<text class="info-value">身份证</text>
+			</view>
+			<view class="info-row">
+				<text class="info-label">证件号码</text>
+				<text class="info-value">{{ userinfo.idCard }}</text>
+			</view>
+		</view>
+
+		<!-- 底部按钮栏 -->
+		<view class="btn-bar">
+			<button class="btn-back" @click="handleGoBack">返回</button>
+			<button class="btn-confirm" @click="handleConfirm">确认预约</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getUserInfo,
+		submit
+	} from '@/api/reserve.js'
+
+	export default {
+		data() {
+			return {
+				userinfo: {},
+				itemData: {},
+				reserveTime: ''
+			}
+		},
+		onLoad(options) {
+			this.itemData = JSON.parse(decodeURIComponent(options.data))
+			this.reserveTime = options.time
+			// this.userinfo = this.$store.state.userInfo
+			this.getUserInfo()
+		},
+		methods: {
+			// 返回上一页
+			handleGoBack() {
+				uni.navigateBack()
+			},
+			getUserInfo(){
+				getUserInfo().then(res=>{
+					this.userinfo = res.data
+				})
+			},
+			// 确认预约
+			handleConfirm() {
+				const params = {
+					userId: this.userinfo.id,
+					applicant: this.userinfo.name,
+					phone: this.userinfo.phone,
+					idCard: this.userinfo.idCard,
+					itemId: this.itemData.id,
+					itemName: this.itemData.name,
+					deptId: this.itemData.deptId,
+					bookingDate: this.reserveTime.slice(0, 10),
+					timeSlot: this.reserveTime.slice(11),
+				}
+
+				submit(params).then(res => {
+					if (res.code == 200) {
+						uni.showToast({
+							title: '预约成功！',
+							icon: 'success'
+						})
+						
+						setTimeout(() => {
+							uni.reLaunch({
+								url: '/pages/home/home'
+							})
+						}, 2000)
+					}
+				}).catch(err => {})
+
+
+				// 可在此处添加跳转至预约成功页/首页逻辑
+				// uni.reLaunch({ url: '/pages/index/index' })
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	/* 全局容器 */
+	.container {
+		min-height: 92vh;
+		background-color: #f5f5f5;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* 信息卡片 */
+	.info-card {
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		margin: 20rpx 30rpx;
+		padding: 0 30rpx;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: flex-start;
+		padding: 20rpx 0;
+	}
+
+	.split-row {
+		border-bottom: 1rpx solid #eeeeee;
+	}
+
+	.info-label {
+		width: 220rpx;
+		font-size: 34rpx;
+		font-weight: 500;
+		color: #333333;
+		flex-shrink: 0;
+	}
+
+	.info-value {
+		flex: 1;
+		font-size: 34rpx;
+		color: #333333;
+		text-align: right;
+		line-height: 1.5;
+	}
+
+	/* 底部按钮栏 */
+	.btn-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		display: flex;
+		padding: 20rpx 30rpx 40rpx;
+		background-color: #fff;
+		gap: 30rpx;
+		margin-top: auto;
+		box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.btn-back {
+		flex: 1;
+		height: 88rpx;
+		line-height: 88rpx;
+		background-color: rgba(242, 247, 255, 1);
+		color: rgba(49, 134, 255, 1);
+		border-radius: 44rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(208, 227, 255, 1);
+	}
+
+	.btn-confirm {
+		flex: 2;
+		height: 88rpx;
+		line-height: 88rpx;
+		background-color: rgba(49, 134, 255, 1);
+		color: #ffffff;
+		border-radius: 44rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(208, 227, 255, 1);
+	}
+</style>

pages/reserve/index.vue

@@ -0,0 +1,300 @@
+<template>
+	<view class="container">
+		<!-- 顶部Tab切换 -->
+		<view class="tab-bar">
+			<view class="tab-item" :class="{ active: activeTab === 'department' }" @click="switchTab('department')">
+				单位预约 </view>
+			<view class="tab-item" :class="{ active: activeTab === 'person' }" @click="switchTab('person')"> 个人预约
+			</view>
+		</view>
+
+		<!-- 搜索栏 -->
+		<view class="search-bar">
+			<view class="search-input-wrap">
+				<view class="search-icon"></view>
+				<input class="search-input" v-model="searchKeyword" clearable placeholder="请输入关键字搜索"
+					placeholder-class="placeholder-class" @confirm="handleSearch" />
+			</view>
+			<button class="search-btn" @click="handleSearch">搜索</button>
+		</view>
+
+		<!-- 部门列表 -->
+		<!-- <view class="list-container">
+			<view v-if="departmentList.length > 0">
+				<view class="list-item" v-for="(item, index) in departmentList" :key="index"
+					@click="handleDeptClick(item)">
+					<view class="item-left">
+						<view class="dot"></view>
+						<text class="item-text">{{ item.deptName }}</text>
+					</view>
+					<view class="arrow"></view>
+				</view>
+			</view>
+			<view v-else class="empty-tip">暂无事项数据</view>
+		</view> -->
+
+		<!-- 事项列表 -->
+		<view class="list-container">
+			<view v-if="itemList.length > 0">
+				<view class="list-item" v-for="(item, index) in itemList" :key="index" @click="handleItemClick(item)">
+					<view class="item-left">
+						<view class="dot"></view>
+						<text class="item-text">{{ item.name }}</text>
+					</view>
+					<view class="arrow"></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		deptList,
+		itemList
+	} from '@/api/reserve.js'
+
+	export default {
+		data() {
+			return {
+				activeTab: 'department', // 当前激活的Tab：department-部门预约，person-事项预约
+				searchKeyword: '', // 搜索关键词
+				deptId: '',
+				// 部门列表（和设计图完全一致）
+				departmentList: [],
+				itemList: [],
+				type: 2 // 1个人, 2单位
+			}
+		},
+		onLoad(option) {
+			if (option.id) {
+				this.deptId = option.id
+				// this.switchTab('person')
+			} else {
+				// this.getDeptList()
+			}
+			this.getItemList()
+		},
+		methods: {
+			// Tab切换
+			switchTab(tab) {
+				if (this.activeTab === tab) return
+
+				if (tab == 'department') {
+					// this.getDeptList()
+					this.type = 2
+				} else {
+					this.type = 1
+				}
+				this.activeTab = tab
+				this.searchKeyword = '' // 切换Tab清空搜索
+				this.getItemList()
+				// this.deptId = ''
+			},
+			// 搜索事件
+			handleSearch() {
+				// if (this.activeTab == 'department') {
+				// 	// this.getDeptList()
+				// } else {}
+				this.getItemList()
+			},
+			// 部门列表项点击事件
+			handleDeptClick(item) {
+				this.deptId = item.id
+				this.switchTab('person')
+			},
+			// 事项列表项点击事件
+			handleItemClick(item) {
+				const data = JSON.stringify(item)
+				uni.navigateTo({
+					url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
+				})
+			},
+			// 获取部门列表
+			getDeptList() {
+				let params = {
+					size: 10,
+					current: 1,
+					status: 1,
+					deptName: this.searchKeyword
+				}
+				deptList(params).then(res => {
+					if (res.code === 200) {
+						this.departmentList = res.data.records.filter(item => item.parentId != 0)
+					}
+				})
+			},
+			// 获取事项列表
+			getItemList() {
+				// type:1个人, 2单位
+				let params = {
+					size: 10,
+					current: 1,
+					status: 1,
+					// deptId: this.deptId || '',
+					itemType: this.type,
+					name: this.searchKeyword
+				}
+				itemList(params).then(res => {
+					if (res.code === 200) {
+						this.itemList = res.data.records
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	* {
+		box-sizing: border-box;
+	}
+
+	/* 全局容器 */
+	.container {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	}
+
+	/* Tab栏 */
+	.tab-bar {
+		display: flex;
+		background-color: #ffffff;
+		height: 90rpx;
+		line-height: 90rpx;
+		position: relative;
+	}
+
+	.tab-item {
+		flex: 1;
+		text-align: center;
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 500;
+		position: relative;
+	}
+
+	.tab-item.active {
+		color: #409eff;
+		font-size: 36rpx;
+	}
+
+	.tab-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 120rpx;
+		height: 6rpx;
+		background-color: #409eff;
+		border-radius: 3rpx;
+	}
+
+	/* 搜索栏 */
+	.search-bar {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #f5f5f5;
+		gap: 20rpx;
+	}
+
+	.search-input-wrap {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		background-color: #ffffff;
+		border-radius: 50rpx;
+		height: 70rpx;
+		padding: 0 30rpx;
+	}
+
+	.search-icon {
+		width: 32rpx;
+		height: 32rpx;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
+		background-size: contain;
+		background-repeat: no-repeat;
+		margin-right: 20rpx;
+	}
+
+	.search-input {
+		flex: 1;
+		height: 100%;
+		font-size: 30rpx;
+		color: #333333;
+		background: transparent;
+		border: none;
+		outline: none;
+	}
+
+	.placeholder-class {
+		color: #999999;
+		font-size: 30rpx;
+	}
+
+	.search-btn {
+		width: 140rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		background: linear-gradient(to left, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
+		color: #ffffff;
+		border-radius: 50rpx;
+		font-size: 30rpx;
+		font-weight: 500;
+		border: none;
+		padding: 0;
+	}
+
+	/* 列表容器 */
+	.list-container {
+		padding: 0 30rpx;
+	}
+
+	.list-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		padding: 30rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.item-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
+		margin-right: 16rpx;
+	}
+
+	.item-text {
+		font-size: 34rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	.arrow {
+		width: 16rpx;
+		height: 16rpx;
+		border-right: 4rpx solid #165dff;
+		border-top: 4rpx solid #165dff;
+		transform: rotate(45deg);
+	}
+
+	/* 空状态提示 */
+	.empty-tip {
+		text-align: center;
+		padding: 100rpx 0;
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

pages/reserve/notice.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="container">
+    <!-- 协议内容区域 -->
+    <view class="agreement-content">
+      <view class="article" v-html="article"> </view>
+    </view>
+
+    <!-- 底部按钮栏 -->
+    <view class="btn-bar">
+      <button class="btn-back" @click="handleGoBack">返回</button>
+      <button class="btn-confirm" @click="handleConfirm">确定预约</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { noticeData } from '@/api/reserve.js'
+
+export default {
+  name: 'ConfirmPage',
+  data() {
+    return {
+      article: '',
+      itemData: {}
+    }
+  },
+
+  onLoad(options) {
+    this.itemData = JSON.parse(decodeURIComponent(options.data))
+    this.getNotice()
+  },
+  methods: {
+    // 返回上一页
+    handleGoBack() {
+      uni.navigateBack()
+    },
+    // 确定预约
+    handleConfirm() {
+      const data = JSON.stringify(this.itemData)
+      uni.navigateTo({
+        url: `/pages/reserve/timeSelect?data=${encodeURIComponent(data)}`
+      })
+    },
+    getNotice() {
+      let params = {
+        descs: 'update_time',
+        size: 10,
+        current: 1,
+        deptId: this.itemData.id
+      }
+      noticeData(params).then(res => {
+        if (res.code === 200) {
+          this.article = res.data.records[0].content
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* 🔥 uni-app 必须加这个，页面高度才会生效 */
+// page {
+//   height: 100%;
+// }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* 最外层 flex 容器 */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* 兼容更好 */
+  background-color: #f5f5f5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+}
+
+/* 内容区域：自动占满剩余高度 + 滚动 */
+.agreement-content {
+  flex: 1;
+  overflow: auto;
+  padding: 40rpx 30rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  line-height: 1.6;
+}
+
+.article {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 15rpx;
+}
+
+.list-item {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: 500;
+  margin-left: 20rpx;
+  margin-bottom: 10rpx;
+}
+
+/* 底部按钮：固定在最下方，不使用 absolute */
+.btn-bar {
+  display: flex;
+  padding: 20rpx 30rpx 40rpx;
+  background-color: #ffffff;
+  gap: 30rpx;
+  border-top: 1rpx solid #eee;
+  box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.btn-back {
+  flex: 1;
+  height: 88rpx;
+  line-height: 88rpx;
+  background-color: rgba(242, 247, 255, 1);
+  color: rgba(49, 134, 255, 1);
+  border-radius: 44rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  border: 2rpx solid rgba(208, 227, 255, 1);
+}
+
+.btn-confirm {
+  flex: 2;
+  height: 88rpx;
+  line-height: 88rpx;
+  background-color: rgba(49, 134, 255, 1);
+  color: #ffffff;
+  border-radius: 44rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  border: 2rpx solid rgba(208, 227, 255, 1);
+}
+</style>

pages/reserve/timeSelect.vue

@@ -0,0 +1,327 @@
+<template>
+	<view class="container">
+
+		<!-- 信息栏 -->
+		<view class="info-bar">
+			<view class="info-title">住房档案变更（房屋坐落变更）</view>
+			<view class="info-dept">公积金管理中心</view>
+		</view>
+
+		<!-- 日历 -->
+		<view class="calendar-wrap">
+			<view class="calendar-header">
+				<text class="week-item" v-for="week in weekList" :key="week">{{ week }}</text>
+			</view>
+
+			<view class="date-row" v-for="(row, index) in calendarList" :key="index">
+				<view class="date-item" :class="{
+            active: item && item.active,
+            has: item && item.isAvailable,
+            disabled: !item || !item.isAvailable
+          }" v-for="(item, idx) in row" :key="idx" @click="selectDate(item)">
+
+					<text class="date-num">{{ item ? getDay(item.date) : '无' }}</text>
+					<text class="date-status" v-if="item">{{ item.isAvailable ? '有' : '无' }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 时段 -->
+		<view class="time-list">
+			<view class="time-item" :class="{ selected: item.selected, disabled: item.remainingCount <= 0 }"
+				v-for="item in currentTimeSlots" :key="item.time" @click="selectTime(item)">
+				<view>{{ item.time }}</view>
+				<view>可预约 {{ item.remainingCount }}</view>
+			</view>
+		</view>
+
+		<!-- 底部 -->
+		<view class="footer-bar">
+			<view class="selected-info">已选：{{ selectedDate }} {{ selectedTime }}</view>
+			<view class="btn-box">
+				<button class="btn-gray" @click="handleGoBack">返回</button>
+				<button class="btn-blue" @click="handleNext">下一步</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		availableDate
+	} from '@/api/reserve.js'
+
+	export default {
+		data() {
+			return {
+				weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+				dateList: [],
+				calendarList: [],
+				currentTimeSlots: [],
+				selectedDate: "",
+				selectedTime: "",
+				itemData: {}
+			};
+		},
+		onLoad(options) {
+			this.itemData = JSON.parse(decodeURIComponent(options.data))
+			this.fetchData()
+		},
+		methods: {
+			fetchData() {
+				availableDate({
+					itemId: this.itemData.id
+				}).then(res => {
+					if (res.code === 200) {
+						this.dateList = res.data
+						this.initCalendar()
+						// 兼容无数据/首条不可选情况
+						const firstAva = this.dateList.find(item => item.isAvailable)
+						firstAva && this.selectDate(firstAva)
+					}
+				})
+			},
+
+			// 核心重写：100%贴合需求 - 按weekDayName对列+跨周换行+今日为起点前后空
+			initCalendar() {
+				// 初始化两行（最多跨周展示两行，满足业务场景）
+				const row1 = Array(7).fill(null) // 第一行（今日所在周）
+				const row2 = Array(7).fill(null) // 第二行（跨周后的下一周）
+				// 星期转列索引映射（固定匹配表头）
+				const weekToCol = {
+					"星期一": 0,
+					"星期二": 1,
+					"星期三": 2,
+					"星期四": 3,
+					"星期五": 4,
+					"星期六": 5,
+					"星期日": 6
+				}
+				// 今日是列表第一条，获取今日所在星期列，作为展示起点
+				const today = this.dateList[0]
+				if (!today) {
+					this.calendarList = [row1, row2]
+					return
+				}
+				const todayCol = weekToCol[today.weekDayName]
+				// 遍历所有日期，按规则分配到对应行/列
+				this.dateList.forEach(item => {
+					const col = weekToCol[item.weekDayName]
+					if (col === undefined) return
+					// 规则：今日所在列及右侧 → 第一行；今日所在列左侧（跨周）→ 第二行
+					if (col >= todayCol) {
+						row1[col] = item
+					} else {
+						row2[col] = item
+					}
+				})
+				// 最终日历列表（仅保留有数据的行，无数据则不展示）
+				this.calendarList = [row1]
+				if (row2.some(item => item)) {
+					this.calendarList.push(row2)
+				}
+			},
+
+			getDay(date) {
+				if (!date) return "";
+				return date.split("-")[2];
+			},
+
+			formatDate(date) {
+				const arr = date.split("-");
+				return arr[0] + "-" + arr[1] + "-" + arr[2];
+			},
+
+			selectDate(item) {
+				if (!item || !item.isAvailable) return;
+				this.selectedTime = ''
+				this.dateList.forEach(i => (i.active = false));
+				item.active = true;
+				this.selectedDate = this.formatDate(item.date);
+				this.currentTimeSlots = (item.timeSlots || []).map(t => {
+					return {
+						...t,
+						selected: false
+					};
+				});
+				if (this.currentTimeSlots.length > 0) {
+					this.selectTime(this.currentTimeSlots[0]);
+				}
+			},
+
+			selectTime(item) {
+				if (item.remainingCount <= 0) return;
+				this.currentTimeSlots.forEach(t => (t.selected = false));
+				item.selected = true;
+				this.selectedTime = item.time;
+			},
+
+			handleGoBack() {
+				uni.navigateBack();
+			},
+
+			handleNext() {
+				if (!this.selectedDate || !this.selectedTime) {
+					uni.showToast({
+						title: "请选择完整",
+						icon: "none"
+					});
+					return;
+				}
+
+				const data = JSON.stringify(this.itemData)
+				const time = this.selectedDate + " " + this.selectedTime
+				uni.navigateTo({
+					url: `/pages/reserve/confirm?data=${encodeURIComponent(data)}&time=${time}`
+				});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.container {
+		background: #f5f7fa;
+		min-height: 100vh;
+	}
+
+	.info-bar {
+		background: linear-gradient(90deg, rgba(49, 134, 255, 1), #53a8ff);
+		padding: 30rpx;
+		color: #fff;
+	}
+
+	.info-title {
+		font-size: 34rpx;
+		margin-bottom: 10rpx;
+	}
+
+	.info-dept {
+		font-size: 28rpx;
+	}
+
+	.calendar-wrap {
+		background: #fff;
+		margin: 20rpx;
+		border-radius: 16rpx;
+		padding: 20rpx;
+		border: 2rpx solid rgba(49, 134, 255, 1);
+	}
+
+	.calendar-header {
+		display: flex;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
+
+	.week-item {
+		flex: 1;
+		font-size: 30rpx;
+		font-weight: 500;
+	}
+
+	.date-row {
+		display: flex;
+		margin-bottom: 20rpx;
+	}
+
+	.date-item {
+		flex: 1;
+		width: 100rpx;
+		height: 100rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+	}
+
+	.date-item.has {
+		color: rgba(49, 134, 255, 1);
+	}
+
+	.date-item.active {
+		background: rgba(49, 134, 255, 1);
+		color: #fff;
+	}
+
+	.date-item.disabled {
+		color: #ccc;
+	}
+
+	.date-num {
+		font-size: 32rpx;
+	}
+
+	.date-status {
+		font-size: 24rpx;
+	}
+
+	.time-list {
+		padding: 20rpx;
+	}
+
+	.time-item {
+		background: #fff;
+		border-radius: 12rpx;
+		padding: 30rpx;
+		margin-bottom: 16rpx;
+		display: flex;
+		justify-content: space-between;
+		font-size: 30rpx;
+	}
+
+	.time-item.selected {
+		background: #e8f3ff;
+		border: 2rpx solid rgba(49, 134, 255, 1);
+	}
+
+	.time-item.disabled {
+		color: #ccc;
+	}
+
+	.footer-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background: #fff;
+		padding: 20rpx 30rpx 40rpx;
+		margin-top: 20rpx;
+	}
+
+	.selected-info {
+		text-align: center;
+		font-size: 28rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.btn-box {
+		display: flex;
+		gap: 30rpx;
+	}
+
+	.btn-gray {
+		flex: 1;
+		height: 88rpx;
+		line-height: 88rpx;
+		background-color: rgba(242, 247, 255, 1);
+		color: rgba(49, 134, 255, 1);
+		border-radius: 44rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(208, 227, 255, 1);
+	}
+
+	.btn-blue {
+		flex: 2;
+		height: 88rpx;
+		line-height: 88rpx;
+		background-color: rgba(49, 134, 255, 1);
+		color: #ffffff;
+		border-radius: 44rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		border: 2rpx solid rgba(208, 227, 255, 1);
+	}
+</style>

pages/rich/index.vue

@@ -0,0 +1,357 @@
+<template>
+	<view>
+		<view class="editor_toolbox" :style="{ top: `${statusBarHeight}px` }">
+			<u-icon name="arrow-leftward" size="40rpx" color="#303133" @click="onSave"></u-icon>
+			<!-- <i class="iconfont icon-save" @tap="onSave" /> -->
+			<i class="iconfont icon-undo" data-method="undo" @tap="edit" />
+			<i class="iconfont icon-redo" data-method="redo" @tap="edit" />
+			<i class="iconfont icon-img" data-method="insertImg" @tap="edit" />
+			<i class="iconfont icon-video" data-method="insertVideo" @tap="edit" />
+			<i class="iconfont icon-link" data-method="insertLink" @tap="edit" />
+			<i class="iconfont icon-text" data-method="insertText" @tap="edit" />
+			<i class="iconfont icon-clear" @tap="clear" />
+		</view>
+		<view :style="{ paddingTop: `${statusBarHeight + 50}px` }">
+			<mp-html ref="article" container-style="padding:20px" :content="content" domain="" :editable="editable" @remove="remove" />
+		</view>
+		<block v-if="modal">
+			<view class="mask" />
+			<view class="modal">
+				<view class="modal_title">{{ modal.title }}</view>
+				<input class="modal_input" :value="modal.value" maxlength="-1" auto-focus @input="modalInput" />
+				<view class="modal_foot">
+					<view class="modal_button" @tap="modalCancel">取消</view>
+					<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" @tap="modalConfirm">确定</view>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
+import http from '@/http/api.js'
+// 上传图片方法
+function upload(src, type) {
+	return new Promise((resolve, reject) => {
+		console.log('上传', type === 'img' ? '图片' : '视频', '：', src)
+		// resolve(src)
+		const params = {
+			// #ifdef MP-ALIPAY
+			fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
+			// #endif
+			filePath: src,
+			name: 'file'
+		}
+		http.upload('/api/blade-resource/oss/endpoint/put-file', params).then(res => {
+			resolve(res.data.link)
+		})
+	})
+}
+// 删除图片方法
+function remove(src) {
+	console.log('删除图片：', src)
+	// 实际使用时，删除线上资源
+}
+export default {
+	data() {
+		return {
+			content: null,
+			modal: null,
+			editable: true,
+			statusBarHeight: 0
+		}
+	},
+	components: {
+		mpHtml
+	},
+	onReady() {
+		/**
+		 * @description 设置获取链接的方法
+		 * @param {String} type 链接的类型（img/video/audio/link）
+		 * @param {String} value 修改链接时，这里会传入旧值
+		 * @returns {Promise} 返回线上地址
+		 *   type 为音视频时可以返回一个数组作为源地址
+		 *   type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
+		 */
+		this.$refs.article.getSrc = (type, value) => {
+			return new Promise((resolve, reject) => {
+				if (type === 'img' || type === 'video') {
+					uni.showActionSheet({
+						itemList: ['本地选取', '远程链接'],
+						success: res => {
+							if (res.tapIndex === 0) {
+								// 本地选取
+								if (type === 'img') {
+									uni.chooseImage({
+										count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
+										success: res => {
+											// #ifdef MP-WEIXIN
+											if (res.tempFilePaths.length == 1 && wx.editImage) {
+												// 单张图片时进行编辑
+												wx.editImage({
+													src: res.tempFilePaths[0],
+													complete: res2 => {
+														uni.showLoading({
+															title: '上传中'
+														})
+														upload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
+															uni.hideLoading()
+															resolve(res)
+														})
+													}
+												})
+											} else {
+												// #endif
+												uni.showLoading({
+													title: '上传中'
+												})
+												;(async () => {
+													const arr = []
+													for (let item of res.tempFilePaths) {
+														// 依次上传
+														const src = await upload(item, type)
+														arr.push(src)
+													}
+													return arr
+												})().then(res => {
+													uni.hideLoading()
+													resolve(res)
+												})
+												// #ifdef MP-WEIXIN
+											}
+											// #endif
+										},
+										fail: reject
+									})
+								} else {
+									uni.chooseVideo({
+										success: res => {
+											uni.showLoading({
+												title: '上传中'
+											})
+											upload(res.tempFilePath, type).then(res => {
+												uni.hideLoading()
+												resolve(res)
+											})
+										},
+										fail: reject
+									})
+								}
+							} else {
+								// 远程链接
+								this.callback = {
+									resolve,
+									reject
+								}
+								this.$set(this, 'modal', {
+									title: (type === 'img' ? '图片' : '视频') + '链接',
+									value
+								})
+							}
+						}
+					})
+				} else {
+					this.callback = {
+						resolve,
+						reject
+					}
+					let title
+					if (type === 'audio') {
+						title = '音频链接'
+					} else if (type === 'link') {
+						title = '链接地址'
+					}
+					this.$set(this, 'modal', {
+						title,
+						value
+					})
+				}
+			})
+		}
+	},
+
+	onLoad(option) {
+		let that = this
+		that.content = option.data
+		// 获取高度 - 小程序设配
+		uni.getSystemInfo({
+			success: function(res) {
+				// #ifdef MP-WEIXIN
+				that.statusBarHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ? 44 : 48)
+				// #endif
+				// #ifdef APP-PLUS
+				that.statusBarHeight = Number(res.statusBarHeight)
+				// #endif
+			}
+		})
+	},
+	methods: {
+		// 删除图片/视频/音频标签事件
+		remove(e) {
+			// 删除线上资源
+			remove(e.src)
+		},
+		// 处理模态框
+		modalInput(e) {
+			this.value = e.detail.value
+		},
+		modalConfirm() {
+			this.callback.resolve(this.value || this.modal.value || '')
+			this.$set(this, 'modal', null)
+		},
+		modalCancel() {
+			this.callback.reject()
+			this.$set(this, 'modal', null)
+		},
+		// 调用编辑器接口
+		edit(e) {
+			this.$refs.article[e.currentTarget.dataset.method]()
+		},
+		// 清空编辑器内容
+		clear() {
+			uni.showModal({
+				title: '确认',
+				content: '确定清空内容吗？',
+				success: res => {
+					if (res.confirm) this.$refs.article.clear()
+				}
+			})
+		},
+		// 保存编辑器内容
+		onSave() {
+			setTimeout(() => {
+				var content = this.$refs.article.getContent()
+				uni.showModal({
+					title: '提示',
+					content: '是否保存当前内容返回上一级？',
+					confirmText: '保存',
+					cancelText: '不保存',
+					success: res => {
+						if (res.confirm) {
+							uni.$emit('richBack', content)
+						}
+						this.editable = false
+						uni.navigateBack({
+							delta: 1
+						})
+					}
+				})
+			}, 50)
+		}
+	}
+}
+</script>
+
+<style>
+.editor_toolbox {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 999;
+	background-color: #ededed;
+	display: flex;
+	align-items: center;
+	padding: 5px;
+	box-sizing: border-box;
+	line-height: 1.6;
+}
+
+@font-face {
+	font-family: 'iconfont';
+	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeYAAsAAAAADlAAAAdLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAgqOYItrATYCJAMkCxQABCAFhG0HcBv/CzOjdoNyEiD7nwnxpstuRCLrGmPTaffv/hnWZJHUNtWZeOD/3t03mks73vmC/3jA8SRom0aatimgfv7d9M8lBEJCIHRBKua0E7EEOqedMBEJm8N7js0MWpgq9PlMkGcTsS8NgH3X/AEbFaFGZNFvH+xR2uYofWlu9NO9ypmTgvNlW8CitMbdT7rHpgAXaKxBOfzWBdQCFgyrMV3kKtMLUFGd7GEC0JSkACq79OKAIMbDAW2W48z1QESSiQsUARGRZFyYAZ0AR8Q1ogsAjs7vhy+UBQIgwhPwR83HdB4F7R6gR25M+CrAUEwAobtM6LuBBBRA1qlLZvYO80KFg8isxmImAH1xHwzc0UPpQ/ph9cNLD+8+cn/9mnAgGQwUGkVj0B1kUhL4EP94IgQIVeCoDc62pg7uyLCRwUMCauARlsQ0ElWAq5EoAV9CogB8FzYieLq7qQM0rM5DYAriAik/Li6hNpHBj2knBBuokIJWymUizhppEknSNKNTIHnPfnR5WRIjFnmB0MgyTh9CFr9W5WgCNNfq00hdfi0KEVVL7I0kQvMYjy8OUbDAQIFwzDiGGzMKX+/PVu1sih2FbLk8PneQ0e84zT9a9GckbXu06x/h1C0hw45Twmlb0BLgUtCw7qqMfsqCGhV6bZl8tzTOhwXIwI1ZQCJLIIvccUoHE88h4XC2eGu4M/1XNB3fedRypMHlpyhbEwA5zn0qQ+4JIFxpmvQRIqHR6kOYxT8yRF6DufwjDl1JEG+8Wqk8ej0Z33StarLSdvb0fhAL+06dIRXWc4EDCLccDJ7nRTRGNUgi5S3sUk8hG4BAIuuqdJzCcXaWtWpZK0O7I0Mqs9SeBk6HJs+pMZ3cqWSo18Up8nh2vcql1drvYnRZfFaWawwlbAjnNuUeD0fz47f2GNsa/fF7o5EiX96JqiMhfWMOZ3c32aoWarUuu1GgZb3ZijxTszPBoebYYVU51WtjNSTXad3ekZzB2YUmmynf7Frv87CjOrjBApsDIHqPD//DhUKGSMSAEKRwBgqH+XDUGI0YIlaOKiYk2EnSqUEWF7XAageI3OVCf/PhsDEaNSKnhrSzKBTiQlVdDbJsPEl0ONSUS4ssTnLO4dOJ8O/y7lwLIsG9w6MxwIZTFYojgSR8c7B6ksJqZ8UOB6W0ubb0SifPuQb42mUpNFyJuQI0OLvELTPRSN5ODs3CBUKIBoDa1xrz1K/SNy3fVPVDMKK2XqdM6a9QLFycnZWRVUJ89QUvJOjZoAOfr7zKhGDrb79CEfP5M8/DTEvPngRh8AWBr9OZ66+89rX3tVtZ8tVf0r2fhur6+fMn0ALooJU7KIuS79+fpFNWX018UNVONCAU6vv7QGWHX5rbxpdvCW5JI9sFt9aUVW1pjXfr1K+5X6dOeOsts8vm/p1Iq+glCpUiObh4EVm2JbClPL5V603DrqjoTQomnlFsolUURBISwDpcroJ7b0oA02NQonc6VOv1iZVzBiYiduCcysTgHXF6OAN6GftRd0b3kZV9q0+AxEQ+IRESEvhEqIl262o2d+ZSUQfnmQcNY2dMXbp06rKxDTkJDJeW6vN3QmnfdO+etSJLmp0tSazIHjphQaZo7r6Dq2MZ3eom36nkLlp5St+X1jcrBkv4xK/79qbGfer3tXOWL0+NzJUNjuev1m2r8TwarGszs8uaVXMJRufavYvjGRWXNvLMw4a6hqnTp+OWddN3rFg+ixl4/IR5XXolag7ZzhxpDtvDmd17wTeo3HzocG+79mhzQ6GYS6SY3AUFNu1aUC5jsE6YcVIdLZk+YIqhI161tOWSVwtt2jUJey9Kv5VI+tWYJCCe8U3j1Nhp6t/ry8zF48oidd2GdLkxpPOAeiG9UXgmkpyh9YWSltIkJvUm3/2XckNk/emn1TPGhuRv5ddp5qpQ5XLRDWCzQqyzQ4tWrMxPsIRfxsInjYr7g9evq5O7w5KQAvAPYk1YW0p4kkSoGpozaS3WThNOfixfE8B+wzrpbqcdWAzzu1akq+jGw+IgeIpNPUYoW30gqPdHzI3c6qeif0AMzVuoE4HK3keDt+KE/PXzUOM3K4anQW5D40VTGYGmWAAeCflDN7ulJpW9TyBKHUAklQgJIYOROQVQQamAKkJbaMrX9fKWFqYDBmUZgJkVDBDGXhBRCAKGcdEJJzg3AKfxAiSYgAHJgFrckJIVVqPJSTBWzCD5AKVcG5mmE7ftHW1TxhL2O+o/lEBlsJjO43U3rFG6OCU87VLVgBGu4Moeh2XJ4IVzTHXqVP1xNjNZp05TrlqTVkfBWC3zDJKPPaVcm611kvj5O9qmjKVgyI/9H0qg7cNiOq/AuKG60pBT6RyedqmUacDoLVzBlTKxFNUMPnu/HFOdugaV/jijqUxVNB2eqs41gtM3LCcta4sQhsQIRxIkRQSSIRLEim8daOMprvsqcXCDRdX2cFgMy8TbcsJh6vBNMY++jmv7bXgQHHmqWy0A')
+		format('woff2');
+}
+
+.iconfont {
+	color: #303133;
+	flex: 1;
+	text-align: center;
+	font-family: 'iconfont' !important;
+	font-size: 22px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-undo:before {
+	content: '\e607';
+}
+
+.icon-redo:before {
+	content: '\e606';
+}
+
+.icon-img:before {
+	content: '\e6e2';
+}
+
+.icon-video:before {
+	content: '\e798';
+}
+
+.icon-link:before {
+	content: '\e60d';
+}
+
+.icon-text:before {
+	content: '\e6ce';
+}
+
+.icon-clear:before {
+	content: '\e637';
+}
+
+.icon-save:before {
+	content: '\e501';
+}
+
+/* 模态框 */
+.modal {
+	position: fixed;
+	top: 50%;
+	left: 16px;
+	right: 16px;
+	background-color: #fff;
+	border-radius: 12px;
+	transform: translateY(-50%);
+}
+
+.modal_title {
+	padding: 32px 24px 16px;
+	font-size: 17px;
+	font-weight: 700;
+	text-align: center;
+}
+
+.modal_input {
+	display: block;
+	padding: 5px;
+	margin: 0 24px 32px 24px;
+	font-size: 14px;
+	border: 1px solid #dfe2e5;
+}
+
+.modal_foot {
+	display: flex;
+	line-height: 56px;
+	font-weight: 700;
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.modal_button {
+	flex: 1;
+	text-align: center;
+}
+
+/* 蒙版 */
+.mask {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: black;
+	opacity: 0.5;
+}
+</style>

pages/service/service.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="container">
+		<view class="head">
+			<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+				back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="服务"
+				title-color="#fff"></u-navbar>
+			<view class="head-bg"></view>
+			<!-- 我的订阅 start -->
+			<view class="card sub">
+				<view class="title">我的订阅</view>
+				<view class="list">
+					<u-grid :col="4" :border="false">
+						<u-grid-item bg-color="transparent" v-for="(item, index) in subscribeList" :key="index">
+							<navigator url="" hover-class="none" class="nav-item">
+								<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
+								<view class="nav-item-name">{{ item.name }}</view>
+							</navigator>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</view>
+			<!-- 我的订阅 end -->
+
+			<!-- 服务列表 start -->
+			<view class="card wrap" v-for="(item, index) in serviceList" :key="index">
+				<view class="title">{{item.name}}</view>
+				<view class="list">
+					<u-grid :col="4" :border="false">
+						<u-grid-item bg-color="transparent" v-for="(_item, _index) in item.list" :key="_index">
+							<navigator url="" hover-class="none" class="nav-item">
+								<image :src="_item.img" mode="widthFix" class="nav-item-img"></image>
+								<view class="nav-item-name">{{ _item.name }}</view>
+							</navigator>
+						</u-grid-item>
+					</u-grid>
+				</view>
+			</view>
+			<!-- 服务列表 end -->
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		fakeSubscribeList,
+		fakeServiceList,
+	} from "@/api/mock/service.js";
+	export default {
+		data() {
+			return {
+				// 我的订阅
+				subscribeList: [],
+				// 服务列表
+				serviceList: [],
+			};
+		},
+		onLoad() {
+			// 后续将改为与后端联动
+			// 加载我的订阅数据
+			fakeSubscribeList().then(data => {
+				this.subscribeList = data;
+			})
+			// 加载服务集合数据
+			fakeServiceList().then(data => {
+				this.serviceList = data;
+			})
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+		overflow: hidden;
+	}
+
+	.head {
+		position: relative;
+		top: 0;
+		left: 0;
+		z-index: 1;
+	}
+
+	.head-bg {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		z-index: -1;
+		width: 750rpx;
+		height: 270rpx;
+		background: linear-gradient(90deg, #69b0ff, #5f88ff);
+	}
+
+	.card {
+		margin: 30rpx;
+		background: #ffffff;
+		border-radius: 20rpx;
+		margin-top: 36rpx;
+	}
+
+	.sub {
+		.title {
+			padding-top: 36rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			font-size: 30rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 500;
+			color: #000000;
+
+			&::before {
+				content: '';
+				display: block;
+				width: 135rpx;
+				height: 1rpx;
+				background: #e4e7ed;
+				margin: 0 17rpx;
+			}
+
+			&::after {
+				content: '';
+				display: block;
+				width: 135rpx;
+				height: 1rpx;
+				background: #e4e7ed;
+				margin: 0 17rpx;
+			}
+		}
+	}
+
+	.list {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 0 30rpx;
+
+		.nav-item {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 30rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #131313;
+			line-height: 48rpx;
+			opacity: 0.77;
+
+			&-img {
+				width: 54rpx;
+				height: 54rpx;
+				margin-bottom: 30rpx;
+			}
+
+			&-name {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #585b61;
+			}
+		}
+	}
+
+	.wrap {
+		.title {
+			padding: 36rpx 16rpx;
+			display: flex;
+			align-items: center;
+			font-size: 32rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 500;
+			color: #000000;
+
+			&::before {
+				content: "";
+				display: block;
+				width: 5rpx;
+				height: 36rpx;
+				margin-right: 10rpx;
+				background: #3ac4d1;
+			}
+		}
+	}
+</style>

pages/system/setting.vue

@@ -0,0 +1,22 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
+			back-icon-size="35" :background="{ background: '#fff' }" title="设置" title-color="#000">
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">很快到来</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				data: {}
+			};
+		},
+	}
+</script>

pages/user/center.vue

@@ -0,0 +1,252 @@
+<template>
+	<view class="container">
+		<view class="head" :style="{height: `${headHeight}rpx`}">
+			<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="个人中心" :background="{ background: 'transprent' }" title-color="#FFFFFF">
+				<view @click="$u.func.route('/pages/system/setting')" slot="right">
+					<image src="/static/images/user/setting.png" class="set-icon" mode="widthFix"></image>
+				</view>
+			</u-navbar>
+			<image src="/static/images/user/bg.png" class="head-bg" :style="{height: `${headHeight}rpx`}" />
+
+			<!-- 用户信息 -->
+			<view class="user-box">
+				<view class="left">
+					<image :src="userInfo.avatar" class="avatar" mode=""></image>
+					<view class="user-name">{{ userInfo.nick_name }}</view>
+					<view class="tag">{{ userInfo.tenant_id }}</view>
+				</view>
+				<view @click="$u.func.route('/pages/user/profile')" class="edit-btn">编辑资料</view>
+			</view>
+			<!-- 操作按钮 -->
+			<view class="nav">
+				<navigator url="" hover-class="none" class="nav-item">
+					<image src="/static/images/user/n1.png" class="icon" mode=""></image>
+					<view class="name">我的消息</view>
+				</navigator>
+				<navigator url="" hover-class="none" class="nav-item">
+					<image src="/static/images/user/n2.png" class="icon" mode=""></image>
+					<view class="name">我的待办</view>
+				</navigator>
+				<navigator url="" hover-class="none" class="nav-item">
+					<image src="/static/images/user/n3.png" class="icon" mode=""></image>
+					<view class="name">我的地址</view>
+				</navigator>
+				<navigator url="" hover-class="none" class="nav-item">
+					<image src="/static/images/user/n4.png" class="icon" mode=""></image>
+					<view class="name">我的收藏</view>
+				</navigator>
+			</view>
+		</view>
+		<!-- 功能列表 -->
+		<view class="cell-box">
+			<u-cell-group :border="false">
+				<u-cell-item title="我的评价">
+					<image slot="icon" src="/static/images/user/c1.png" class="icon" mode=""></image>
+				</u-cell-item>
+				<u-cell-item title="常见问题">
+					<image slot="icon" src="/static/images/user/c2.png" class="icon" mode=""></image>
+				</u-cell-item>
+				<u-cell-item title="客服中心" :border-bottom="false">
+					<image slot="icon" src="/static/images/user/c3.png" class="icon" mode=""></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="cell-box">
+			<u-cell-group :border="false">
+				<u-cell-item title="推荐">
+					<image slot="icon" src="/static/images/user/c4.png" class="icon" mode=""></image>
+				</u-cell-item>
+				<u-cell-item title="评分">
+					<image slot="icon" src="/static/images/user/c5.png" class="icon" mode=""></image>
+				</u-cell-item>
+				<u-cell-item title="反馈">
+					<image slot="icon" src="/static/images/user/c6.png" class="icon" mode=""></image>
+				</u-cell-item>
+				<u-cell-item title="关于" :border-bottom="false">
+					<image slot="icon" src="/static/images/user/c7.png" class="icon" mode=""></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="cell-box">
+			<u-cell-group :border="false">
+				<u-cell-item title="设置" :border-bottom="false" @click="$u.func.route('/pages/system/setting')">
+					<image slot="icon" src="/static/images/user/c8.png" class="icon" mode=""></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				headHeight: 582
+			};
+		},
+		mounted() {
+			this.setHeadHeight()
+		},
+		methods: {
+			setHeadHeight() {
+				const that = this
+				// #ifndef H5
+				uni.getSystemInfo({
+					success: function(res) {
+						that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ? 44 : 48) + 582
+					}
+				});
+				// #endif
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+		overflow: hidden;
+	}
+
+	.head {
+		position: relative;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		min-height: 582rpx;
+		overflow: hidden;
+		background: #55A2F9;
+
+		.set-icon {
+			vertical-align: middle;
+			width: 41rpx;
+			height: auto;
+			margin-right: 35rpx;
+		}
+
+		.head-bg {
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			z-index: -1;
+			width: 750rpx;
+			height: 582rpx;
+			background: #55A2F9;
+		}
+	}
+
+	.user-box {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 20rpx 0 64rpx;
+		margin-top: 36rpx;
+
+		.left {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.avatar {
+				width: 128rpx;
+				height: 128rpx;
+				background: #ffffff;
+				border-radius: 50%;
+			}
+
+			.user-name {
+				margin-top: 20rpx;
+				font-size: 36rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 500;
+				color: #ffffff;
+			}
+
+			.tag {
+				margin-top: 20rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 5rpx 16rpx;
+				border: 1px solid #f5f5f5;
+				border-radius: 7rpx;
+
+				font-size: 19rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 300;
+				color: #ffffff;
+			}
+		}
+
+		.edit-btn {
+			margin-top: 20rpx;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			width: 165rpx;
+			height: 54rpx;
+			border: 2rpx solid #f5f5f5;
+			border-radius: 11rpx;
+
+			font-size: 27rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #ffffff;
+		}
+	}
+
+	.nav {
+		display: flex;
+		//border-top: 2rpx solid #7dcdd6;
+		margin: 36rpx 38rpx 0;
+		padding: 36rpx 0 42rpx;
+
+		.nav-item {
+			width: calc(100% / 4);
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+
+			font-size: 25rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #ffffff;
+
+			&:not(:last-of-type) {
+				position: relative;
+
+				&::after {
+					position: absolute;
+					right: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					content: '';
+					display: block;
+					width: 2rpx;
+					background-color: #fff;
+					height: 30rpx;
+				}
+			}
+
+			.icon {
+				width: 48rpx;
+				height: 48rpx;
+				margin-bottom: 6rpx;
+			}
+		}
+	}
+
+	.cell-box {
+		background: #ffffff;
+		margin: 18rpx;
+
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 22rpx;
+		}
+	}
+</style>

pages/user/profile.vue

@@ -0,0 +1,213 @@
+<template>
+	<view class="container">
+		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward" title="个人资料"
+			back-icon-size="35" :background="{ background: '#fff' }" title-color="#000">
+			<view class="complie" slot="right" @click="submit">完成</view>
+		</u-navbar>
+
+		<view class="content">
+			<view class="avatar">
+				<image :src="userInfo.avatar" class="avatar-image" mode=""></image>
+				<view class="a" @click="handleChooseImg">更换头像</view>
+			</view>
+			<view class="form">
+				<view class="cell">
+					<view class="name">昵称</view>
+					<input type="text" placeholder="请输入昵称" v-model="userInfo.nick_name" class="ipt"
+						placeholder-class="hold" />
+				</view>
+				<view class="cell">
+					<view class="name">生日</view>
+					<picker mode="date" class="ipt" :class="{ hold: !detail.birthday }"
+						@change="changeDefaultPicker('birthday', $event)">
+						<view>{{ detail.birthday || '请选择生日' }}</view>
+					</picker>
+				</view>
+				<view class="cell">
+					<view class="name">性别</view>
+					<picker mode="selector" :range="sexPicker" range-key="name" class="ipt"
+						:class="{ hold: !detail.sex }" @change="changePicker('sex', $event)">
+						<view>{{ detail.sex === 1?'男':'女' || '请选择性别' }}</view>
+					</picker>
+				</view>
+				<view class="cell">
+					<view class="name">手机号</view>
+					<input type="number" placeholder="请填写手机号" v-model="detail.phone" class="ipt"
+						placeholder-class="hold" />
+				</view>
+				<view class="cell">
+					<view class="name">邮箱</view>
+					<input v-model="detail.email" class="ipt" placeholder-class="hold" />
+				</view>
+				<!--<view class="cell">
+					<view class="name">国家/地区</view>
+					<pickRegions :defaultRegion="detail.region" v-model="detail.region"
+						:class="{ hold: !detail.region, ipt: true }">
+						<view>{{ detail.region || '请选择国家/地区' }}</view>
+					</pickRegions>
+				</view>-->
+			</view>
+		</view>
+		<!--  -->
+		<view class="back" @click="logout">退出登录</view>
+	</view>
+</template>
+
+<script>
+	import pickRegions from '@/components/pick-regions/pick-regions.vue';
+	export default {
+		components: {
+			pickRegions
+		},
+		data() {
+			return {
+				sexPicker: [{
+						name: '男'
+					},
+					{
+						name: '女'
+					}
+				],
+				detail: {}
+			};
+		},
+		onLoad() {
+			this.$u.api.userInfo().then(data => {
+				console.log(data);
+				if (data.success) {
+					this.detail = data.data;
+				}
+			}).catch(err => {
+				console.log(err)
+				this.$u.func.showToast({
+					title: err,
+				})
+			})
+		},
+		methods: {
+			logout() {
+				this.$u.func.logout();
+			},
+			submit() {
+				let detail = this.detail
+				if (!detail.phone && !/^1\d{10}$/.test(detail.phone)) {
+					return uni.showToast({
+						title: '请输入正确的手机号',
+						duration: 2000,
+						icon: 'none'
+					});
+				}
+				console.log(JSON.stringify(detail));
+			},
+			changeDefaultPicker(name, e) {
+				this.detail[name] = e.detail.value;
+			},
+			changePicker(name, e) {
+				this.detail[name] = this[`${name}Picker`][e.detail.value].name;
+			},
+			handleChooseImg() {
+				let that = this;
+				uni.chooseImage({
+					count: 1,
+					success(e) {
+						that.detail.avatar = e.tempFilePaths[0];
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+		padding: 0 0 200rpx;
+		overflow: hidden;
+	}
+
+	.complie {
+		vertical-align: middle;
+		padding: 10rpx 20rpx;
+		font-size: 32rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #5f88ff;
+	}
+
+	.content {
+		background-color: #ffffff;
+		overflow: hidden;
+	}
+
+	.avatar {
+		margin-top: 30rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+
+		font-size: 30rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #5f88ff;
+		.avatar-image {
+			width: 162rpx;
+			height: 162rpx;
+			background: #ffffff;
+			border-radius: 50%;
+			background-color: #82848a;
+			margin-bottom: 15rpx;
+		}
+	}
+
+	.form {
+		padding: 0 36rpx;
+
+		.cell {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 40rpx 0;
+
+			font-size: 30rpx;
+			font-family: Source Han Sans CN;
+			font-weight: bold;
+			color: #666666;
+
+			&:not(:last-of-type) {
+				border-bottom: 2rpx solid #efefef;
+			}
+
+			.ipt {
+				flex: 1;
+				margin-left: 40rpx;
+				text-align: right;
+				font-size: 23rpx;
+				font-family: Source Han Sans CN;
+				font-weight: bold;
+				color: #333333;
+			}
+
+			.hold {
+				font-size: 27rpx;
+				font-family: Source Han Sans CN;
+				font-weight: bold;
+				color: #c8c8ce;
+			}
+		}
+	}
+
+	.back {
+		margin-top: 40rpx;
+		text-align: center;
+		height: 109rpx;
+		background: #ffffff;
+
+		font-size: 34rpx;
+		font-family: Source Han Sans CN;
+		font-weight: bold;
+		color: #141414;
+		line-height: 109rpx;
+	}
+</style>