123456

App.vue

@@ -74,6 +74,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import 'uview-ui/index.scss';
 /*全局公共样式和字体图标*/
 @import '/static/css/cmy.css';
 view,

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 www.uviewui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,106 @@
+<p align="center">
+    <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
+<h3 align="center">多平台快速开发的UI框架</h3>
+
+
+## 说明
+
+uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
+
+## 特性
+
+- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
+- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
+
+
+## 安装
+
+```bash
+# npm方式安装
+npm i uview-ui
+```
+
+## 快速上手
+
+1. `main.js`引入uView库
+```js
+// main.js
+import uView from 'uview-ui';
+Vue.use(uView);
+```
+
+2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
+```css
+/* App.vue */
+<style lang="scss">
+@import "uview-ui/index.scss";
+</style>
+```
+
+3. `uni.scss`引入全局scss变量文件
+```css
+/* uni.scss */
+@import "uview-ui/theme.scss";
+```
+
+4. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+	"easycom": {
+		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
+		// npm安装方式
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		// 下载安装方式
+		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
+	// 此为本身已有的内容
+	"pages": [
+		// ......
+	]
+}
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 使用方法
+配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
+
+```html
+<template>
+	<u-button>按钮</u-button>
+</template>
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 链接
+
+- [官方文档](https://uviewui.com/)
+- [更新日志](https://uviewui.com/components/changelog.html)
+- [升级指南](https://uviewui.com/components/changelog.html)
+- [关于我们](https://uviewui.com/cooperation/about.html)
+
+## 预览
+
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
+<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
+
+<!-- ## 捐赠uView的研发
+
+uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
+
+<img src="https://uviewui.com/common/wechat.png" width="220" >
+<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
+ -->
+## 版权信息
+uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

api/index.js

@@ -43,3 +43,11 @@ export function geLevertade(data) {
 	});
 }
 
+// 公告列表
+export function gglist(data) {
+	return request({
+		url: '/index/gglist',
+		method: 'get',
+		data
+	});
+}

index.js

@@ -0,0 +1,141 @@
+// 引入全局mixin
+import mixin from './libs/mixin/mixin.js'
+// 引入关于是否mixin集成小程序分享的配置
+// import wxshare from './libs/mixin/mpShare.js'
+// 全局挂载引入http相关请求拦截插件
+import http from './libs/request'
+
+function wranning(str) {
+	// 开发环境进行信息输出,主要是一些报错信息
+	// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
+	// 	https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
+	if (process.env.NODE_ENV === 'development') {
+		console.warn(str)
+	}
+}
+
+// 尝试判断在根目录的/store中是否有$u.mixin.js，此文件uView默认为需要挂在到全局的vuex的state变量
+// HX2.6.11版本,放到try中,控制台依然会警告,暂时不用此方式，
+// let vuexStore = {};
+// try {
+// 	vuexStore = require("@/store/$u.mixin.js");
+// } catch (e) {
+// 	//TODO handle the exception
+// }
+
+// post类型对象参数转为get类型url参数
+import queryParams from './libs/function/queryParams.js'
+// 路由封装
+import route from './libs/function/route.js'
+// 时间格式化
+import timeFormat from './libs/function/timeFormat.js'
+// 时间戳格式化,返回多久之前
+import timeFrom from './libs/function/timeFrom.js'
+// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
+import colorGradient from './libs/function/colorGradient.js'
+// 生成全局唯一guid字符串
+import guid from './libs/function/guid.js'
+// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
+import color from './libs/function/color.js'
+// 根据type获取图标名称
+import type2icon from './libs/function/type2icon.js'
+// 打乱数组的顺序
+import randomArray from './libs/function/randomArray.js'
+// 对象和数组的深度克隆
+import deepClone from './libs/function/deepClone.js'
+// 对象深度拷贝
+import deepMerge from './libs/function/deepMerge.js'
+// 添加单位
+import addUnit from './libs/function/addUnit.js'
+
+// 规则检验
+import test from './libs/function/test.js'
+// 随机数
+import random from './libs/function/random.js'
+// 去除空格
+import trim from './libs/function/trim.js'
+// toast提示，对uni.showToast的封装
+import toast from './libs/function/toast.js'
+// 获取父组件参数
+import getParent from './libs/function/getParent.js'
+// 获取整个父组件
+import $parent from './libs/function/$parent.js'
+// 获取sys()和os()工具方法
+// 获取设备信息，挂载到$u的sys()(system的缩写)属性中，
+// 同时把安卓和ios平台的名称"ios"和"android"挂到$u.os()中，方便取用
+import {sys, os} from './libs/function/sys.js'
+// 防抖方法
+import debounce from './libs/function/debounce.js'
+// 节流方法
+import throttle from './libs/function/throttle.js'
+
+
+// 配置信息
+import config from './libs/config/config.js'
+// 各个需要fixed的地方的z-index配置文件
+import zIndex from './libs/config/zIndex.js'
+
+const $u = {
+	queryParams: queryParams,
+	route: route,
+	timeFormat: timeFormat,
+	date: timeFormat, // 另名date
+	timeFrom,
+	colorGradient: colorGradient.colorGradient,
+	colorToRgba: colorGradient.colorToRgba,
+	guid,
+	color,
+	sys,
+	os,
+	type2icon,
+	randomArray,
+	wranning,
+	get: http.get,
+	post: http.post,
+	put: http.put,
+	'delete': http.delete,
+	hexToRgb: colorGradient.hexToRgb,
+	rgbToHex: colorGradient.rgbToHex,
+	test,
+	random,
+	deepClone,
+	deepMerge,
+	getParent,
+	$parent,
+	addUnit,
+	trim,
+	type: ['primary', 'success', 'error', 'warning', 'info'],
+	http,
+	toast,
+	config, // uView配置信息相关，比如版本号
+	zIndex,
+	debounce,
+	throttle,
+}
+
+// $u挂载到uni对象上
+uni.$u = $u
+
+const install = Vue => {
+	Vue.mixin(mixin) 
+	if (Vue.prototype.openShare) {
+		Vue.mixin(mpShare);
+	}
+	// Vue.mixin(vuexStore);
+	// 时间格式化，同时两个名称，date和timeFormat
+	Vue.filter('timeFormat', (timestamp, format) => {
+		return timeFormat(timestamp, format)
+	})
+	Vue.filter('date', (timestamp, format) => {
+		return timeFormat(timestamp, format)
+	})
+	// 将多久以前的方法，注入到全局过滤器
+	Vue.filter('timeFrom', (timestamp, format) => {
+		return timeFrom(timestamp, format)
+	})
+	Vue.prototype.$u = $u
+}
+
+export default {
+	install
+}

index.scss

@@ -0,0 +1,23 @@
+// 引入公共基础类
+@import "./libs/css/common.scss";
+@import "./libs/css/color.scss";
+
+// 非nvue的样式
+/* #ifndef APP-NVUE */
+@import "./libs/css/style.vue.scss";
+/* #endif */
+
+// nvue的特有样式
+/* #ifdef APP-NVUE */
+@import "./libs/css/style.nvue.scss";
+/* #endif */
+
+// 小程序特有的样式
+/* #ifdef MP */
+@import "./libs/css/style.mp.scss";
+/* #endif */
+
+// H5特有的样式
+/* #ifdef H5 */
+@import "./libs/css/style.h5.scss";
+/* #endif */

libs/config/config.js

@@ -0,0 +1,15 @@
+// 此版本发布于2022-04-19
+let version = '1.8.6';
+
+export default {
+	v: version,
+	version: version,
+	// 主题名称
+	type: [
+		'primary',
+		'success',
+		'info',
+		'error',
+		'warning'
+	]
+}

libs/config/zIndex.js

@@ -0,0 +1,20 @@
+// uniapp在H5中各API的z-index值如下：
+/**
+ * actionsheet: 999
+ * modal: 999
+ * navigate: 998
+ * tabbar: 998
+ * toast: 999
+ */
+
+export default {
+	toast: 10090,
+	noNetwork: 10080,
+	// popup包含popup，actionsheet，keyboard，picker的值
+	popup: 10075,
+	mask: 10070,
+	navbar: 980,
+	topTips: 975,
+	sticky: 970,
+	indexListSticky: 965,
+}

libs/css/color.scss

@@ -0,0 +1,155 @@
+.u-type-primary-light {
+	color: $u-type-primary-light;
+}
+
+.u-type-warning-light {
+	color: $u-type-warning-light;
+}
+
+.u-type-success-light {
+	color: $u-type-success-light;
+}
+
+.u-type-error-light {
+	color: $u-type-error-light;
+}
+
+.u-type-info-light {
+	color: $u-type-info-light;
+}
+
+.u-type-primary-light-bg {
+	background-color: $u-type-primary-light;
+}
+
+.u-type-warning-light-bg {
+	background-color: $u-type-warning-light;
+}
+
+.u-type-success-light-bg {
+	background-color: $u-type-success-light;
+}
+
+.u-type-error-light-bg {
+	background-color: $u-type-error-light;
+}
+
+.u-type-info-light-bg {
+	background-color: $u-type-info-light;
+}
+
+.u-type-primary-dark {
+	color: $u-type-primary-dark;
+}
+
+.u-type-warning-dark {
+	color: $u-type-warning-dark;
+}
+
+.u-type-success-dark {
+	color: $u-type-success-dark;
+}
+
+.u-type-error-dark {
+	color: $u-type-error-dark;
+}
+
+.u-type-info-dark {
+	color: $u-type-info-dark;
+}
+
+.u-type-primary-dark-bg {
+	background-color: $u-type-primary-dark;
+}
+
+.u-type-warning-dark-bg {
+	background-color: $u-type-warning-dark;
+}
+
+.u-type-success-dark-bg {
+	background-color: $u-type-success-dark;
+}
+
+.u-type-error-dark-bg {
+	background-color: $u-type-error-dark;
+}
+
+.u-type-info-dark-bg {
+	background-color: $u-type-info-dark;
+}
+
+.u-type-primary-disabled {
+	color: $u-type-primary-disabled;
+}
+
+.u-type-warning-disabled {
+	color: $u-type-warning-disabled;
+}
+
+.u-type-success-disabled {
+	color: $u-type-success-disabled;
+}
+
+.u-type-error-disabled {
+	color: $u-type-error-disabled;
+}
+
+.u-type-info-disabled {
+	color: $u-type-info-disabled;
+}
+
+.u-type-primary {
+	color: $u-type-primary;
+}
+
+.u-type-warning {
+	color: $u-type-warning;
+}
+
+.u-type-success {
+	color: $u-type-success;
+}
+
+.u-type-error {
+	color: $u-type-error;
+}
+
+.u-type-info {
+	color: $u-type-info;
+}
+
+.u-type-primary-bg {
+	background-color: $u-type-primary;
+}
+
+.u-type-warning-bg {
+	background-color: $u-type-warning;
+}
+
+.u-type-success-bg {
+	background-color: $u-type-success;
+}
+
+.u-type-error-bg {
+	background-color: $u-type-error;
+}
+
+.u-type-info-bg {
+	background-color: $u-type-info;
+}
+
+.u-main-color {
+	color: $u-main-color;
+}
+
+.u-content-color {
+	color: $u-content-color;
+}
+
+.u-tips-color {
+	color: $u-tips-color;
+}
+
+.u-light-color {
+	color: $u-light-color;
+}

libs/css/common.scss

@@ -0,0 +1,176 @@
+.u-relative,
+.u-rela {
+	position: relative;
+}
+
+.u-absolute,
+.u-abso {
+	position: absolute;
+}
+
+// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
+/* #ifndef APP-NVUE */
+image {
+	display: inline-block;
+}
+
+// 在weex，也即nvue中，所有元素默认为border-box
+view,
+text {
+	box-sizing: border-box;
+}
+/* #endif */
+
+.u-font-xs {
+	font-size: 22rpx;
+}
+
+.u-font-sm {
+	font-size: 26rpx;
+}
+
+.u-font-md {
+	font-size: 28rpx;
+}
+
+.u-font-lg {
+	font-size: 30rpx;
+}
+
+.u-font-xl {
+	font-size: 34rpx;
+}
+
+.u-flex {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+
+.u-flex-wrap {
+	flex-wrap: wrap;
+}
+
+.u-flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+.u-col-center {
+	align-items: center;
+}
+
+.u-col-top {
+	align-items: flex-start;
+}
+
+.u-col-bottom {
+	align-items: flex-end;
+}
+
+.u-row-center {
+	justify-content: center;
+}
+
+.u-row-left {
+	justify-content: flex-start;
+}
+
+.u-row-right {
+	justify-content: flex-end;
+}
+
+.u-row-between {
+	justify-content: space-between;
+}
+
+.u-row-around {
+	justify-content: space-around;
+}
+
+.u-text-left {
+	text-align: left;
+}
+
+.u-text-center {
+	text-align: center;
+}
+
+.u-text-right {
+	text-align: right;
+}
+
+.u-flex-col {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+}
+
+// 定义flex等分
+@for $i from 0 through 12 {
+	.u-flex-#{$i} {
+		flex: $i;
+	}
+}
+
+// 定义字体(px)单位，小于20都为px单位字体
+@for $i from 9 to 20 {
+	.u-font-#{$i} {
+		font-size: $i + px;
+	}
+}
+
+// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
+@for $i from 20 through 40 {
+	.u-font-#{$i} {
+		font-size: $i + rpx;
+	}
+}
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+	// 只要双数和能被5除尽的数
+	@if $i % 2 == 0 or $i % 5 == 0 {
+		// 得出：u-margin-30或者u-m-30
+		.u-margin-#{$i}, .u-m-#{$i} {
+			margin: $i + rpx!important;
+		}
+		
+		// 得出：u-padding-30或者u-p-30
+		.u-padding-#{$i}, .u-p-#{$i} {
+			padding: $i + rpx!important;
+		}
+		
+		@each $short, $long in l left, t top, r right, b bottom {
+			// 缩写版，结果如： u-m-l-30
+			// 定义外边距
+			.u-m-#{$short}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-p-#{$short}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+			
+			// 完整版，结果如：u-margin-left-30
+			// 定义外边距
+			.u-margin-#{$long}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-padding-#{$long}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+		}
+	}
+}
+
+// 重置nvue的默认关于flex的样式
+.u-reset-nvue {
+	flex-direction: row;
+	align-items: center;
+}

libs/css/style.components.scss

@@ -0,0 +1,7 @@
+// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
+@mixin vue-flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-direction: $direction;
+	/* #endif */
+}

libs/css/style.h5.scss

@@ -0,0 +1,8 @@
+/* H5的时候，隐藏滚动条 */
+::-webkit-scrollbar {
+	display: none;  
+	width: 0 !important;  
+	height: 0 !important;  
+	-webkit-appearance: none;  
+	background: transparent;  
+}

libs/css/style.mp.scss

@@ -0,0 +1,72 @@
+/* start--微信小程序编译后页面有组件名的元素，特别处理--start */
+/* #ifdef MP-WEIXIN || MP-QQ */
+u-td, u-th {
+	flex: 1;
+	align-self: stretch;
+}
+
+.u-td {
+	height: 100%;
+}
+
+u-icon {
+	display: inline-flex;
+	align-items: center;
+}
+
+// 各家小程序宫格组件外层设置为100%，避免受到父元素display: flex;的影响
+u-grid {
+	width: 100%;
+	flex: 0 0 100%;
+}
+
+// 避免小程序线条组件因为父组件display: flex;而失效
+u-line {
+	flex: 1;
+}
+
+u-switch {
+	display: inline-flex;
+	align-items: center;
+}
+
+u-dropdown {
+	flex: 1;
+}
+/* #endif */
+/* end-微信小程序编译后页面有组件名的元素，特别处理--end */
+
+
+/* #ifdef MP-QQ || MP-TOUTIAO */
+// 需要做这一切额外的兼容，都是因为TX的无能
+u-icon {
+	line-height: 0;
+}
+/* #endif */
+
+/* start--头条小程序编译后页面有组件名的元素，特别处理--start */
+// 由于头条小程序不支持直接组件名形式写样式，目前只能在写组件的时候给组件加上对应的类名
+/* #ifdef MP-TOUTIAO */
+.u-td, .u-th, .u-tr {
+	flex: 1;
+	align-self: stretch;
+}
+
+.u-row, .u-col {
+	flex: 1;
+	align-self: stretch;
+}
+
+// 避免小程序线条组件因为父组件display: flex;而失效
+.u-line {
+	flex: 1;
+}
+
+.u-dropdown {
+	flex: 1;
+}
+/* #endif */
+/* end-头条小程序编译后页面有组件名的元素，特别处理--end */
+
+
+

libs/css/style.nvue.scss

@@ -0,0 +1,3 @@
+.nvue {
+	font-size: 24rpx;
+}

libs/css/style.vue.scss

@@ -0,0 +1,175 @@
+page {
+	color: $u-main-color;
+	font-size: 28rpx;
+}
+
+/* start--去除webkit的默认样式--start */
+.u-fix-ios-appearance {
+	-webkit-appearance:none;
+}
+/* end--去除webkit的默认样式--end */
+
+/* start--icon图标外层套一个view，让其达到更好的垂直居中的效果--start */
+.u-icon-wrap {
+	display: flex;
+	align-items: center;
+}
+/* end-icon图标外层套一个view，让其达到更好的垂直居中的效果--end */
+
+/* start--iPhoneX底部安全区定义--start */
+.safe-area-inset-bottom {
+  padding-bottom: 0;  
+  padding-bottom: constant(safe-area-inset-bottom);  
+  padding-bottom: env(safe-area-inset-bottom);  
+} 
+/* end-iPhoneX底部安全区定义--end */
+
+/* start--各种hover点击反馈相关的类名-start */
+.u-hover-class {
+	// background-color: #f7f8f9!important;
+	opacity: 0.6;
+}
+
+.u-cell-hover {
+	background-color: #f7f8f9!important;
+}
+/* end--各种hover点击反馈相关的类名--end */
+
+/* start--文本行数限制--start */
+.u-line-1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.u-line-2 {
+    -webkit-line-clamp: 2;
+}
+
+.u-line-3 {
+    -webkit-line-clamp: 3;
+}
+
+.u-line-4 {
+    -webkit-line-clamp: 4;
+}
+
+.u-line-5 {
+    -webkit-line-clamp: 5;
+}
+
+.u-line-2, .u-line-3, .u-line-4, .u-line-5 {
+    overflow: hidden;
+	word-break: break-all;
+    text-overflow: ellipsis; 
+    display: -webkit-box; // 弹性伸缩盒
+    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+}
+
+/* end--文本行数限制--end */
+
+
+/* start--Retina 屏幕下的 1px 边框--start */
+.u-border,
+.u-border-bottom,
+.u-border-left,
+.u-border-right,
+.u-border-top,
+.u-border-top-bottom {
+	position: relative
+}
+
+.u-border-bottom:after,
+.u-border-left:after,
+.u-border-right:after,
+.u-border-top-bottom:after,
+.u-border-top:after,
+.u-border:after {
+	/* #ifndef APP-NVUE */
+	content: ' ';
+	/* #endif */
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	// 多加0.1%，能解决有时候边框缺失的问题
+	width: 199.8%;
+	height: 199.7%;
+	transform: scale(0.5, 0.5);
+	border: 0 solid $u-border-color;
+	z-index: 2;
+}
+
+.u-border-top:after {
+	border-top-width: 1px
+}
+
+.u-border-left:after {
+	border-left-width: 1px
+}
+
+.u-border-right:after {
+	border-right-width: 1px
+}
+
+.u-border-bottom:after {
+	border-bottom-width: 1px
+}
+
+.u-border-top-bottom:after {
+	border-width: 1px 0
+}
+
+.u-border:after {
+	border-width: 1px
+}
+/* end--Retina 屏幕下的 1px 边框--end */
+
+
+/* start--clearfix--start */
+.u-clearfix:after,
+.clearfix:after {
+	/* #ifndef APP-NVUE */
+	content: '';
+	/* #endif */
+	display: table;
+	clear: both
+}
+/* end--clearfix--end */
+
+/* start--高斯模糊tabbar底部处理--start */
+.u-blur-effect-inset {
+	width: 750rpx;  
+	height: var(--window-bottom);   
+	background-color: #FFFFFF;  
+}
+/* end--高斯模糊tabbar底部处理--end */
+
+/* start--提升H5端uni.toast()的层级，避免被uView的modal等遮盖--start */
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+/* end--提升H5端uni.toast()的层级，避免被uView的modal等遮盖--end */
+
+/* start--去除button的所有默认样式--start */
+.u-reset-button {
+	padding: 0;
+	font-size: inherit;
+	line-height: inherit;
+	background-color: transparent;
+	color: inherit;
+}
+
+.u-reset-button::after {
+   border: none;
+}
+/* end--去除button的所有默认样式--end */
+

libs/function/$parent.js

@@ -0,0 +1,18 @@
+// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+// 这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
+// 值(默认为undefined)，就是查找最顶层的$parent
+export default function $parent(name = undefined) {
+	let parent = this.$parent;
+	// 通过while历遍，这里主要是为了H5需要多层解析的问题
+	while (parent) {
+		// 父组件
+		if (parent.$options && parent.$options.name !== name) {
+			// 如果组件的name不相等，继续上一级寻找
+			parent = parent.$parent;
+		} else {
+			return parent;
+		}
+	}
+	return false;
+}

libs/function/addUnit.js

@@ -0,0 +1,8 @@
+import validation from './test.js';
+
+// 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
+export default function addUnit(value = 'auto', unit = 'rpx') {
+    value = String(value);
+	// 用uView内置验证规则中的number判断是否为数值
+    return validation.number(value) ? `${value}${unit}` : value;
+}

libs/function/bem.js

@@ -0,0 +1,5 @@
+function bem(name, conf) {
+  
+}
+
+module.exports.bem = bem;

libs/function/color.js

@@ -0,0 +1,37 @@
+// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
+// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
+let color = {
+	primary: "#2979ff",
+	primaryDark: "#2b85e4",
+	primaryDisabled: "#a0cfff",
+	primaryLight: "#ecf5ff",
+	bgColor: "#f3f4f6",
+	
+	info: "#909399",
+	infoDark: "#82848a",
+	infoDisabled: "#c8c9cc",
+	infoLight: "#f4f4f5",
+	
+	warning: "#ff9900",
+	warningDark: "#f29100",
+	warningDisabled: "#fcbd71",
+	warningLight: "#fdf6ec",
+	
+	error: "#fa3534",
+	errorDark: "#dd6161",
+	errorDisabled: "#fab6b6",
+	errorLight: "#fef0f0",
+	
+	success: "#19be6b",
+	successDark: "#18b566",
+	successDisabled: "#71d5a1",
+	successLight: "#dbf1e1",
+	
+	mainColor: "#303133",
+	contentColor: "#606266",
+	tipsColor: "#909399",
+	lightColor: "#c0c4cc",
+	borderColor: "#e4e7ed"
+}
+
+export default color;

libs/function/colorGradient.js

@@ -0,0 +1,134 @@
+/**
+ * 求两个颜色之间的渐变值
+ * @param {string} startColor 开始的颜色
+ * @param {string} endColor 结束的颜色
+ * @param {number} step 颜色等分的份额
+ * */
+function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
+	let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式
+	let startR = startRGB[0];
+	let startG = startRGB[1];
+	let startB = startRGB[2];
+
+	let endRGB = hexToRgb(endColor, false);
+	let endR = endRGB[0];
+	let endG = endRGB[1];
+	let endB = endRGB[2];
+
+	let sR = (endR - startR) / step; //总差值
+	let sG = (endG - startG) / step;
+	let sB = (endB - startB) / step;
+	let colorArr = [];
+	for (let i = 0; i < step; i++) {
+		//计算每一步的hex值 
+		let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *
+			i + startB)) + ')');
+		colorArr.push(hex);
+	}
+	return colorArr;
+}
+
+// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
+function hexToRgb(sColor, str = true) {
+	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+	sColor = sColor.toLowerCase();
+	if (sColor && reg.test(sColor)) {
+		if (sColor.length === 4) {
+			let sColorNew = "#";
+			for (let i = 1; i < 4; i += 1) {
+				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+			}
+			sColor = sColorNew;
+		}
+		//处理六位的颜色值
+		let sColorChange = [];
+		for (let i = 1; i < 7; i += 2) {
+			sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
+		}
+		if(!str) {
+			return sColorChange;
+		} else {
+			return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
+		}
+	} else if (/^(rgb|RGB)/.test(sColor)) {
+		let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
+		return arr.map(val => Number(val));
+	} else {
+		return sColor;
+	}
+};
+
+// 将rgb表示方式转换为hex表示方式
+function rgbToHex(rgb) {
+	let _this = rgb;
+	let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+	if (/^(rgb|RGB)/.test(_this)) {
+		let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+		let strHex = "#";
+		for (let i = 0; i < aColor.length; i++) {
+			let hex = Number(aColor[i]).toString(16);
+			hex = String(hex).length == 1 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
+			if (hex === "0") {
+				hex += hex;
+			}
+			strHex += hex;
+		}
+		if (strHex.length !== 7) {
+			strHex = _this;
+		}
+		return strHex;
+	} else if (reg.test(_this)) {
+		let aNum = _this.replace(/#/, "").split("");
+		if (aNum.length === 6) {
+			return _this;
+		} else if (aNum.length === 3) {
+			let numHex = "#";
+			for (let i = 0; i < aNum.length; i += 1) {
+				numHex += (aNum[i] + aNum[i]);
+			}
+			return numHex;
+		}
+	} else {
+		return _this;
+	}
+}
+
+
+/**
+* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+* sHex为传入的十六进制的色值
+* alpha为rgba的透明度
+*/
+function colorToRgba(color, alpha = 0.3) {
+	color = rgbToHex(color)
+	// 十六进制颜色值的正则表达式
+	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+	/* 16进制颜色转为RGB格式 */
+	let sColor = color.toLowerCase()
+	if (sColor && reg.test(sColor)) {
+		if (sColor.length === 4) {
+			var sColorNew = '#'
+			for (let i = 1; i < 4; i += 1) {
+				sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+			}
+			sColor = sColorNew
+		}
+		// 处理六位的颜色值
+		var sColorChange = []
+		for (let i = 1; i < 7; i += 2) {
+			sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+		}
+		// return sColorChange.join(',')
+		return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
+	} 
+	else {
+		return sColor
+	}
+}
+
+export default {
+	colorGradient,
+	hexToRgb,
+	rgbToHex,
+	colorToRgba
+}

libs/function/debounce.js

@@ -0,0 +1,29 @@
+let timeout = null;
+
+/**
+ * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
+ * 
+ * @param {Function} func 要执行的回调函数 
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行 
+ * @return null
+ */
+function debounce(func, wait = 500, immediate = false) {
+	// 清除定时器
+	if (timeout !== null) clearTimeout(timeout);
+	// 立即执行，此类情况一般用不到
+	if (immediate) {
+		var callNow = !timeout;
+		timeout = setTimeout(function() {
+			timeout = null;
+		}, wait);
+		if (callNow) typeof func === 'function' && func();
+	} else {
+		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
+		timeout = setTimeout(function() {
+			typeof func === 'function' && func();
+		}, wait);
+	}
+}
+
+export default debounce

libs/function/deepClone.js

@@ -0,0 +1,23 @@
+// 判断arr是否为一个数组，返回一个bool值
+function isArray (arr) {
+    return Object.prototype.toString.call(arr) === '[object Array]';
+}
+
+// 深度克隆
+function deepClone (obj) {
+	// 对常见的“非”值，直接返回原来值
+	if([null, undefined, NaN, false].includes(obj)) return obj;
+    if(typeof obj !== "object" && typeof obj !== 'function') {
+		//原始类型直接返回
+        return obj;
+    }
+    var o = isArray(obj) ? [] : {};
+    for(let i in obj) {
+        if(obj.hasOwnProperty(i)){
+            o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
+        }
+    }
+    return o;
+}
+
+export default deepClone;

libs/function/deepMerge.js

@@ -0,0 +1,30 @@
+import deepClone from "./deepClone";
+
+// JS对象深度合并
+function deepMerge(target = {}, source = {}) {
+	target = deepClone(target);
+	if (typeof target !== 'object' || typeof source !== 'object') return false;
+	for (var prop in source) {
+		if (!source.hasOwnProperty(prop)) continue;
+		if (prop in target) {
+			if (typeof target[prop] !== 'object') {
+				target[prop] = source[prop];
+			} else {
+				if (typeof source[prop] !== 'object') {
+					target[prop] = source[prop];
+				} else {
+					if (target[prop].concat && source[prop].concat) {
+						target[prop] = target[prop].concat(source[prop]);
+					} else {
+						target[prop] = deepMerge(target[prop], source[prop]);
+					}
+				}
+			}
+		} else {
+			target[prop] = source[prop];
+		}
+	}
+	return target;
+}
+
+export default deepMerge;

libs/function/getParent.js

@@ -0,0 +1,47 @@
+// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+export default function getParent(name, keys) {
+	let parent = this.$parent;
+	// 通过while历遍，这里主要是为了H5需要多层解析的问题
+	while (parent) {
+		// 父组件
+		if (parent.$options.name !== name) {
+			// 如果组件的name不相等，继续上一级寻找
+			parent = parent.$parent;
+		} else {
+			let data = {};
+			// 判断keys是否数组，如果传过来的是一个数组，那么直接使用数组元素值当做键值去父组件寻找
+			if(Array.isArray(keys)) {
+				keys.map(val => {
+					data[val] = parent[val] ? parent[val] : '';
+				})
+			} else {
+				// 历遍传过来的对象参数
+				for(let i in keys) {
+					// 如果子组件有此值则用，无此值则用父组件的值
+					// 判断是否空数组，如果是，则用父组件的值，否则用子组件的值
+					if(Array.isArray(keys[i])) {
+						if(keys[i].length) {
+							data[i] = keys[i];
+						} else {
+							data[i] = parent[i];
+						}
+					} else if(keys[i].constructor === Object) {
+						// 判断是否对象，如果是对象，且有属性，那么使用子组件的值，否则使用父组件的值
+						if(Object.keys(keys[i]).length) {
+							data[i] = keys[i];
+						} else {
+							data[i] = parent[i];
+						}
+					} else {
+						// 只要子组件有传值，即使是false值，也是“传值”了，也需要覆盖父组件的同名参数
+						data[i] = (keys[i] || keys[i] === false) ? keys[i] : parent[i];
+					}
+				}
+			}
+			return data;
+		}
+	}
+
+	return {};
+}

libs/function/guid.js

@@ -0,0 +1,41 @@
+/**
+ * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
+ * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) 
+ * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
+ * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
+ * v-for的时候,推荐使用后端返回的id而不是循环的index
+ * @param {Number} len uuid的长度
+ * @param {Boolean} firstU 将返回的首字母置为"u"
+ * @param {Number} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+ */
+function guid(len = 32, firstU = true, radix = null) {
+	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+	let uuid = [];
+	radix = radix || chars.length;
+
+	if (len) {
+		// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+		for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+	} else {
+		let r;
+		// rfc4122标准要求返回的uuid中,某些位为固定的字符
+		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+		uuid[14] = '4';
+
+		for (let i = 0; i < 36; i++) {
+			if (!uuid[i]) {
+				r = 0 | Math.random() * 16;
+				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+			}
+		}
+	}
+	// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guid不能用作id或者class
+	if (firstU) {
+		uuid.shift();
+		return 'u' + uuid.join('');
+	} else {
+		return uuid.join('');
+	}
+}
+
+export default guid;

libs/function/md5.js

@@ -0,0 +1,385 @@
+/*
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+
+/*
+ * Configurable variables. You may need to tweak these to be compatible with
+ * the server-side, but the defaults work in most cases.
+ */
+var hexcase = 0;   /* hex output format. 0 - lowercase; 1 - uppercase        */
+var b64pad  = "";  /* base-64 pad character. "=" for strict RFC compliance   */
+
+/*
+ * These are the functions you'll usually want to call
+ * They take string arguments and return either hex or base-64 encoded strings
+ */
+function hex_md5(s)    { return rstr2hex(rstr_md5(str2rstr_utf8(s))); }
+function b64_md5(s)    { return rstr2b64(rstr_md5(str2rstr_utf8(s))); }
+function any_md5(s, e) { return rstr2any(rstr_md5(str2rstr_utf8(s)), e); }
+function hex_hmac_md5(k, d)
+  { return rstr2hex(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
+function b64_hmac_md5(k, d)
+  { return rstr2b64(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
+function any_hmac_md5(k, d, e)
+  { return rstr2any(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d)), e); }
+
+/*
+ * Perform a simple self-test to see if the VM is working
+ */
+function md5_vm_test()
+{
+  return hex_md5("abc").toLowerCase() == "900150983cd24fb0d6963f7d28e17f72";
+}
+
+/*
+ * Calculate the MD5 of a raw string
+ */
+function rstr_md5(s)
+{
+  return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
+}
+
+/*
+ * Calculate the HMAC-MD5, of a key and some data (raw strings)
+ */
+function rstr_hmac_md5(key, data)
+{
+  var bkey = rstr2binl(key);
+  if(bkey.length > 16) bkey = binl_md5(bkey, key.length * 8);
+
+  var ipad = Array(16), opad = Array(16);
+  for(var i = 0; i < 16; i++)
+  {
+    ipad[i] = bkey[i] ^ 0x36363636;
+    opad[i] = bkey[i] ^ 0x5C5C5C5C;
+  }
+
+  var hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
+  return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
+}
+
+/*
+ * Convert a raw string to a hex string
+ */
+function rstr2hex(input)
+{
+  try { hexcase } catch(e) { hexcase=0; }
+  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
+  var output = "";
+  var x;
+  for(var i = 0; i < input.length; i++)
+  {
+    x = input.charCodeAt(i);
+    output += hex_tab.charAt((x >>> 4) & 0x0F)
+           +  hex_tab.charAt( x        & 0x0F);
+  }
+  return output;
+}
+
+/*
+ * Convert a raw string to a base-64 string
+ */
+function rstr2b64(input)
+{
+  try { b64pad } catch(e) { b64pad=''; }
+  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  var output = "";
+  var len = input.length;
+  for(var i = 0; i < len; i += 3)
+  {
+    var triplet = (input.charCodeAt(i) << 16)
+                | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0)
+                | (i + 2 < len ? input.charCodeAt(i+2)      : 0);
+    for(var j = 0; j < 4; j++)
+    {
+      if(i * 8 + j * 6 > input.length * 8) output += b64pad;
+      else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F);
+    }
+  }
+  return output;
+}
+
+/*
+ * Convert a raw string to an arbitrary string encoding
+ */
+function rstr2any(input, encoding)
+{
+  var divisor = encoding.length;
+  var i, j, q, x, quotient;
+
+  /* Convert to an array of 16-bit big-endian values, forming the dividend */
+  var dividend = Array(Math.ceil(input.length / 2));
+  for(i = 0; i < dividend.length; i++)
+  {
+    dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1);
+  }
+
+  /*
+   * Repeatedly perform a long division. The binary array forms the dividend,
+   * the length of the encoding is the divisor. Once computed, the quotient
+   * forms the dividend for the next step. All remainders are stored for later
+   * use.
+   */
+  var full_length = Math.ceil(input.length * 8 /
+                                    (Math.log(encoding.length) / Math.log(2)));
+  var remainders = Array(full_length);
+  for(j = 0; j < full_length; j++)
+  {
+    quotient = Array();
+    x = 0;
+    for(i = 0; i < dividend.length; i++)
+    {
+      x = (x << 16) + dividend[i];
+      q = Math.floor(x / divisor);
+      x -= q * divisor;
+      if(quotient.length > 0 || q > 0)
+        quotient[quotient.length] = q;
+    }
+    remainders[j] = x;
+    dividend = quotient;
+  }
+
+  /* Convert the remainders to the output string */
+  var output = "";
+  for(i = remainders.length - 1; i >= 0; i--)
+    output += encoding.charAt(remainders[i]);
+
+  return output;
+}
+
+/*
+ * Encode a string as utf-8.
+ * For efficiency, this assumes the input is valid utf-16.
+ */
+function str2rstr_utf8(input)
+{
+  var output = "";
+  var i = -1;
+  var x, y;
+
+  while(++i < input.length)
+  {
+    /* Decode utf-16 surrogate pairs */
+    x = input.charCodeAt(i);
+    y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
+    if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF)
+    {
+      x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF);
+      i++;
+    }
+
+    /* Encode output as utf-8 */
+    if(x <= 0x7F)
+      output += String.fromCharCode(x);
+    else if(x <= 0x7FF)
+      output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F),
+                                    0x80 | ( x         & 0x3F));
+    else if(x <= 0xFFFF)
+      output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F),
+                                    0x80 | ((x >>> 6 ) & 0x3F),
+                                    0x80 | ( x         & 0x3F));
+    else if(x <= 0x1FFFFF)
+      output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07),
+                                    0x80 | ((x >>> 12) & 0x3F),
+                                    0x80 | ((x >>> 6 ) & 0x3F),
+                                    0x80 | ( x         & 0x3F));
+  }
+  return output;
+}
+
+/*
+ * Encode a string as utf-16
+ */
+function str2rstr_utf16le(input)
+{
+  var output = "";
+  for(var i = 0; i < input.length; i++)
+    output += String.fromCharCode( input.charCodeAt(i)        & 0xFF,
+                                  (input.charCodeAt(i) >>> 8) & 0xFF);
+  return output;
+}
+
+function str2rstr_utf16be(input)
+{
+  var output = "";
+  for(var i = 0; i < input.length; i++)
+    output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF,
+                                   input.charCodeAt(i)        & 0xFF);
+  return output;
+}
+
+/*
+ * Convert a raw string to an array of little-endian words
+ * Characters >255 have their high-byte silently ignored.
+ */
+function rstr2binl(input)
+{
+  var output = Array(input.length >> 2);
+  for(var i = 0; i < output.length; i++)
+    output[i] = 0;
+  for(var i = 0; i < input.length * 8; i += 8)
+    output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (i%32);
+  return output;
+}
+
+/*
+ * Convert an array of little-endian words to a string
+ */
+function binl2rstr(input)
+{
+  var output = "";
+  for(var i = 0; i < input.length * 32; i += 8)
+    output += String.fromCharCode((input[i>>5] >>> (i % 32)) & 0xFF);
+  return output;
+}
+
+/*
+ * Calculate the MD5 of an array of little-endian words, and a bit length.
+ */
+function binl_md5(x, len)
+{
+  /* append padding */
+  x[len >> 5] |= 0x80 << ((len) % 32);
+  x[(((len + 64) >>> 9) << 4) + 14] = len;
+
+  var a =  1732584193;
+  var b = -271733879;
+  var c = -1732584194;
+  var d =  271733878;
+
+  for(var i = 0; i < x.length; i += 16)
+  {
+    var olda = a;
+    var oldb = b;
+    var oldc = c;
+    var oldd = d;
+
+    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
+    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
+    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
+    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
+    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
+    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
+    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
+    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
+    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
+    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
+    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
+    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
+    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
+    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
+    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
+    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
+
+    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
+    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
+    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
+    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
+    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
+    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
+    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
+    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
+    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
+    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
+    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
+    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
+    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
+    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
+    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
+    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
+
+    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
+    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
+    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
+    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
+    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
+    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
+    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
+    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
+    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
+    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
+    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
+    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
+    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
+    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
+    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
+    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
+
+    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
+    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
+    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
+    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
+    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
+    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
+    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
+    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
+    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
+    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
+    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
+    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
+    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
+    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
+    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
+    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
+
+    a = safe_add(a, olda);
+    b = safe_add(b, oldb);
+    c = safe_add(c, oldc);
+    d = safe_add(d, oldd);
+  }
+  return Array(a, b, c, d);
+}
+
+/*
+ * These functions implement the four basic operations the algorithm uses.
+ */
+function md5_cmn(q, a, b, x, s, t)
+{
+  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
+}
+function md5_ff(a, b, c, d, x, s, t)
+{
+  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
+}
+function md5_gg(a, b, c, d, x, s, t)
+{
+  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
+}
+function md5_hh(a, b, c, d, x, s, t)
+{
+  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
+}
+function md5_ii(a, b, c, d, x, s, t)
+{
+  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
+}
+
+/*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+function safe_add(x, y)
+{
+  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+  return (msw << 16) | (lsw & 0xFFFF);
+}
+
+/*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+function bit_rol(num, cnt)
+{
+  return (num << cnt) | (num >>> (32 - cnt));
+}
+
+module.exports = {
+	md5 : function(str){
+		return hex_md5(str);
+	}
+}

libs/function/queryParams.js

@@ -0,0 +1,58 @@
+/**
+ * 对象转url参数
+ * @param {*} data,对象
+ * @param {*} isPrefix,是否自动加上"?"
+ */
+function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
+	let prefix = isPrefix ? '?' : ''
+	let _result = []
+	if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets';
+	for (let key in data) {
+		let value = data[key]
+		// 去掉为空的参数
+		if (['', undefined, null].indexOf(value) >= 0) {
+			continue;
+		}
+		// 如果值为数组，另行处理
+		if (value.constructor === Array) {
+			// e.g. {ids: [1, 2, 3]}
+			switch (arrayFormat) {
+				case 'indices':
+					// 结果: ids[0]=1&ids[1]=2&ids[2]=3
+					for (let i = 0; i < value.length; i++) {
+						_result.push(key + '[' + i + ']=' + value[i])
+					}
+					break;
+				case 'brackets':
+					// 结果: ids[]=1&ids[]=2&ids[]=3
+					value.forEach(_value => {
+						_result.push(key + '[]=' + _value)
+					})
+					break;
+				case 'repeat':
+					// 结果: ids=1&ids=2&ids=3
+					value.forEach(_value => {
+						_result.push(key + '=' + _value)
+					})
+					break;
+				case 'comma':
+					// 结果: ids=1,2,3
+					let commaStr = "";
+					value.forEach(_value => {
+						commaStr += (commaStr ? "," : "") + _value;
+					})
+					_result.push(key + '=' + commaStr)
+					break;
+				default:
+					value.forEach(_value => {
+						_result.push(key + '[]=' + _value)
+					})
+			}
+		} else {
+			_result.push(key + '=' + value)
+		}
+	}
+	return _result.length ? prefix + _result.join('&') : ''
+}
+
+export default queryParams;

libs/function/random.js

@@ -0,0 +1,10 @@
+function random(min, max) {
+	if (min >= 0 && max > 0 && max >= min) {
+		let gab = max - min + 1;
+		return Math.floor(Math.random() * gab + min);
+	} else {
+		return 0;
+	}
+}
+
+export default random;

libs/function/randomArray.js

@@ -0,0 +1,7 @@
+// 打乱数组
+function randomArray(array = []) {
+	// 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0
+	return array.sort(() => Math.random() - 0.5);
+}
+
+export default randomArray

libs/function/route.js

@@ -0,0 +1,122 @@
+/**
+ * 路由跳转方法，该方法相对于直接使用uni.xxx的好处是使用更加简单快捷
+ * 并且带有路由拦截功能
+ */
+
+class Router {
+	constructor() {
+		// 原始属性定义
+		this.config = {
+			type: 'navigateTo',
+			url: '',
+			delta: 1, // navigateBack页面后退时,回退的层数
+			params: {}, // 传递的参数
+			animationType: 'pop-in', // 窗口动画,只在APP有效
+			animationDuration: 300, // 窗口动画持续时间,单位毫秒,只在APP有效
+			intercept: false, // 是否需要拦截
+		}
+		// 因为route方法是需要对外赋值给另外的对象使用，同时route内部有使用this，会导致route失去上下文
+		// 这里在构造函数中进行this绑定
+		this.route = this.route.bind(this)
+	}
+
+	// 判断url前面是否有"/"，如果没有则加上，否则无法跳转
+	addRootPath(url) {
+		return url[0] === '/' ? url : `/${url}`
+	}
+
+	// 整合路由参数
+	mixinParam(url, params) {
+		url = url && this.addRootPath(url)
+		
+		// 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary"
+		// 如果有url中有get参数，转换后无需带上"?"
+		let query = ''
+		if (/.*\/.*\?.*=.*/.test(url)) {
+			// object对象转为get类型的参数
+			query = uni.$u.queryParams(params, false);
+			// 因为已有get参数,所以后面拼接的参数需要带上"&"隔开
+			return url += "&" + query
+		} else {
+			// 直接拼接参数，因为此处url中没有后面的query参数，也就没有"?/&"之类的符号
+			query = uni.$u.queryParams(params);
+			return url += query
+		}
+	}
+
+	// 对外的方法名称
+	async route(options = {}, params = {}) {
+		// 合并用户的配置和内部的默认配置
+		let mergeConfig = {}
+
+		if (typeof options === 'string') {
+			// 如果options为字符串，则为route(url, params)的形式
+			mergeConfig.url = this.mixinParam(options, params)
+			mergeConfig.type = 'navigateTo'
+		} else {
+			mergeConfig = uni.$u.deepClone(options, this.config)
+			// 否则正常使用mergeConfig中的url和params进行拼接
+			mergeConfig.url = this.mixinParam(options.url, options.params)
+		}
+		
+		if(params.intercept) {
+			this.config.intercept = params.intercept
+		}
+		// params参数也带给拦截器
+		mergeConfig.params = params
+		// 合并内外部参数
+		mergeConfig = uni.$u.deepMerge(this.config, mergeConfig)
+		// 判断用户是否定义了拦截器
+		if (typeof uni.$u.routeIntercept === 'function') {
+			// 定一个promise，根据用户执行resolve(true)或者resolve(false)来决定是否进行路由跳转
+			const isNext = await new Promise((resolve, reject) => {
+				uni.$u.routeIntercept(mergeConfig, resolve)
+			})
+			// 如果isNext为true，则执行路由跳转
+			isNext && this.openPage(mergeConfig)
+		} else {
+			this.openPage(mergeConfig)
+		}
+	}
+
+	// 执行路由跳转
+	openPage(config) {
+		// 解构参数
+		const {
+			url,
+			type,
+			delta,
+			animationType,
+			animationDuration
+		} = config
+		if (config.type == 'navigateTo' || config.type == 'to') {
+			uni.navigateTo({
+				url,
+				animationType,
+				animationDuration
+			});
+		}
+		if (config.type == 'redirectTo' || config.type == 'redirect') {
+			uni.redirectTo({
+				url
+			});
+		}
+		if (config.type == 'switchTab' || config.type == 'tab') {
+			uni.switchTab({
+				url
+			});
+		}
+		if (config.type == 'reLaunch' || config.type == 'launch') {
+			uni.reLaunch({
+				url
+			});
+		}
+		if (config.type == 'navigateBack' || config.type == 'back') {
+			uni.navigateBack({
+				delta
+			});
+		}
+	}
+}
+
+export default (new Router()).route

libs/function/sys.js

@@ -0,0 +1,9 @@
+export function os() {
+	return uni.getSystemInfoSync().platform;
+};
+
+export function sys() {
+	return uni.getSystemInfoSync();
+}
+
+

libs/function/test.js

@@ -0,0 +1,232 @@
+/**
+ * 验证电子邮箱格式
+ */
+function email(value) {
+	return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value);
+}
+
+/**
+ * 验证手机格式
+ */
+function mobile(value) {
+	return /^1[3-9]\d{9}$/.test(value)
+}
+
+/**
+ * 验证URL格式
+ */
+function url(value) {
+	return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/.test(value)
+}
+
+/**
+ * 验证日期格式
+ */
+function date(value) {
+	return !/Invalid|NaN/.test(new Date(value).toString())
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+function dateISO(value) {
+	return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+}
+
+/**
+ * 验证十进制数字
+ */
+function number(value) {
+	return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
+}
+
+/**
+ * 验证整数
+ */
+function digits(value) {
+	return /^\d+$/.test(value)
+}
+
+/**
+ * 验证身份证号码
+ */
+function idCard(value) {
+	return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
+		value)
+}
+
+/**
+ * 是否车牌号
+ */
+function carNo(value) {
+	// 新能源车牌
+	const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
+	// 旧车牌
+	const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
+	if (value.length === 7) {
+		return creg.test(value);
+	} else if (value.length === 8) {
+		return xreg.test(value);
+	} else {
+		return false;
+	}
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+function amount(value) {
+	//金额，只允许保留两位小数
+	return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
+}
+
+/**
+ * 中文
+ */
+function chinese(value) {
+	let reg = /^[\u4e00-\u9fa5]+$/gi;
+	return reg.test(value);
+}
+
+/**
+ * 只能输入字母
+ */
+function letter(value) {
+	return /^[a-zA-Z]*$/.test(value);
+}
+
+/**
+ * 只能是字母或者数字
+ */
+function enOrNum(value) {
+	//英文或者数字
+	let reg = /^[0-9a-zA-Z]*$/g;
+	return reg.test(value);
+}
+
+/**
+ * 验证是否包含某个值
+ */
+function contains(value, param) {
+	return value.indexOf(param) >= 0
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+function range(value, param) {
+	return value >= param[0] && value <= param[1]
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+function rangeLength(value, param) {
+	return value.length >= param[0] && value.length <= param[1]
+}
+
+/**
+ * 是否固定电话
+ */
+function landline(value) {
+	let reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
+	return reg.test(value);
+}
+
+/**
+ * 判断是否为空
+ */
+function empty(value) {
+	switch (typeof value) {
+		case 'undefined':
+			return true;
+		case 'string':
+			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+			break;
+		case 'boolean':
+			if (!value) return true;
+			break;
+		case 'number':
+			if (0 === value || isNaN(value)) return true;
+			break;
+		case 'object':
+			if (null === value || value.length === 0) return true;
+			for (var i in value) {
+				return false;
+			}
+			return true;
+	}
+	return false;
+}
+
+/**
+ * 是否json字符串
+ */
+function jsonString(value) {
+	if (typeof value == 'string') {
+		try {
+			var obj = JSON.parse(value);
+			if (typeof obj == 'object' && obj) {
+				return true;
+			} else {
+				return false;
+			}
+		} catch (e) {
+			return false;
+		}
+	}
+	return false;
+}
+
+
+/**
+ * 是否数组
+ */
+function array(value) {
+	if (typeof Array.isArray === "function") {
+		return Array.isArray(value);
+	} else {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+}
+
+/**
+ * 是否对象
+ */
+function object(value) {
+	return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/**
+ * 是否短信验证码
+ */
+function code(value, len = 6) {
+	return new RegExp(`^\\d{${len}}$`).test(value);
+}
+
+
+export default {
+	email,
+	mobile,
+	url,
+	date,
+	dateISO,
+	number,
+	digits,
+	idCard,
+	carNo,
+	amount,
+	chinese,
+	letter,
+	enOrNum,
+	contains,
+	range,
+	rangeLength,
+	empty,
+	isEmpty: empty,
+	jsonString,
+	landline,
+	object,
+	array,
+	code
+}

libs/function/throttle.js

@@ -0,0 +1,32 @@
+let timer, flag;
+/**
+ * 节流原理：在一定时间内，只能触发一次
+ * 
+ * @param {Function} func 要执行的回调函数 
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行
+ * @return null
+ */
+function throttle(func, wait = 500, immediate = true) {
+	if (immediate) {
+		if (!flag) {
+			flag = true;
+			// 如果是立即执行，则在wait毫秒内开始时执行
+			typeof func === 'function' && func();
+			timer = setTimeout(() => {
+				flag = false;
+			}, wait);
+		}
+	} else {
+		if (!flag) {
+			flag = true
+			// 如果是非立即执行，则在wait毫秒内的结束处执行
+			timer = setTimeout(() => {
+				flag = false
+				typeof func === 'function' && func();
+			}, wait);
+		}
+		
+	}
+};
+export default throttle

libs/function/timeFormat.js

@@ -0,0 +1,51 @@
+// padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
+// 所以这里做一个兼容polyfill的兼容处理
+if (!String.prototype.padStart) {
+	// 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
+	String.prototype.padStart = function(maxLength, fillString = ' ') {
+		if (Object.prototype.toString.call(fillString) !== "[object String]") throw new TypeError(
+			'fillString must be String')
+		let str = this
+		// 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
+		if (str.length >= maxLength) return String(str)
+
+		let fillLength = maxLength - str.length,
+			times = Math.ceil(fillLength / fillString.length)
+		while (times >>= 1) {
+			fillString += fillString
+			if (times === 1) {
+				fillString += fillString
+			}
+		}
+		return fillString.slice(0, fillLength) + str;
+	}
+}
+
+// 其他更多是格式化有如下:
+// yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合
+function timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') {
+	// 如果为null,则格式化当前时间
+	if (!dateTime) dateTime = Number(new Date());
+	// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
+	if (dateTime.toString().length == 10) dateTime *= 1000;
+	let date = new Date(dateTime);
+	let ret;
+	let opt = {
+		"y+": date.getFullYear().toString(), // 年
+		"m+": (date.getMonth() + 1).toString(), // 月
+		"d+": date.getDate().toString(), // 日
+		"h+": date.getHours().toString(), // 时
+		"M+": date.getMinutes().toString(), // 分
+		"s+": date.getSeconds().toString() // 秒
+		// 有其他格式化字符需求可以继续添加，必须转化成字符串
+	};
+	for (let k in opt) {
+		ret = new RegExp("(" + k + ")").exec(fmt);
+		if (ret) {
+			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+		};
+	};
+	return fmt;
+}
+
+export default timeFormat

libs/function/timeFrom.js

@@ -0,0 +1,47 @@
+import timeFormat from '../../libs/function/timeFormat.js';
+
+/**
+ * 时间戳转为多久之前
+ * @param String timestamp 时间戳
+ * @param String | Boolean format 如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
+ * 如果为布尔值false，无论什么时间，都返回多久以前的格式
+ */
+function timeFrom(dateTime = null, format = 'yyyy-mm-dd') {
+	// 如果为null,则格式化当前时间
+	if (!dateTime) dateTime = Number(new Date());
+	// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
+	if (dateTime.toString().length == 10) dateTime *= 1000;
+	let timestamp = + new Date(Number(dateTime));
+
+	let timer = (Number(new Date()) - timestamp) / 1000;
+	// 如果小于5分钟,则返回"刚刚",其他以此类推
+	let tips = '';
+	switch (true) {
+		case timer < 300:
+			tips = '刚刚';
+			break;
+		case timer >= 300 && timer < 3600:
+			tips = parseInt(timer / 60) + '分钟前';
+			break;
+		case timer >= 3600 && timer < 86400:
+			tips = parseInt(timer / 3600) + '小时前';
+			break;
+		case timer >= 86400 && timer < 2592000:
+			tips = parseInt(timer / 86400) + '天前';
+			break;
+		default:
+			// 如果format为false，则无论什么时间戳，都显示xx之前
+			if(format === false) {
+				if(timer >= 2592000 && timer < 365 * 86400) {
+					tips = parseInt(timer / (86400 * 30)) + '个月前';
+				} else {
+					tips = parseInt(timer / (86400 * 365)) + '年前';
+				}
+			} else {
+				tips = timeFormat(timestamp, format);
+			}
+	}
+	return tips;
+}
+
+export default timeFrom;

libs/function/toast.js

@@ -0,0 +1,9 @@
+function toast(title, duration = 1500) {
+	uni.showToast({
+		title: title,
+		icon: 'none',
+		duration: duration
+	})
+}
+
+export default toast

libs/function/trim.js

@@ -0,0 +1,15 @@
+function trim(str, pos = 'both') {
+	if (pos == 'both') {
+		return str.replace(/^\s+|\s+$/g, "");
+	} else if (pos == "left") {
+		return str.replace(/^\s*/, '');
+	} else if (pos == 'right') {
+		return str.replace(/(\s*$)/g, "");
+	} else if (pos == 'all') {
+		return str.replace(/\s+/g, "");
+	} else {
+		return str;
+	}
+}
+
+export default trim

libs/function/type2icon.js

@@ -0,0 +1,35 @@
+/**
+ * 根据主题type值,获取对应的图标
+ * @param String type 主题名称,primary|info|error|warning|success
+ * @param String fill 是否使用fill填充实体的图标  
+ */
+function type2icon(type = 'success', fill = false) {
+	// 如果非预置值,默认为success
+	if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success';
+	let iconName = '';
+	// 目前(2019-12-12),info和primary使用同一个图标
+	switch (type) {
+		case 'primary':
+			iconName = 'info-circle';
+			break;
+		case 'info':
+			iconName = 'info-circle';
+			break;
+		case 'error':
+			iconName = 'close-circle';
+			break;
+		case 'warning':
+			iconName = 'error-circle';
+			break;
+		case 'success':
+			iconName = 'checkmark-circle';
+			break;
+		default:
+			iconName = 'checkmark-circle';
+	}
+	// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
+	if (fill) iconName += '-fill';
+	return iconName;
+}
+
+export default type2icon

libs/mixin/mixin.js

@@ -0,0 +1,64 @@
+module.exports = {
+	data() {
+		return {}
+	},
+	onLoad() {
+		// getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
+		this.$u.getRect = this.$uGetRect
+	},
+	methods: {
+		// 查询节点信息
+		// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
+		// 解决办法为在组件根部再套一个没有任何作用的view元素
+		$uGetRect(selector, all) {
+			return new Promise(resolve => {
+				uni.createSelectorQuery().
+				in(this)[all ? 'selectAll' : 'select'](selector)
+					.boundingClientRect(rect => {
+						if (all && Array.isArray(rect) && rect.length) {
+							resolve(rect)
+						}
+						if (!all && rect) {
+							resolve(rect)
+						}
+					})
+					.exec()
+			})
+		},
+		getParentData(parentName = '') {
+			// 避免在created中去定义parent变量
+			if(!this.parent) this.parent = false;
+			// 这里的本质原理是，通过获取父组件实例(也即u-radio-group的this)
+			// 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
+			// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
+			this.parent = this.$u.$parent.call(this, parentName);
+			if(this.parent) {
+				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+				Object.keys(this.parentData).map(key => {
+					this.parentData[key] = this.parent[key];
+				});
+			}
+		},
+		// 阻止事件冒泡
+		preventEvent(e) {
+			e && e.stopPropagation && e.stopPropagation()
+		}
+	},
+	onReachBottom() {
+		uni.$emit('uOnReachBottom')
+	},
+	beforeDestroy() {
+		// 判断当前页面是否存在parent和children，一般在checkbox和checkbox-group父子联动的场景会有此情况
+		// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
+		if(this.parent && uni.$u.test.array(this.parent.children)) {
+			// 组件销毁时，移除父组件中的children数组中对应的实例
+			const childrenList = this.parent.children
+			childrenList.map((child, index) => {
+				// 如果相等，则移除
+				if(child === this) {
+					childrenList.splice(index, 1)
+				}
+			})
+		}
+	}
+}

libs/mixin/mpShare.js

@@ -0,0 +1,18 @@
+module.exports = {
+	onLoad() {
+		// 设置默认的转发参数
+		this.$u.mpShare = {
+			title: '', // 默认为小程序名称
+			path: '', // 默认为当前页面路径
+			imageUrl: '' // 默认为当前页面的截图
+		}
+	},
+	onShareAppMessage() {
+		return this.$u.mpShare
+	},
+	// #ifdef MP-WEIXIN
+	onShareTimeline() {
+		return this.$u.mpShare
+	}
+	// #endif
+}

libs/request/index.js

@@ -0,0 +1,169 @@
+import deepMerge from "../function/deepMerge";
+import validate from "../function/test";
+class Request {
+	// 设置全局默认配置
+	setConfig(customConfig) {
+		// 深度合并对象，否则会造成对象深层属性丢失
+		this.config = deepMerge(this.config, customConfig);
+	}
+
+	// 主要请求部分
+	request(options = {}) {
+		// 检查请求拦截
+		if (this.interceptor.request && typeof this.interceptor.request === 'function') {
+			let tmpConfig = {};
+			let interceptorRequest = this.interceptor.request(options);
+			if (interceptorRequest === false) {
+				// 返回一个处于pending状态中的Promise，来取消原promise，避免进入then()回调
+				return new Promise(()=>{});
+			}
+			this.options = interceptorRequest;
+		}
+		options.dataType = options.dataType || this.config.dataType;
+		options.responseType = options.responseType || this.config.responseType;
+		options.url = options.url || '';
+		options.params = options.params || {};
+		options.header = Object.assign({}, this.config.header, options.header);
+		options.method = options.method || this.config.method;
+
+		return new Promise((resolve, reject) => {
+			options.complete = (response) => {
+				// 请求返回后，隐藏loading(如果请求返回快的话，可能会没有loading)
+				uni.hideLoading();
+				// 清除定时器，如果请求回来了，就无需loading
+				clearTimeout(this.config.timer);
+				this.config.timer = null;
+				// 判断用户对拦截返回数据的要求，如果originalData为true，返回所有的数据(response)到拦截器，否则只返回response.data
+				if(this.config.originalData) {
+					// 判断是否存在拦截器
+					if (this.interceptor.response && typeof this.interceptor.response === 'function') {
+						let resInterceptors = this.interceptor.response(response);
+						// 如果拦截器不返回false，就将拦截器返回的内容给this.$u.post的then回调
+						if (resInterceptors !== false) {
+							resolve(resInterceptors);
+						} else {
+							// 如果拦截器返回false，意味着拦截器定义者认为返回有问题，直接接入catch回调
+							reject(response);
+						}
+					} else {
+						// 如果要求返回原始数据，就算没有拦截器，也返回最原始的数据
+						resolve(response);
+					}
+				} else {
+					if (response.statusCode == 200) {
+						if (this.interceptor.response && typeof this.interceptor.response === 'function') {
+							let resInterceptors = this.interceptor.response(response.data);
+							if (resInterceptors !== false) {
+								resolve(resInterceptors);
+							} else {
+								reject(response.data);
+							}
+						} else {
+							// 如果不是返回原始数据(originalData=false)，且没有拦截器的情况下，返回纯数据给then回调
+							resolve(response.data);
+						}
+					} else {
+						// 不返回原始数据的情况下，服务器状态码不为200，modal弹框提示
+						// if(response.errMsg) {
+						// 	uni.showModal({
+						// 		title: response.errMsg
+						// 	});
+						// }
+						reject(response)
+					}
+				}
+			}
+
+			// 判断用户传递的URL是否/开头,如果不是,加上/，这里使用了uView的test.js验证库的url()方法
+			options.url = validate.url(options.url) ? options.url : (this.config.baseUrl + (options.url.indexOf('/') == 0 ?
+				options.url : '/' + options.url));
+			
+			// 是否显示loading
+			// 加一个是否已有timer定时器的判断，否则有两个同时请求的时候，后者会清除前者的定时器id
+			// 而没有清除前者的定时器，导致前者超时，一直显示loading
+			if(this.config.showLoading && !this.config.timer) {
+				this.config.timer = setTimeout(() => {
+					uni.showLoading({
+						title: this.config.loadingText,
+						mask: this.config.loadingMask
+					})
+					this.config.timer = null;
+				}, this.config.loadingTime);
+			}
+			uni.request(options);
+		})
+		// .catch(res => {
+		// 	// 如果返回reject()，不让其进入this.$u.post().then().catch()后面的catct()
+		// 	// 因为很多人都会忘了写后面的catch()，导致报错捕获不到catch
+		// 	return new Promise(()=>{});
+		// })
+	}
+
+	constructor() {
+		this.config = {
+			baseUrl: '', // 请求的根域名
+			// 默认的请求头
+			header: {},
+			method: 'POST',
+			// 设置为json，返回后uni.request会对数据进行一次JSON.parse
+			dataType: 'json',
+			// 此参数无需处理，因为5+和支付宝小程序不支持，默认为text即可
+			responseType: 'text',
+			showLoading: true, // 是否显示请求中的loading
+			loadingText: '请求中...',
+			loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
+			timer: null, // 定时器
+			originalData: false, // 是否在拦截器中返回服务端的原始数据，见文档说明
+			loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
+		}
+	
+		// 拦截器
+		this.interceptor = {
+			// 请求前的拦截
+			request: null,
+			// 请求后的拦截
+			response: null
+		}
+
+		// get请求
+		this.get = (url, data = {}, header = {}) => {
+			return this.request({
+				method: 'GET',
+				url,
+				header,
+				data
+			})
+		}
+
+		// post请求
+		this.post = (url, data = {}, header = {}) => {
+			return this.request({
+				url,
+				method: 'POST',
+				header,
+				data
+			})
+		}
+		
+		// put请求，不支持支付宝小程序(HX2.6.15)
+		this.put = (url, data = {}, header = {}) => {
+			return this.request({
+				url,
+				method: 'PUT',
+				header,
+				data
+			})
+		}
+		
+		// delete请求，不支持支付宝和头条小程序(HX2.6.15)
+		this.delete = (url, data = {}, header = {}) => {
+			return this.request({
+				url,
+				method: 'DELETE',
+				header,
+				data
+			})
+		}
+	}
+}
+export default new Request

libs/store/index.js

@@ -0,0 +1,19 @@
+// 暂时不用vuex模块方式实现，将该方法直接放入到/store/index.js中
+const module = {
+	actions: {
+		$uStore({rootState}, params) {
+			let nameArr = params.name.split('.');
+			if(nameArr.length >= 2) {
+				let obj = rootState[nameArr[0]];
+				for(let i = 1; i < nameArr.length - 1; i ++) {
+					obj = obj[nameArr[i]];
+				}
+				obj[nameArr[nameArr.length - 1]] = params.value;
+			} else {
+				rootState[params.name] = params.value;
+			}
+		}
+	}
+}
+
+export default module

libs/util/async-validator.js

@@ -0,0 +1,1356 @@
+function _extends() {
+	_extends = Object.assign || function(target) {
+		for (var i = 1; i < arguments.length; i++) {
+			var source = arguments[i];
+
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					target[key] = source[key];
+				}
+			}
+		}
+
+		return target;
+	};
+
+	return _extends.apply(this, arguments);
+}
+
+/* eslint no-console:0 */
+var formatRegExp = /%[sdj%]/g;
+var warning = function warning() {}; // don't print warning message when in production env or node runtime
+
+if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production' && typeof window !==
+	'undefined' && typeof document !== 'undefined') {
+	warning = function warning(type, errors) {
+		if (typeof console !== 'undefined' && console.warn) {
+			if (errors.every(function(e) {
+					return typeof e === 'string';
+				})) {
+				console.warn(type, errors);
+			}
+		}
+	};
+}
+
+function convertFieldsError(errors) {
+	if (!errors || !errors.length) return null;
+	var fields = {};
+	errors.forEach(function(error) {
+		var field = error.field;
+		fields[field] = fields[field] || [];
+		fields[field].push(error);
+	});
+	return fields;
+}
+
+function format() {
+	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+		args[_key] = arguments[_key];
+	}
+
+	var i = 1;
+	var f = args[0];
+	var len = args.length;
+
+	if (typeof f === 'function') {
+		return f.apply(null, args.slice(1));
+	}
+
+	if (typeof f === 'string') {
+		var str = String(f).replace(formatRegExp, function(x) {
+			if (x === '%%') {
+				return '%';
+			}
+
+			if (i >= len) {
+				return x;
+			}
+
+			switch (x) {
+				case '%s':
+					return String(args[i++]);
+
+				case '%d':
+					return Number(args[i++]);
+
+				case '%j':
+					try {
+						return JSON.stringify(args[i++]);
+					} catch (_) {
+						return '[Circular]';
+					}
+
+					break;
+
+				default:
+					return x;
+			}
+		});
+
+		for (var arg = args[i]; i < len; arg = args[++i]) {
+			str += " " + arg;
+		}
+
+		return str;
+	}
+
+	return f;
+}
+
+function isNativeStringType(type) {
+	return type === 'string' || type === 'url' || type === 'hex' || type === 'email' || type === 'pattern';
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (type === 'array' && Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (isNativeStringType(type) && typeof value === 'string' && !value) {
+		return true;
+	}
+
+	return false;
+}
+
+function asyncParallelArray(arr, func, callback) {
+	var results = [];
+	var total = 0;
+	var arrLength = arr.length;
+
+	function count(errors) {
+		results.push.apply(results, errors);
+		total++;
+
+		if (total === arrLength) {
+			callback(results);
+		}
+	}
+
+	arr.forEach(function(a) {
+		func(a, count);
+	});
+}
+
+function asyncSerialArray(arr, func, callback) {
+	var index = 0;
+	var arrLength = arr.length;
+
+	function next(errors) {
+		if (errors && errors.length) {
+			callback(errors);
+			return;
+		}
+
+		var original = index;
+		index = index + 1;
+
+		if (original < arrLength) {
+			func(arr[original], next);
+		} else {
+			callback([]);
+		}
+	}
+
+	next([]);
+}
+
+function flattenObjArr(objArr) {
+	var ret = [];
+	Object.keys(objArr).forEach(function(k) {
+		ret.push.apply(ret, objArr[k]);
+	});
+	return ret;
+}
+
+function asyncMap(objArr, option, func, callback) {
+	if (option.first) {
+		var _pending = new Promise(function(resolve, reject) {
+			var next = function next(errors) {
+				callback(errors);
+				return errors.length ? reject({
+					errors: errors,
+					fields: convertFieldsError(errors)
+				}) : resolve();
+			};
+
+			var flattenArr = flattenObjArr(objArr);
+			asyncSerialArray(flattenArr, func, next);
+		});
+
+		_pending["catch"](function(e) {
+			return e;
+		});
+
+		return _pending;
+	}
+
+	var firstFields = option.firstFields || [];
+
+	if (firstFields === true) {
+		firstFields = Object.keys(objArr);
+	}
+
+	var objArrKeys = Object.keys(objArr);
+	var objArrLength = objArrKeys.length;
+	var total = 0;
+	var results = [];
+	var pending = new Promise(function(resolve, reject) {
+		var next = function next(errors) {
+			results.push.apply(results, errors);
+			total++;
+
+			if (total === objArrLength) {
+				callback(results);
+				return results.length ? reject({
+					errors: results,
+					fields: convertFieldsError(results)
+				}) : resolve();
+			}
+		};
+
+		if (!objArrKeys.length) {
+			callback(results);
+			resolve();
+		}
+
+		objArrKeys.forEach(function(key) {
+			var arr = objArr[key];
+
+			if (firstFields.indexOf(key) !== -1) {
+				asyncSerialArray(arr, func, next);
+			} else {
+				asyncParallelArray(arr, func, next);
+			}
+		});
+	});
+	pending["catch"](function(e) {
+		return e;
+	});
+	return pending;
+}
+
+function complementError(rule) {
+	return function(oe) {
+		if (oe && oe.message) {
+			oe.field = oe.field || rule.fullField;
+			return oe;
+		}
+
+		return {
+			message: typeof oe === 'function' ? oe() : oe,
+			field: oe.field || rule.fullField
+		};
+	};
+}
+
+function deepMerge(target, source) {
+	if (source) {
+		for (var s in source) {
+			if (source.hasOwnProperty(s)) {
+				var value = source[s];
+
+				if (typeof value === 'object' && typeof target[s] === 'object') {
+					target[s] = _extends({}, target[s], {}, value);
+				} else {
+					target[s] = value;
+				}
+			}
+		}
+	}
+
+	return target;
+}
+
+/**
+ *  Rule for validating required fields.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function required(rule, value, source, errors, options, type) {
+	if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type || rule.type))) {
+		errors.push(format(options.messages.required, rule.fullField));
+	}
+}
+
+/**
+ *  Rule for validating whitespace.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function whitespace(rule, value, source, errors, options) {
+	if (/^\s+$/.test(value) || value === '') {
+		errors.push(format(options.messages.whitespace, rule.fullField));
+	}
+}
+
+/* eslint max-len:0 */
+
+var pattern = {
+	// http://emailregex.com/
+	email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+	url: new RegExp(
+		"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
+		'i'),
+	hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
+};
+var types = {
+	integer: function integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	"float": function float(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array: function array(value) {
+		return Array.isArray(value);
+	},
+	regexp: function regexp(value) {
+		if (value instanceof RegExp) {
+			return true;
+		}
+
+		try {
+			return !!new RegExp(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	date: function date(value) {
+		return typeof value.getTime === 'function' && typeof value.getMonth === 'function' && typeof value.getYear ===
+			'function';
+	},
+	number: function number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+
+		// 修改源码，将字符串数值先转为数值
+		return typeof +value === 'number';
+	},
+	object: function object(value) {
+		return typeof value === 'object' && !types.array(value);
+	},
+	method: function method(value) {
+		return typeof value === 'function';
+	},
+	email: function email(value) {
+		return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+	},
+	url: function url(value) {
+		return typeof value === 'string' && !!value.match(pattern.url);
+	},
+	hex: function hex(value) {
+		return typeof value === 'string' && !!value.match(pattern.hex);
+	}
+};
+/**
+ *  Rule for validating the type of a value.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function type(rule, value, source, errors, options) {
+	if (rule.required && value === undefined) {
+		required(rule, value, source, errors, options);
+		return;
+	}
+
+	var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex'];
+	var ruleType = rule.type;
+
+	if (custom.indexOf(ruleType) > -1) {
+		if (!types[ruleType](value)) {
+			errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+		} // straight typeof check
+
+	} else if (ruleType && typeof value !== rule.type) {
+		errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+	}
+}
+
+/**
+ *  Rule for validating minimum and maximum allowed values.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function range(rule, value, source, errors, options) {
+	var len = typeof rule.len === 'number';
+	var min = typeof rule.min === 'number';
+	var max = typeof rule.max === 'number'; // 正则匹配码点范围从U+010000一直到U+10FFFF的文字（补充平面Supplementary Plane）
+
+	var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+	var val = value;
+	var key = null;
+	var num = typeof value === 'number';
+	var str = typeof value === 'string';
+	var arr = Array.isArray(value);
+
+	if (num) {
+		key = 'number';
+	} else if (str) {
+		key = 'string';
+	} else if (arr) {
+		key = 'array';
+	} // if the value is not of a supported type for range validation
+	// the validation rule rule should use the
+	// type property to also test for a particular type
+
+
+	if (!key) {
+		return false;
+	}
+
+	if (arr) {
+		val = value.length;
+	}
+
+	if (str) {
+		// 处理码点大于U+010000的文字length属性不准确的bug，如"𠮷𠮷𠮷".length !== 3
+		val = value.replace(spRegexp, '_').length;
+	}
+
+	if (len) {
+		if (val !== rule.len) {
+			errors.push(format(options.messages[key].len, rule.fullField, rule.len));
+		}
+	} else if (min && !max && val < rule.min) {
+		errors.push(format(options.messages[key].min, rule.fullField, rule.min));
+	} else if (max && !min && val > rule.max) {
+		errors.push(format(options.messages[key].max, rule.fullField, rule.max));
+	} else if (min && max && (val < rule.min || val > rule.max)) {
+		errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
+	}
+}
+
+var ENUM = 'enum';
+/**
+ *  Rule for validating a value exists in an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable(rule, value, source, errors, options) {
+	rule[ENUM] = Array.isArray(rule[ENUM]) ? rule[ENUM] : [];
+
+	if (rule[ENUM].indexOf(value) === -1) {
+		errors.push(format(options.messages[ENUM], rule.fullField, rule[ENUM].join(', ')));
+	}
+}
+
+/**
+ *  Rule for validating a regular expression pattern.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$1(rule, value, source, errors, options) {
+	if (rule.pattern) {
+		if (rule.pattern instanceof RegExp) {
+			// if a RegExp instance is passed, reset `lastIndex` in case its `global`
+			// flag is accidentally set to `true`, which in a validation scenario
+			// is not necessary and the result might be misleading
+			rule.pattern.lastIndex = 0;
+
+			if (!rule.pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		} else if (typeof rule.pattern === 'string') {
+			var _pattern = new RegExp(rule.pattern);
+
+			if (!_pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		}
+	}
+}
+
+var rules = {
+	required: required,
+	whitespace: whitespace,
+	type: type,
+	range: range,
+	"enum": enumerable,
+	pattern: pattern$1
+};
+
+/**
+ *  Performs validation for string types.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function string(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'string');
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+			rules.pattern(rule, value, source, errors, options);
+
+			if (rule.whitespace === true) {
+				rules.whitespace(rule, value, source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a function.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function method(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function number(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (value === '') {
+			value = undefined;
+		}
+
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a boolean.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function _boolean(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates the regular expression type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function regexp(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is an integer.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function integer(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is a floating point number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function floatFn(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an array.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function array(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'array') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'array');
+
+		if (!isEmptyValue(value, 'array')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an object.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function object(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+var ENUM$1 = 'enum';
+/**
+ *  Validates an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable$1(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules[ENUM$1](rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a regular expression pattern.
+ *
+ *  Performs validation when a rule only contains
+ *  a pattern property but is not declared as a string type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$2(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.pattern(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+function date(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); 
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			var dateObject;
+
+			if (typeof value === 'number') {
+				dateObject = new Date(value);
+			} else {
+				dateObject = value;
+			}
+
+			rules.type(rule, dateObject, source, errors, options);
+
+			if (dateObject) {
+				rules.range(rule, dateObject.getTime(), source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+function required$1(rule, value, callback, source, options) {
+	var errors = [];
+	var type = Array.isArray(value) ? 'array' : typeof value;
+	rules.required(rule, value, source, errors, options, type);
+	callback(errors);
+}
+
+function type$1(rule, value, callback, source, options) {
+	var ruleType = rule.type;
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, ruleType) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, ruleType);
+
+		if (!isEmptyValue(value, ruleType)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Performs validation for any type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function any(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+	}
+
+	callback(errors);
+}
+
+var validators = {
+	string: string,
+	method: method,
+	number: number,
+	"boolean": _boolean,
+	regexp: regexp,
+	integer: integer,
+	"float": floatFn,
+	array: array,
+	object: object,
+	"enum": enumerable$1,
+	pattern: pattern$2,
+	date: date,
+	url: type$1,
+	hex: type$1,
+	email: type$1,
+	required: required$1,
+	any: any
+};
+
+function newMessages() {
+	return {
+		"default": 'Validation error on field %s',
+		required: '%s is required',
+		"enum": '%s must be one of %s',
+		whitespace: '%s cannot be empty',
+		date: {
+			format: '%s date %s is invalid for format %s',
+			parse: '%s date could not be parsed, %s is invalid ',
+			invalid: '%s date %s is invalid'
+		},
+		types: {
+			string: '%s is not a %s',
+			method: '%s is not a %s (function)',
+			array: '%s is not an %s',
+			object: '%s is not an %s',
+			number: '%s is not a %s',
+			date: '%s is not a %s',
+			"boolean": '%s is not a %s',
+			integer: '%s is not an %s',
+			"float": '%s is not a %s',
+			regexp: '%s is not a valid %s',
+			email: '%s is not a valid %s',
+			url: '%s is not a valid %s',
+			hex: '%s is not a valid %s'
+		},
+		string: {
+			len: '%s must be exactly %s characters',
+			min: '%s must be at least %s characters',
+			max: '%s cannot be longer than %s characters',
+			range: '%s must be between %s and %s characters'
+		},
+		number: {
+			len: '%s must equal %s',
+			min: '%s cannot be less than %s',
+			max: '%s cannot be greater than %s',
+			range: '%s must be between %s and %s'
+		},
+		array: {
+			len: '%s must be exactly %s in length',
+			min: '%s cannot be less than %s in length',
+			max: '%s cannot be greater than %s in length',
+			range: '%s must be between %s and %s in length'
+		},
+		pattern: {
+			mismatch: '%s value %s does not match pattern %s'
+		},
+		clone: function clone() {
+			var cloned = JSON.parse(JSON.stringify(this));
+			cloned.clone = this.clone;
+			return cloned;
+		}
+	};
+}
+var messages = newMessages();
+
+/**
+ *  Encapsulates a validation schema.
+ *
+ *  @param descriptor An object declaring validation rules
+ *  for this schema.
+ */
+
+function Schema(descriptor) {
+	this.rules = null;
+	this._messages = messages;
+	this.define(descriptor);
+}
+
+Schema.prototype = {
+	messages: function messages(_messages) {
+		if (_messages) {
+			this._messages = deepMerge(newMessages(), _messages);
+		}
+
+		return this._messages;
+	},
+	define: function define(rules) {
+		if (!rules) {
+			throw new Error('Cannot configure a schema with no rules');
+		}
+
+		if (typeof rules !== 'object' || Array.isArray(rules)) {
+			throw new Error('Rules must be an object');
+		}
+
+		this.rules = {};
+		var z;
+		var item;
+
+		for (z in rules) {
+			if (rules.hasOwnProperty(z)) {
+				item = rules[z];
+				this.rules[z] = Array.isArray(item) ? item : [item];
+			}
+		}
+	},
+	validate: function validate(source_, o, oc) {
+		var _this = this;
+
+		if (o === void 0) {
+			o = {};
+		}
+
+		if (oc === void 0) {
+			oc = function oc() {};
+		}
+
+		var source = source_;
+		var options = o;
+		var callback = oc;
+
+		if (typeof options === 'function') {
+			callback = options;
+			options = {};
+		}
+
+		if (!this.rules || Object.keys(this.rules).length === 0) {
+			if (callback) {
+				callback();
+			}
+
+			return Promise.resolve();
+		}
+
+		function complete(results) {
+			var i;
+			var errors = [];
+			var fields = {};
+
+			function add(e) {
+				if (Array.isArray(e)) {
+					var _errors;
+
+					errors = (_errors = errors).concat.apply(_errors, e);
+				} else {
+					errors.push(e);
+				}
+			}
+
+			for (i = 0; i < results.length; i++) {
+				add(results[i]);
+			}
+
+			if (!errors.length) {
+				errors = null;
+				fields = null;
+			} else {
+				fields = convertFieldsError(errors);
+			}
+
+			callback(errors, fields);
+		}
+
+		if (options.messages) {
+			var messages$1 = this.messages();
+
+			if (messages$1 === messages) {
+				messages$1 = newMessages();
+			}
+
+			deepMerge(messages$1, options.messages);
+			options.messages = messages$1;
+		} else {
+			options.messages = this.messages();
+		}
+
+		var arr;
+		var value;
+		var series = {};
+		var keys = options.keys || Object.keys(this.rules);
+		keys.forEach(function(z) {
+			arr = _this.rules[z];
+			value = source[z];
+			arr.forEach(function(r) {
+				var rule = r;
+
+				if (typeof rule.transform === 'function') {
+					if (source === source_) {
+						source = _extends({}, source);
+					}
+
+					value = source[z] = rule.transform(value);
+				}
+
+				if (typeof rule === 'function') {
+					rule = {
+						validator: rule
+					};
+				} else {
+					rule = _extends({}, rule);
+				}
+
+				rule.validator = _this.getValidationMethod(rule);
+				rule.field = z;
+				rule.fullField = rule.fullField || z;
+				rule.type = _this.getType(rule);
+
+				if (!rule.validator) {
+					return;
+				}
+
+				series[z] = series[z] || [];
+				series[z].push({
+					rule: rule,
+					value: value,
+					source: source,
+					field: z
+				});
+			});
+		});
+		var errorFields = {};
+		return asyncMap(series, options, function(data, doIt) {
+			var rule = data.rule;
+			var deep = (rule.type === 'object' || rule.type === 'array') && (typeof rule.fields === 'object' || typeof rule.defaultField ===
+				'object');
+			deep = deep && (rule.required || !rule.required && data.value);
+			rule.field = data.field;
+
+			function addFullfield(key, schema) {
+				return _extends({}, schema, {
+					fullField: rule.fullField + "." + key
+				});
+			}
+
+			function cb(e) {
+				if (e === void 0) {
+					e = [];
+				}
+
+				var errors = e;
+
+				if (!Array.isArray(errors)) {
+					errors = [errors];
+				}
+
+				if (!options.suppressWarning && errors.length) {
+					Schema.warning('async-validator:', errors);
+				}
+
+				if (errors.length && rule.message) {
+					errors = [].concat(rule.message);
+				}
+
+				errors = errors.map(complementError(rule));
+
+				if (options.first && errors.length) {
+					errorFields[rule.field] = 1;
+					return doIt(errors);
+				}
+
+				if (!deep) {
+					doIt(errors);
+				} else {
+					// if rule is required but the target object
+					// does not exist fail at the rule level and don't
+					// go deeper
+					if (rule.required && !data.value) {
+						if (rule.message) {
+							errors = [].concat(rule.message).map(complementError(rule));
+						} else if (options.error) {
+							errors = [options.error(rule, format(options.messages.required, rule.field))];
+						} else {
+							errors = [];
+						}
+
+						return doIt(errors);
+					}
+
+					var fieldsSchema = {};
+
+					if (rule.defaultField) {
+						for (var k in data.value) {
+							if (data.value.hasOwnProperty(k)) {
+								fieldsSchema[k] = rule.defaultField;
+							}
+						}
+					}
+
+					fieldsSchema = _extends({}, fieldsSchema, {}, data.rule.fields);
+
+					for (var f in fieldsSchema) {
+						if (fieldsSchema.hasOwnProperty(f)) {
+							var fieldSchema = Array.isArray(fieldsSchema[f]) ? fieldsSchema[f] : [fieldsSchema[f]];
+							fieldsSchema[f] = fieldSchema.map(addFullfield.bind(null, f));
+						}
+					}
+
+					var schema = new Schema(fieldsSchema);
+					schema.messages(options.messages);
+
+					if (data.rule.options) {
+						data.rule.options.messages = options.messages;
+						data.rule.options.error = options.error;
+					}
+
+					schema.validate(data.value, data.rule.options || options, function(errs) {
+						var finalErrors = [];
+
+						if (errors && errors.length) {
+							finalErrors.push.apply(finalErrors, errors);
+						}
+
+						if (errs && errs.length) {
+							finalErrors.push.apply(finalErrors, errs);
+						}
+
+						doIt(finalErrors.length ? finalErrors : null);
+					});
+				}
+			}
+
+			var res;
+
+			if (rule.asyncValidator) {
+				res = rule.asyncValidator(rule, data.value, cb, data.source, options);
+			} else if (rule.validator) {
+				res = rule.validator(rule, data.value, cb, data.source, options);
+
+				if (res === true) {
+					cb();
+				} else if (res === false) {
+					cb(rule.message || rule.field + " fails");
+				} else if (res instanceof Array) {
+					cb(res);
+				} else if (res instanceof Error) {
+					cb(res.message);
+				}
+			}
+
+			if (res && res.then) {
+				res.then(function() {
+					return cb();
+				}, function(e) {
+					return cb(e);
+				});
+			}
+		}, function(results) {
+			complete(results);
+		});
+	},
+	getType: function getType(rule) {
+		if (rule.type === undefined && rule.pattern instanceof RegExp) {
+			rule.type = 'pattern';
+		}
+
+		if (typeof rule.validator !== 'function' && rule.type && !validators.hasOwnProperty(rule.type)) {
+			throw new Error(format('Unknown rule type %s', rule.type));
+		}
+
+		return rule.type || 'string';
+	},
+	getValidationMethod: function getValidationMethod(rule) {
+		if (typeof rule.validator === 'function') {
+			return rule.validator;
+		}
+
+		var keys = Object.keys(rule);
+		var messageIndex = keys.indexOf('message');
+
+		if (messageIndex !== -1) {
+			keys.splice(messageIndex, 1);
+		}
+
+		if (keys.length === 1 && keys[0] === 'required') {
+			return validators.required;
+		}
+
+		return validators[this.getType(rule)] || false;
+	}
+};
+
+Schema.register = function register(type, validator) {
+	if (typeof validator !== 'function') {
+		throw new Error('Cannot register a validator by type, validator is not a function');
+	}
+
+	validators[type] = validator;
+};
+
+Schema.warning = warning;
+Schema.messages = messages;
+
+export default Schema;
+//# sourceMappingURL=index.js.map

libs/util/emitter.js

@@ -0,0 +1,51 @@
+/**
+ * 递归使用 call 方式this指向
+ * @param componentName // 需要找的组件的名称
+ * @param eventName // 事件名称
+ * @param params // 需要传递的参数
+ */
+function broadcast(componentName, eventName, params) {
+    // 循环子节点找到名称一样的子节点 否则 递归 当前子节点
+    this.$children.map(child=>{
+        if (componentName===child.$options.name) {
+            child.$emit.apply(child,[eventName].concat(params))
+        }else {
+            broadcast.apply(child,[componentName,eventName].concat(params))
+        }
+    })
+}
+export default {
+    methods: {
+        /**
+         * 派发 (向上查找) (一个)
+         * @param componentName // 需要找的组件的名称
+         * @param eventName // 事件名称
+         * @param params // 需要传递的参数
+         */
+        dispatch(componentName, eventName, params) {
+            let parent = this.$parent || this.$root;//$parent 找到最近的父节点 $root 根节点
+            let name = parent.$options.name; // 获取当前组件实例的name
+            // 如果当前有节点 && 当前没名称 且 当前名称等于需要传进来的名称的时候就去查找当前的节点
+            // 循环出当前名称的一样的组件实例
+            while (parent && (!name||name!==componentName)) {
+                parent = parent.$parent;
+                if (parent) {
+                    name = parent.$options.name;
+                }
+            }
+            // 有节点表示当前找到了name一样的实例
+            if (parent) {
+                parent.$emit.apply(parent,[eventName].concat(params))
+            }
+        },
+        /**
+         * 广播 (向下查找) (广播多个)
+         * @param componentName // 需要找的组件的名称
+         * @param eventName // 事件名称
+         * @param params // 需要传递的参数
+         */
+        broadcast(componentName, eventName, params) {
+            broadcast.call(this,componentName, eventName, params)
+        }
+    }
+}

libs/util/province.js

@@ -0,0 +1 @@
+var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData;

main.js

@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import store from './store'
 import App from './App'
+import uView from "uview-ui";
+Vue.use(uView);
 /**
  *  所有测试用数据均存放于根目录json.js
  *  
  *  css部分使用了App.vue下的全局样式和iconfont图标，有需要图标库的可以留言。
  *  示例使用了uni.scss下的变量, 除变量外已尽量移除特有语法,可直接替换为其他预处理器使用
  */
-const msg = (title, duration=1500, mask=false, icon='none')=>{
+const msg = (title, duration = 1500, mask = false, icon = 'none') => {
 	//统一提示方便全局修改
-	if(Boolean(title) === false){
+	if (Boolean(title) === false) {
 		return;
 	}
 	uni.showToast({
@@ -20,7 +22,7 @@ const msg = (title, duration=1500, mask=false, icon='none')=>{
 	});
 }
 
-const prePage = ()=>{
+const prePage = () => {
 	// 获取当前页面
 	let pages = getCurrentPages();
 	let prePage = pages[pages.length - 2];
@@ -34,11 +36,14 @@ const prePage = ()=>{
 Vue.config.productionTip = false
 Vue.prototype.$fire = new Vue();
 Vue.prototype.$store = store;
-Vue.prototype.$api = {msg, prePage};
+Vue.prototype.$api = {
+	msg,
+	prePage
+};
 
 App.mpType = 'app'
 
 const app = new Vue({
-    ...App
+	...App
 })
-app.$mount()
+app.$mount()

package.json

@@ -0,0 +1,31 @@
+{
+    "name": "uView",
+    "version": "1.8.6",
+    "description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
+    "main": "index.js",
+    "keywords": [
+        "uview",
+        "ui",
+        "uni-app"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": ""
+    },
+    "devDependencies": {
+        "node-sass": "^4.14.0",
+        "sass-loader": "^8.0.2"
+    },
+    "author": "uView",
+    "license": "MIT",
+    "id": "uview-v1",
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [{
 			"path": "pages/index/index",
 			"style": {
@@ -7,6 +10,22 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/index/gglist",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "公告列表",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/ggDetail",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "公告詳情",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/transaction/transaction",
 			"style": {

pages/index/ggDetail.vue

@@ -0,0 +1,18 @@
+<template>
+	<view class="content"></view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	onLoad() {},
+	onShow() {},
+	onReachBottom() {},
+	onReady() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss"></style>

pages/index/gglist.vue

@@ -0,0 +1,38 @@
+<template>
+	<view class="content">
+		<view class="list" v-for="(item, index) in listInfo">
+			<view class="icon"><image src="../../static/img/gglist.png" mode=""></image></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { gglist } from '@/api/index.js';
+export default {
+	data() {
+		return {
+			listInfo
+		};
+	},
+	onLoad() {},
+	onShow() {
+		this.getgg();
+	},
+	methods: {
+		getgg() {
+			const obj = this;
+			gglist({ page: 1, limit: 1000 }).then(e => {
+				obj.listInfo = e.data;
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page,
+.content {
+	min-height: 100%;
+	height: auto;
+}
+</style>

pages/index/index.vue

@@ -6,18 +6,19 @@
 		</view>
 		<!-- 轮播图 start -->
 		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
-			<swiper-item v-for="item in clist" class="carousel-item" @click="bannerNavToUrl(item)">
-				<image :src="item" />
-			</swiper-item>
+			<swiper-item v-for="item in clist" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item" /></swiper-item>
 		</swiper>
 		<!-- 轮播图 end -->
+		<!-- 通告欄 start -->
+		<u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="navto()" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
+		<!-- 通告欄 end -->
 		<!-- 功能盒 start -->
 		<view class="gnh-wrap">
 			<view class="gnh-top flex">
-				<!-- <view class="top-item flex">
+				<view class="top-item flex">
 					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
 					<view class="">認購</view>
-				</view> -->
+				</view>
 				<view class="top-item flex" @click="navto('/pages/transaction/cblist')">
 					<image src="../../static/icon/gn-2.png" mode="" class=""></image>
 					<view class="">充幣</view>
@@ -30,53 +31,32 @@
 					<image src="../../static/icon/gn-4.png" mode="" class=""></image>
 					<view class="">語言</view>
 				</view> -->
-				<!-- <view class="top-item flex">
+				<view class="top-item flex">
 					<image src="../../static/icon/gn-5.png" mode="" class=""></image>
 					<view class="">客服</view>
-				</view> -->
+				</view>
 			</view>
 			<view class="gnh-btm flex">
 				<view class="btm-item">
-					<view class="btm-item-name">
-						BTC/USDT
-					</view>
+					<view class="btm-item-name">BTC/USDT</view>
 					<template v-if="listOBj['BTC-USDT']">
-						<view class="btm-item-val" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
-							{{listOBj['BTC-USDT'].last|| '--,--'}}
-						</view>
-						<view class="btm-item-bl" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
-							{{listOBj['BTC-USDT'].dcf || '--,--'}}%
-						</view>
+						<view class="btm-item-val" :style="{ color: listOBj['BTC-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['BTC-USDT'].last || '--,--' }}</view>
+						<view class="btm-item-bl" :style="{ color: listOBj['BTC-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['BTC-USDT'].dcf || '--,--' }}%</view>
 					</template>
-					
 				</view>
 				<view class="btm-item">
-					<view class="btm-item-name">
-						BCH/USDT
-					</view>
+					<view class="btm-item-name">BCH/USDT</view>
 					<template v-if="listOBj['BCH-USDT']">
-						<view class="btm-item-val" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}" >
-							{{listOBj['BCH-USDT'].last || '--,--'}}
-						</view>
-						<view class="btm-item-bl" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
-							{{listOBj['BCH-USDT'].dcf || '--,--'}}%
-						</view>
+						<view class="btm-item-val" :style="{ color: listOBj['BCH-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['BCH-USDT'].last || '--,--' }}</view>
+						<view class="btm-item-bl" :style="{ color: listOBj['BCH-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['BCH-USDT'].dcf || '--,--' }}%</view>
 					</template>
-					
 				</view>
 				<view class="btm-item">
-					<view class="btm-item-name">
-						ETH/USDT
-					</view>
+					<view class="btm-item-name">ETH/USDT</view>
 					<template v-if="listOBj['ETH-USDT']">
-						<view class="btm-item-val" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
-							{{listOBj['ETH-USDT'].last || '--,--'}}
-						</view>
-						<view class="btm-item-bl" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
-							{{listOBj['ETH-USDT'].dcf || '--,--'}}%
-						</view>
+						<view class="btm-item-val" :style="{ color: listOBj['ETH-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['ETH-USDT'].last || '--,--' }}</view>
+						<view class="btm-item-bl" :style="{ color: listOBj['ETH-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">{{ listOBj['ETH-USDT'].dcf || '--,--' }}%</view>
 					</template>
-					
 				</view>
 			</view>
 		</view>
@@ -88,10 +68,9 @@
 				<view class="title-center">最新價格</view>
 				<view class="title-right">24h漲跌</view>
 			</view>
-			<view class="list-main flex" v-for="(item,index ) in listOBj">
-				<view class="main-left">{{index}}</view>
-				<view class="main-center" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">
-					{{ item.last == 0 ? '--.--' : item.last }}</view>
+			<view class="list-main flex" v-for="(item, index) in listOBj">
+				<view class="main-left">{{ index }}</view>
+				<view class="main-center" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">{{ item.last == 0 ? '--.--' : item.last }}</view>
 				<view class="main-right">
 					<view class="btn" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">{{ item.dcf }}%</view>
 				</view>
@@ -101,299 +80,293 @@
 </template>
 
 <script>
-	import { tradelist} from '@/api/login.js'
-	import {
-		saveUrl,
-		interceptor,
-		
-	} from '@/utils/loginUtils.js';
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import {
-		scoketNew,
-		scoketOpen
-	} from '@/utils/socket.js';
-	import {
-		geLevertade
-	} from '@/api/index.js';
-	export default {
-		data() {
-			return {
-				clist: {},
-				scoket: '',
-				instId: 'IOTA-USDT', //请求的产品id
-				spList: [], //需要查询的列表
-				listOBj: {} //保存实际列表对象
-			};
-		},
-		computed: {
-			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-		},
-		onLoad: function(option) {
-
-
-		},
-		onShow: function() {
-			this.geLevertade()
-			this.tradelist()
-		},
-		onHide() {
-			this.closeScoket()
+import { tradelist } from '@/api/login.js';
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+import { mapState, mapMutations } from 'vuex';
+import { scoketNew, scoketOpen } from '@/utils/socket.js';
+import { geLevertade, gglist } from '@/api/index.js';
+export default {
+	data() {
+		return {
+			clist: {},
+			scoket: '',
+			instId: 'IOTA-USDT', //请求的产品id
+			spList: [], //需要查询的列表
+			list: [],
+			listInfo: [],
+			listOBj: {} //保存实际列表对象
+		};
+	},
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	onLoad: function(option) {},
+	onShow: function() {
+		this.geLevertade();
+		this.tradelist();
+		this.getgg();
+	},
+	onHide() {
+		this.closeScoket();
+	},
+	//下拉刷新
+	onPullDownRefresh() {},
+	methods: {
+		navto(url) {
+			console.log(url);
+			if (!this.hasLogin) {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			} else {
+				uni.navigateTo({
+					url
+				});
+			}
 		},
-		//下拉刷新
-		onPullDownRefresh() {
-
+		getgg() {
+			const obj = this;
+			gglist({ page: 1, limit: 1000 }).then(e => {
+				obj.listInfo = e.data;
+				e.data.forEach(e => {
+					obj.list.push(e.title);
+				});
+			});
 		},
-		methods: {
-			navto(url) {
-				console.log(url);
-				if (!this.hasLogin) {
-					// 保存地址
-					saveUrl();
-					// 登录拦截
-					interceptor();
-				} else {
-					uni.navigateTo({
-						url
-					});
-				}
-			},
-			swiperChange() {
-
-			},
-			// 开始请求长连接
-			onScoket() {
-				const that = this;
-				that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
-				that.scoket.scoketOpen().then((res) => {
-					const requestList = that.spList.map((e) => {
-						return {
-							"channel": "tickers",
-							"instId": e.coinname.toUpperCase() + "-USDT"
-						}
+		swiperChange() {},
+		// 开始请求长连接
+		onScoket() {
+			const that = this;
+			that.scoket = scoketNew('wss://wsaws.okx.com:8443/ws/v5/public');
+			that.scoket.scoketOpen().then(res => {
+				const requestList = that.spList.map(e => {
+					return {
+						channel: 'tickers',
+						instId: e.coinname.toUpperCase() + '-USDT'
+					};
+				});
+				that.scoket
+					.scoketSend({
+						op: 'subscribe',
+						args: requestList
 					})
-					that.scoket.scoketSend({
-						"op": "subscribe",
-						"args": requestList
-					}).then((res) => {
+					.then(res => {
 						console.log(res, '发送成功');
-					})
-					that.scoket.scoketMessage((res) => {
-						try {
-							if (res.data) {
-								// res.res.data[0].name = res.arg.instId
-								that.listOBj[res.arg.instId] = res.data[0];
-								that.listOBj[res.arg.instId].dcf = ((res.data[0].last*1 -  res.data[0].sodUtc0*1)/(res.data[0].sodUtc0*1) * 100 ).toFixed(2)
-								that.listOBj = Object.assign( {},that.listOBj);
-							}
-							console.log(that.listOBj, 'that.listOBj++++++')
-						} catch (e) {
-
-							console.log(res, res.data, '报错');
+					});
+				that.scoket.scoketMessage(res => {
+					try {
+						if (res.data) {
+							// res.res.data[0].name = res.arg.instId
+							that.listOBj[res.arg.instId] = res.data[0];
+							that.listOBj[res.arg.instId].dcf = (((res.data[0].last * 1 - res.data[0].sodUtc0 * 1) / (res.data[0].sodUtc0 * 1)) * 100).toFixed(2);
+							that.listOBj = Object.assign({}, that.listOBj);
 						}
-					})
-				})
-			},
-			closeScoket() {
-				this.scoket.scoketClose();
-			},
-			// 获取查询列表
-			geLevertade() {
-				const that = this;
-				geLevertade().then((e) => {
-					that.spList = e.list;
-					// 开启长连接
-					that.onScoket()
-
-				})
-			},
-			// 轮播图跳转
-			bannerNavToUrl(item) {
-				// #ifdef H5
-				console.log(item.wap_url.indexOf('http'), 'banner');
-				if (item.wap_url.indexOf('http') >= 0) {
-					window.location.href = item.wap_url;
-				}
-				// #endif
-				//测试数据没有写id，用title代替
-				uni.navigateTo({
-					url: item.wap_url
+						console.log(that.listOBj, 'that.listOBj++++++');
+					} catch (e) {
+						console.log(res, res.data, '报错');
+					}
 				});
-			},
-			tradelist() {
-				tradelist().then(res => {
-					console.log(res)
-					this.clist = res.data.clist
-					this.clist = Object.assign( {},this.clist);
-					console.log(this.clist,'this.clist')
-				})
+			});
+		},
+		closeScoket() {
+			this.scoket.scoketClose();
+		},
+		// 获取查询列表
+		geLevertade() {
+			const that = this;
+			geLevertade().then(e => {
+				that.spList = e.list;
+				// 开启长连接
+				that.onScoket();
+			});
+		},
+		// 轮播图跳转
+		bannerNavToUrl(item) {
+			// #ifdef H5
+			console.log(item.wap_url.indexOf('http'), 'banner');
+			if (item.wap_url.indexOf('http') >= 0) {
+				window.location.href = item.wap_url;
 			}
+			// #endif
+			//测试数据没有写id，用title代替
+			uni.navigateTo({
+				url: item.wap_url
+			});
+		},
+		tradelist() {
+			tradelist().then(res => {
+				console.log(res);
+				this.clist = res.data.clist;
+				this.clist = Object.assign({}, this.clist);
+				console.log(this.clist, 'this.clist');
+			});
 		}
-	};
+	}
+};
 </script>
 
 <style lang="scss">
-	// 顶部轮播图
-	.top-swiper {
-		margin: auto;
+// 顶部轮播图
+.top-swiper {
+	margin: auto;
+	width: 726rpx;
+	height: 273rpx;
+
+	.carousel-item {
+	}
+
+	// margin: 20rpx 0 0;
+	image {
+		// margin: auto;
 		width: 726rpx;
 		height: 273rpx;
+	}
+}
+
+.gnh-wrap {
+	margin: 20rpx 0;
+	width: 750rpx;
+	height: 315rpx;
+	background-color: #fff;
+	border-radius: 50rpx 50rpx 0 0;
+
+	.gnh-top {
+		justify-content: space-around;
+		height: 156rpx;
+
+		.top-item {
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			image {
+				width: 66rpx;
+				height: 75rpx;
+			}
 
-		.carousel-item {}
-
-		// margin: 20rpx 0 0;
-		image {
-			// margin: auto;
-			width: 726rpx;
-			height: 273rpx;
+			view {
+				font-weight: 500;
+				color: #525c6e;
+			}
 		}
 	}
 
-	.gnh-wrap {
-		margin: 20rpx 0;
-		width: 750rpx;
-		height: 315rpx;
-		background-color: #fff;
-		border-radius: 50rpx 50rpx 0 0;
+	.gnh-btm {
+		justify-content: space-around;
 
-		.gnh-top {
-			justify-content: space-around;
-			height: 156rpx;
+		.btm-item {
+			width: 33%;
+			text-align: center;
+			padding-top: 20rpx;
 
-			.top-item {
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
+			.btm-item-name {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #525c6e;
+			}
 
-				image {
-					width: 66rpx;
-					height: 75rpx;
-				}
+			.btm-item-val {
+				font-size: 26rpx;
+				font-weight: 500;
+				color: #dd3745;
+				padding: 20rpx 0;
+			}
 
-				view {
-					font-weight: 500;
-					color: #525C6E;
-				}
+			.btm-item-bl {
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #dd3745;
 			}
 		}
+	}
+}
+
+.list {
+	background: #ffffff;
+	border-top-left-radius: 26rpx;
+	border-top-right-radius: 26rpx;
+	padding: 40rpx 15rpx 0;
+
+	.list-title {
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #525c6e;
+		padding-bottom: 32rpx;
+
+		.title-left {
+			text-align: left;
+			width: 33%;
+		}
 
-		.gnh-btm {
-			justify-content: space-around;
-
-			.btm-item {
-				width: 33%;
-				text-align: center;
-				padding-top: 20rpx;
-
-				.btm-item-name {
-					font-size: 24rpx;
-					font-weight: 500;
-					color: #525C6E;
-				}
-
-				.btm-item-val {
-					font-size: 26rpx;
-					font-weight: 500;
-					color: #DD3745;
-					padding: 20rpx 0;
-				}
+		.title-center {
+			text-align: center;
+			width: 33%;
+		}
 
-				.btm-item-bl {
-					font-size: 24rpx;
-					font-weight: 500;
-					color: #DD3745;
-				}
-			}
+		.title-right {
+			text-align: right;
+			width: 33%;
 		}
 	}
 
-	.list {
-		background: #ffffff;
-		border-top-left-radius: 26rpx;
-		border-top-right-radius: 26rpx;
-		padding: 40rpx 15rpx 0;
+	.list-main {
+		padding: 12rpx 0;
 
-		.list-title {
+		.main-left {
+			text-align: left;
+			width: 33%;
 			font-size: 28rpx;
 			font-family: PingFang SC;
 			font-weight: 500;
 			color: #525c6e;
-			padding-bottom: 32rpx;
-
-			.title-left {
-				text-align: left;
-				width: 33%;
-			}
+		}
 
-			.title-center {
-				text-align: center;
-				width: 33%;
-			}
+		.main-center {
+			text-align: center;
+			width: 33%;
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #e15560;
 
-			.title-right {
-				text-align: right;
-				width: 33%;
+			&.down {
+				color: #5ec886;
 			}
-		}
 
-		.list-main {
-			padding: 12rpx 0;
-
-			.main-left {
-				text-align: left;
-				width: 33%;
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
+			&.ping {
 				color: #525c6e;
 			}
+		}
 
-			.main-center {
+		.main-right {
+			text-align: right;
+			width: 33%;
+			display: flex;
+			justify-content: flex-end;
+
+			.btn {
+				width: 122rpx;
+				height: 63rpx;
+				background: #e15562;
+				border-radius: 5rpx;
 				text-align: center;
-				width: 33%;
-				font-size: 28rpx;
+				line-height: 63rpx;
+				font-size: 24rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #e15560;
+				color: #ffffff;
 
 				&.down {
-					color: #5ec886;
+					background: #5ec886;
 				}
 
 				&.ping {
-					color: #525c6e;
-				}
-			}
-
-			.main-right {
-				text-align: right;
-				width: 33%;
-				display: flex;
-				justify-content: flex-end;
-
-				.btn {
-					width: 122rpx;
-					height: 63rpx;
-					background: #e15562;
-					border-radius: 5rpx;
-					text-align: center;
-					line-height: 63rpx;
-					font-size: 24rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #ffffff;
-
-					&.down {
-						background: #5ec886;
-					}
-
-					&.ping {
-						background: #f6f6f6;
-					}
+					background: #f6f6f6;
 				}
 			}
 		}
 	}
+}
 </style>

theme.scss

@@ -0,0 +1,38 @@
+// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
+// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
+// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
+
+$u-main-color: #303133;
+$u-content-color: #606266;
+$u-tips-color: #909399;
+$u-light-color: #c0c4cc;
+$u-border-color: #e4e7ed;
+$u-bg-color: #f3f4f6;
+
+$u-type-primary: #2979ff;
+$u-type-primary-light: #ecf5ff;
+$u-type-primary-disabled: #a0cfff;
+$u-type-primary-dark: #2b85e4;
+
+$u-type-warning: #ff9900;
+$u-type-warning-disabled: #fcbd71;
+$u-type-warning-dark: #f29100;
+$u-type-warning-light: #fdf6ec;
+
+$u-type-success: #19be6b;
+$u-type-success-disabled: #71d5a1;
+$u-type-success-dark: #18b566;
+$u-type-success-light: #dbf1e1;
+
+$u-type-error: #fa3534;
+$u-type-error-disabled: #fab6b6;
+$u-type-error-dark: #dd6161;
+$u-type-error-light: #fef0f0;
+
+$u-type-info: #909399;
+$u-type-info-disabled: #c8c9cc;
+$u-type-info-dark: #82848a;
+$u-type-info-light: #f4f4f5;
+
+$u-form-item-height: 70rpx;
+$u-form-item-border-color: #dcdfe6;

uni.scss

@@ -1,43 +1,44 @@
+@import 'uview-ui/theme.scss';
 /* 页面左右间距 */
 $page-row-spacing: 30rpx;
 //页面基础颜色
-$page-color-base: #f8f8f8;//页面背景颜色
+$page-color-base: #f8f8f8; //页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #5dbc7c;//项目颜色
-$box-shadow-color:#5dbc7c;//阴影颜色
-$font-color:#5dbc7c;//字体颜色
-$font-color-spec: #5dbc7c;//可操作文字颜色
-$background-color:#5dbc7c;//按钮背景颜色
+$base-color: #5dbc7c; //项目颜色
+$box-shadow-color: #5dbc7c; //阴影颜色
+$font-color: #5dbc7c; //字体颜色
+$font-color-spec: #5dbc7c; //可操作文字颜色
+$background-color: #5dbc7c; //按钮背景颜色
 // 小图标大小
-$uni-img-size-base:36rpx;
+$uni-img-size-base: 36rpx;
 /* 文字尺寸 */
 $font-sm: 24rpx;
 $font-base: 28rpx;
 $font-lg: 32rpx;
 /*文字颜色*/
-$font-color-dark: #303133;//黑
-$font-color-base: #606266;//基础
-$font-color-white:#ffffff;//白色
-$font-color-light: #909399;//灰色
-$font-color-disabled: #c0c4cc;//禁用
+$font-color-dark: #303133; //黑
+$font-color-base: #606266; //基础
+$font-color-white: #ffffff; //白色
+$font-color-light: #909399; //灰色
+$font-color-disabled: #c0c4cc; //禁用
 /* 边框颜色 */
-$border-color-dark: #dcdfe6;//黑
-$border-color-base: #e4e7ed;//基础灰
-$border-color-light: #ebeef5;//亮灰
+$border-color-dark: #dcdfe6; //黑
+$border-color-base: #e4e7ed; //基础灰
+$border-color-light: #ebeef5; //亮灰
 // uni自带边框颜色
-$uni-border-color:#ebeef5;
+$uni-border-color: #ebeef5;
 /*颜色*/
 $color-yellow: #fd5b23;
 $color-gray: #999999;
-$color-green: #5DC887;
+$color-green: #5dc887;
 $color-red: #dd524d;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */
 $uni-color-primary: #5dbc7c;
 $uni-color-success: #4cd964;
-$uni-color-warning: #F4D03C;
+$uni-color-warning: #f4d03c;
 $uni-color-error: #dd524d;
 // 提交框阴影
 $box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
@@ -65,4 +66,4 @@ $bg-green-gradual: linear-gradient(#5dbc7c, #71d094);
 	background-image: $bg-green-gradual;
 	margin-right: 10rpx;
 	border-radius: 10rpx;
-}
+}

uview-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 www.uviewui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

uview-ui/README.md

@@ -0,0 +1,106 @@
+<p align="center">
+    <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
+<h3 align="center">多平台快速开发的UI框架</h3>
+
+
+## 说明
+
+uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
+
+## 特性
+
+- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
+- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
+
+
+## 安装
+
+```bash
+# npm方式安装
+npm i uview-ui
+```
+
+## 快速上手
+
+1. `main.js`引入uView库
+```js
+// main.js
+import uView from 'uview-ui';
+Vue.use(uView);
+```
+
+2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
+```css
+/* App.vue */
+<style lang="scss">
+@import "uview-ui/index.scss";
+</style>
+```
+
+3. `uni.scss`引入全局scss变量文件
+```css
+/* uni.scss */
+@import "uview-ui/theme.scss";
+```
+
+4. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+	"easycom": {
+		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
+		// npm安装方式
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		// 下载安装方式
+		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
+	// 此为本身已有的内容
+	"pages": [
+		// ......
+	]
+}
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 使用方法
+配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
+
+```html
+<template>
+	<u-button>按钮</u-button>
+</template>
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 链接
+
+- [官方文档](https://uviewui.com/)
+- [更新日志](https://uviewui.com/components/changelog.html)
+- [升级指南](https://uviewui.com/components/changelog.html)
+- [关于我们](https://uviewui.com/cooperation/about.html)
+
+## 预览
+
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
+<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
+
+<!-- ## 捐赠uView的研发
+
+uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
+
+<img src="https://uviewui.com/common/wechat.png" width="220" >
+<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
+ -->
+## 版权信息
+uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

uview-ui/components/u-action-sheet/u-action-sheet.vue

@@ -0,0 +1,190 @@
+<template>
+	<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
+	    length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
+		<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+			{{tips.text}}
+		</view>
+		<block v-for="(item, index) in list" :key="index">
+			<view 
+				@touchmove.stop.prevent 
+				@tap="itemClick(index)" 
+				:style="[itemStyle(index)]" 
+				class="u-action-sheet-item u-line-1" 
+				:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+				:hover-stay-time="150"
+			>
+				<text>{{item.text}}</text>
+				<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
+			</view>
+		</block>
+		<view class="u-gab" v-if="cancelBtn">
+		</view>
+		<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
+		    :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
+	</u-popup>
+</template>
+
+<script>
+	/**
+	 * actionSheet 操作菜单
+	 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+	 * @tutorial https://www.uviewui.com/components/actionSheet.html
+	 * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
+	 * @property {Object} tips 顶部的提示文字，见官方文档示例
+	 * @property {String} cancel-text 取消按钮的提示文字
+	 * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
+	 * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
+	 * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+	 * @property {Number String} z-index z-index值（默认1075）
+	 * @property {String} cancel-text 取消按钮的提示文字
+	 * @event {Function} click 点击ActionSheet列表项时触发
+	 * @event {Function} close 点击取消按钮时触发
+	 * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+	 */
+	export default {
+		name: "u-action-sheet",
+		props: {
+			// 点击遮罩是否可以关闭actionsheet
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
+			list: {
+				type: Array,
+				default () {
+					// 如下
+					// return [{
+					// 	text: '确定',
+					// 	color: '',
+					// 	fontSize: ''
+					// }]
+					return [];
+				}
+			},
+			// 顶部的提示文字
+			tips: {
+				type: Object,
+				default () {
+					return {
+						text: '',
+						color: '',
+						fontSize: '26'
+					}
+				}
+			},
+			// 底部的取消按钮
+			cancelBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 通过双向绑定控制组件的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 弹出的顶部圆角值
+			borderRadius: {
+				type: [String, Number],
+				default: 0
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 取消按钮的文字提示
+			cancelText: {
+				type: String,
+				default: '取消'
+			}
+		},
+		computed: {
+			// 顶部提示的样式
+			tipsStyle() {
+				let style = {};
+				if (this.tips.color) style.color = this.tips.color;
+				if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
+				return style;
+			},
+			// 操作项目的样式
+			itemStyle() {
+				return (index) => {
+					let style = {};
+					if (this.list[index].color) style.color = this.list[index].color;
+					if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
+					// 选项被禁用的样式
+					if (this.list[index].disabled) style.color = '#c0c4cc';
+					return style;
+				}
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		methods: {
+			// 点击取消按钮
+			close() {
+				// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+				// 这是一个vue发送事件的特殊用法
+				this.popupClose();
+				this.$emit('close');
+			},
+			// 弹窗关闭
+			popupClose() {
+				this.$emit('input', false);
+			},
+			// 点击某一个item
+			itemClick(index) {
+				// disabled的项禁止点击
+				if(this.list[index].disabled) return;
+				this.$emit('click', index);
+				this.$emit('input', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-tips {
+		font-size: 26rpx;
+		text-align: center;
+		padding: 34rpx 0;
+		line-height: 1;
+		color: $u-tips-color;
+	}
+
+	.u-action-sheet-item {
+		@include vue-flex;;
+		line-height: 1;
+		justify-content: center;
+		align-items: center;
+		font-size: 32rpx;
+		padding: 34rpx 0;
+		flex-direction: column;
+	}
+	
+	.u-action-sheet-item__subtext {
+		font-size: 24rpx;
+		color: $u-tips-color;
+		margin-top: 20rpx;
+	}
+
+	.u-gab {
+		height: 12rpx;
+		background-color: rgb(234, 234, 236);
+	}
+
+	.u-actionsheet-cancel {
+		color: $u-main-color;
+	}
+</style>

uview-ui/components/u-alert-tips/u-alert-tips.vue

@@ -0,0 +1,256 @@
+<template>
+	<view class="u-alert-tips" v-if="show" :class="[
+		!show ? 'u-close-alert-tips': '',
+		type ? 'u-alert-tips--bg--' + type + '-light' : '',
+		type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+	]" :style="{
+		backgroundColor: bgColor,
+		borderColor: borderColor
+	}">
+		<view class="u-icon-wrap">
+			<u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+		</view>
+		<view class="u-alert-content" @tap.stop="click">
+			<view class="u-alert-title" :style="[uTitleStyle]">
+				{{title}}
+			</view>
+			<view v-if="description" class="u-alert-desc" :style="[descStyle]">
+				{{description}}
+			</view>
+		</view>
+		<view class="u-icon-wrap">
+			<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
+			 :size="22" class="u-close-icon" :style="{
+				top: description ? '18rpx' : '24rpx'
+			}"></u-icon>
+		</view>
+		<text v-if="closeAble && closeText" class="u-close-text" :style="{
+			top: description ? '18rpx' : '24rpx'
+		}">{{closeText}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * alertTips 警告提示
+	 * @description 警告提示，展现需要关注的信息
+	 * @tutorial https://uviewui.com/components/alertTips.html
+	 * @property {String} title 显示的标题文字
+	 * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
+	 * @property {String} type 关闭按钮(默认为叉号icon图标)
+	 * @property {String} icon 图标名称
+	 * @property {Object} icon-style 图标的样式，对象形式
+	 * @property {Object} title-style 标题的样式，对象形式
+	 * @property {Object} desc-style 描述的样式，对象形式
+	 * @property {String} close-able 用文字替代关闭图标，close-able为true时有效
+	 * @property {Boolean} show-icon 是否显示左边的辅助图标
+	 * @property {Boolean} show 显示或隐藏组件
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 */
+	export default {
+		name: 'u-alert-tips',
+		props: {
+			// 显示文字
+			title: {
+				type: String,
+				default: ''
+			},
+			// 主题，success/warning/info/error
+			type: {
+				type: String,
+				default: 'warning'
+			},
+			// 辅助性文字
+			description: {
+				type: String,
+				default: ''
+			},
+			// 是否可关闭
+			closeAble: {
+				type: Boolean,
+				default: false
+			},
+			// 关闭按钮自定义文本
+			closeText: {
+				type: String,
+				default: ''
+			},
+			// 是否显示图标
+			showIcon: {
+				type: Boolean,
+				default: false
+			},
+			// 文字颜色，如果定义了color值，icon会失效
+			color: {
+				type: String,
+				default: ''
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: ''
+			},
+			// 是否显示
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 左边显示的icon
+			icon: {
+				type: String,
+				default: ''
+			},
+			// icon的样式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 标题的样式
+			titleStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 描述文字的样式
+			descStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		computed: {
+			uTitleStyle() {
+				let style = {};
+				// 如果有描述文字的话，标题进行加粗
+				style.fontWeight = this.description ? 500 : 'normal';
+				// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
+				return this.$u.deepMerge(style, this.titleStyle);
+			},
+			uIcon() {
+				// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
+				return this.icon ? this.icon : this.$u.type2icon(this.type);
+			},
+			uIconType() {
+				// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
+				return Object.keys(this.iconStyle).length ? '' : this.type;
+			}
+		},
+		methods: {
+			// 点击内容
+			click() {
+				this.$emit('click');
+			},
+			// 点击关闭按钮
+			close() {
+				this.$emit('close');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-alert-tips {
+		@include vue-flex;
+		align-items: center;
+		padding: 16rpx 30rpx;
+		border-radius: 8rpx;
+		position: relative;
+		transition: all 0.3s linear;
+		border: 1px solid #fff;
+		
+		&--bg--primary-light {
+			background-color: $u-type-primary-light;
+		}
+		
+		&--bg--info-light {
+			background-color: $u-type-info-light;
+		}
+		
+		&--bg--success-light {
+			background-color: $u-type-success-light;
+		}
+		
+		&--bg--warning-light {
+			background-color: $u-type-warning-light;
+		}
+		
+		&--bg--error-light {
+			background-color: $u-type-error-light;
+		}
+		
+		&--border--primary-disabled {
+			border-color: $u-type-primary-disabled;
+		}
+		
+		&--border--success-disabled {
+			border-color: $u-type-success-disabled;
+		}
+		
+		&--border--error-disabled {
+			border-color: $u-type-error-disabled;
+		}
+		
+		&--border--warning-disabled {
+			border-color: $u-type-warning-disabled;
+		}
+		
+		&--border--info-disabled {
+			border-color: $u-type-info-disabled;
+		}
+	}
+
+	.u-close-alert-tips {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.u-icon {
+		margin-right: 16rpx;
+	}
+
+	.u-alert-title {
+		font-size: 28rpx;
+		color: $u-main-color;
+	}
+
+	.u-alert-desc {
+		font-size: 26rpx;
+		text-align: left;
+		color: $u-content-color;
+	}
+
+	.u-close-icon {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+	}
+
+	.u-close-hover {
+		color: red;
+	}
+	
+	.u-close-text {
+		font-size: 24rpx;
+		color: $u-tips-color;
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		line-height: 1;
+	}
+</style>

uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -0,0 +1,290 @@
+<template>
+	<view class="content">
+		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				@touchstart="touchStart"
+				@touchmove="touchMove"
+				@touchend="touchEnd"
+				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
+				canvas-id="cropper"
+				id="cropper"
+			></canvas>
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				:style="{
+					position: 'fixed',
+					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
+					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
+				}"
+				canvas-id="targetId"
+				id="targetId"
+			></canvas>
+		</view>
+		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
+			<!-- #ifdef H5 -->
+			<view class="upload" @tap="uploadTap">选择图片</view>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<view class="upload" @tap="uploadTap">重新选择</view>
+			<!-- #endif -->
+			<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import WeCropper from './weCropper.js';
+export default {
+	props: {
+		// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
+		// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
+		boundStyle: {
+			type: Object,
+			default() {
+				return {
+					lineWidth: 4,
+					borderColor: 'rgb(245, 245, 245)',
+					mask: 'rgba(0, 0, 0, 0.35)'
+				};
+			}
+		}
+		// // 裁剪框宽度，单位rpx
+		// rectWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 裁剪框高度，单位rpx
+		// rectHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片宽度，单位rpx
+		// destWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片高度，单位rpx
+		// destHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
+		// fileType: {
+		// 	type: String,
+		// 	default: 'jpg',
+		// },
+		// // 生成的图片质量
+		// // H5上无效，目前不考虑使用此参数
+		// quality: {
+		// 	type: [Number, String],
+		// 	default: 1
+		// }
+	},
+	data() {
+		return {
+			// 底部导航的高度
+			bottomNavHeight: 50,
+			originWidth: 200,
+			width: 0,
+			height: 0,
+			cropperOpt: {
+				id: 'cropper',
+				targetId: 'targetCropper',
+				pixelRatio: 1,
+				width: 0,
+				height: 0,
+				scale: 2.5,
+				zoom: 8,
+				cut: {
+					x: (this.width - this.originWidth) / 2,
+					y: (this.height - this.originWidth) / 2,
+					width: this.originWidth,
+					height: this.originWidth
+				},
+				boundStyle: {
+					lineWidth: uni.upx2px(this.boundStyle.lineWidth),
+					mask: this.boundStyle.mask,
+					color: this.boundStyle.borderColor
+				}
+			},
+			// 裁剪框和输出图片的尺寸，高度默认等于宽度
+			// 输出图片宽度，单位px
+			destWidth: 200,
+			// 裁剪框宽度，单位px
+			rectWidth: 200,
+			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+			fileType: 'jpg',
+			src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
+		};
+	},
+	onLoad(option) {
+		let rectInfo = uni.getSystemInfoSync();
+		this.width = rectInfo.windowWidth;
+		this.height = rectInfo.windowHeight - this.bottomNavHeight;
+		this.cropperOpt.width = this.width;
+		this.cropperOpt.height = this.height;
+		this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
+
+		if (option.destWidth) this.destWidth = option.destWidth;
+		if (option.rectWidth) {
+			let rectWidth = Number(option.rectWidth);
+			this.cropperOpt.cut = {
+				x: (this.width - rectWidth) / 2,
+				y: (this.height - rectWidth) / 2,
+				width: rectWidth,
+				height: rectWidth
+			};
+		}
+		this.rectWidth = option.rectWidth;
+		if (option.fileType) this.fileType = option.fileType;
+		// 初始化
+		this.cropper = new WeCropper(this.cropperOpt)
+			.on('ready', ctx => {
+				// wecropper is ready for work!
+			})
+			.on('beforeImageLoad', ctx => {
+				// before picture loaded, i can do something
+			})
+			.on('imageLoad', ctx => {
+				// picture loaded
+			})
+			.on('beforeDraw', (ctx, instance) => {
+				// before canvas draw,i can do something
+			});
+		// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
+		uni.setNavigationBarColor({
+			frontColor: '#ffffff',
+			backgroundColor: '#000000'
+		});
+		uni.chooseImage({
+			count: 1, // 默认9
+			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+			success: res => {
+				this.src = res.tempFilePaths[0];
+				//  获取裁剪图片资源后，给data添加src属性及其值
+				this.cropper.pushOrign(this.src);
+			}
+		});
+	},
+	methods: {
+		touchStart(e) {
+			this.cropper.touchStart(e);
+		},
+		touchMove(e) {
+			this.cropper.touchMove(e);
+		},
+		touchEnd(e) {
+			this.cropper.touchEnd(e);
+		},
+		getCropperImage(isPre = false) {
+			if(!this.src) return this.$u.toast('请先选择图片再裁剪');
+
+			let cropper_opt = {
+				destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
+				destWidth: Number(this.destWidth),
+				fileType: this.fileType
+			};
+			this.cropper.getCropperImage(cropper_opt, (path, err) => {
+				if (err) {
+					uni.showModal({
+						title: '温馨提示',
+						content: err.message
+					});
+				} else {
+					if (isPre) {
+						uni.previewImage({
+							current: '', // 当前显示图片的 http 链接
+							urls: [path] // 需要预览的图片 http 链接列表
+						});
+					} else {
+						uni.$emit('uAvatarCropper', path);
+						this.$u.route({
+							type: 'back'
+						});
+					}
+				}
+			});
+		},
+		uploadTap() {
+			const self = this;
+			uni.chooseImage({
+				count: 1, // 默认9
+				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+				success: (res) => {
+					self.src = res.tempFilePaths[0];
+					//  获取裁剪图片资源后，给data添加src属性及其值
+
+					self.cropper.pushOrign(this.src);
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.content {
+	background: rgba(255, 255, 255, 1);
+}
+
+.cropper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 11;
+}
+
+.cropper-buttons {
+	background-color: #000000;
+	color: #eee;
+}
+
+.cropper-wrapper {
+	position: relative;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	background-color: #000;
+}
+
+.cropper-buttons {
+	width: 100vw;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	font-size: 28rpx;
+}
+
+.cropper-buttons .upload,
+.cropper-buttons .getCropperImage {
+	width: 50%;
+	text-align: center;
+}
+
+.cropper-buttons .upload {
+	text-align: left;
+	padding-left: 50rpx;
+}
+
+.cropper-buttons .getCropperImage {
+	text-align: right;
+	padding-right: 50rpx;
+}
+</style>

uview-ui/components/u-avatar-cropper/weCropper.js

@@ -0,0 +1,1265 @@
+/**
+ * we-cropper v1.3.9
+ * (c) 2020 dlhandsome
+ * @license MIT
+ */
+(function(global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+		typeof define === 'function' && define.amd ? define(factory) :
+		(global.WeCropper = factory());
+}(this, (function() {
+	'use strict';
+
+	var device = void 0;
+	var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
+
+	function firstLetterUpper(str) {
+		return str.charAt(0).toUpperCase() + str.slice(1)
+	}
+
+	function setTouchState(instance) {
+		var arg = [],
+			len = arguments.length - 1;
+		while (len-- > 0) arg[len] = arguments[len + 1];
+
+		TOUCH_STATE.forEach(function(key, i) {
+			if (arg[i] !== undefined) {
+				instance[key] = arg[i];
+			}
+		});
+	}
+
+	function validator(instance, o) {
+		Object.defineProperties(instance, o);
+	}
+
+	function getDevice() {
+		if (!device) {
+			device = uni.getSystemInfoSync();
+		}
+		return device
+	}
+
+	var tmp = {};
+
+	var ref = getDevice();
+	var pixelRatio = ref.pixelRatio;
+
+	var DEFAULT = {
+		id: {
+			default: 'cropper',
+			get: function get() {
+				return tmp.id
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'string') {
+					console.error(("id：" + value + " is invalid"));
+				}
+				tmp.id = value;
+			}
+		},
+		width: {
+			default: 750,
+			get: function get() {
+				return tmp.width
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("width：" + value + " is invalid"));
+				}
+				tmp.width = value;
+			}
+		},
+		height: {
+			default: 750,
+			get: function get() {
+				return tmp.height
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("height：" + value + " is invalid"));
+				}
+				tmp.height = value;
+			}
+		},
+		pixelRatio: {
+			default: pixelRatio,
+			get: function get() {
+				return tmp.pixelRatio
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("pixelRatio：" + value + " is invalid"));
+				}
+				tmp.pixelRatio = value;
+			}
+		},
+		scale: {
+			default: 2.5,
+			get: function get() {
+				return tmp.scale
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("scale：" + value + " is invalid"));
+				}
+				tmp.scale = value;
+			}
+		},
+		zoom: {
+			default: 5,
+			get: function get() {
+				return tmp.zoom
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("zoom：" + value + " is invalid"));
+				} else if (value < 0 || value > 10) {
+					console.error("zoom should be ranged in 0 ~ 10");
+				}
+				tmp.zoom = value;
+			}
+		},
+		src: {
+			default: '',
+			get: function get() {
+				return tmp.src
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'string') {
+					console.error(("src：" + value + " is invalid"));
+				}
+				tmp.src = value;
+			}
+		},
+		cut: {
+			default: {},
+			get: function get() {
+				return tmp.cut
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'object') {
+					console.error(("cut：" + value + " is invalid"));
+				}
+				tmp.cut = value;
+			}
+		},
+		boundStyle: {
+			default: {},
+			get: function get() {
+				return tmp.boundStyle
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'object') {
+					console.error(("boundStyle：" + value + " is invalid"));
+				}
+				tmp.boundStyle = value;
+			}
+		},
+		onReady: {
+			default: null,
+			get: function get() {
+				return tmp.ready
+			},
+			set: function set(value) {
+				tmp.ready = value;
+			}
+		},
+		onBeforeImageLoad: {
+			default: null,
+			get: function get() {
+				return tmp.beforeImageLoad
+			},
+			set: function set(value) {
+				tmp.beforeImageLoad = value;
+			}
+		},
+		onImageLoad: {
+			default: null,
+			get: function get() {
+				return tmp.imageLoad
+			},
+			set: function set(value) {
+				tmp.imageLoad = value;
+			}
+		},
+		onBeforeDraw: {
+			default: null,
+			get: function get() {
+				return tmp.beforeDraw
+			},
+			set: function set(value) {
+				tmp.beforeDraw = value;
+			}
+		}
+	};
+
+	var ref$1 = getDevice();
+	var windowWidth = ref$1.windowWidth;
+
+	function prepare() {
+		var self = this;
+
+		// v1.4.0 版本中将不再自动绑定we-cropper实例
+		self.attachPage = function() {
+			var pages = getCurrentPages();
+			// 获取到当前page上下文
+			var pageContext = pages[pages.length - 1];
+			// 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
+			Object.defineProperty(pageContext, 'wecropper', {
+				get: function get() {
+					console.warn(
+						'Instance will not be automatically bound to the page after v1.4.0\n\n' +
+						'Please use a custom instance name instead\n\n' +
+						'Example: \n' +
+						'this.mycropper = new WeCropper(options)\n\n' +
+						'// ...\n' +
+						'this.mycropper.getCropperImage()'
+					);
+					return self
+				},
+				configurable: true
+			});
+		};
+
+		self.createCtx = function() {
+			var id = self.id;
+			var targetId = self.targetId;
+
+			if (id) {
+				self.ctx = self.ctx || uni.createCanvasContext(id);
+				self.targetCtx = self.targetCtx || uni.createCanvasContext(targetId);
+			} else {
+				console.error("constructor: create canvas context failed, 'id' must be valuable");
+			}
+		};
+
+		self.deviceRadio = windowWidth / 750;
+	}
+
+	var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !==
+		'undefined' ? self : {};
+
+
+
+
+
+	function createCommonjsModule(fn, module) {
+		return module = {
+			exports: {}
+		}, fn(module, module.exports), module.exports;
+	}
+
+	var tools = createCommonjsModule(function(module, exports) {
+		/**
+		 * String type check
+		 */
+		exports.isStr = function(v) {
+			return typeof v === 'string';
+		};
+		/**
+		 * Number type check
+		 */
+		exports.isNum = function(v) {
+			return typeof v === 'number';
+		};
+		/**
+		 * Array type check
+		 */
+		exports.isArr = Array.isArray;
+		/**
+		 * undefined type check
+		 */
+		exports.isUndef = function(v) {
+			return v === undefined;
+		};
+
+		exports.isTrue = function(v) {
+			return v === true;
+		};
+
+		exports.isFalse = function(v) {
+			return v === false;
+		};
+		/**
+		 * Function type check
+		 */
+		exports.isFunc = function(v) {
+			return typeof v === 'function';
+		};
+		/**
+		 * Quick object check - this is primarily used to tell
+		 * Objects from primitive values when we know the value
+		 * is a JSON-compliant type.
+		 */
+		exports.isObj = exports.isObject = function(obj) {
+			return obj !== null && typeof obj === 'object'
+		};
+
+		/**
+		 * Strict object type check. Only returns true
+		 * for plain JavaScript objects.
+		 */
+		var _toString = Object.prototype.toString;
+		exports.isPlainObject = function(obj) {
+			return _toString.call(obj) === '[object Object]'
+		};
+
+		/**
+		 * Check whether the object has the property.
+		 */
+		var hasOwnProperty = Object.prototype.hasOwnProperty;
+		exports.hasOwn = function(obj, key) {
+			return hasOwnProperty.call(obj, key)
+		};
+
+		/**
+		 * Perform no operation.
+		 * Stubbing args to make Flow happy without leaving useless transpiled code
+		 * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/)
+		 */
+		exports.noop = function(a, b, c) {};
+
+		/**
+		 * Check if val is a valid array index.
+		 */
+		exports.isValidArrayIndex = function(val) {
+			var n = parseFloat(String(val));
+			return n >= 0 && Math.floor(n) === n && isFinite(val)
+		};
+	});
+
+	var tools_7 = tools.isFunc;
+	var tools_10 = tools.isPlainObject;
+
+	var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
+
+	function observer() {
+		var self = this;
+
+		self.on = function(event, fn) {
+			if (EVENT_TYPE.indexOf(event) > -1) {
+				if (tools_7(fn)) {
+					event === 'ready' ?
+						fn(self) :
+						self[("on" + (firstLetterUpper(event)))] = fn;
+				}
+			} else {
+				console.error(("event: " + event + " is invalid"));
+			}
+			return self
+		};
+	}
+
+	function wxPromise(fn) {
+		return function(obj) {
+			var args = [],
+				len = arguments.length - 1;
+			while (len-- > 0) args[len] = arguments[len + 1];
+
+			if (obj === void 0) obj = {};
+			return new Promise(function(resolve, reject) {
+				obj.success = function(res) {
+					resolve(res);
+				};
+				obj.fail = function(err) {
+					reject(err);
+				};
+				fn.apply(void 0, [obj].concat(args));
+			})
+		}
+	}
+
+	function draw(ctx, reserve) {
+		if (reserve === void 0) reserve = false;
+
+		return new Promise(function(resolve) {
+			ctx.draw(reserve, resolve);
+		})
+	}
+
+	var getImageInfo = wxPromise(uni.getImageInfo);
+
+	var canvasToTempFilePath = wxPromise(uni.canvasToTempFilePath);
+
+	var base64 = createCommonjsModule(function(module, exports) {
+		/*! http://mths.be/base64 v0.1.0 by @mathias | MIT license */
+		(function(root) {
+
+			// Detect free variables `exports`.
+			var freeExports = 'object' == 'object' && exports;
+
+			// Detect free variable `module`.
+			var freeModule = 'object' == 'object' && module &&
+				module.exports == freeExports && module;
+
+			// Detect free variable `global`, from Node.js or Browserified code, and use
+			// it as `root`.
+			var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal;
+			if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
+				root = freeGlobal;
+			}
+
+			/*--------------------------------------------------------------------------*/
+
+			var InvalidCharacterError = function(message) {
+				this.message = message;
+			};
+			InvalidCharacterError.prototype = new Error;
+			InvalidCharacterError.prototype.name = 'InvalidCharacterError';
+
+			var error = function(message) {
+				// Note: the error messages used throughout this file match those used by
+				// the native `atob`/`btoa` implementation in Chromium.
+				throw new InvalidCharacterError(message);
+			};
+
+			var TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+			// http://whatwg.org/html/common-microsyntaxes.html#space-character
+			var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g;
+
+			// `decode` is designed to be fully compatible with `atob` as described in the
+			// HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob
+			// The optimized base64-decoding algorithm used is based on @atk’s excellent
+			// implementation. https://gist.github.com/atk/1020396
+			var decode = function(input) {
+				input = String(input)
+					.replace(REGEX_SPACE_CHARACTERS, '');
+				var length = input.length;
+				if (length % 4 == 0) {
+					input = input.replace(/==?$/, '');
+					length = input.length;
+				}
+				if (
+					length % 4 == 1 ||
+					// http://whatwg.org/C#alphanumeric-ascii-characters
+					/[^+a-zA-Z0-9/]/.test(input)
+				) {
+					error(
+						'Invalid character: the string to be decoded is not correctly encoded.'
+					);
+				}
+				var bitCounter = 0;
+				var bitStorage;
+				var buffer;
+				var output = '';
+				var position = -1;
+				while (++position < length) {
+					buffer = TABLE.indexOf(input.charAt(position));
+					bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer;
+					// Unless this is the first of a group of 4 characters…
+					if (bitCounter++ % 4) {
+						// …convert the first 8 bits to a single ASCII character.
+						output += String.fromCharCode(
+							0xFF & bitStorage >> (-2 * bitCounter & 6)
+						);
+					}
+				}
+				return output;
+			};
+
+			// `encode` is designed to be fully compatible with `btoa` as described in the
+			// HTML Standard: http://whatwg.org/html/webappapis.html#dom-windowbase64-btoa
+			var encode = function(input) {
+				input = String(input);
+				if (/[^\0-\xFF]/.test(input)) {
+					// Note: no need to special-case astral symbols here, as surrogates are
+					// matched, and the input is supposed to only contain ASCII anyway.
+					error(
+						'The string to be encoded contains characters outside of the ' +
+						'Latin1 range.'
+					);
+				}
+				var padding = input.length % 3;
+				var output = '';
+				var position = -1;
+				var a;
+				var b;
+				var c;
+				var buffer;
+				// Make sure any padding is handled outside of the loop.
+				var length = input.length - padding;
+
+				while (++position < length) {
+					// Read three bytes, i.e. 24 bits.
+					a = input.charCodeAt(position) << 16;
+					b = input.charCodeAt(++position) << 8;
+					c = input.charCodeAt(++position);
+					buffer = a + b + c;
+					// Turn the 24 bits into four chunks of 6 bits each, and append the
+					// matching character for each of them to the output.
+					output += (
+						TABLE.charAt(buffer >> 18 & 0x3F) +
+						TABLE.charAt(buffer >> 12 & 0x3F) +
+						TABLE.charAt(buffer >> 6 & 0x3F) +
+						TABLE.charAt(buffer & 0x3F)
+					);
+				}
+
+				if (padding == 2) {
+					a = input.charCodeAt(position) << 8;
+					b = input.charCodeAt(++position);
+					buffer = a + b;
+					output += (
+						TABLE.charAt(buffer >> 10) +
+						TABLE.charAt((buffer >> 4) & 0x3F) +
+						TABLE.charAt((buffer << 2) & 0x3F) +
+						'='
+					);
+				} else if (padding == 1) {
+					buffer = input.charCodeAt(position);
+					output += (
+						TABLE.charAt(buffer >> 2) +
+						TABLE.charAt((buffer << 4) & 0x3F) +
+						'=='
+					);
+				}
+
+				return output;
+			};
+
+			var base64 = {
+				'encode': encode,
+				'decode': decode,
+				'version': '0.1.0'
+			};
+
+			// Some AMD build optimizers, like r.js, check for specific condition patterns
+			// like the following:
+			if (
+				typeof undefined == 'function' &&
+				typeof undefined.amd == 'object' &&
+				undefined.amd
+			) {
+				undefined(function() {
+					return base64;
+				});
+			} else if (freeExports && !freeExports.nodeType) {
+				if (freeModule) { // in Node.js or RingoJS v0.8.0+
+					freeModule.exports = base64;
+				} else { // in Narwhal or RingoJS v0.7.0-
+					for (var key in base64) {
+						base64.hasOwnProperty(key) && (freeExports[key] = base64[key]);
+					}
+				}
+			} else { // in Rhino or a web browser
+				root.base64 = base64;
+			}
+
+		}(commonjsGlobal));
+	});
+
+	function makeURI(strData, type) {
+		return 'data:' + type + ';base64,' + strData
+	}
+
+	function fixType(type) {
+		type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+		var r = type.match(/png|jpeg|bmp|gif/)[0];
+		return 'image/' + r
+	}
+
+	function encodeData(data) {
+		var str = '';
+		if (typeof data === 'string') {
+			str = data;
+		} else {
+			for (var i = 0; i < data.length; i++) {
+				str += String.fromCharCode(data[i]);
+			}
+		}
+		return base64.encode(str)
+	}
+
+	/**
+	 * 获取图像区域隐含的像素数据
+	 * @param canvasId canvas标识
+	 * @param x 将要被提取的图像数据矩形区域的左上角 x 坐标
+	 * @param y 将要被提取的图像数据矩形区域的左上角 y 坐标
+	 * @param width 将要被提取的图像数据矩形区域的宽度
+	 * @param height 将要被提取的图像数据矩形区域的高度
+	 * @param done 完成回调
+	 */
+	function getImageData(canvasId, x, y, width, height, done) {
+		uni.canvasGetImageData({
+			canvasId: canvasId,
+			x: x,
+			y: y,
+			width: width,
+			height: height,
+			success: function success(res) {
+				done(res, null);
+			},
+			fail: function fail(res) {
+				done(null, res);
+			}
+		});
+	}
+
+	/**
+	 * 生成bmp格式图片
+	 * 按照规则生成图片响应头和响应体
+	 * @param oData 用来描述 canvas 区域隐含的像素数据 { data, width, height } = oData
+	 * @returns {*} base64字符串
+	 */
+	function genBitmapImage(oData) {
+		//
+		// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
+		// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
+		//
+		var biWidth = oData.width;
+		var biHeight = oData.height;
+		var biSizeImage = biWidth * biHeight * 3;
+		var bfSize = biSizeImage + 54; // total header size = 54 bytes
+
+		//
+		//  typedef struct tagBITMAPFILEHEADER {
+		//  	WORD bfType;
+		//  	DWORD bfSize;
+		//  	WORD bfReserved1;
+		//  	WORD bfReserved2;
+		//  	DWORD bfOffBits;
+		//  } BITMAPFILEHEADER;
+		//
+		var BITMAPFILEHEADER = [
+			// WORD bfType -- The file type signature; must be "BM"
+			0x42, 0x4D,
+			// DWORD bfSize -- The size, in bytes, of the bitmap file
+			bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
+			// WORD bfReserved1 -- Reserved; must be zero
+			0, 0,
+			// WORD bfReserved2 -- Reserved; must be zero
+			0, 0,
+			// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
+			54, 0, 0, 0
+		];
+
+		//
+		//  typedef struct tagBITMAPINFOHEADER {
+		//  	DWORD biSize;
+		//  	LONG  biWidth;
+		//  	LONG  biHeight;
+		//  	WORD  biPlanes;
+		//  	WORD  biBitCount;
+		//  	DWORD biCompression;
+		//  	DWORD biSizeImage;
+		//  	LONG  biXPelsPerMeter;
+		//  	LONG  biYPelsPerMeter;
+		//  	DWORD biClrUsed;
+		//  	DWORD biClrImportant;
+		//  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
+		//
+		var BITMAPINFOHEADER = [
+			// DWORD biSize -- The number of bytes required by the structure
+			40, 0, 0, 0,
+			// LONG biWidth -- The width of the bitmap, in pixels
+			biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
+			// LONG biHeight -- The height of the bitmap, in pixels
+			biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
+			// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
+			1, 0,
+			// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
+			// has a maximum of 2^24 colors (16777216, Truecolor)
+			24, 0,
+			// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
+			0, 0, 0, 0,
+			// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
+			biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
+			// LONG biXPelsPerMeter, unused
+			0, 0, 0, 0,
+			// LONG biYPelsPerMeter, unused
+			0, 0, 0, 0,
+			// DWORD biClrUsed, the number of color indexes of palette, unused
+			0, 0, 0, 0,
+			// DWORD biClrImportant, unused
+			0, 0, 0, 0
+		];
+
+		var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
+
+		var aImgData = oData.data;
+
+		var strPixelData = '';
+		var biWidth4 = biWidth << 2;
+		var y = biHeight;
+		var fromCharCode = String.fromCharCode;
+
+		do {
+			var iOffsetY = biWidth4 * (y - 1);
+			var strPixelRow = '';
+			for (var x = 0; x < biWidth; x++) {
+				var iOffsetX = x << 2;
+				strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX]);
+			}
+
+			for (var c = 0; c < iPadding; c++) {
+				strPixelRow += String.fromCharCode(0);
+			}
+
+			strPixelData += strPixelRow;
+		} while (--y)
+
+		var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
+
+		return strEncoded
+	}
+
+	/**
+	 * 转换为图片base64
+	 * @param canvasId canvas标识
+	 * @param x 将要被提取的图像数据矩形区域的左上角 x 坐标
+	 * @param y 将要被提取的图像数据矩形区域的左上角 y 坐标
+	 * @param width 将要被提取的图像数据矩形区域的宽度
+	 * @param height 将要被提取的图像数据矩形区域的高度
+	 * @param type 转换图片类型
+	 * @param done 完成回调
+	 */
+	function convertToImage(canvasId, x, y, width, height, type, done) {
+		if (done === void 0) done = function() {};
+
+		if (type === undefined) {
+			type = 'png';
+		}
+		type = fixType(type);
+		if (/bmp/.test(type)) {
+			getImageData(canvasId, x, y, width, height, function(data, err) {
+				var strData = genBitmapImage(data);
+				tools_7(done) && done(makeURI(strData, 'image/' + type), err);
+			});
+		} else {
+			console.error('暂不支持生成\'' + type + '\'类型的base64图片');
+		}
+	}
+
+	var CanvasToBase64 = {
+		convertToImage: convertToImage,
+		// convertToPNG: function (width, height, done) {
+		//   return convertToImage(width, height, 'png', done)
+		// },
+		// convertToJPEG: function (width, height, done) {
+		//   return convertToImage(width, height, 'jpeg', done)
+		// },
+		// convertToGIF: function (width, height, done) {
+		//   return convertToImage(width, height, 'gif', done)
+		// },
+		convertToBMP: function(ref, done) {
+			if (ref === void 0) ref = {};
+			var canvasId = ref.canvasId;
+			var x = ref.x;
+			var y = ref.y;
+			var width = ref.width;
+			var height = ref.height;
+			if (done === void 0) done = function() {};
+
+			return convertToImage(canvasId, x, y, width, height, 'bmp', done)
+		}
+	};
+
+	function methods() {
+		var self = this;
+
+		var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+		var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
+
+		var id = self.id;
+		var targetId = self.targetId;
+		var pixelRatio = self.pixelRatio;
+
+		var ref = self.cut;
+		var x = ref.x;
+		if (x === void 0) x = 0;
+		var y = ref.y;
+		if (y === void 0) y = 0;
+		var width = ref.width;
+		if (width === void 0) width = boundWidth;
+		var height = ref.height;
+		if (height === void 0) height = boundHeight;
+
+		self.updateCanvas = function(done) {
+			if (self.croperTarget) {
+				//  画布绘制图片
+				self.ctx.drawImage(
+					self.croperTarget,
+					self.imgLeft,
+					self.imgTop,
+					self.scaleWidth,
+					self.scaleHeight
+				);
+			}
+			tools_7(self.onBeforeDraw) && self.onBeforeDraw(self.ctx, self);
+
+			self.setBoundStyle(self.boundStyle); //	设置边界样式
+
+			self.ctx.draw(false, done);
+			return self
+		};
+
+		self.pushOrigin = self.pushOrign = function(src) {
+			self.src = src;
+
+			tools_7(self.onBeforeImageLoad) && self.onBeforeImageLoad(self.ctx, self);
+
+			return getImageInfo({
+					src: src
+				})
+				.then(function(res) {
+					var innerAspectRadio = res.width / res.height;
+					var customAspectRadio = width / height;
+
+					self.croperTarget = res.path;
+
+					if (innerAspectRadio < customAspectRadio) {
+						self.rectX = x;
+						self.baseWidth = width;
+						self.baseHeight = width / innerAspectRadio;
+						self.rectY = y - Math.abs((height - self.baseHeight) / 2);
+					} else {
+						self.rectY = y;
+						self.baseWidth = height * innerAspectRadio;
+						self.baseHeight = height;
+						self.rectX = x - Math.abs((width - self.baseWidth) / 2);
+					}
+
+					self.imgLeft = self.rectX;
+					self.imgTop = self.rectY;
+					self.scaleWidth = self.baseWidth;
+					self.scaleHeight = self.baseHeight;
+
+					self.update();
+
+					return new Promise(function(resolve) {
+						self.updateCanvas(resolve);
+					})
+				})
+				.then(function() {
+					tools_7(self.onImageLoad) && self.onImageLoad(self.ctx, self);
+				})
+		};
+
+		self.removeImage = function() {
+			self.src = '';
+			self.croperTarget = '';
+			return draw(self.ctx)
+		};
+
+		self.getCropperBase64 = function(done) {
+			if (done === void 0) done = function() {};
+
+			CanvasToBase64.convertToBMP({
+				canvasId: id,
+				x: x,
+				y: y,
+				width: width,
+				height: height
+			}, done);
+		};
+
+		self.getCropperImage = function(opt, fn) {
+			var customOptions = opt;
+
+			var canvasOptions = {
+				canvasId: id,
+				x: x,
+				y: y,
+				width: width,
+				height: height
+			};
+
+			var task = function() {
+				return Promise.resolve();
+			};
+
+			if (
+				tools_10(customOptions) &&
+				customOptions.original
+			) {
+				// original mode
+				task = function() {
+					self.targetCtx.drawImage(
+						self.croperTarget,
+						self.imgLeft * pixelRatio,
+						self.imgTop * pixelRatio,
+						self.scaleWidth * pixelRatio,
+						self.scaleHeight * pixelRatio
+					);
+
+					canvasOptions = {
+						canvasId: targetId,
+						x: x * pixelRatio,
+						y: y * pixelRatio,
+						width: width * pixelRatio,
+						height: height * pixelRatio
+					};
+
+					return draw(self.targetCtx)
+				};
+			}
+
+			return task()
+				.then(function() {
+					if (tools_10(customOptions)) {
+						canvasOptions = Object.assign({}, canvasOptions, customOptions);
+					}
+
+					if (tools_7(customOptions)) {
+						fn = customOptions;
+					}
+
+					var arg = canvasOptions.componentContext ?
+						[canvasOptions, canvasOptions.componentContext] :
+						[canvasOptions];
+
+					return canvasToTempFilePath.apply(null, arg)
+				})
+				.then(function(res) {
+					var tempFilePath = res.tempFilePath;
+
+					return tools_7(fn) ?
+						fn.call(self, tempFilePath, null) :
+						tempFilePath
+				})
+				.catch(function(err) {
+					if (tools_7(fn)) {
+						fn.call(self, null, err);
+					} else {
+						throw err
+					}
+				})
+		};
+	}
+
+	/**
+	 * 获取最新缩放值
+	 * @param oldScale 上一次触摸结束后的缩放值
+	 * @param oldDistance 上一次触摸结束后的双指距离
+	 * @param zoom 缩放系数
+	 * @param touch0 第一指touch对象
+	 * @param touch1 第二指touch对象
+	 * @returns {*}
+	 */
+	var getNewScale = function(oldScale, oldDistance, zoom, touch0, touch1) {
+		var xMove, yMove, newDistance;
+		// 计算二指最新距离
+		xMove = Math.round(touch1.x - touch0.x);
+		yMove = Math.round(touch1.y - touch0.y);
+		newDistance = Math.round(Math.sqrt(xMove * xMove + yMove * yMove));
+
+		return oldScale + 0.001 * zoom * (newDistance - oldDistance)
+	};
+
+	function update() {
+		var self = this;
+
+		if (!self.src) {
+			return
+		}
+
+		self.__oneTouchStart = function(touch) {
+			self.touchX0 = Math.round(touch.x);
+			self.touchY0 = Math.round(touch.y);
+		};
+
+		self.__oneTouchMove = function(touch) {
+			var xMove, yMove;
+			// 计算单指移动的距离
+			if (self.touchended) {
+				return self.updateCanvas()
+			}
+			xMove = Math.round(touch.x - self.touchX0);
+			yMove = Math.round(touch.y - self.touchY0);
+
+			var imgLeft = Math.round(self.rectX + xMove);
+			var imgTop = Math.round(self.rectY + yMove);
+
+			self.outsideBound(imgLeft, imgTop);
+
+			self.updateCanvas();
+		};
+
+		self.__twoTouchStart = function(touch0, touch1) {
+			var xMove, yMove, oldDistance;
+
+			self.touchX1 = Math.round(self.rectX + self.scaleWidth / 2);
+			self.touchY1 = Math.round(self.rectY + self.scaleHeight / 2);
+
+			// 计算两指距离
+			xMove = Math.round(touch1.x - touch0.x);
+			yMove = Math.round(touch1.y - touch0.y);
+			oldDistance = Math.round(Math.sqrt(xMove * xMove + yMove * yMove));
+
+			self.oldDistance = oldDistance;
+		};
+
+		self.__twoTouchMove = function(touch0, touch1) {
+			var oldScale = self.oldScale;
+			var oldDistance = self.oldDistance;
+			var scale = self.scale;
+			var zoom = self.zoom;
+
+			self.newScale = getNewScale(oldScale, oldDistance, zoom, touch0, touch1);
+
+			//  设定缩放范围
+			self.newScale <= 1 && (self.newScale = 1);
+			self.newScale >= scale && (self.newScale = scale);
+
+			self.scaleWidth = Math.round(self.newScale * self.baseWidth);
+			self.scaleHeight = Math.round(self.newScale * self.baseHeight);
+			var imgLeft = Math.round(self.touchX1 - self.scaleWidth / 2);
+			var imgTop = Math.round(self.touchY1 - self.scaleHeight / 2);
+
+			self.outsideBound(imgLeft, imgTop);
+
+			self.updateCanvas();
+		};
+
+		self.__xtouchEnd = function() {
+			self.oldScale = self.newScale;
+			self.rectX = self.imgLeft;
+			self.rectY = self.imgTop;
+		};
+	}
+
+	var handle = {
+		//  图片手势初始监测
+		touchStart: function touchStart(e) {
+			var self = this;
+			var ref = e.touches;
+			var touch0 = ref[0];
+			var touch1 = ref[1];
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, true, null, null);
+
+			// 计算第一个触摸点的位置，并参照改点进行缩放
+			self.__oneTouchStart(touch0);
+
+			// 两指手势触发
+			if (e.touches.length >= 2) {
+				self.__twoTouchStart(touch0, touch1);
+			}
+		},
+
+		//  图片手势动态缩放
+		touchMove: function touchMove(e) {
+			var self = this;
+			var ref = e.touches;
+			var touch0 = ref[0];
+			var touch1 = ref[1];
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, null, true);
+
+			// 单指手势时触发
+			if (e.touches.length === 1) {
+				self.__oneTouchMove(touch0);
+			}
+			// 两指手势触发
+			if (e.touches.length >= 2) {
+				self.__twoTouchMove(touch0, touch1);
+			}
+		},
+
+		touchEnd: function touchEnd(e) {
+			var self = this;
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, false, false, true);
+			self.__xtouchEnd();
+		}
+	};
+
+	function cut() {
+		var self = this;
+		var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+		var boundHeight = self.height;
+		// 裁剪框默认高度，即整个画布高度
+		var ref = self.cut;
+		var x = ref.x;
+		if (x === void 0) x = 0;
+		var y = ref.y;
+		if (y === void 0) y = 0;
+		var width = ref.width;
+		if (width === void 0) width = boundWidth;
+		var height = ref.height;
+		if (height === void 0) height = boundHeight;
+
+		/**
+		 * 设置边界
+		 * @param imgLeft 图片左上角横坐标值
+		 * @param imgTop 图片左上角纵坐标值
+		 */
+		self.outsideBound = function(imgLeft, imgTop) {
+			self.imgLeft = imgLeft >= x ?
+				x :
+				self.scaleWidth + imgLeft - x <= width ?
+				x + width - self.scaleWidth :
+				imgLeft;
+
+			self.imgTop = imgTop >= y ?
+				y :
+				self.scaleHeight + imgTop - y <= height ?
+				y + height - self.scaleHeight :
+				imgTop;
+		};
+
+		/**
+		 * 设置边界样式
+		 * @param color	边界颜色
+		 */
+		self.setBoundStyle = function(ref) {
+			if (ref === void 0) ref = {};
+			var color = ref.color;
+			if (color === void 0) color = '#04b00f';
+			var mask = ref.mask;
+			if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)';
+			var lineWidth = ref.lineWidth;
+			if (lineWidth === void 0) lineWidth = 1;
+
+			var half = lineWidth / 2;
+			var boundOption = [{
+					start: {
+						x: x - half,
+						y: y + 10 - half
+					},
+					step1: {
+						x: x - half,
+						y: y - half
+					},
+					step2: {
+						x: x + 10 - half,
+						y: y - half
+					}
+				},
+				{
+					start: {
+						x: x - half,
+						y: y + height - 10 + half
+					},
+					step1: {
+						x: x - half,
+						y: y + height + half
+					},
+					step2: {
+						x: x + 10 - half,
+						y: y + height + half
+					}
+				},
+				{
+					start: {
+						x: x + width - 10 + half,
+						y: y - half
+					},
+					step1: {
+						x: x + width + half,
+						y: y - half
+					},
+					step2: {
+						x: x + width + half,
+						y: y + 10 - half
+					}
+				},
+				{
+					start: {
+						x: x + width + half,
+						y: y + height - 10 + half
+					},
+					step1: {
+						x: x + width + half,
+						y: y + height + half
+					},
+					step2: {
+						x: x + width - 10 + half,
+						y: y + height + half
+					}
+				}
+			];
+
+			// 绘制半透明层
+			self.ctx.beginPath();
+			self.ctx.setFillStyle(mask);
+			self.ctx.fillRect(0, 0, x, boundHeight);
+			self.ctx.fillRect(x, 0, width, y);
+			self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
+			self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
+			self.ctx.fill();
+
+			boundOption.forEach(function(op) {
+				self.ctx.beginPath();
+				self.ctx.setStrokeStyle(color);
+				self.ctx.setLineWidth(lineWidth);
+				self.ctx.moveTo(op.start.x, op.start.y);
+				self.ctx.lineTo(op.step1.x, op.step1.y);
+				self.ctx.lineTo(op.step2.x, op.step2.y);
+				self.ctx.stroke();
+			});
+		};
+	}
+
+	var version = "1.3.9";
+
+	var WeCropper = function WeCropper(params) {
+		var self = this;
+		var _default = {};
+
+		validator(self, DEFAULT);
+
+		Object.keys(DEFAULT).forEach(function(key) {
+			_default[key] = DEFAULT[key].default;
+		});
+		Object.assign(self, _default, params);
+
+		self.prepare();
+		self.attachPage();
+		self.createCtx();
+		self.observer();
+		self.cutt();
+		self.methods();
+		self.init();
+		self.update();
+
+		return self
+	};
+
+	WeCropper.prototype.init = function init() {
+		var self = this;
+		var src = self.src;
+
+		self.version = version;
+
+		typeof self.onReady === 'function' && self.onReady(self.ctx, self);
+
+		if (src) {
+			self.pushOrign(src);
+		} else {
+			self.updateCanvas();
+		}
+		setTouchState(self, false, false, false);
+
+		self.oldScale = 1;
+		self.newScale = 1;
+
+		return self
+	};
+
+	Object.assign(WeCropper.prototype, handle);
+
+	WeCropper.prototype.prepare = prepare;
+	WeCropper.prototype.observer = observer;
+	WeCropper.prototype.methods = methods;
+	WeCropper.prototype.cutt = cut;
+	WeCropper.prototype.update = update;
+
+	return WeCropper;
+
+})));

uview-ui/components/u-back-top/u-back-top.vue

@@ -0,0 +1,153 @@
+<template>
+	<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
+		bottom: bottom + 'rpx',
+		right: right + 'rpx',
+		borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+		zIndex: uZIndex,
+		opacity: opacity
+	}, customStyle]">
+		<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
+			<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+			<view class="u-back-top__content__tips">
+				{{tips}}
+			</view>
+		</view>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'u-back-top',
+		props: {
+			// 返回顶部的形状，circle-圆形，square-方形
+			mode: {
+				type: String,
+				default: 'circle'
+			},
+			// 自定义图标
+			icon: {
+				type: String,
+				default: 'arrow-upward'
+			},
+			// 提示文字
+			tips: {
+				type: String,
+				default: ''
+			},
+			// 返回顶部滚动时间
+			duration: {
+				type: [Number, String],
+				default: 100
+			},
+			// 滚动距离
+			scrollTop: {
+				type: [Number, String],
+				default: 0
+			},
+			// 距离顶部多少距离显示，单位rpx
+			top: {
+				type: [Number, String],
+				default: 400
+			},
+			// 返回顶部按钮到底部的距离，单位rpx
+			bottom: {
+				type: [Number, String],
+				default: 200
+			},
+			// 返回顶部按钮到右边的距离，单位rpx
+			right: {
+				type: [Number, String],
+				default: 40
+			},
+			// 层级
+			zIndex: {
+				type: [Number, String],
+				default: '9'
+			},
+			// 图标的样式，对象形式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {
+						color: '#909399',
+						fontSize: '38rpx'
+					}
+				}
+			},
+			// 整个组件的样式
+			customStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		watch: {
+			showBackTop(nVal, oVal) {
+				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
+				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
+				if(nVal) {
+					this.uZIndex = this.zIndex;
+					this.opacity = 1;
+				} else {
+					this.uZIndex = -1;
+					this.opacity = 0;
+				}
+			}
+		},
+		computed: {
+			showBackTop() {
+				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
+				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
+				return this.scrollTop > uni.upx2px(this.top);
+			},
+		},
+		data() {
+			return {
+				// 不透明度，为了让组件有一个显示和隐藏的过渡动画
+				opacity: 0,
+				// 组件的z-index值，隐藏时设置为-1，就会看不到
+				uZIndex: -1
+			}
+		},
+		methods: {
+			backToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: this.duration
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-back-top {
+		width: 80rpx;
+		height: 80rpx;
+		position: fixed;
+		z-index: 9;
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		background-color: #E1E1E1;
+		color: $u-content-color;
+		align-items: center;
+		transition: opacity 0.4s;
+		
+		&__content {
+			@include vue-flex;
+			flex-direction: column;
+			align-items: center;
+			
+			&__tips {
+				font-size: 24rpx;
+				transform: scale(0.8);
+				line-height: 1;
+			}
+		}
+	}
+</style>

uview-ui/components/u-badge/u-badge.vue

@@ -0,0 +1,216 @@
+<template>
+	<view v-if="show" class="u-badge" :class="[
+			isDot ? 'u-badge-dot' : '', 
+			size == 'mini' ? 'u-badge-mini' : '',
+			type ? 'u-badge--bg--' + type : ''
+		]" :style="[{
+			top: offset[0] + 'rpx',
+			right: offset[1] + 'rpx',
+			fontSize: fontSize + 'rpx',
+			position: absolute ? 'absolute' : 'static',
+			color: color,
+			backgroundColor: bgColor
+		}, boxStyle]"
+	>
+		{{showText}}
+	</view>
+</template>
+
+<script>
+	/**
+	 * badge 角标
+	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+	 * @tutorial https://www.uviewui.com/components/badge.html
+	 * @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
+	 * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
+	 * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
+	 * @property {String Number} overflow-count 展示封顶的数字值（默认99）
+	 * @property {String} type 使用预设的背景颜色（默认error）
+	 * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
+	 * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
+	 * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
+	 * @property {String} color 字体颜色（默认#ffffff）
+	 * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
+	 * @example <u-badge type="error" count="7"></u-badge>
+	 */
+	export default {
+		name: 'u-badge',
+		props: {
+			// primary,warning,success,error,info
+			type: {
+				type: String,
+				default: 'error'
+			},
+			// default, mini
+			size: {
+				type: String,
+				default: 'default'
+			},
+			//是否是圆点
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			// 显示的数值内容
+			count: {
+				type: [Number, String],
+			},
+			// 展示封顶的数字值
+			overflowCount: {
+				type: Number,
+				default: 99
+			},
+			// 当数值为 0 时，是否展示 Badge
+			showZero: {
+				type: Boolean,
+				default: false
+			},
+			// 位置偏移
+			offset: {
+				type: Array,
+				default: () => {
+					return [20, 20]
+				}
+			},
+			// 是否开启绝对定位，开启了offset才会起作用
+			absolute: {
+				type: Boolean,
+				default: true
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: '24'
+			},
+			// 字体演示
+			color: {
+				type: String,
+				default: '#ffffff'
+			},
+			// badge的背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
+			isCenter: {
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			// 是否将badge中心与父组件右上角重合
+			boxStyle() {
+				let style = {};
+				if(this.isCenter) {
+					style.top = 0;
+					style.right = 0;
+					// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
+					style.transform = "translateY(-50%) translateX(50%)";
+				} else {
+					style.top = this.offset[0] + 'rpx';
+					style.right = this.offset[1] + 'rpx';
+					style.transform = "translateY(0) translateX(0)";
+				}
+				// 如果尺寸为mini，后接上scal()
+				if(this.size == 'mini') {
+					style.transform = style.transform + " scale(0.8)";
+				}
+				return style;
+			},
+			// isDot类型时，不显示文字
+			showText() {
+				if(this.isDot) return '';
+				else {
+					if(this.count > this.overflowCount) return `${this.overflowCount}+`;
+					else return this.count;
+				}
+			},
+			// 是否显示组件
+			show() {
+				// 如果count的值为0，并且showZero设置为false，不显示组件
+				if(this.count == 0 && this.showZero == false) return false;
+				else return true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-badge {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		line-height: 24rpx;
+		padding: 4rpx 8rpx;
+		border-radius: 100rpx;
+		z-index: 9;
+		
+		&--bg--primary {
+			background-color: $u-type-primary;
+		}
+		
+		&--bg--error {
+			background-color: $u-type-error;
+		}
+		
+		&--bg--success {
+			background-color: $u-type-success;
+		}
+		
+		&--bg--info {
+			background-color: $u-type-info;
+		}
+		
+		&--bg--warning {
+			background-color: $u-type-warning;
+		}
+	}
+	
+	.u-badge-dot {
+		height: 16rpx;
+		width: 16rpx;
+		border-radius: 100rpx;
+		line-height: 1;
+	}
+	
+	.u-badge-mini {
+		transform: scale(0.8);
+		transform-origin: center center;
+	}
+	
+	// .u-primary {
+	// 	background: $u-type-primary;
+	// 	color: #fff;
+	// }
+	
+	// .u-error {
+	// 	background: $u-type-error;
+	// 	color: #fff;
+	// }
+	
+	// .u-warning {
+	// 	background: $u-type-warning;
+	// 	color: #fff;
+	// }
+	
+	// .u-success {
+	// 	background: $u-type-success;
+	// 	color: #fff;
+	// }
+	
+	// .u-black {
+	// 	background: #585858;
+	// 	color: #fff;
+	// }
+	
+	.u-info {
+		background-color: $u-type-info;
+		color: #fff;
+	}
+</style>

uview-ui/components/u-button/u-button.vue

@@ -0,0 +1,596 @@
+<template>
+	<button
+		id="u-wave-btn"
+		class="u-btn u-line-1 u-fix-ios-appearance"
+		:class="[
+			'u-size-' + size,
+			plain ? 'u-btn--' + type + '--plain' : '',
+			loading ? 'u-loading' : '',
+			shape == 'circle' ? 'u-round-circle' : '',
+			hairLine ? showHairLineBorder : 'u-btn--bold-border',
+			'u-btn--' + type,
+			disabled ? `u-btn--${type}--disabled` : '',
+		]"
+		:hover-start-time="Number(hoverStartTime)"
+		:hover-stay-time="Number(hoverStayTime)"
+		:disabled="disabled"
+		:form-type="formType"
+		:open-type="openType"
+		:app-parameter="appParameter"
+		:hover-stop-propagation="hoverStopPropagation"
+		:send-message-title="sendMessageTitle"
+		send-message-path="sendMessagePath"
+		:lang="lang"
+		:data-name="dataName"
+		:session-from="sessionFrom"
+		:send-message-img="sendMessageImg"
+		:show-message-card="showMessageCard"
+		@getphonenumber="getphonenumber"
+		@getuserinfo="getuserinfo"
+		@error="error"
+		@opensetting="opensetting"
+		@launchapp="launchapp"
+		:style="[customStyle, {
+			overflow: ripple ? 'hidden' : 'visible'
+		}]"
+		@tap.stop="click($event)"
+		:hover-class="getHoverClass"
+		:loading="loading"
+	>
+		<slot></slot>
+		<view
+			v-if="ripple"
+			class="u-wave-ripple"
+			:class="[waveActive ? 'u-wave-active' : '']"
+			:style="{
+				top: rippleTop + 'px',
+				left: rippleLeft + 'px',
+				width: fields.targetWidth + 'px',
+				height: fields.targetWidth + 'px',
+				'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+			}"
+		></view>
+	</button>
+</template>
+
+<script>
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://www.uviewui.com/components/button.html
+ * @property {String} size 按钮的大小
+ * @property {Boolean} ripple 是否开启点击水波纹效果
+ * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
+ * @property {String} type 按钮的样式类型
+ * @property {Boolean} plain 按钮是否镂空，背景色透明
+ * @property {Boolean} disabled 是否禁用
+ * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
+ * @property {Boolean} shape 按钮外观形状，见文档说明
+ * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
+ * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String} open-type 开放能力
+ * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
+ * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
+ * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
+ * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
+ * @event {Function} click 按钮点击
+ * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
+ * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function} error 当使用开放能力时，发生错误的回调
+ * @event {Function} opensetting 在打开授权设置页并关闭后回调
+ * @event {Function} launchapp 打开 APP 成功的回调
+ * @example <u-button>月落</u-button>
+ */
+export default {
+	name: 'u-button',
+	props: {
+		// 是否细边框
+		hairLine: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的预置样式，default，primary，error，warning，success
+		type: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮尺寸，default，medium，mini
+		size: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮形状，circle（两边为半圆），square（带圆角）
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 按钮是否镂空
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁止状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 开放能力，具体请看uniapp稳定关于button组件部分说明
+		// https://uniapp.dcloud.io/component/button
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+		// 取值为submit（提交表单），reset（重置表单）
+		formType: {
+			type: String,
+			default: ''
+		},
+		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+		// 只微信小程序、QQ小程序有效
+		appParameter: {
+			type: String,
+			default: ''
+		},
+		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+		hoverStopPropagation: {
+			type: Boolean,
+			default: false
+		},
+		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+		lang: {
+			type: String,
+			default: 'en'
+		},
+		// 会话来源，open-type="contact"时有效。只微信小程序有效
+		sessionFrom: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片标题，open-type="contact"时有效
+		// 默认当前标题，只微信小程序有效
+		sendMessageTitle: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+		// 默认当前分享路径，只微信小程序有效
+		sendMessagePath: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片图片，open-type="contact"时有效
+		// 默认当前页面截图，只微信小程序有效
+		sendMessageImg: {
+			type: String,
+			default: ''
+		},
+		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+		showMessageCard: {
+			type: Boolean,
+			default: false
+		},
+		// 手指按（触摸）按钮时按钮时的背景颜色
+		hoverBgColor: {
+			type: String,
+			default: ''
+		},
+		// 水波纹的背景颜色
+		rippleBgColor: {
+			type: String,
+			default: ''
+		},
+		// 是否开启水波纹效果
+		ripple: {
+			type: Boolean,
+			default: false
+		},
+		// 按下的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义样式，对象形式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+		dataName: {
+			type: String,
+			default: ''
+		},
+		// 节流，一定时间内只能触发一次
+		throttleTime: {
+			type: [String, Number],
+			default: 1000
+		},
+		// 按住后多久出现点击态，单位毫秒
+		hoverStartTime: {
+			type: [String, Number],
+			default: 20
+		},
+		// 手指松开后点击态保留时间，单位毫秒
+		hoverStayTime: {
+			type: [String, Number],
+			default: 150
+		},
+	},
+	computed: {
+		// 当没有传bgColor变量时，按钮按下去的颜色类名
+		getHoverClass() {
+			// 如果开启水波纹效果，则不启用hover-class效果
+			if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
+			let hoverClass = '';
+			hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
+			return hoverClass;
+		},
+		// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
+		showHairLineBorder() {
+			if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
+				return '';
+			} else {
+				return 'u-hairline-border';
+			}
+		}
+	},
+	data() {
+		return {
+			rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
+			rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
+			fields: {}, // 波纹按钮节点信息
+			waveActive: false // 激活水波纹
+		};
+	},
+	methods: {
+		// 按钮点击
+		click(e) {
+			// 进行节流控制，每this.throttle毫秒内，只在开始处执行
+			this.$u.throttle(() => {
+				// 如果按钮时disabled和loading状态，不触发水波纹效果
+				if (this.loading === true || this.disabled === true) return;
+				// 是否开启水波纹效果
+				if (this.ripple) {
+					// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
+					this.waveActive = false;
+					this.$nextTick(function() {
+						this.getWaveQuery(e);
+					});
+				}
+				this.$emit('click', e);
+			}, this.throttleTime);
+		},
+		// 查询按钮的节点信息
+		getWaveQuery(e) {
+			this.getElQuery().then(res => {
+				// 查询返回的是一个数组节点
+				let data = res[0];
+				// 查询不到节点信息，不操作
+				if (!data.width || !data.width) return;
+				// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
+				// 最终的方形（变换后的圆形）才能覆盖整个按钮
+				data.targetWidth = data.height > data.width ? data.height : data.width;
+				if (!data.targetWidth) return;
+				this.fields = data;
+				let touchesX = '',
+					touchesY = '';
+				// #ifdef MP-BAIDU
+				touchesX = e.changedTouches[0].clientX;
+				touchesY = e.changedTouches[0].clientY;
+				// #endif
+				// #ifdef MP-ALIPAY
+				touchesX = e.detail.clientX;
+				touchesY = e.detail.clientY;
+				// #endif
+				// #ifndef MP-BAIDU || MP-ALIPAY
+				touchesX = e.touches[0].clientX;
+				touchesY = e.touches[0].clientY;
+				// #endif
+				// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
+				// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
+				// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
+				this.rippleTop = touchesY - data.top - data.targetWidth / 2;
+				this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
+				this.$nextTick(() => {
+					this.waveActive = true;
+				});
+			});
+		},
+		// 获取节点信息
+		getElQuery() {
+			return new Promise(resolve => {
+				let queryInfo = '';
+				// 获取元素节点信息，请查看uniapp相关文档
+				// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
+				queryInfo = uni.createSelectorQuery().in(this);
+				//#ifdef MP-ALIPAY
+				queryInfo = uni.createSelectorQuery();
+				//#endif
+				queryInfo.select('.u-btn').boundingClientRect();
+				queryInfo.exec(data => {
+					resolve(data);
+				});
+			});
+		},
+		// 下面为对接uniapp官方按钮开放能力事件回调的对接
+		getphonenumber(res) {
+			this.$emit('getphonenumber', res);
+		},
+		getuserinfo(res) {
+			this.$emit('getuserinfo', res);
+		},
+		error(res) {
+			this.$emit('error', res);
+		},
+		opensetting(res) {
+			this.$emit('opensetting', res);
+		},
+		launchapp(res) {
+			this.$emit('launchapp', res);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-btn::after {
+	border: none;
+}
+
+.u-btn {
+	position: relative;
+	border: 0;
+	//border-radius: 10rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	// 避免边框某些场景可能被“裁剪”，不能设置为hidden
+	overflow: visible;
+	line-height: 1;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 0 40rpx;
+	z-index: 1;
+	box-sizing: border-box;
+	transition: all 0.15s;
+	
+	&--bold-border {
+		border: 1px solid #ffffff;
+	}
+	
+	&--default {
+		color: $u-content-color;
+		border-color: #c0c4cc;
+		background-color: #ffffff;
+	}
+	
+	&--primary {
+		color: #ffffff;
+		border-color: $u-type-primary;
+		background-color: $u-type-primary;
+	}
+	
+	&--success {
+		color: #ffffff;
+		border-color: $u-type-success;
+		background-color: $u-type-success;
+	}
+	
+	&--error {
+		color: #ffffff;
+		border-color: $u-type-error;
+		background-color: $u-type-error;
+	}
+	
+	&--warning {
+		color: #ffffff;
+		border-color: $u-type-warning;
+		background-color: $u-type-warning;
+	}
+	
+	&--default--disabled {
+		color: #ffffff;
+		border-color: #e4e7ed;
+		background-color: #ffffff;
+	}
+	
+	&--primary--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-disabled!important;
+	}
+	
+	&--success--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-disabled!important;
+	}
+	
+	&--error--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-disabled!important;
+	}
+	
+	&--warning--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-disabled!important;
+	}
+	
+	&--primary--plain {
+		color: $u-type-primary!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-light!important;
+	}
+	
+	&--success--plain {
+		color: $u-type-success!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-light!important;
+	}
+	
+	&--error--plain {
+		color: $u-type-error!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-light!important;
+	}
+	
+	&--warning--plain {
+		color: $u-type-warning!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-light!important;
+	}
+}
+
+.u-hairline-border:after {
+	content: ' ';
+	position: absolute;
+	pointer-events: none;
+	// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
+	box-sizing: border-box;
+	// 中心点作为变形(scale())的原点
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	left: 0;
+	top: 0;
+	width: 199.8%;
+	height: 199.7%;
+	-webkit-transform: scale(0.5, 0.5);
+	transform: scale(0.5, 0.5);
+	border: 1px solid currentColor;
+	z-index: 1;
+}
+
+.u-wave-ripple {
+	z-index: 0;
+	position: absolute;
+	border-radius: 100%;
+	background-clip: padding-box;
+	pointer-events: none;
+	user-select: none;
+	transform: scale(0);
+	opacity: 1;
+	transform-origin: center;
+}
+
+.u-wave-ripple.u-wave-active {
+	opacity: 0;
+	transform: scale(2);
+	transition: opacity 1s linear, transform 0.4s linear;
+}
+
+.u-round-circle {
+	border-radius: 100rpx;
+}
+
+.u-round-circle::after {
+	border-radius: 100rpx;
+}
+
+.u-loading::after {
+	background-color: hsla(0, 0%, 100%, 0.35);
+}
+
+.u-size-default {
+	font-size: 30rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+}
+
+.u-size-medium {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 26rpx;
+	height: 70rpx;
+	line-height: 70rpx;
+	padding: 0 80rpx;
+}
+
+.u-size-mini {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 22rpx;
+	padding-top: 1px;
+	height: 50rpx;
+	line-height: 50rpx;
+	padding: 0 20rpx;
+}
+
+.u-primary-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-primary-dark !important;
+}
+
+.u-default-plain-hover {
+	color: $u-type-primary-dark !important;
+	background: $u-type-primary-light !important;
+}
+
+.u-success-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-success-dark !important;
+}
+
+.u-warning-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-warning-dark !important;
+}
+
+.u-error-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-error-dark !important;
+}
+
+.u-info-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-info-dark !important;
+}
+
+.u-default-hover {
+	color: $u-type-primary-dark !important;
+	border-color: $u-type-primary-dark !important;
+	background-color: $u-type-primary-light !important;
+}
+
+.u-primary-hover {
+	background: $u-type-primary-dark !important;
+	color: #fff;
+}
+
+.u-success-hover {
+	background: $u-type-success-dark !important;
+	color: #fff;
+}
+
+.u-info-hover {
+	background: $u-type-info-dark !important;
+	color: #fff;
+}
+
+.u-warning-hover {
+	background: $u-type-warning-dark !important;
+	color: #fff;
+}
+
+.u-error-hover {
+	background: $u-type-error-dark !important;
+	color: #fff;
+}
+</style>

uview-ui/components/u-calendar/u-calendar.vue

@@ -0,0 +1,643 @@
+<template>
+	<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
+	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
+		<view class="u-calendar">
+			<view class="u-calendar__header">
+				<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
+					{{toolTip}}
+				</view>
+				<slot v-else name="tooltip" />
+			</view>
+			<view class="u-calendar__action u-flex u-row-center">
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__text">{{ showTitle }}</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
+				</view>
+			</view>
+			<view class="u-calendar__week-day">
+				<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
+			</view>
+			<view class="u-calendar__content">
+				<!-- 前置空白部分 -->
+				<block v-for="(item, index) in weekdayArr" :key="index">
+					<view class="u-calendar__content__item"></view>
+				</block>
+				<view class="u-calendar__content__item" :class="{
+					'u-hover-class':openDisAbled(year,month,index+1),
+					'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
+					'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
+				}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
+				 @tap="dateClick(index)">
+					<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
+						<view>{{ index + 1 }}</view>
+					</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
+				</view>
+				<view class="u-calendar__content__bg-month">{{month}}</view>
+			</view>
+			<view class="u-calendar__bottom">
+				<view class="u-calendar__bottom__choose">
+					<text>{{mode == 'date' ? activeDate : startDate}}</text>
+					<text v-if="endDate">至{{endDate}}</text>
+				</view>
+				<view class="u-calendar__bottom__btn">
+					<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+<script>
+	/**
+	 * calendar 日历
+	 * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
+	 * @tutorial http://uviewui.com/components/calendar.html
+	 * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
+	 * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
+	 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
+	 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
+	 * @property {String Number} max-year 可切换的最大年份(默认2050)
+	 * @property {String Number} min-year 可切换的最小年份(默认1950)
+	 * @property {String Number} min-date 最小可选日期(默认1950-01-01)
+	 * @property {String Number} max-date 最大可选日期(默认当前日期)
+	 * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
+	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
+	 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
+	 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
+	 * @property {String} color 日期字体的默认颜色(默认#303133)
+	 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
+	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
+	 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
+	 * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
+	 * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
+	 * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
+	 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
+	 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
+	 * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
+	 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
+	 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
+	 */
+	
+	export default {
+		name: 'u-calendar',
+		props: {
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许通过点击遮罩关闭Picker
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 通过双向绑定控制组件的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 是否允许切换年份
+			changeYear: {
+				type: Boolean,
+				default: true
+			},
+			// 是否允许切换月份
+			changeMonth: {
+				type: Boolean,
+				default: true
+			},
+			// date-单个日期选择，range-开始日期+结束日期选择
+			mode: {
+				type: String,
+				default: 'date'
+			},
+			// 可切换的最大年份
+			maxYear: {
+				type: [Number, String],
+				default: 2050
+			},
+			// 可切换的最小年份
+			minYear: {
+				type: [Number, String],
+				default: 1950
+			},
+			// 最小可选日期(不在范围内日期禁用不可选)
+			minDate: {
+				type: [Number, String],
+				default: '1950-01-01'
+			},
+			/**
+			 * 最大可选日期
+			 * 默认最大值为今天，之后的日期不可选
+			 * 2030-12-31
+			 * */
+			maxDate: {
+				type: [Number, String],
+				default: ''
+			},
+			// 弹窗顶部左右两边的圆角值
+			borderRadius: {
+				type: [String, Number],
+				default: 20
+			},
+			// 月份切换按钮箭头颜色
+			monthArrowColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 年份切换按钮箭头颜色
+			yearArrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 默认日期字体颜色
+			color: {
+				type: String,
+				default: '#303133'
+			},
+			// 选中|起始结束日期背景色
+			activeBgColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 选中|起始结束日期字体颜色
+			activeColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 范围内日期背景色
+			rangeBgColor: {
+				type: String,
+				default: 'rgba(41,121,255,0.13)'
+			}, 
+			// 范围内日期字体颜色
+			rangeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// mode=range时生效，起始日期自定义文案
+			startText: {
+				type: String,
+				default: '开始'
+			},
+			// mode=range时生效，结束日期自定义文案
+			endText: {
+				type: String,
+				default: '结束'
+			},
+			//按钮样式类型
+			btnType: {
+				type: String,
+				default: 'primary'
+			},
+			// 当前选中日期带选中效果
+			isActiveCurrent: {
+				type: Boolean,
+				default: true
+			},
+			// 切换年月是否触发事件 mode=date时生效
+			isChange: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示右上角的关闭图标
+			closeable: {
+				type: Boolean,
+				default: true
+			},
+			// 顶部的提示文字
+			toolTip: {
+				type: String,
+				default: '选择日期'
+			}
+		},
+		data() {
+			return {
+				// 星期几,值为1-7
+				weekday: 1, 
+				weekdayArr:[],
+				// 当前月有多少天
+				days: 0, 
+				daysArr:[],
+				showTitle: '',
+				year: 2020,
+				month: 0,
+				day: 0,
+				startYear: 0,
+				startMonth: 0,
+				startDay: 0,
+				endYear: 0,
+				endMonth: 0,
+				endDay: 0,
+				today: '',
+				activeDate: '',
+				startDate: '',
+				endDate: '',
+				isStart: true,
+				min: null,
+				max: null,
+				weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
+			};
+		},
+		computed: {
+			dataChange() {
+				return `${this.mode}-${this.minDate}-${this.maxDate}`;
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		watch: {
+			dataChange(val) {
+				this.init()
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			getColor(index, type) {
+				let color = type == 1 ? '' : this.color;
+				let day = index + 1
+				let date = `${this.year}-${this.month}-${day}`
+				let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
+				let start = this.startDate.replace(/\-/g, '/')
+				let end = this.endDate.replace(/\-/g, '/')
+				if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+					color = type == 1 ? this.activeBgColor : this.activeColor;
+				} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+					color = type == 1 ? this.rangeBgColor : this.rangeColor;
+				}
+				return color;
+			},
+			init() {
+				let now = new Date();
+				let minDate = new Date(this.minDate);
+				let maxDate = new Date(this.maxDate);
+				if (now < minDate) now = minDate;
+				if (now > maxDate) now = maxDate;
+				this.year = now.getFullYear();
+				this.month = now.getMonth() + 1;
+				this.day = now.getDate();
+				this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+				this.activeDate = this.today;
+				this.min = this.initDate(this.minDate);
+				this.max = this.initDate(this.maxDate || this.today);
+				this.startDate = "";
+				this.startYear = 0;
+				this.startMonth = 0;
+				this.startDay = 0;
+				this.endYear = 0;
+				this.endMonth = 0;
+				this.endDay = 0;
+				this.endDate = "";
+				this.isStart = true;
+				this.changeData();
+			},
+			//日期处理
+			initDate(date) {
+				let fdate = date.split('-');
+				return {
+					year: Number(fdate[0] || 1920),
+					month: Number(fdate[1] || 1),
+					day: Number(fdate[2] || 1)
+				}
+			},
+			openDisAbled: function(year, month, day) {
+				let bool = true;
+				let date = `${year}/${month}/${day}`;
+				// let today = this.today.replace(/\-/g, '/');
+				let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
+				let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
+				let timestamp = new Date(date).getTime();
+				if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+					bool = false;
+				}
+				return bool;
+			},
+			generateArray: function(start, end) {
+				return Array.from(new Array(end + 1).keys()).slice(start);
+			},
+			formatNum: function(num) {
+				return num < 10 ? '0' + num : num + '';
+			},
+			//一个月有多少天
+			getMonthDay(year, month) {
+				let days = new Date(year, month, 0).getDate();
+				return days;
+			},
+			getWeekday(year, month) {
+				let date = new Date(`${year}/${month}/01 00:00:00`);
+				return date.getDay();
+			},
+			checkRange(year) {
+				let overstep = false;
+				if (year < this.minYear || year > this.maxYear) {
+					uni.showToast({
+						title: "日期超出范围啦~",
+						icon: 'none'
+					})
+					overstep = true;
+				}
+				return overstep;
+			},
+			changeMonthHandler(isAdd) {
+				if (isAdd) {
+					let month = this.month + 1;
+					let year = month > 12 ? this.year + 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month > 12 ? 1 : month;
+						this.year = year;
+						this.changeData();
+					}
+
+				} else {
+					let month = this.month - 1;
+					let year = month < 1 ? this.year - 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month < 1 ? 12 : month;
+						this.year = year;
+						this.changeData();
+					}
+				}
+			},
+			changeYearHandler(isAdd) {
+				let year = isAdd ? this.year + 1 : this.year - 1;
+				if (!this.checkRange(year)) {
+					this.year = year;
+					this.changeData();
+				}
+			},
+			changeData() {
+				this.days = this.getMonthDay(this.year, this.month);
+				this.daysArr=this.generateArray(1,this.days)
+				this.weekday = this.getWeekday(this.year, this.month);
+				this.weekdayArr=this.generateArray(1,this.weekday)
+				this.showTitle = `${this.year}年${this.month}月`;
+				if (this.isChange && this.mode == 'date') {
+					this.btnFix(true);
+				}
+			},
+			dateClick: function(day) {
+				day += 1;
+				if (!this.openDisAbled(this.year, this.month, day)) {
+					this.day = day;
+					let date = `${this.year}-${this.month}-${day}`;
+					if (this.mode == 'date') {
+						this.activeDate = date;
+					} else {
+						let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
+						if (this.isStart || compare) {
+							this.startDate = date;
+							this.startYear = this.year;
+							this.startMonth = this.month;
+							this.startDay = this.day;
+							this.endYear = 0;
+							this.endMonth = 0;
+							this.endDay = 0;
+							this.endDate = "";
+							this.activeDate = "";
+							this.isStart = false;
+						} else {
+							this.endDate = date;
+							this.endYear = this.year;
+							this.endMonth = this.month;
+							this.endDay = this.day;
+							this.isStart = true;
+						}
+					}
+				}
+			},
+			close() {
+				// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
+				this.$emit('input', false);
+			},
+			getWeekText(date) {
+				date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
+				let week = date.getDay();
+				return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
+			},
+			btnFix(show) {
+				if (!show) {
+					this.close();
+				}
+				if (this.mode == 'date') {
+					let arr = this.activeDate.split('-')
+					let year = this.isChange ? this.year : Number(arr[0]);
+					let month = this.isChange ? this.month : Number(arr[1]);
+					let day = this.isChange ? this.day : Number(arr[2]);
+					//当前月有多少天
+					let days = this.getMonthDay(year, month);
+					let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
+					let weekText = this.getWeekText(result);
+					let isToday = false;
+					if (`${year}-${month}-${day}` == this.today) {
+						//今天
+						isToday = true;
+					}
+					this.$emit('change', {
+						year: year,
+						month: month,
+						day: day,
+						days: days,
+						result: result,
+						week: weekText,
+						isToday: isToday,
+						// switch: show //是否是切换年月操作
+					});
+				} else {
+					if (!this.startDate || !this.endDate) return;
+					let startMonth = this.formatNum(this.startMonth);
+					let startDay = this.formatNum(this.startDay);
+					let startDate = `${this.startYear}-${startMonth}-${startDay}`;
+					let startWeek = this.getWeekText(startDate)
+
+					let endMonth = this.formatNum(this.endMonth);
+					let endDay = this.formatNum(this.endDay);
+					let endDate = `${this.endYear}-${endMonth}-${endDay}`;
+					let endWeek = this.getWeekText(endDate);
+					this.$emit('change', {
+						startYear: this.startYear,
+						startMonth: this.startMonth,
+						startDay: this.startDay,
+						startDate: startDate,
+						startWeek: startWeek,
+						endYear: this.endYear,
+						endMonth: this.endMonth,
+						endDay: this.endDay,
+						endDate: endDate,
+						endWeek: endWeek
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-calendar {
+		color: $u-content-color;
+		
+		&__header {
+			width: 100%;
+			box-sizing: border-box;
+			font-size: 30rpx;
+			background-color: #fff;
+			color: $u-main-color;
+			
+			&__text {
+				margin-top: 30rpx;
+				padding: 0 60rpx;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		
+		&__action {
+			padding: 40rpx 0 40rpx 0;
+			
+			&__icon {
+				margin: 0 16rpx;
+			}
+			
+			&__text {
+				padding: 0 16rpx;
+				color: $u-main-color;
+				font-size: 32rpx;
+				line-height: 32rpx;
+				font-weight: bold;
+			}
+		}
+	
+		&__week-day {
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			padding: 6px 0;
+			overflow: hidden;
+			
+			&__text {
+				flex: 1;
+				text-align: center;
+			}
+		}
+	
+		&__content {
+			width: 100%;
+			@include vue-flex;
+			flex-wrap: wrap;
+			padding: 6px 0;
+			box-sizing: border-box;
+			background-color: #fff;
+			position: relative;
+			
+			&--end-date {
+				border-top-right-radius: 8rpx;
+				border-bottom-right-radius: 8rpx;
+			}
+			
+			&--start-date {
+				border-top-left-radius: 8rpx;
+				border-bottom-left-radius: 8rpx;
+			}
+			
+			&__item {
+				width: 14.2857%;
+				@include vue-flex;
+				align-items: center;
+				justify-content: center;
+				padding: 6px 0;
+				overflow: hidden;
+				position: relative;
+				z-index: 2;
+				
+				&__inner {
+					height: 84rpx;
+					@include vue-flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					font-size: 32rpx;
+					position: relative;
+					border-radius: 50%;
+					
+					&__desc {
+						width: 100%;
+						font-size: 24rpx;
+						line-height: 24rpx;
+						transform: scale(0.75);
+						transform-origin: center center;
+						position: absolute;
+						left: 0;
+						text-align: center;
+						bottom: 2rpx;
+					}
+				}
+				
+				&__tips {
+					width: 100%;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					position: absolute;
+					left: 0;
+					transform: scale(0.8);
+					transform-origin: center center;
+					text-align: center;
+					bottom: 8rpx;
+					z-index: 2;
+				}
+			}
+			
+			&__bg-month {
+				position: absolute;
+				font-size: 130px;
+				line-height: 130px;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				color: #e4e7ed;
+				z-index: 1;
+			}
+		}
+	
+		&__bottom {
+			width: 100%;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #fff;
+			padding: 0 40rpx 30rpx;
+			box-sizing: border-box;
+			font-size: 24rpx;
+			color: $u-tips-color;
+			
+			&__choose {
+				height: 50rpx;
+			}
+			
+			&__btn {
+				width: 100%;
+			}
+		}
+	}
+</style>

uview-ui/components/u-car-keyboard/u-car-keyboard.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+		<view class="u-keyboard-grids">
+			<block>
+				<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+					<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
+					 v-for="(item, j) in group" :key="j">
+						{{ item }}
+					</view>
+				</view>
+				<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
+				 hover-class="u-hover-class">
+					<u-icon :size="38" name="backspace" :bold="true"></u-icon>
+				</view>
+				<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
+					<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
+					/
+					<text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "u-keyboard",
+		props: {
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = this.$u.randomArray(data);
+				// 切割成二维数组
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			EngKeyBoardList() {
+				let data = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					0,
+					'Q',
+					'W',
+					'E',
+					'R',
+					'T',
+					'Y',
+					'U',
+					'I',
+					'O',
+					'P',
+					'A',
+					'S',
+					'D',
+					'F',
+					'G',
+					'H',
+					'J',
+					'K',
+					'L',
+					'Z',
+					'X',
+					'C',
+					'V',
+					'B',
+					'N',
+					'M'
+				];
+				let tmp = [];
+				if (this.random) data = this.$u.randomArray(data);
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			}
+		},
+		methods: {
+			// 点击键盘按钮
+			carInputClick(i, j) {
+				let value = '';
+				// 不同模式，获取不同数组的值
+				if (this.abc) value = this.EngKeyBoardList[i][j];
+				else value = this.areaList[i][j];
+				this.$emit('change', value);
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			changeCarInputMode() {
+				this.abc = !this.abc;
+			},
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-keyboard-grids {
+		background: rgb(215, 215, 217);
+		padding: 24rpx 0;
+		position: relative;
+	}
+
+	.u-keyboard-grids-item {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.u-keyboard-grids-btn {
+		text-decoration: none;
+		width: 62rpx;
+		flex: 0 0 64rpx;
+		height: 80rpx;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		font-size: 36rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fff;
+		margin: 8rpx 5rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		font-weight: 500;
+		justify-content: center;
+	}
+
+	.u-carinput-hover {
+		background-color: rgb(185, 188, 195) !important;
+	}
+
+	.u-keyboard-back {
+		position: absolute;
+		width: 96rpx;
+		right: 22rpx;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: rgb(185, 188, 195);
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+		box-shadow: 0 2rpx 0rpx #888992;
+	}
+
+	.u-keyboard-change {
+		font-size: 24rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		position: absolute;
+		width: 96rpx;
+		left: 22rpx;
+		line-height: 1;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: #ffffff;
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+	}
+
+	.u-keyboard-change .inactive.zh {
+		transform: scale(0.85) translateY(-10rpx);
+	}
+
+	.u-keyboard-change .inactive.en {
+		transform: scale(0.85) translateY(10rpx);
+	}
+
+	.u-keyboard-change .active {
+		color: rgb(237, 112, 64);
+		font-size: 30rpx;
+	}
+
+	.u-keyboard-change .zh {
+		transform: translateY(-10rpx);
+	}
+
+	.u-keyboard-change .en {
+		transform: translateY(10rpx);
+	}
+</style>

uview-ui/components/u-card/u-card.vue

@@ -0,0 +1,299 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
+		:style="{
+			borderRadius: borderRadius + 'rpx',
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: padding + 'rpx'}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectfull"
+						v-if="thumb"
+						:style="{ 
+							height: thumbWidth + 'rpx', 
+							width: thumbWidth + 'rpx', 
+							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: titleSize + 'rpx',
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: subTitleSize + 'rpx',
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-head 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+export default {
+	name: 'u-card',
+	props: {
+		// 与屏幕两侧是否留空隙
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 标题字体大小，单位rpx
+		titleSize: {
+			type: [Number, String],
+			default: '30'
+		},
+		// 副标题
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 副标题颜色
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 副标题字体大小，单位rpx
+		subTitleSize: {
+			type: [Number, String],
+			default: '26'
+		},
+		// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 用于标识点击了第几个
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
+		margin: {
+			type: String,
+			default: '30rpx'
+		},
+		// card卡片的圆角
+		borderRadius: {
+			type: [Number, String],
+			default: '16'
+		},
+		// 头部自定义样式，对象形式
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 主体自定义样式，对象形式
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 底部自定义样式，对象形式
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 头部是否下边框
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 底部是否有上边框
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 标题左边的缩略图
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缩略图宽高，单位rpx
+		thumbWidth: {
+			type: [String, Number],
+			default: '60'
+		},
+		// 缩略图是否为圆形
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 给head，body，foot的内边距
+		padding: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 是否显示头部
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示尾部
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 卡片外围阴影，字符串形式
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		},
+		headClick() {
+			this.$emit('head-click', this.index);
+		},
+		bodyClick() {
+			this.$emit('body-click', this.index);
+		},
+		footClick() {
+			this.$emit('foot-click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 如果是与屏幕之间不留空隙，应该设置左右边距为0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>

uview-ui/components/u-cell-group/u-cell-group.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="u-cell-box">
+		<view class="u-cell-title" v-if="title" :style="[titleStyle]">
+			{{title}}
+		</view>
+		<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * cellGroup 单元格父组件Group
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
+	 * @tutorial https://www.uviewui.com/components/cell.html
+	 * @property {String} title 分组标题
+	 * @property {Boolean} border 是否显示外边框（默认true）
+	 * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
+	 * @example <u-cell-group title="设置喜好">
+	 */
+	export default {
+		name: "u-cell-group",
+		props: {
+			// 分组标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 是否显示分组list上下边框
+			border: {
+				type: Boolean,
+				default: true
+			},
+			// 分组标题的样式，对象形式，注意驼峰属性写法
+			// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
+			titleStyle: {
+				type: Object,
+				default () {
+					return {};
+				}
+			}
+		},
+		data() {
+			return {
+				index: 0,
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-cell-box {
+		width: 100%;
+	}
+
+	.u-cell-title {
+		padding: 30rpx 32rpx 10rpx 32rpx;
+		font-size: 30rpx;
+		text-align: left;
+		color: $u-tips-color;
+	}
+
+	.u-cell-item-box {
+		background-color: #FFFFFF;
+		flex-direction: row;
+	}
+</style>

uview-ui/components/u-cell-item/u-cell-item.vue

@@ -0,0 +1,316 @@
+<template>
+	<view
+		@tap="click"
+		class="u-cell"
+		:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
+		hover-stay-time="150"
+		:hover-class="hoverClass"
+		:style="{
+			backgroundColor: bgColor
+		}"
+	>
+		<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
+		<view class="u-flex" v-else>
+			<slot name="icon"></slot>
+		</view>
+		<view
+			class="u-cell_title"
+			:style="[
+				{
+					width: titleWidth ? titleWidth + 'rpx' : 'auto'
+				},
+				titleStyle
+			]"
+		>
+			<block v-if="title !== ''">{{ title }}</block>
+			<slot name="title" v-else></slot>
+
+			<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
+				<block v-if="label !== ''">{{ label }}</block>
+				<slot name="label" v-else></slot>
+			</view>
+		</view>
+
+		<view class="u-cell__value" :style="[valueStyle]">
+			<block class="u-cell__value" v-if="value !== ''">{{ value }}</block>
+			<slot v-else></slot>
+		</view>
+		<view class="u-flex u-cell_right" v-if="$slots['right-icon']">
+			<slot name="right-icon"></slot>
+		</view>
+		<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
+	</view>
+</template>
+
+<script>
+/**
+ * cellItem 单元格Item
+ * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
+ * @tutorial https://www.uviewui.com/components/cell.html
+ * @property {String} title 左侧标题
+ * @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {String} value 右侧内容
+ * @property {String} label 标题下方的描述信息
+ * @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
+ * @property {Boolean} border-top 是否显示cell的上边框（默认false）
+ * @property {Boolean} center 是否使内容垂直居中（默认false）
+ * @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
+ * // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
+ * @property {Boolean} arrow 是否显示右侧箭头（默认true）
+ * @property {Boolean} required 箭头方向，可选值（默认right）
+ * @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
+ * @property {Object} title-style 标题样式，对象形式
+ * @property {Object} value-style 右侧内容样式，对象形式
+ * @property {Object} label-style 标题下方描述信息的样式，对象形式
+ * @property {String} bg-color 背景颜色（默认transparent）
+ * @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
+ * @property {String Number} title-width 标题的宽度，单位rpx
+ * @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
+ */
+export default {
+	name: 'u-cell-item',
+	props: {
+		// 左侧图标名称(只能uView内置图标)，或者图标src
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 左侧标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 右侧内容
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// 标题下方的描述信息
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
+		// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
+		// borderGap: {
+		// 	type: Boolean,
+		// 	default: true
+		// },
+		// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-cell-hover'
+		},
+		// 是否显示右侧箭头
+		arrow: {
+			type: Boolean,
+			default: true
+		},
+		// 内容是否垂直居中
+		center: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示左边表示必填的星号
+		required: {
+			type: Boolean,
+			default: false
+		},
+		// 标题的宽度，单位rpx
+		titleWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		// 右侧箭头方向，可选值：right|up|down，默认为right
+		arrowDirection: {
+			type: String,
+			default: 'right'
+		},
+		// 控制标题的样式
+		titleStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 右侧显示内容的样式
+		valueStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 描述信息的样式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		// 用于识别被点击的是第几个cell
+		index: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否使用lable插槽
+		useLabelSlot: {
+			type: Boolean,
+			default: false
+		},
+		// 左边图标的大小，单位rpx，只对传入icon字段时有效
+		iconSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 左边图标的样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+	},
+	data() {
+		return {
+
+		};
+	},
+	computed: {
+		arrowStyle() {
+			let style = {};
+			if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
+			else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
+			else style.transform = 'rotate(0deg)';
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-cell {
+	@include vue-flex;
+	align-items: center;
+	position: relative;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	/* #endif */
+	width: 100%;
+	padding: 26rpx 32rpx;
+	font-size: 28rpx;
+	line-height: 54rpx;
+	color: $u-content-color;
+	background-color: #fff;
+	text-align: left;
+}
+
+.u-cell_title {
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap {
+	margin-right: 10rpx;
+	font-size: 32rpx;
+}
+
+.u-cell__right-icon-wrap {
+	margin-left: 10rpx;
+	color: #969799;
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap,
+.u-cell__right-icon-wrap {
+	@include vue-flex;
+	align-items: center;
+	height: 48rpx;
+}
+
+.u-cell-border:after {
+	position: absolute; 
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	content: ' ';
+	pointer-events: none;
+	border-bottom: 1px solid $u-border-color;
+	/* #endif */
+	right: 0;
+	left: 0;
+	top: 0;
+	transform: scaleY(0.5);
+}
+
+.u-cell-border {
+	position: relative;
+}
+
+.u-cell__label {
+	margin-top: 6rpx;
+	font-size: 26rpx;
+	line-height: 36rpx;
+	color: $u-tips-color;
+	/* #ifndef APP-NVUE */
+	word-wrap: break-word;
+	/* #endif */
+}
+
+.u-cell__value {
+	overflow: hidden;
+	text-align: right;
+	/* #ifndef APP-NVUE */
+	vertical-align: middle;
+	/* #endif */
+	color: $u-tips-color;
+	font-size: 26rpx;
+}
+
+.u-cell__title,
+.u-cell__value {
+	flex: 1;
+}
+
+.u-cell--required {
+	/* #ifndef APP-NVUE */
+	overflow: visible;
+	/* #endif */
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-cell--required:before {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	content: '*';
+	/* #endif */
+	left: 8px;
+	margin-top: 4rpx;
+	font-size: 14px;
+	color: $u-type-error;
+}
+
+.u-cell_right {
+	line-height: 1;
+}
+</style>

uview-ui/components/u-checkbox-group/u-checkbox-group.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="u-checkbox-group u-clearfix">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import Emitter from '../../libs/util/emitter.js';
+	/**
+	 * checkboxGroup 开关选择器父组件Group
+	 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+	 * @tutorial https://www.uviewui.com/components/checkbox.html
+	 * @property {String Number} max 最多能选中多少个checkbox（默认999）
+	 * @property {String Number} size 组件整体的大小，单位rpx（默认40）
+	 * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
+	 * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+	 * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+	 * @property {String} width 宽度，需带单位
+	 * @property {String} width 宽度，需带单位
+	 * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+	 * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
+	 * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
+	 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
+	 * @example <u-checkbox-group></u-checkbox-group>
+	 */
+	export default {
+		name: 'u-checkbox-group',
+		mixins: [Emitter],
+		props: {
+			// 最多能选中多少个checkbox
+			max: {
+				type: [Number, String],
+				default: 999
+			},
+			// 所有选中项的 name
+			// value: {
+			// 	default: Array,
+			// 	default() {
+			// 		return []
+			// 	}
+			// },
+			// 是否禁用所有复选框
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 在表单内提交时的标识符
+			name: {
+				type: [Boolean, String],
+				default: ''
+			},
+			// 是否禁止点击提示语选中复选框
+			labelDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 形状，square为方形，circle为原型
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			// 选中状态下的颜色
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 组件的整体大小
+			size: {
+				type: [String, Number],
+				default: 34
+			},
+			// 每个checkbox占u-checkbox-group的宽度
+			width: {
+				type: String,
+				default: 'auto'
+			},
+			// 是否每个checkbox都换行
+			wrap: { 
+				type: Boolean,
+				default: false
+			},
+			// 图标的大小，单位rpx
+			iconSize: {
+				type: [String, Number],
+				default: 20
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		created() {
+			// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		methods: {
+			emitEvent() {
+				let values = [];
+				this.children.map(val => {
+					if(val.value) values.push(val.name);
+				})
+				this.$emit('change', values);
+				// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
+				// 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+				setTimeout(() => {
+					// 将当前的值发送到 u-form-item 进行校验
+					this.dispatch('u-form-item', 'on-form-change', values);
+				}, 60)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-checkbox-group {
+		/* #ifndef MP || APP-NVUE */
+		display: inline-flex;
+		flex-wrap: wrap;
+		/* #endif */
+	}
+</style>

uview-ui/components/u-checkbox/u-checkbox.vue

@@ -0,0 +1,284 @@
+<template>
+	<view class="u-checkbox" :style="[checkboxStyle]">
+		<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+			<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
+		</view>
+		<view class="u-checkbox__label" @tap="onClickLabel" :style="{
+			fontSize: $u.addUnit(labelSize)
+		}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * checkbox 复选框
+	 * @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
+	 * @tutorial https://www.uviewui.com/components/checkbox.html
+	 * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+	 * @property {String Number} label-size label字体大小，单位rpx（默认28）
+	 * @property {String Number} name checkbox组件的标示符
+	 * @property {String} shape 形状，见官网说明（默认circle）
+	 * @property {Boolean} disabled 是否禁用
+	 * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
+	 * @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
+	 * @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
+	 * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
+	 */
+	export default {
+		name: "u-checkbox",
+		props: {
+			// checkbox的名称
+			name: {
+				type: [String, Number],
+				default: ''
+			},
+			// 形状，square为方形，circle为原型
+			shape: {
+				type: String,
+				default: ''
+			},
+			// 是否为选中状态
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 是否禁用
+			disabled: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// 是否禁止点击提示语选中复选框
+			labelDisabled: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
+			activeColor: {
+				type: String,
+				default: ''
+			},
+			// 图标的大小，单位rpx
+			iconSize: {
+				type: [String, Number],
+				default: ''
+			},
+			// label的字体大小，rpx单位
+			labelSize: {
+				type: [String, Number],
+				default: ''
+			},
+			// 组件的整体大小
+			size: {
+				type: [String, Number],
+				default: ''
+			},
+		},
+		data() {
+			return {
+				parentDisabled: false,
+				newParams: {},
+			};
+		},
+		created() {
+			// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+			this.parent = this.$u.$parent.call(this, 'u-checkbox-group');
+			// 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
+			this.parent && this.parent.children.push(this);
+		},
+		computed: {
+			// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
+			isDisabled() {
+				return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
+			},
+			// 是否禁用label点击
+			isLabelDisabled() {
+				return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
+			},
+			// 组件尺寸，对应size的值，默认值为34rpx
+			checkboxSize() {
+				return this.size ? this.size : (this.parent ? this.parent.size : 34);
+			},
+			// 组件的勾选图标的尺寸，默认20
+			checkboxIconSize() {
+				return this.iconSize ? this.iconSize : (this.parent ? this.parent.iconSize : 20);
+			},
+			// 组件选中激活时的颜色
+			elActiveColor() {
+				return this.activeColor ? this.activeColor : (this.parent ? this.parent.activeColor : 'primary');
+			},
+			// 组件的形状
+			elShape() {
+				return this.shape ? this.shape : (this.parent ? this.parent.shape : 'square');
+			},
+			iconStyle() {
+				let style = {};
+				// 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中
+				if (this.elActiveColor && this.value && !this.isDisabled) {
+					style.borderColor = this.elActiveColor; 
+					style.backgroundColor = this.elActiveColor;
+				}
+				style.width = this.$u.addUnit(this.checkboxSize);
+				style.height = this.$u.addUnit(this.checkboxSize);
+				return style;
+			},
+			// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+			iconColor() {
+				return this.value ? '#ffffff' : 'transparent';
+			},
+			iconClass() {
+				let classes = [];
+				classes.push('u-checkbox__icon-wrap--' + this.elShape);
+				if (this.value == true) classes.push('u-checkbox__icon-wrap--checked');
+				if (this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled');
+				if (this.value && this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled--checked');
+				// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+				return classes.join(' ');
+			},
+			checkboxStyle() {
+				let style = {};
+				if(this.parent && this.parent.width) {
+					style.width = this.parent.width;
+					// #ifdef MP
+					// 各家小程序因为它们特殊的编译结构，使用float布局
+					style.float = 'left';
+					// #endif
+					// #ifndef MP
+					// H5和APP使用flex布局
+					style.flex = `0 0 ${this.parent.width}`;
+					// #endif
+				}
+				if(this.parent && this.parent.wrap) {
+					style.width = '100%';
+					// #ifndef MP
+					// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+					style.flex = '0 0 100%';
+					// #endif
+				}
+				return style;
+			}
+		},
+		methods: {
+			onClickLabel() {
+				if (!this.isLabelDisabled && !this.isDisabled) {
+					this.setValue();
+				}
+			},
+			toggle() {
+				if (!this.isDisabled) {
+					this.setValue();
+				}
+			},
+			emitEvent() {
+				this.$emit('change', {
+					value: !this.value,
+					name: this.name
+				})
+				// 执行父组件u-checkbox-group的事件方法
+				// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+				setTimeout(() => {
+					if(this.parent && this.parent.emitEvent) this.parent.emitEvent();
+				}, 80);
+			},
+			// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
+			setValue() {
+				// 判断是否超过了可选的最大数量
+				let checkedNum = 0;
+				if(this.parent && this.parent.children) {
+					// 只要父组件的某一个子元素的value为true，就加1(已有的选中数量)
+					this.parent.children.map(val => {
+						if (val.value) checkedNum++;
+					})
+				}
+				// 如果原来为选中状态，那么可以取消
+				if (this.value == true) {
+					this.emitEvent();
+					this.$emit('input', !this.value);
+				} else {
+					// 如果超出最多可选项，提示
+					if(this.parent && checkedNum >= this.parent.max) {
+						return this.$u.toast(`最多可选${this.parent.max}项`);
+					}
+					// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
+					this.emitEvent();
+					this.$emit('input', !this.value);
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-checkbox {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		overflow: hidden;
+		user-select: none;
+		line-height: 1.8;
+		
+		&__icon-wrap {
+			color: $u-content-color;
+			flex: none;
+			display: -webkit-flex;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			width: 42rpx;
+			height: 42rpx;
+			color: transparent;
+			text-align: center;
+			transition-property: color, border-color, background-color;
+			font-size: 20px;
+			border: 1px solid #c8c9cc;
+			transition-duration: 0.2s;
+			
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: 0;
+			}
+			/* #endif */
+			
+			&--circle {
+				border-radius: 100%;
+			}
+			
+			&--square {
+				border-radius: 6rpx;
+			}
+			
+			&--checked {
+				color: #fff;
+				background-color: $u-type-primary;
+				border-color: $u-type-primary;
+			}
+			
+			&--disabled {
+				background-color: #ebedf0;
+				border-color: #c8c9cc;
+			}
+			
+			&--disabled--checked {
+				color: #c8c9cc !important;
+			}
+		}
+	
+		&__label {
+			word-wrap: break-word;
+			margin-left: 10rpx;
+			margin-right: 24rpx;
+			color: $u-content-color;
+			font-size: 30rpx;
+			
+			&--disabled {
+				color: #c8c9cc;
+			}
+		}
+	}
+</style>

uview-ui/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,220 @@
+<template>
+	<view
+		class="u-circle-progress"
+		:style="{
+			width: widthPx + 'px',
+			height: widthPx + 'px',
+			backgroundColor: bgColor
+		}"
+	>
+		<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+		<canvas
+			class="u-canvas-bg"
+			:canvas-id="elBgId"
+			:id="elBgId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<canvas
+			class="u-canvas"
+			:canvas-id="elId"
+			:id="elId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * circleProgress 环形进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
+ * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
+ * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} bg-color 整个组件背景颜色，默认为白色
+ * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ */
+export default {
+	name: 'u-circle-progress',
+	props: {
+		// 圆环进度百分比值
+		percent: {
+			type: Number,
+			default: 0,
+			// 限制值在0到100之间
+			validator: val => {
+				return val >= 0 && val <= 100;
+			}
+		},
+		// 底部圆环的颜色（灰色的圆环）
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 圆环激活部分的颜色
+		activeColor: {
+			type: String,
+			default: '#19be6b'
+		},
+		// 圆环线条的宽度，单位rpx
+		borderWidth: {
+			type: [Number, String],
+			default: 14
+		},
+		// 整个圆形的宽度，单位rpx
+		width: {
+			type: [Number, String],
+			default: 200
+		},
+		// 整个圆环执行一圈的时间，单位ms
+		duration: {
+			type: [Number, String],
+			default: 1500
+		},
+		// 主题类型
+		type: {
+			type: String,
+			default: ''
+		},
+		// 整个圆环进度区域的背景色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		}
+	},
+	data() {
+		return {
+			// #ifdef MP-WEIXIN
+			elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
+			elId: 'uCircleProgressElId',
+			// #endif
+			// #ifndef MP-WEIXIN
+			elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
+			elId: this.$u.guid(),
+			// #endif
+			widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
+			borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
+			startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+			progressContext: null, // 活动圆的canvas上下文
+			newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+			oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+		};
+	},
+	watch: {
+		percent(nVal, oVal = 0) {
+			if (nVal > 100) nVal = 100;
+			if (nVal < 0) oVal = 0;
+			// 此值其实等于this.percent，命名一个新
+			this.newPercent = nVal;
+			this.oldPercent = oVal;
+			setTimeout(() => {
+				// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+				// 将此值减少或者新增到新的百分比值
+				this.drawCircleByProgress(oVal);
+			}, 50);
+		}
+	},
+	created() {
+		// 赋值，用于加载后第一个画圆使用
+		this.newPercent = this.percent;
+		this.oldPercent = 0;
+	},
+	computed: {
+		// 有type主题时，优先起作用
+		circleColor() {
+			if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
+			else return this.activeColor;
+		}
+	},
+	mounted() {
+		// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
+		setTimeout(() => {
+			this.drawProgressBg();
+			this.drawCircleByProgress(this.oldPercent);
+		}, 50);
+	},
+	methods: {
+		drawProgressBg() {
+			let ctx = uni.createCanvasContext(this.elBgId, this);
+			ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
+			ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
+			ctx.beginPath(); // 开始描绘路径
+			// 设置一个原点(110,110)，半径为100的圆的路径到当前路径
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
+			ctx.stroke(); // 对路径进行描绘
+			ctx.draw();
+		},
+		drawCircleByProgress(progress) {
+			// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
+			let ctx = this.progressContext;
+			if (!ctx) {
+				ctx = uni.createCanvasContext(this.elId, this);
+				this.progressContext = ctx;
+			}
+			// 表示进度的两端为圆形
+			ctx.setLineCap('round');
+			// 设置线条的宽度和颜色
+			ctx.setLineWidth(this.borderWidthPx);
+			ctx.setStrokeStyle(this.circleColor);
+			// 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+			let time = Math.floor(this.duration / 100);
+			// 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+			// 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
+			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
+			ctx.beginPath();
+			// 半径为整个canvas宽度的一半
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
+			ctx.stroke();
+			ctx.draw();
+			// 如果变更后新值大于旧值，意味着增大了百分比
+			if (this.newPercent > this.oldPercent) {
+				// 每次递增百分之一
+				progress++;
+				// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+				if (progress > this.newPercent) return;
+			} else {
+				// 同理于上面
+				progress--;
+				if (progress < this.newPercent) return;
+			}
+			setTimeout(() => {
+				// 定时器，每次操作间隔为time值，为了让进度条有动画效果
+				this.drawCircleByProgress(progress);
+			}, time);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-circle-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+}
+
+.u-canvas-bg {
+	position: absolute;
+}
+
+.u-canvas {
+	position: absolute;
+}
+</style>

uview-ui/components/u-circle-progress/u-line-progress/u-line-progress.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="u-progress" :style="{
+		borderRadius: round ? '100rpx' : 0,
+		height: height + 'rpx',
+		backgroundColor: inactiveColor
+	}">
+		<view :class="[
+			type ? `u-type-${type}-bg` : '',
+			striped ? 'u-striped' : '',
+			striped && stripedActive ? 'u-striped-active' : ''
+		]" class="u-active" :style="[progressStyle]">
+			<slot v-if="$slots.default || $slots.$default" />
+			<block v-else-if="showPercent">
+				{{percent + '%'}}
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uviewui.com/components/lineProgress.html
+	 * @property {String Number} percent 进度条百分比值，为数值类型，0-100
+	 * @property {Boolean} round 进度条两端是否为半圆（默认true）
+	 * @property {String} type 如设置，active-color值将会失效
+	 * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
+	 * @property {String} inactive-color 进度条的底色（默认#ececec）
+	 * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
+	 * @property {String Number} height 进度条的高度，单位rpx（默认28）
+	 * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
+	 * @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
+	 * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+	 */
+	export default {
+		name: "u-line-progress",
+		props: {
+			// 两端是否显示半圆形
+			round: {
+				type: Boolean,
+				default: true
+			},
+			// 主题颜色
+			type: {
+				type: String,
+				default: ''
+			},
+			// 激活部分的颜色
+			activeColor: {
+				type: String,
+				default: '#19be6b'
+			},
+			inactiveColor: {
+				type: String,
+				default: '#ececec'
+			},
+			// 进度百分比，数值
+			percent: {
+				type: Number,
+				default: 0
+			},
+			// 是否在进度条内部显示百分比的值
+			showPercent: {
+				type: Boolean,
+				default: true
+			},
+			// 进度条的高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: 28
+			},
+			// 是否显示条纹
+			striped: {
+				type: Boolean,
+				default: false
+			},
+			// 条纹是否显示活动状态
+			stripedActive: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+			progressStyle() {
+				let style = {};
+				style.width = this.percent + '%';
+				if(this.activeColor) style.backgroundColor = this.activeColor;
+				return style;
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-progress {
+		overflow: hidden;
+		height: 15px;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		width: 100%;
+		border-radius: 100rpx;
+	}
+
+	.u-active {
+		width: 0;
+		height: 100%;
+		align-items: center;
+		@include vue-flex;
+		justify-items: flex-end;
+		justify-content: space-around;
+		font-size: 20rpx;
+		color: #ffffff;
+		transition: all 0.4s ease;
+	}
+
+	.u-striped {
+		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+		background-size: 39px 39px;
+	}
+
+	.u-striped-active {
+		animation: progress-stripes 2s linear infinite;
+	}
+
+	@keyframes progress-stripes {
+		0% {
+			background-position: 0 0;
+		}
+
+		100% {
+			background-position: 39px 0;
+		}
+	}
+</style>

uview-ui/components/u-col/u-col.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="u-col" :class="[
+		'u-col-' + span
+	]" :style="{
+		padding: `0 ${Number(gutter)/2 + 'rpx'}`,
+		marginLeft: 100 / 12 * offset + '%',
+		flex: `0 0 ${100 / 12 * span}%`,
+		alignItems: uAlignItem,
+		justifyContent: uJustify,
+		textAlign: textAlign
+	}"
+	 @tap="click">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * col 布局单元格
+	 * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+	 * @tutorial https://www.uviewui.com/components/layout.html
+	 * @property {String Number} span 栅格占据的列数，总12等分（默认0）
+	 * @property {String} text-align 文字水平对齐方式（默认left）
+	 * @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+	 * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+	 */
+	export default {
+		name: "u-col",
+		props: {
+			// 占父容器宽度的多少等分，总分为12份
+			span: {
+				type: [Number, String],
+				default: 12
+			},
+			// 指定栅格左侧的间隔数(总12栏)
+			offset: {
+				type: [Number, String],
+				default: 0
+			},
+			// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			// 垂直对齐方式，可选值为top、center、bottom
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// 文字对齐方式
+			textAlign: {
+				type: String,
+				default: 'left'
+			},
+			// 是否阻止事件传播
+			stop: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				gutter: 20, // 给col添加间距，左右边距各占一半，从父组件u-row获取
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			// 获取父组件实例，并赋值给对应的参数
+			this.parent = this.$u.$parent.call(this, 'u-row');
+			if (this.parent) {
+				this.gutter = this.parent.gutter;
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
+				else return this.justify;
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start';
+				if (this.align == 'bottom') return 'flex-end';
+				else return this.align;
+			}
+		},
+		methods: {
+			click(e) {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-col {
+		/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+		float: left;
+		/* #endif */
+	}
+
+	.u-col-0 {
+		width: 0;
+	}
+
+	.u-col-1 {
+		width: calc(100%/12);
+	}
+
+	.u-col-2 {
+		width: calc(100%/12 * 2);
+	}
+
+	.u-col-3 {
+		width: calc(100%/12 * 3);
+	}
+
+	.u-col-4 {
+		width: calc(100%/12 * 4);
+	}
+
+	.u-col-5 {
+		width: calc(100%/12 * 5);
+	}
+
+	.u-col-6 {
+		width: calc(100%/12 * 6);
+	}
+
+	.u-col-7 {
+		width: calc(100%/12 * 7);
+	}
+
+	.u-col-8 {
+		width: calc(100%/12 * 8);
+	}
+
+	.u-col-9 {
+		width: calc(100%/12 * 9);
+	}
+
+	.u-col-10 {
+		width: calc(100%/12 * 10);
+	}
+
+	.u-col-11 {
+		width: calc(100%/12 * 11);
+	}
+
+	.u-col-12 {
+		width: calc(100%/12 * 12);
+	}
+</style>

uview-ui/components/u-collapse-item/u-collapse-item.vue

@@ -0,0 +1,205 @@
+<template>
+	<view class="u-collapse-item" :style="[itemStyle]">
+		<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
+			<block v-if="!$slots['title-all']">
+				<view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
+					isShow && activeStyle && !arrow ? activeStyle : '']">
+					{{ title }}
+				</view>
+				<slot v-else name="title" />
+				<view class="u-icon-wrap">
+					<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
+					 class="u-arrow-down-icon" name="arrow-down"></u-icon>
+				</view>
+			</block>
+			<slot v-else name="title-all" />
+		</view>
+		<view class="u-collapse-body" :style="[{
+				height: isShow ? height + 'px' : '0'
+			}]">
+			<view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapseItem 手风琴Item
+	 * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {String} title 面板标题
+	 * @property {String Number} index 主要用于事件的回调，标识那个Item被点击
+	 * @property {Boolean} disabled 面板是否可以打开或收起（默认false）
+	 * @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
+	 * @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
+	 * @property {String} align 标题的对齐方式（默认left）
+	 * @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
+	 * @event {Function} change 某个item被打开或者收起时触发
+	 * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+	 */
+	export default {
+		name: "u-collapse-item",
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的对齐方式
+			align: {
+				type: String,
+				default: 'left'
+			},
+			// 是否可以点击收起
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// collapse显示与否
+			open: {
+				type: Boolean,
+				default: false
+			},
+			// 唯一标识符
+			name: {
+				type: [Number, String],
+				default: ''
+			},
+			//活动样式
+			activeStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 标识当前为第几个
+			index: {
+				type: [String, Number],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				elId: this.$u.guid(),
+				height: 0, // body内容的高度
+				headStyle: {}, // 头部样式，对象形式
+				bodyStyle: {}, // 主体部分样式
+				itemStyle: {}, // 每个item的整体样式
+				arrowColor: '', // 箭头的颜色
+				hoverClass: '', // 头部按下时的效果样式类
+				arrow: true, // 是否显示右侧箭头
+				
+			};
+		},
+		watch: {
+			open(val) {
+				this.isShow = val;
+			}
+		},
+		created() {
+			this.parent = false;
+			// 获取u-collapse的信息，放在u-collapse是为了方便，不用每个u-collapse-item写一遍
+			this.isShow = this.open;
+		},
+		methods: {
+			// 异步获取内容，或者动态修改了内容时，需要重新初始化
+			init() {
+				this.parent = this.$u.$parent.call(this, 'u-collapse');
+				if(this.parent) {
+					this.nameSync = this.name ? this.name : this.parent.childrens.length;
+					// 不存在时才添加本实例
+					!this.parent.childrens.includes(this) && this.parent.childrens.push(this);
+					this.headStyle = this.parent.headStyle;
+					this.bodyStyle = this.parent.bodyStyle;
+					this.arrowColor = this.parent.arrowColor;
+					this.hoverClass = this.parent.hoverClass;
+					this.arrow = this.parent.arrow;
+					this.itemStyle = this.parent.itemStyle;
+				}
+				this.$nextTick(() => {
+					this.queryRect();
+				});
+			},
+			// 点击collapsehead头部
+			headClick() {
+				if (this.disabled) return;
+				if (this.parent && this.parent.accordion == true) {
+					this.parent.childrens.map(val => {
+						// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
+						if (this != val) {
+							val.isShow = false;
+						}
+					});
+				}
+
+				this.isShow = !this.isShow;
+				// 触发本组件的事件
+				this.$emit('change', {
+					index: this.index,
+					show: this.isShow
+				})
+				// 只有在打开时才发出事件
+				if (this.isShow) this.parent && this.parent.onChange();
+				this.$forceUpdate();
+			},
+			// 查询内容高度
+			queryRect() {
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
+				this.$uGetRect('#' + this.elId).then(res => {
+					this.height = res.height;
+				})
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-collapse-head {
+		position: relative;
+		@include vue-flex;
+		justify-content: space-between;
+		align-items: center;
+		color: $u-main-color;
+		font-size: 30rpx;
+		line-height: 1;
+		padding: 24rpx 0;
+		text-align: left;
+	}
+
+	.u-collapse-title {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.u-arrow-down-icon {
+		transition: all 0.3s;
+		margin-right: 20rpx;
+		margin-left: 14rpx;
+	}
+
+	.u-arrow-down-icon-active {
+		transform: rotate(180deg);
+		transform-origin: center center;
+	}
+
+	.u-collapse-body {
+		overflow: hidden;
+		transition: all 0.3s;
+	}
+
+	.u-collapse-content {
+		overflow: hidden;
+		font-size: 28rpx;
+		color: $u-tips-color;
+		text-align: left;
+	}
+</style>

uview-ui/components/u-collapse/u-collapse.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="u-collapse">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapse 手风琴
+	 * @description 通过折叠面板收纳内容区域
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {Boolean} accordion 是否手风琴模式（默认true）
+	 * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+	 * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+	 * @property {Object} head-style 标题自定义样式，对象形式
+	 * @property {Object} body-style 主体自定义样式，对象形式
+	 * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
+	 * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+	 * @example <u-collapse></u-collapse>
+	 */
+	export default {
+		name:"u-collapse",
+		props: {
+			// 是否手风琴模式
+			accordion: {
+				type: Boolean,
+				default: true
+			},
+			// 头部的样式
+			headStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 主体的样式
+			bodyStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 每一个item的样式
+			itemStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示右侧的箭头
+			arrow: {
+				type: Boolean,
+				default: true
+			},
+			// 箭头的颜色
+			arrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 标题部分按压时的样式类，"none"为无效果
+			hoverClass: {
+				type: String,
+				default: 'u-hover-class'
+			}
+		},
+		created() {
+			this.childrens = []
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+			init() {
+				this.childrens.forEach((vm, index) => {
+					vm.init();
+				})
+			},
+			// collapse item被点击，由collapse item调用父组件方法
+			onChange() {
+				let activeItem = [];
+				this.childrens.forEach((vm, index) => {
+					if (vm.isShow) {
+						activeItem.push(vm.nameSync);
+					}
+				})
+				// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
+				if (this.accordion) activeItem = activeItem.join('');
+				this.$emit('change', activeItem);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-column-notice/u-column-notice.vue

@@ -0,0 +1,237 @@
+<template>
+	<view
+		class="u-notice-bar"
+		:style="{
+			background: computeBgColor,
+			padding: padding
+		}"
+		:class="[
+			type ? `u-type-${type}-light-bg` : ''
+		]"
+	>
+		<view class="u-icon-wrap">
+			<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
+		</view>
+		<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
+			<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
+				<view
+					class="u-news-item u-line-1"
+					:style="[textStyle]"
+					@tap="click(index)"
+					:class="['u-type-' + type]"
+				>
+					{{ item }}
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="u-icon-wrap">
+			<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+			<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 滚动方向，row-水平滚动，column-垂直滚动
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 滚动一个周期的时间长，单位ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: Number,
+			default: 160
+		},
+		// 水平滚动时，是否采用衔接形式滚动
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 是否禁止用手滑动切换
+		// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		}
+	},
+	computed: {
+		// 计算字体颜色，如果没有自定义的，就用uview主题颜色
+		computeColor() {
+			if (this.color) return this.color;
+			// 如果是无主题，就默认使用content-color
+			else if(this.type == 'none') return '#606266';
+			else return this.type;
+		},
+		// 文字内容的样式
+		textStyle() {
+			let style = {};
+			if (this.color) style.color = this.color;
+			else if(this.type == 'none') style.color = '#606266';
+			style.fontSize = this.fontSize + 'rpx';
+			return style;
+		},
+		// 垂直或者水平滚动
+		vertical() {
+			if(this.mode == 'horizontal') return false;
+			else return true;
+		},
+		// 计算背景颜色
+		computeBgColor() {
+			if (this.bgColor) return this.bgColor;
+			else if(this.type == 'none') return 'transparent';
+		}
+	},
+	data() {
+		return {
+			// animation: false
+		};
+	},
+	methods: {
+		// 点击通告栏
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		},
+		change(e) {
+			let index = e.detail.current;
+			if(index == this.list.length - 1) {
+				this.$emit('end');
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar {
+	width: 100%;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: nowrap;
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-swiper {
+	font-size: 26rpx;
+	height: 32rpx;
+	@include vue-flex;
+	align-items: center;
+	flex: 1;
+	margin-left: 12rpx;
+}
+
+.u-swiper-item {
+	@include vue-flex;
+	align-items: center;
+	overflow: hidden;
+}
+
+.u-news-item {
+	overflow: hidden;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+
+.u-left-icon {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+</style>

uview-ui/components/u-count-down/u-count-down.vue

@@ -0,0 +1,318 @@
+<template>
+	<view class="u-countdown">
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))">
+			<view class="u-countdown-time" :style="[letterStyle]">
+				{{ d }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
+		>
+			{{ separator == 'colon' ? ':' : '天' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showHours">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ h }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showHours"
+		>
+			{{ separator == 'colon' ? ':' : '时' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showMinutes">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ i }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showMinutes"
+		>
+			{{ separator == 'colon' ? ':' : '分' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showSeconds">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ s }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showSeconds && separator == 'zh'"
+		>
+			秒
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * countDown 倒计时
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @tutorial https://www.uviewui.com/components/countDown.html
+ * @property {String Number} timestamp 倒计时，单位为秒
+ * @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
+ * @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
+ * @property {String Number} separator-size 分隔符的字体大小，单位rpx（默认30）
+ * @property {String} separator-color 分隔符的颜色（默认#303133）
+ * @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
+ * @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
+ * @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
+ * @property {String} border-color 数字边框的颜色（默认#303133）
+ * @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
+ * @property {String} color 倒计时数字的颜色（默认#303133）
+ * @property {String} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
+ * @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
+ * @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）
+ * @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true）
+ * @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true）
+ * @event {Function} end 倒计时结束
+ * @event {Function} change 每秒触发一次，回调为当前剩余的倒计秒数
+ * @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
+ */
+export default {
+	name: 'u-count-down',
+	props: {
+		// 倒计时的时间，秒为单位
+		timestamp: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否自动开始倒计时
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 用英文冒号(colon)或者中文(zh)当做分隔符，false的时候为中文，如："11:22"或"11时22秒"
+		separator: {
+			type: String,
+			default: 'colon'
+		},
+		// 分隔符的大小，单位rpx
+		separatorSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// 分隔符颜色
+		separatorColor: {
+			type: String,
+			default: "#303133"
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#303133'
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 数字框高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 是否显示数字框
+		showBorder: {
+			type: Boolean,
+			default: false
+		},
+		// 边框颜色
+		borderColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 是否显示秒
+		showSeconds: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示分钟
+		showMinutes: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示小时
+		showHours: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示“天”
+		showDays: {
+			type: Boolean,
+			default: true
+		},
+		// 当"天"的部分为0时，不显示
+		hideZeroDay: {
+			type: Boolean,
+			default: false
+		}
+	},
+	watch: {
+		// 监听时间戳的变化
+		timestamp(newVal, oldVal) {
+			// 如果倒计时间发生变化，清除定时器，重新开始倒计时
+			this.clearTimer();
+			this.start();
+		}
+	},
+	data() {
+		return {
+			d: '00', // 天的默认值
+			h: '00', // 小时的默认值
+			i: '00', // 分钟的默认值
+			s: '00', // 秒的默认值
+			timer: null ,// 定时器
+			seconds: 0, // 记录不停倒计过程中变化的秒数
+		};
+	},
+	computed: {
+		// 倒计时item的样式，item为分别的时分秒部分的数字
+		itemStyle() {
+			let style = {};
+			if(this.height) {
+				style.height = this.height + 'rpx';
+				style.width = this.height + 'rpx';
+			}
+			if(this.showBorder) {
+				style.borderStyle = 'solid';
+				style.borderColor = this.borderColor;
+				style.borderWidth = '1px';
+			}
+			if(this.bgColor) {
+				style.backgroundColor = this.bgColor;
+			}
+			return style;
+		},
+		// 倒计时数字的样式
+		letterStyle() {
+			let style = {};
+			if(this.fontSize) style.fontSize = this.fontSize +  'rpx';
+			if(this.color) style.color = this.color;
+			return style;
+		}
+	},
+	mounted() {
+		// 如果自动倒计时
+		this.autoplay && this.timestamp && this.start();
+	},
+	methods: {
+		// 倒计时
+		start() {
+			// 避免可能出现的倒计时重叠情况
+			this.clearTimer();
+			if (this.timestamp <= 0) return;
+			this.seconds = Number(this.timestamp);
+			this.formatTime(this.seconds);
+			this.timer = setInterval(() => {
+				this.seconds--;
+				// 发出change事件
+				this.$emit('change', this.seconds);
+				if (this.seconds < 0) {
+					return this.end();
+				}
+				this.formatTime(this.seconds);
+			}, 1000);
+		},
+		// 格式化时间
+		formatTime(seconds) {
+			// 小于等于0的话，结束倒计时
+			seconds <= 0 && this.end();
+			let [day, hour, minute, second] = [0, 0, 0, 0];
+			day = Math.floor(seconds / (60 * 60 * 24));
+			// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
+			// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
+			hour = Math.floor(seconds / (60 * 60)) - day * 24;
+			// showHour为需要显示的小时
+			let showHour = null;
+			if(this.showDays) {
+				showHour = hour;
+			} else {
+				// 如果不显示天数，将“天”部分的时间折算到小时中去
+				showHour = Math.floor(seconds / (60 * 60));
+			}
+			minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
+			second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+			// 如果小于10，在前面补上一个"0"
+			showHour = showHour < 10 ? '0' + showHour : showHour;
+			minute = minute < 10 ? '0' + minute : minute;
+			second = second < 10 ? '0' + second : second;
+			day = day < 10 ? '0' + day : day;
+			this.d = day;
+			this.h = showHour;
+			this.i = minute;
+			this.s = second;
+		},
+		// 停止倒计时
+		end() {
+			this.clearTimer();
+			this.$emit('end', {});
+		},
+		// 清除定时器
+		clearTimer() {
+			if(this.timer) {
+				// 清除定时器
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		}
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
+		this.timer = null;
+	}
+};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-countdown {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		align-items: center;
+	}
+
+	.u-countdown-item {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rpx;
+		border-radius: 6rpx;
+		white-space: nowrap;
+		transform: translateZ(0);
+	}
+
+	.u-countdown-time {
+		margin: 0;
+		padding: 0;
+		line-height: 1;
+	}
+
+	.u-countdown-colon {
+		@include vue-flex;
+		justify-content: center;
+		padding: 0 5rpx;
+		line-height: 1;
+		align-items: center;
+		padding-bottom: 4rpx;
+	}
+
+	.u-countdown-scale {
+		transform: scale(0.9);
+		transform-origin: center center;
+	}
+</style>

uview-ui/components/u-count-to/u-count-to.vue

@@ -0,0 +1,241 @@
+<template>
+	<view
+		class="u-count-num"
+		:style="{
+			fontSize: fontSize + 'rpx',
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color
+		}"
+	>
+		{{ displayValue }}
+	</view>
+</template>
+
+<script>
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uviewui.com/components/countTo.html
+ * @property {String Number} start-val 开始值
+ * @property {String Number} end-val 结束值
+ * @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000）
+ * @property {Boolean} autoplay 是否自动开始滚动（默认true）
+ * @property {String Number} decimals 要显示的小数位数，见官网说明（默认0）
+ * @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
+ * @property {String} separator 千位分隔符，见官网说明
+ * @property {String} color 字体颜色（默认#303133）
+ * @property {String Number} font-size 字体大小，单位rpx（默认50）
+ * @property {Boolean} bold 字体是否加粗（默认false）
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
+ */
+export default {
+	name: 'u-count-to',
+	props: {
+		// 开始的数值，默认从0增长到某一个数
+		startVal: {
+			type: [Number, String],
+			default: 0
+		},
+		// 要滚动的目标数值，必须
+		endVal: {
+			type: [Number, String],
+			default: 0,
+			required: true
+		},
+		// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 设置数值后是否自动开始滚动
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 要显示的小数位数
+		decimals: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+		useEasing: {
+			type: Boolean,
+			default: true
+		},
+		// 十进制分割
+		decimal: {
+			type: [Number, String],
+			default: '.'
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#303133'
+		},
+		// 字体大小
+		fontSize: {
+			type: [Number, String],
+			default: 50
+		},
+		// 是否加粗字体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 千位分隔符，类似金额的分割(￥23,321.05中的",")
+		separator: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			localStartVal: this.startVal,
+			displayValue: this.formatNumber(this.startVal),
+			printVal: null,
+			paused: false, // 是否暂停
+			localDuration: Number(this.duration),
+			startTime: null, // 开始的时间
+			timestamp: null, // 时间戳
+			remaining: null, // 停留的时间
+			rAF: null,
+			lastTime: 0 // 上一次的时间
+		};
+	},
+	computed: {
+		countDown() {
+			return this.startVal > this.endVal;
+		}
+	},
+	watch: {
+		startVal() {
+			this.autoplay && this.start();
+		},
+		endVal() {
+			this.autoplay && this.start();
+		}
+	},
+	mounted() {
+		this.autoplay && this.start();
+	},
+	methods: {
+		easingFn(t, b, c, d) {
+			return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+		},
+		requestAnimationFrame(callback) {
+			const currTime = new Date().getTime();
+			// 为了使setTimteout的尽可能的接近每秒60帧的效果
+			const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
+			const id = setTimeout(() => {
+				callback(currTime + timeToCall);
+			}, timeToCall);
+			this.lastTime = currTime + timeToCall;
+			return id;
+		},
+
+		cancelAnimationFrame(id) {
+			clearTimeout(id);
+		},
+		// 开始滚动数字
+		start() {
+			this.localStartVal = this.startVal;
+			this.startTime = null;
+			this.localDuration = this.duration;
+			this.paused = false;
+			this.rAF = this.requestAnimationFrame(this.count);
+		},
+		// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+		reStart() {
+			if (this.paused) {
+				this.resume();
+				this.paused = false;
+			} else {
+				this.stop();
+				this.paused = true;
+			}
+		},
+		// 暂停
+		stop() {
+			this.cancelAnimationFrame(this.rAF);
+		},
+		// 重新开始(暂停的情况下)
+		resume() {
+			this.startTime = null;
+			this.localDuration = this.remaining;
+			this.localStartVal = this.printVal;
+			this.requestAnimationFrame(this.count);
+		},
+		// 重置
+		reset() {
+			this.startTime = null;
+			this.cancelAnimationFrame(this.rAF);
+			this.displayValue = this.formatNumber(this.startVal);
+		},
+		count(timestamp) {
+			if (!this.startTime) this.startTime = timestamp;
+			this.timestamp = timestamp;
+			const progress = timestamp - this.startTime;
+			this.remaining = this.localDuration - progress;
+			if (this.useEasing) {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+				} else {
+					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+				}
+			} else {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+				} else {
+					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+				}
+			}
+			if (this.countDown) {
+				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+			} else {
+				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+			}
+			this.displayValue = this.formatNumber(this.printVal);
+			if (progress < this.localDuration) {
+				this.rAF = this.requestAnimationFrame(this.count);
+			} else {
+				this.$emit('end');
+			}
+		},
+		// 判断是否数字
+		isNumber(val) {
+			return !isNaN(parseFloat(val));
+		},
+		formatNumber(num) {
+			// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+			num = Number(num);
+			num = num.toFixed(Number(this.decimals));
+			num += '';
+			const x = num.split('.');
+			let x1 = x[0];
+			const x2 = x.length > 1 ? this.decimal + x[1] : '';
+			const rgx = /(\d+)(\d{3})/;
+			if (this.separator && !this.isNumber(this.separator)) {
+				while (rgx.test(x1)) {
+					x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+				}
+			}
+			return x1 + x2;
+		},
+		destroyed() {
+			this.cancelAnimationFrame(this.rAF);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-count-num {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	text-align: center;
+}
+</style>

uview-ui/components/u-divider/u-divider.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="u-divider" :style="{
+		height: height == 'auto' ? 'auto' : height + 'rpx',
+		backgroundColor: bgColor,
+		marginBottom: marginBottom + 'rpx',
+		marginTop: marginTop + 'rpx'
+	}" @tap="click">
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+		<view v-if="useSlot" class="u-divider-text" :style="{
+			color: color,
+			fontSize: fontSize + 'rpx'
+		}"><slot /></view>
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+	</view>
+</template>
+
+<script>
+/**
+ * divider 分割线
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ * @tutorial https://www.uviewui.com/components/divider.html
+ * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
+ * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
+ * @property {String} color 文字颜色（默认#909399）
+ * @property {String Number} fontSize 字体大小，单位rpx（默认26）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String Number} height 整个divider的高度，单位rpx（默认40）
+ * @property {String} type 将线条设置主题色（默认primary）
+ * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @event {Function} click divider组件被点击时触发
+ * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ */
+export default {
+	name: 'u-divider',
+	props: {
+		// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
+		halfWidth: {
+			type: [Number, String],
+			default: 150
+		},
+		// divider横线的颜色，如设置，
+		borderColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		// 主题色，可以是primary|info|success|warning|error之一值
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// 文字颜色
+		color: {
+			type: String,
+			default: '#909399'
+		},
+		// 文字大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 整个divider的背景颜色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 整个divider的高度单位rpx
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 上边距
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 下边距
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙
+		useSlot: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		lineStyle() {
+			let style = {};
+			if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
+			else style.width = this.halfWidth + 'rpx';
+			// borderColor优先级高于type值
+			if(this.borderColor) style.borderColor = this.borderColor;
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-divider {
+	width: 100%;
+	position: relative;
+	text-align: center;
+	@include vue-flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	flex-direction: row;
+}
+
+.u-divider-line {
+	border-bottom: 1px solid $u-border-color;
+	transform: scale(1, 0.5);
+	transform-origin: center;
+	
+	&--bordercolor--primary {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--success {
+		border-color: $u-type-success;
+	}
+	
+	&--bordercolor--error {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--info {
+		border-color: $u-type-info;
+	}
+	
+	&--bordercolor--warning {
+		border-color: $u-type-warning;
+	}
+}
+
+.u-divider-text {
+	white-space: nowrap;
+	padding: 0 16rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+</style>

uview-ui/components/u-dropdown-item/u-dropdown-item.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
+		<block v-if="!$slots.default && !$slots.$default">
+			<scroll-view scroll-y="true" :style="{
+				height: $u.addUnit(height)
+			}">
+				<view class="u-dropdown-item__options">
+					<u-cell-group>
+						<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options"
+						 :key="index" :title-style="{
+							color: value == item.value ? activeColor : inactiveColor
+						}">
+							<u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
+						</u-cell-item>
+					</u-cell-group>
+				</view>
+			</scroll-view>
+		</block>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	/**
+	 * dropdown-item 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String | Number} v-model 双向绑定选项卡选择值
+	 * @property {String} title 菜单项标题
+	 * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+	 * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+	 * @example <u-dropdown-item title="标题"></u-dropdown-item>
+	 */
+	export default {
+		name: 'u-dropdown-item',
+		props: {
+			// 当前选中项的value值
+			value: {
+				type: [Number, String, Array],
+				default: ''
+			},
+			// 菜单项标题
+			title: {
+				type: [String, Number],
+				default: ''
+			},
+			// 选项数据，如果传入了默认slot，此参数无效
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 是否禁用此菜单项
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下拉弹窗的高度
+			height: {
+				type: [Number, String],
+				default: 'auto'
+			},
+		},
+		data() {
+			return {
+				active: false, // 当前项是否处于展开状态
+				activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
+				inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
+			}
+		},
+		computed: {
+			// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
+			propsChange() {
+				return `${this.title}-${this.disabled}`;
+			}
+		},
+		watch: {
+			propsChange(n) {
+				// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
+				// 将所有子组件数据重新整理一遍
+				if (this.parent) this.parent.init();
+			}
+		},
+		created() {
+			// 父组件的实例
+			this.parent = false;
+		},
+		methods: {
+			init() {
+				// 获取父组件u-dropdown
+				let parent = this.$u.$parent.call(this, 'u-dropdown');
+				if (parent) {
+					this.parent = parent;
+					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
+					this.activeColor = parent.activeColor;
+					this.inactiveColor = parent.inactiveColor;
+					// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+					// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+					let exist = parent.children.find(val => {
+						return this === val;
+					})
+					if (!exist) parent.children.push(this);
+					if (parent.children.length == 1) this.active = true;
+					// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+					parent.menuList.push({
+						title: this.title,
+						disabled: this.disabled
+					});
+				}
+			},
+			// cell被点击
+			cellClick(value) {
+				// 修改通过v-model绑定的值
+				this.$emit('input', value);
+				// 通知父组件(u-dropdown)收起菜单
+				this.parent.close();
+				// 发出事件，抛出当前勾选项的value
+				this.$emit('change', value);
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-dropdown/u-dropdown.vue

@@ -0,0 +1,298 @@
+<template>
+	<view class="u-dropdown">
+		<view class="u-dropdown__menu" :style="{
+			height: $u.addUnit(height)
+		}" :class="{
+			'u-border-bottom': borderBottom
+		}">
+			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+				<view class="u-flex">
+					<text class="u-dropdown__menu__item__text" :style="{
+						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
+						fontSize: $u.addUnit(titleSize)
+					}">{{item.title}}</text>
+					<view class="u-dropdown__menu__item__arrow" :class="{
+						'u-dropdown__menu__item__arrow--rotate': index === current
+					}">
+						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-dropdown__content" :style="[contentStyle, {
+			transition: `opacity ${duration / 1000}s linear`,
+			top: $u.addUnit(height),
+			height: contentHeight + 'px'
+		}]"
+		 @tap="maskClick" @touchmove.stop.prevent>
+			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
+				<slot></slot>
+			</view>
+			<view class="u-dropdown__content__mask"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * dropdown 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+	 * @event {Function} open 下拉菜单被打开时触发
+	 * @event {Function} close 下拉菜单被关闭时触发
+	 * @example <u-dropdown></u-dropdown>
+	 */
+	export default {
+		name: 'u-dropdown',
+		props: {
+			// 菜单标题和选项的激活态颜色
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 菜单标题和选项的未激活态颜色
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 点击遮罩是否关闭菜单
+			closeOnClickMask: {
+				type: Boolean,
+				default: true
+			},
+			// 点击当前激活项标题是否关闭菜单
+			closeOnClickSelf: {
+				type: Boolean,
+				default: true
+			},
+			// 过渡时间
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 标题菜单的高度，单位任意，数值默认为rpx单位
+			height: {
+				type: [Number, String],
+				default: 80
+			},
+			// 是否显示下边框
+			borderBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [Number, String],
+				default: 28
+			},
+			// 下拉出来的内容部分的圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			// 菜单右侧的icon图标
+			menuIcon: {
+				type: String,
+				default: 'arrow-down'
+			},
+			// 菜单右侧图标的大小
+			menuIconSize: {
+				type: [Number, String],
+				default: 26
+			}
+		},
+		data() {
+			return {
+				showDropdown: true, // 是否打开下来菜单,
+				menuList: [], // 显示的菜单
+				active: false, // 下拉菜单的状态
+				// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+				// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+				current: 99999,
+				// 外层内容的样式，初始时处于底层，且透明
+				contentStyle: {
+					zIndex: -1,
+					opacity: 0
+				},
+				// 让某个菜单保持高亮的状态
+				highlightIndex: 99999,
+				contentHeight: 0
+			}
+		},
+		computed: {
+			// 下拉出来部分的样式
+			popupStyle() {
+				let style = {};
+				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+				style.transform = `translateY(${this.active ? 0 : '-100%'})`
+				style['transition-duration'] = this.duration / 1000 + 's';
+				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
+				return style;
+			}
+		},
+		created() {
+			// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		mounted() {
+			this.getContentHeight();
+		},
+		methods: {
+			init() {
+				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+				// 以保证数据的正确性
+				this.menuList = [];
+				this.children.map(child => {
+					child.init();
+				})
+			},
+			// 点击菜单
+			menuClick(index) {
+				// 判断是否被禁用
+				if (this.menuList[index].disabled) return;
+				// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+				if (index === this.current && this.closeOnClickSelf) {
+					this.close();
+					// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+					setTimeout(() => {
+						this.children[index].active = false;
+					}, this.duration)
+					return;
+				}
+				this.open(index);
+			},
+			// 打开下拉菜单
+			open(index) {
+				// 重置高亮索引，否则会造成多个菜单同时高亮
+				// this.highlightIndex = 9999;
+				// 展开时，设置下拉内容的样式
+				this.contentStyle = {
+					zIndex: 11,
+				}
+				// 标记展开状态以及当前展开项的索引
+				this.active = true;
+				this.current = index;
+				// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+				// 之所以不是因display: none，是因为nvue没有display这个属性
+				this.children.map((val, idx) => {
+					val.active = index == idx ? true : false;
+				})
+				this.$emit('open', this.current);
+			},
+			// 设置下拉菜单处于收起状态
+			close() {
+				this.$emit('close', this.current);
+				// 设置为收起状态，同时current归位，设置为空字符串
+				this.active = false;
+				this.current = 99999;
+				// 下拉内容的样式进行调整，不透明度设置为0
+				this.contentStyle = {
+					zIndex: -1,
+					opacity: 0
+				}
+			},
+			// 点击遮罩
+			maskClick() {
+				// 如果不允许点击遮罩，直接返回
+				if (!this.closeOnClickMask) return;
+				this.close();
+			},
+			// 外部手动设置某个菜单高亮
+			highlight(index = undefined) {
+				this.highlightIndex = index !== undefined ? index : 99999;
+			},
+			// 获取下拉菜单内容的高度
+			getContentHeight() {
+				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+				// this.$u.sys()为uView封装的获取设备信息的方法
+				let windowHeight = this.$u.sys().windowHeight;
+				this.$uGetRect('.u-dropdown__menu').then(res => {
+					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+					this.contentHeight = windowHeight - res.bottom;
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-dropdown {
+		flex: 1;
+		width: 100%;
+		position: relative;
+
+		&__menu {
+			@include vue-flex;
+			position: relative;
+			z-index: 11;
+			height: 80rpx;
+
+			&__item {
+				flex: 1;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+
+				&__text {
+					font-size: 28rpx;
+					color: $u-content-color;
+				}
+
+				&__arrow {
+					margin-left: 6rpx;
+					transition: transform .3s;
+					align-items: center;
+					@include vue-flex;
+
+					&--rotate {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		&__content {
+			position: absolute;
+			z-index: 8;
+			width: 100%;
+			left: 0px;
+			bottom: 0;
+			overflow: hidden;
+			
+
+			&__mask {
+				position: absolute;
+				z-index: 9;
+				background: rgba(0, 0, 0, .3);
+				width: 100%;
+				left: 0;
+				top: 0;
+				bottom: 0;
+			}
+
+			&__popup {
+				position: relative;
+				z-index: 10;
+				transition: all 0.3s;
+				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
+			}
+		}
+
+	}
+</style>

uview-ui/components/u-empty/u-empty.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="u-empty" v-if="show" :style="{
+		marginTop: marginTop + 'rpx'
+	}">
+		<u-icon
+			:name="src ? src : 'empty-' + mode"
+			:custom-style="iconStyle"
+			:label="text ? text : icons[mode]"
+			label-pos="bottom"
+			:label-color="color"
+			:label-size="fontSize"
+			:size="iconSize"
+			:color="iconColor"
+			margin-top="14"
+		></u-icon>
+		<view class="u-slot-wrap">
+			<slot name="bottom"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * empty 内容为空
+	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+	 * @tutorial https://www.uviewui.com/components/empty.html
+	 * @property {String} color 文字颜色（默认#c0c4cc）
+	 * @property {String} text 文字提示（默认“无内容”）
+	 * @property {String} src 自定义图标路径，如定义，mode参数会失效
+	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+	 * @property {String} mode 内置的图标，见官网说明（默认data）
+	 * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
+	 * @property {String} img-height 图标的高度，单位rpx（默认auto）
+	 * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
+	 * @property {Boolean} show 是否显示组件（默认true）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+	 */
+	export default {
+		name: "u-empty",
+		props: {
+			// 图标路径
+			src: {
+				type: String,
+				default: ''
+			},
+			// 提示文字
+			text: {
+				type: String,
+				default: ''
+			},
+			// 文字颜色
+			color: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的颜色
+			iconColor: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的大小
+			iconSize: {
+				type: [String, Number],
+				default: 120
+			},
+			// 文字大小，单位rpx
+			fontSize: {
+				type: [String, Number],
+				default: 26
+			},
+			// 选择预置的图标类型
+			mode: {
+				type: String,
+				default: 'data'
+			},
+			//  图标宽度，单位rpx
+			imgWidth: {
+				type: [String, Number],
+				default: 120
+			},
+			// 图标高度，单位rpx
+			imgHeight: {
+				type: [String, Number],
+				default: 'auto'
+			},
+			// 是否显示组件
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 组件距离上一个元素之间的距离
+			marginTop: {
+				type: [String, Number],
+				default: 0
+			},
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				icons: {
+					car: '购物车为空',
+					page: '页面不存在',
+					search: '没有搜索结果',
+					address: '没有收货地址',
+					wifi: '没有WiFi',
+					order: '订单为空',
+					coupon: '没有优惠券',
+					favor: '暂无收藏',
+					permission: '无权限',
+					history: '无历史记录',
+					news: '无新闻列表',
+					message: '消息列表为空',
+					list: '列表为空',
+					data: '数据为空'
+				},
+				// icons: [{
+				// 	icon: 'car',
+				// 	text: '购物车为空'
+				// },{
+				// 	icon: 'page',
+				// 	text: '页面不存在'
+				// },{
+				// 	icon: 'search',
+				// 	text: '没有搜索结果'
+				// },{
+				// 	icon: 'address',
+				// 	text: '没有收货地址'
+				// },{
+				// 	icon: 'wifi',
+				// 	text: '没有WiFi'
+				// },{
+				// 	icon: 'order',
+				// 	text: '订单为空'
+				// },{
+				// 	icon: 'coupon',
+				// 	text: '没有优惠券'
+				// },{
+				// 	icon: 'favor',
+				// 	text: '暂无收藏'
+				// },{
+				// 	icon: 'permission',
+				// 	text: '无权限'
+				// },{
+				// 	icon: 'history',
+				// 	text: '无历史记录'
+				// },{
+				// 	icon: 'news',
+				// 	text: '无新闻列表'
+				// },{
+				// 	icon: 'message',
+				// 	text: '消息列表为空'
+				// },{
+				// 	icon: 'list',
+				// 	text: '列表为空'
+				// },{
+				// 	icon: 'data',
+				// 	text: '数据为空'
+				// }],
+
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-empty {
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.u-image {
+		margin-bottom: 20rpx;
+	}
+
+	.u-slot-wrap {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+</style>

uview-ui/components/u-field/u-field.vue

@@ -0,0 +1,384 @@
+<template>
+	<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
+		<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
+			<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
+				justifyContent: justifyContent, 
+				flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
+			}">
+				<view class="u-icon-wrap" v-if="icon">
+					<u-icon size="32" :custom-style="iconStyle" :name="icon" :color="iconColor" class="u-icon"></u-icon>
+				</view>
+				<slot name="icon"></slot>
+				<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
+			</view>
+			<view class="fild-body">
+				<view class="u-flex-1 u-flex" :style="[inputWrapStyle]">
+					<textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :value="value"
+					 :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength"
+					 :focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
+					 @tap="fieldClick" />
+					<input
+						v-else
+						:style="[fieldStyle]"
+						:type="type"
+						class="u-flex-1 u-field__input-wrap"
+						:value="value"
+						:password="password || this.type === 'password'"
+						:placeholder="placeholder"
+						:placeholderStyle="placeholderStyle"
+						:disabled="disabled"
+						:maxlength="inputMaxlength"
+						:focus="focus"
+						:confirmType="confirmType"
+						@focus="onFocus"
+						@blur="onBlur"
+						@input="onInput"
+						@confirm="onConfirm"
+						@tap="fieldClick"
+					/>
+				</view>
+				<u-icon :size="clearSize" v-if="clearable && value != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="onClear"/>
+				<view class="u-button-wrap"><slot name="right" /></view>
+				<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
+			</view>
+		</view>
+		<view v-if="errorMessage !== false && errorMessage != ''" class="u-error-message" :style="{
+			paddingLeft: labelWidth + 'rpx'
+		}">{{ errorMessage }}</view>
+	</view>
+</template>
+
+<script>
+/**
+ * field 输入框
+ * @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。
+ * @tutorial https://www.uviewui.com/components/field.html
+ * @property {String} type 输入框的类型（默认text）
+ * @property {String} icon label左边的图标，限uView的图标名称
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
+ * @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
+ * @property {String} label 输入框左边的文字提示
+ * @property {Boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false）
+ * @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
+ * @property {Number String} label-width label的宽度，单位rpx（默认130）
+ * @property {String} label-align label的文字对齐方式（默认left）
+ * @property {Object} field-style 自定义输入框的样式，对象形式
+ * @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
+ * @property {String} input-align 输入框内容对齐方式（默认left）
+ * @property {Boolean} border-bottom 是否显示field的下边框（默认true）
+ * @property {Boolean} border-top 是否显示field的上边框（默认false）
+ * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
+ * @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String} placeholder 输入框的提示文字
+ * @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {Boolean} focus 是否自动获得焦点（默认false）
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
+ * @property {Boolean} disabled 是否不可输入（默认false）
+ * @property {Number String} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+ * @event {Function} input 输入框内容发生变化时触发
+ * @event {Function} focus 输入框获得焦点时触发
+ * @event {Function} blur 输入框失去焦点时触发
+ * @event {Function} confirm 点击完成按钮时触发
+ * @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发
+ * @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明
+ * @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field>
+ */
+export default {
+	name:"u-field",
+	props: {
+		icon: String,
+		rightIcon: String,
+		// arrowDirection: {
+		// 	type: String,
+		// 	default: 'right'
+		// },
+		required: Boolean,
+		label: String,
+		password: Boolean,
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 左边标题的宽度单位rpx
+		labelWidth: {
+			type: [Number, String],
+			default: 130
+		},
+		// 对齐方式，left|center|right
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		iconColor: {
+			type: String,
+			default: '#606266'
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		placeholder: String,
+		placeholderStyle: String,
+		focus: Boolean,
+		fixed: Boolean,
+		value: [Number, String],
+		type: {
+			type: String,
+			default: 'text'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		// lable的位置，可选为 left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// 输入框的自定义样式
+		fieldStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 清除按钮的大小
+		clearSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// lable左边的图标样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			focused: false,
+			itemIndex: 0,
+		};
+	},
+	computed: {
+		inputWrapStyle() {
+			let style = {};
+			style.textAlign = this.inputAlign;
+			// 判断lable的位置，如果是left的话，让input左边两边有间隙
+			if(this.labelPosition == 'left') {
+				style.margin = `0 8rpx`;
+			} else {
+				// 如果lable是top的，input的左边就没必要有间隙了
+				style.marginRight = `8rpx`;
+			}
+			return style;
+		},
+		rightIconStyle() {
+			let style = {};
+			if (this.arrowDirection == 'top') style.transform = 'roate(-90deg)';
+			if (this.arrowDirection == 'bottom') style.transform = 'roate(90deg)';
+			else style.transform = 'roate(0deg)';
+			return style;
+		},
+		labelStyle() {
+			let style = {};
+			if(this.labelAlign == 'left') style.justifyContent = 'flext-start';
+			if(this.labelAlign == 'center') style.justifyContent = 'center';
+			if(this.labelAlign == 'right') style.justifyContent = 'flext-end';
+			return style;
+		},
+		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+		justifyContent() {
+			if(this.labelAlign == 'left') return 'flex-start';
+			if(this.labelAlign == 'center') return 'center';
+			if(this.labelAlign == 'right') return 'flex-end';
+		},
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength)
+		},
+		// label的位置
+		fieldInnerStyle() {
+			let style = {};
+			if(this.labelPosition == 'left') {
+				style.flexDirection = 'row';
+			} else {
+				style.flexDirection = 'column';
+			}
+			
+			return style;
+		}
+	},
+	methods: {
+		onInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if(this.trim) value = this.$u.trim(value);
+			this.$emit('input', value);
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit('focus', event);
+		},
+		onBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			this.$emit('blur', event);
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.$emit('input', '');
+		},
+		rightIconClick() {
+			this.$emit('right-icon-click');
+			this.$emit('click');
+		},
+		fieldClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-field {
+	font-size: 28rpx;
+	padding: 20rpx 28rpx;
+	text-align: left;
+	position: relative;
+	color: $u-main-color;
+}
+
+.u-field-inner {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-textarea-inner {
+	align-items: flex-start;
+}
+
+.u-textarea-class {
+	min-height: 96rpx;
+	width: auto;
+	font-size: 28rpx;
+}
+
+.fild-body {
+	@include vue-flex;
+	flex: 1;
+	align-items: center;
+}
+
+.u-arror-right {
+	margin-left: 8rpx;
+}
+
+.u-label-text {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+
+.u-label-left-gap {
+	margin-left: 6rpx;
+}
+
+.u-label-postion-top {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.u-label {
+	width: 130rpx;
+	flex: 1 1 130rpx;
+	text-align: left;
+	position: relative;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-required::before {
+	content: '*';
+	position: absolute;
+	left: -16rpx;
+	font-size: 14px;
+	color: $u-type-error;
+	height: 9px;
+	line-height: 1;
+}
+
+.u-field__input-wrap {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	height: 48rpx;
+	flex: 1;
+	width: auto;
+}
+
+.u-clear-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-error-message {
+	color: $u-type-error;
+	font-size: 26rpx;
+	text-align: left;
+}
+
+.placeholder-style {
+	color: rgb(150, 151, 153);
+}
+
+.u-input-class {
+	font-size: 28rpx;
+}
+
+.u-button-wrap {
+	margin-left: 8rpx;
+}
+</style>

uview-ui/components/u-form-item/u-form-item.vue

@@ -0,0 +1,431 @@
+<template>
+	<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
+		<view class="u-form-item__body" :style="{
+			flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
+		}">
+			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
+			<view class="u-form-item--left" :style="{
+				width: uLabelWidth,
+				flex: `0 0 ${uLabelWidth}`,
+				marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
+			}">
+				<!-- 为了块对齐 -->
+				<view class="u-form-item--left__content" v-if="required || leftIcon || label">
+					<!-- nvue不支持伪元素before -->
+					<text v-if="required" class="u-form-item--left__content--required">*</text>
+					<view class="u-form-item--left__content__icon" v-if="leftIcon">
+						<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
+					</view>
+					<view class="u-form-item--left__content__label" :style="[elLabelStyle, {
+						'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
+					}]">
+						{{label}}
+					</view>
+				</view>
+			</view>
+			<view class="u-form-item--right u-flex">
+				<view class="u-form-item--right__content">
+					<view class="u-form-item--right__content__slot ">
+						<slot />
+					</view>
+					<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
+						<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
+						<slot name="right" />
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
+			paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
+		}">{{validateMessage}}</view>
+	</view>
+</template>
+
+<script>
+	import Emitter from '../../libs/util/emitter.js';
+	import schema from '../../libs/util/async-validator';
+	// 去除警告信息
+	schema.warning = function() {};
+
+	/**
+	 * form-item 表单item
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {String} label 左侧提示文字
+	 * @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {Object} left-icon-style 左侧图标的样式，对象形式
+	 * @property {Object} right-icon-style 右侧图标的样式，对象形式
+	 * @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false)
+	 * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
+	 */
+
+	export default {
+		name: 'u-form-item',
+		mixins: [Emitter],
+		inject: {
+			uForm: {
+				default () {
+					return null
+				}
+			}
+		},
+		props: {
+			// input的label提示语
+			label: {
+				type: String,
+				default: ''
+			},
+			// 绑定的值
+			prop: {
+				type: String,
+				default: ''
+			},
+			// 是否显示表单域的下划线边框
+			borderBottom: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// label的位置，left-左边，top-上边
+			labelPosition: {
+				type: String,
+				default: ''
+			},
+			// label的宽度，单位rpx
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// lable的样式，对象形式
+			labelStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// lable字体的对齐方式
+			labelAlign: {
+				type: String,
+				default: ''
+			},
+			// 右侧图标
+			rightIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标
+			leftIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标的样式
+			leftIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 左侧图标的样式
+			rightIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
+			required: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				initialValue: '', // 存储的默认值
+				// isRequired: false, // 是否必填，由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				validateState: '', // 是否校验成功
+				validateMessage: '', // 校验失败的提示语
+				// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+				errorType: ['message'],
+				fieldValue: '', // 获取当前子组件input的输入的值
+				// 父组件的参数，在computed计算中，无法得知this.parent发生变化，故将父组件的参数值，放到data中
+				parentData: {
+					borderBottom: true,
+					labelWidth: 90,
+					labelPosition: 'left',
+					labelStyle: {},
+					labelAlign: 'left',
+				}
+			};
+		},
+		watch: {
+			validateState(val) {
+				this.broadcastInputError();
+			},
+			// 监听u-form组件的errorType的变化
+			"uForm.errorType"(val) {
+				this.errorType = val;
+				this.broadcastInputError();
+			},
+		},
+		computed: {
+			// 计算后的label宽度，由于需要多个判断，故放到computed中
+			uLabelWidth() {
+				// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
+				return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this
+					.elLabelWidth)) : '100%';
+			},
+			showError() {
+				return type => {
+					// 如果errorType数组中含有none，或者toast提示类型
+					if (this.errorType.indexOf('none') >= 0) return false;
+					else if (this.errorType.indexOf(type) >= 0) return true;
+					else return false;
+				}
+			},
+			// label的宽度
+			elLabelWidth() {
+				// label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值
+				return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData
+					.labelWidth :
+					90);
+			},
+			// label的样式
+			elLabelStyle() {
+				return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle :
+					{});
+			},
+			// label的位置，左侧或者上方
+			elLabelPosition() {
+				return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition :
+					'left');
+			},
+			// label的对齐方式
+			elLabelAlign() {
+				return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left');
+			},
+			// label的下划线
+			elBorderBottom() {
+				// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值
+				return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom :
+					true;
+			}
+		},
+		methods: {
+			broadcastInputError() {
+				// 子组件发出事件，第三个参数为true或者false，true代表有错误
+				this.broadcast('u-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'));
+			},
+			// 判断是否需要required校验
+			setRules() {
+				let that = this;
+				// 由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				// 从父组件u-form拿到当前u-form-item需要验证 的规则
+				// let rules = this.getRules();
+				// if (rules.length) {
+				// 	this.isRequired = rules.some(rule => {
+				// 		// 如果有必填项，就返回，没有的话，就是undefined
+				// 		return rule.required;
+				// 	});
+				// }
+
+				// blur事件
+				this.$on('on-form-blur', that.onFieldBlur);
+				// change事件
+				this.$on('on-form-change', that.onFieldChange);
+			},
+
+			// 从u-form的rules属性中，取出当前u-form-item的校验规则
+			getRules() {
+				// 父组件的所有规则
+				let rules = this.parent.rules;
+				rules = rules ? rules[this.prop] : [];
+				// 保证返回的是一个数组形式
+				return [].concat(rules || []);
+			},
+
+			// blur事件时进行表单校验
+			onFieldBlur() {
+				this.validation('blur');
+			},
+
+			// change事件进行表单校验
+			onFieldChange() {
+				this.validation('change');
+			},
+
+			// 过滤出符合要求的rule规则
+			getFilteredRule(triggerType = '') {
+				let rules = this.getRules();
+				// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
+				if (!triggerType) return rules;
+				// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
+				// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
+				// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
+				return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1);
+			},
+
+			// 校验数据
+			validation(trigger, callback = () => {}) {
+				// 检验之间，先获取需要校验的值
+				this.fieldValue = this.parent.model[this.prop];
+				// blur和change是否有当前方式的校验规则
+				let rules = this.getFilteredRule(trigger);
+				// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为
+				// 对count变量的统计错误而无法进入上一层的回调
+				if (!rules || rules.length === 0) {
+					return callback('');
+				}
+				// 设置当前的装填，标识为校验中
+				this.validateState = 'validating';
+				// 调用async-validator的方法
+				let validator = new schema({
+					[this.prop]: rules
+				});
+				validator.validate({
+					[this.prop]: this.fieldValue
+				}, {
+					firstFields: true
+				}, (errors, fields) => {
+					// 记录状态和报错信息
+					this.validateState = !errors ? 'success' : 'error';
+					this.validateMessage = errors ? errors[0].message : '';
+					// 调用回调方法
+					callback(this.validateMessage);
+				});
+			},
+
+			// 清空当前的u-form-item
+			resetField() {
+				this.parent.model[this.prop] = this.initialValue;
+				// 设置为`success`状态，只是为了清空错误标记
+				this.validateState = 'success';
+			}
+		},
+
+		// 组件创建完成时，将当前实例保存到u-form中
+		mounted() {
+			// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+			this.parent = this.$u.$parent.call(this, 'u-form');
+			if (this.parent) {
+				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+				Object.keys(this.parentData).map(key => {
+					this.parentData[key] = this.parent[key];
+				});
+				// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验
+				if (this.prop) {
+					// 将本实例添加到父组件中
+					this.parent.fields.push(this);
+					this.errorType = this.parent.errorType;
+					// 设置初始值
+					this.initialValue = this.fieldValue;
+					// 添加表单校验，这里必须要写在$nextTick中，因为u-form的rules是通过ref手动传入的
+					// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给u-form，导致规则为空
+					this.$nextTick(() => {
+						this.setRules();
+					})
+				}
+			}
+		},
+
+		// 组件销毁前，将实例从u-form的缓存中移除
+		beforeDestroy() {
+			// 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
+			if (this.parent && this.prop) {
+				this.parent.fields.map((item, index) => {
+					if (item === this) this.parent.fields.splice(index, 1);
+				})
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-form-item {
+		@include vue-flex;
+		// align-items: flex-start;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+		color: $u-main-color;
+		box-sizing: border-box;
+		line-height: $u-form-item-height;
+		flex-direction: column;
+
+		&__border-bottom--error:after {
+			border-color: $u-type-error;
+		}
+
+		&__body {
+			@include vue-flex;
+		}
+
+		&--left {
+			@include vue-flex;
+			align-items: center;
+
+			&__content {
+				position: relative;
+				@include vue-flex;
+				align-items: center;
+				padding-right: 10rpx;
+				flex: 1;
+
+				&__icon {
+					margin-right: 8rpx;
+				}
+
+				&--required {
+					position: absolute;
+					left: -16rpx;
+					vertical-align: middle;
+					color: $u-type-error;
+					padding-top: 6rpx;
+				}
+
+				&__label {
+					@include vue-flex;
+					align-items: center;
+					flex: 1;
+				}
+			}
+		}
+
+		&--right {
+			flex: 1;
+
+			&__content {
+				@include vue-flex;
+				align-items: center;
+				flex: 1;
+
+				&__slot {
+					flex: 1;
+					/* #ifndef MP */
+					@include vue-flex;
+					align-items: center;
+					/* #endif */
+				}
+
+				&__icon {
+					margin-left: 10rpx;
+					color: $u-light-color;
+					font-size: 30rpx;
+				}
+			}
+		}
+
+		&__message {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: $u-type-error;
+			margin-top: 12rpx;
+		}
+	}
+</style>

uview-ui/components/u-form/u-form.vue

@@ -0,0 +1,134 @@
+<template>
+	<view class="u-form"><slot /></view>
+</template>
+
+<script>
+	/**
+	 * form 表单
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {Object} model 表单数据对象
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {Object} rules 通过ref设置，见官网说明
+	 * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
+	 * @example <u-form :model="form" ref="uForm"></u-form>
+	 */
+
+export default {
+	name: 'u-form',
+	props: {
+		// 当前form的需要验证字段的集合
+		model: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 验证规则
+		// rules: {
+		// 	type: [Object, Function, Array],
+		// 	default() {
+		// 		return {};
+		// 	}
+		// },
+		// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+		// border-bottom-下边框呈现红色，none-无提示
+		errorType: {
+			type: Array,
+			default() {
+				return ['message', 'toast']
+			}
+		},
+		// 是否显示表单域的下划线边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// label的位置，left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// label的宽度，单位rpx
+		labelWidth: {
+			type: [String, Number],
+			default: 90
+		},
+		// lable字体的对齐方式
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		// lable的样式，对象形式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+	},
+	provide() {
+		return {
+			uForm: this
+		};
+	},
+	data() {
+		return {
+			rules: {}
+		};
+	},
+	created() {
+		// 存储当前form下的所有u-form-item的实例
+		// 不能定义在data中，否则微信小程序会造成循环引用而报错
+		this.fields = [];
+	},
+	methods: {
+		setRules(rules) {
+			this.rules = rules;
+		},
+		// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
+		resetFields() {
+			this.fields.map(field => {
+				field.resetField();
+			});
+		},
+		// 校验全部数据
+		validate(callback) {
+			return new Promise(resolve => {
+				// 对所有的u-form-item进行校验
+				let valid = true; // 默认通过
+				let count = 0; // 用于标记是否检查完毕
+				let errorArr = []; // 存放错误信息
+				this.fields.map(field => {
+					// 调用每一个u-form-item实例的validation的校验方法
+					field.validation('', error => {
+						// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
+						if (error) {
+							valid = false;
+							errorArr.push(error);
+						}
+						// 当历遍了所有的u-form-item时，调用promise的then方法
+						if (++count === this.fields.length) {
+							resolve(valid); // 进入promise的then方法
+							// 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息
+							if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
+								this.$u.toast(errorArr[0]);
+							}
+							// 调用回调方法
+							if (typeof callback == 'function') callback(valid);
+						}
+					});
+				});
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-full-screen/u-full-screen.vue

@@ -0,0 +1,52 @@
+<template>
+	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
+		<view class="u-update-content">
+			<rich-text :nodes="content"></rich-text>
+		</view>
+	</u-modal>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				content: `
+					1. 修复badge组件的size参数无效问题<br>
+					2. 新增Modal模态框组件<br>
+					3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
+					4. 修复键盘组件在微信小程序上遮罩无效的问题
+				`,
+			}
+		},
+		onReady() {
+			this.show = true;
+		},
+		methods: {
+			cancel() {
+				this.closeModal();
+			},
+			confirm() {
+				this.closeModal();
+			},
+			closeModal() {
+				uni.navigateBack();
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-full-content {
+		background-color: #00C777;
+	}
+	
+	.u-update-content {
+		font-size: 26rpx;
+		color: $u-content-color;
+		line-height: 1.7;
+		padding: 30rpx;
+	}
+</style>

uview-ui/components/u-gap/u-gap.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="u-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://www.uviewui.com/components/gap.html
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ */
+export default {
+	name: "u-gap",
+	props: {
+		bgColor: {
+			type: String,
+			default: 'transparent ' // 背景透明
+		},
+		// 高度
+		height: {
+			type: [String, Number],
+			default: 30
+		},
+		// 与上一个组件的距离
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 与下一个组件的距离
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+	},
+	computed: {
+		gapStyle() {
+			return {
+				backgroundColor: this.bgColor,
+				height: this.height + 'rpx',
+				marginTop: this.marginTop + 'rpx',
+				marginBottom: this.marginBottom + 'rpx'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-grid-item/u-grid-item.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="u-grid-item" :hover-class="parentData.hoverClass"
+	 :hover-stay-time="200" @tap="click" :style="{
+			background: bgColor,
+			width: width,
+		}">
+		<view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * gridItem 提示
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
+	 * @property {String Number} index 点击宫格时，返回的值
+	 * @property {Object} custom-style 自定义样式，对象形式
+	 * @event {Function} click 点击宫格触发
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+		props: {
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 点击时返回的index
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 自定义样式，对象形式
+			customStyle: {
+				type: Object,
+				default() {
+					return {
+						padding: '30rpx 0'
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					hoverClass: '', // 按下去的时候，是否显示背景灰色
+					col: 3, // 父组件划分的宫格数
+					border: true, // 是否显示边框，根据父组件决定
+				}
+			};
+		},
+		created() {
+			// 父组件的实例
+			this.updateParentData();
+			// this.parent在updateParentData()中定义
+			this.parent.children.push(this);
+		},
+		computed: {
+			// 每个grid-item的宽度
+			width() {
+				return 100 / Number(this.parentData.col) + '%';
+			},
+		},
+		methods: {
+			// 获取父组件的参数
+			updateParentData() {
+				// 此方法写在mixin中
+				this.getParentData('u-grid');
+			},
+			click() {
+				this.$emit('click', this.index);
+				this.parent && this.parent.click(this.index);
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-grid-item {
+		box-sizing: border-box;
+		background: #fff;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+	}
+
+	.u-grid-item-hover {
+		background: #f7f7f7 !important;
+	}
+
+	.u-grid-marker-box {
+		position: absolute;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		line-height: 0;
+	}
+
+	.u-grid-marker-wrap {
+		position: absolute;
+	}
+
+	.u-grid-item-box {
+		padding: 30rpx 0;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		flex: 1;
+		width: 100%;
+		height: 100%;
+	}
+</style>

uview-ui/components/u-grid/u-grid.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
+</template>
+
+<script>
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://www.uviewui.com/components/grid.html
+ * @property {String Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+export default {
+	name: 'u-grid',
+	props: {
+		// 分成几列
+		col: {
+			type: [Number, String],
+			default: 3
+		},
+		// 是否显示边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 宫格按压时的样式类，"none"为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-hover-class'
+		}
+	},
+	data() {
+		return {
+			index: 0,
+		}
+	},
+	watch: {
+		// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+		parentData() {
+			if(this.children.length) {
+				this.children.map(child => {
+					// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+					typeof(child.updateParentData) == 'function' && child.updateParentData();
+				})
+			}
+		},
+	},
+	created() {
+		// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+		this.children = [];
+	},
+	computed: {
+		// 计算父组件的值是否发生变化
+		parentData() {
+			return [this.hoverClass, this.col, this.size, this.border];
+		},
+		// 宫格对齐方式
+		gridStyle() {
+			let style = {};
+			switch(this.align) {
+				case 'left':
+					style.justifyContent = 'flex-start';
+					break;
+				case 'center':
+					style.justifyContent = 'center';
+					break;
+				case 'right':
+					style.justifyContent = 'flex-end';
+					break;
+				default: style.justifyContent = 'flex-start';
+			};
+			return style;
+		}
+	},
+	methods: {
+		click(index) {
+			this.$emit('click', index);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-grid {
+	width: 100%;
+	/* #ifdef MP */
+	position: relative;
+	box-sizing: border-box;
+	overflow: hidden;
+	/* #endif */
+	
+	/* #ifndef MP */
+	@include vue-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	/* #endif */
+}
+</style>

uview-ui/components/u-icon/u-icon.vue

@@ -0,0 +1,336 @@
+<template>
+	<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
+		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
+		<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
+			  @touchstart="touchstart">
+			<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
+				  class="u-icon__decimal">
+			</text>
+		</text>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<text v-if="label !== ''" class="u-icon__label" :style="{
+			color: labelColor,
+			fontSize: $u.addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
+			marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
+			marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
+			marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
+		}">{{ label }}
+		</text>
+	</view>
+</template>
+
+<script>
+/**
+ * icon 图标
+ * @description 基于字体的图标集，包含了大多数常见场景的图标。
+ * @tutorial https://www.uviewui.com/components/icon.html
+ * @property {String} name 图标名称，见示例图标集
+ * @property {String} color 图标颜色（默认inherit）
+ * @property {String | Number} size 图标字体大小，单位rpx（默认32）
+ * @property {String | Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String} label 图标右侧的label文字（默认28）
+ * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} label-color label字体颜色（默认#606266）
+ * @property {Object} custom-style icon的样式，对象形式
+ * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
+ * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
+ * @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
+ * @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
+ * @property {String} width 显示图片小图标时的宽度
+ * @property {String} height 显示图片小图标时的高度
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {Boolean} show-decimal-icon 是否为DecimalIcon
+ * @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
+ * @property {String | Number} percent 显示的百分比，仅Decimal时有效
+ * @event {Function} click 点击图标时触发
+ * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ */
+export default {
+	name: 'u-icon',
+	props: {
+		// 图标类名
+		name: {
+			type: String,
+			default: ''
+		},
+		// 图标颜色，可接受主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 字体大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: 'inherit'
+		},
+		// 是否显示粗体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+		index: {
+			type: [Number, String],
+			default: ''
+		},
+		// 触摸图标时的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uicon'
+		},
+		// 图标右边或者下面的文字
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// label的位置，只能右边或者下边
+		labelPos: {
+			type: String,
+			default: 'right'
+		},
+		// label的大小
+		labelSize: {
+			type: [String, Number],
+			default: '28'
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: '#606266'
+		},
+		// label与图标的距离(横向排列)
+		marginLeft: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginTop: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginRight: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginBottom: {
+			type: [String, Number],
+			default: '6'
+		},
+		// 图片的mode
+		imgMode: {
+			type: String,
+			default: 'widthFix'
+		},
+		// 自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 用于显示图片小图标时，图片的宽度
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于显示图片小图标时，图片的高度
+		height: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于解决某些情况下，让图标垂直居中的用途
+		top: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否为DecimalIcon
+		showDecimalIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色，可接受主题色，仅Decimal时有效
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 显示的百分比，仅Decimal时有效
+		percent: {
+			type: [Number, String],
+			default: '50'
+		}
+	},
+	computed: {
+		customClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
+			// 主题色，通过类配置
+			if (this.showDecimalIcon && this.inactiveColor && this.$u.config.type.includes(this.inactiveColor)) {
+				classes.push('u-icon__icon--' + this.inactiveColor)
+			} else if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
+		},
+		iconStyle() {
+			let style = {}
+			style = {
+				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top)
+			}
+			// 非主题色值时，才当作颜色值
+			if (this.showDecimalIcon && this.inactiveColor && !this.$u.config.type.includes(this.inactiveColor)) {
+				style.color = this.inactiveColor
+			} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+
+			return style
+		},
+		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+		isImg() {
+			return this.name.indexOf('/') !== -1
+		},
+		imgStyle() {
+			let style = {}
+			// 如果设置width和height属性，则优先使用，否则使用size属性
+			style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size)
+			style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
+			return style
+		},
+		decimalIconStyle() {
+			let style = {}
+			style = {
+				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top),
+				width: this.percent + '%'
+			}
+			// 非主题色值时，才当作颜色值
+			if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+			return style
+		},
+		decimalIconClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
+			// 主题色，通过类配置
+			if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			else classes.push('u-icon__icon--primary')
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index)
+		},
+		touchstart() {
+			this.$emit('touchstart', this.index)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+@import '../../iconfont.css';
+
+.u-icon {
+	display: inline-flex;
+	align-items: center;
+
+	&--left {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+
+	&--right {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	&--top {
+		flex-direction: column-reverse;
+		justify-content: center;
+	}
+
+	&--bottom {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	&__icon {
+		position: relative;
+
+		&--primary {
+			color: $u-type-primary;
+		}
+
+		&--success {
+			color: $u-type-success;
+		}
+
+		&--error {
+			color: $u-type-error;
+		}
+
+		&--warning {
+			color: $u-type-warning;
+		}
+
+		&--info {
+			color: $u-type-info;
+		}
+	}
+
+	&__decimal {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		overflow: hidden;
+	}
+
+	&__img {
+		height: auto;
+		will-change: transform;
+	}
+
+	&__label {
+		line-height: 1;
+	}
+}
+</style>

uview-ui/components/u-image/u-image.vue

@@ -0,0 +1,268 @@
+<template>
+	<view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+		<image
+			v-if="!isError"
+			:src="src"
+			:mode="mode"
+			@error="onErrorHandler"
+			@load="onLoadHandler"
+			:lazy-load="lazyLoad"
+			class="u-image__image"
+			:show-menu-by-longpress="showMenuByLongpress"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		></image>
+		<view
+			v-if="showLoading && loading"
+			class="u-image__loading"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
+				backgroundColor: this.bgColor
+			}"
+		>
+			<slot v-if="$slots.loading" name="loading" />
+			<u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
+		</view>
+		<view
+			v-if="showError && isError && !loading"
+			class="u-image__error"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		>
+			<slot v-if="$slots.error" name="error" />
+			<u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Image 图片
+ * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @tutorial https://uviewui.com/components/image.html
+ * @property {String} src 图片地址
+ * @property {String} mode 裁剪模式，见官网说明
+ * @property {String | Number} width 宽度，单位任意，如果为数值，则为rpx单位（默认100%）
+ * @property {String | Number} height 高度，单位任意，如果为数值，则为rpx单位（默认 auto）
+ * @property {String} shape 图片形状，circle-圆形，square-方形（默认square）
+ * @property {String | Number} border-radius 圆角值，单位任意，如果为数值，则为rpx单位（默认 0）
+ * @property {Boolean} lazy-load 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true）
+ * @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 false）
+ * @property {String} loading-icon 加载中的图标，或者小图片（默认 photo）
+ * @property {String} error-icon 加载失败的图标，或者小图片（默认 error-circle）
+ * @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot（默认 true）
+ * @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot（默认 true）
+ * @property {Boolean} fade 是否需要淡入效果（默认 true）
+ * @property {String Number} width 传入图片路径时图片的宽度
+ * @property {String Number} height 传入图片路径时图片的高度
+ * @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false）
+ * @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500）
+ * @event {Function} click 点击图片时触发
+ * @event {Function} error 图片加载失败时触发
+ * @event {Function} load 图片加载成功时触发
+ * @example <u-image width="100%" height="300rpx" :src="src"></u-image>
+ */
+export default {
+	name: 'u-image',
+	props: {
+		// 图片地址
+		src: {
+			type: String,
+			default: ''
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 宽度，单位任意
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		// 高度，单位任意
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		// 图片形状，circle-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 圆角，单位任意
+		borderRadius: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+		lazyLoad: {
+			type: Boolean,
+			default: true
+		},
+		// 开启长按图片显示识别微信小程序码菜单
+		showMenuByLongpress: {
+			type: Boolean,
+			default: true
+		},
+		// 加载中的图标，或者小图片
+		loadingIcon: {
+			type: String,
+			default: 'photo'
+		},
+		// 加载失败的图标，或者小图片
+		errorIcon: {
+			type: String,
+			default: 'error-circle'
+		},
+		// 是否显示加载中的图标或者自定义的slot
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示加载错误的图标或者自定义的slot
+		showError: {
+			type: Boolean,
+			default: true
+		},
+		// 是否需要淡入效果
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		// 只支持网络资源，只对微信小程序有效
+		webp: {
+			type: Boolean,
+			default: false
+		},
+		// 过渡时间，单位ms
+		duration: {
+			type: [String, Number],
+			default: 500
+		},
+		// 背景颜色，用于深色页面加载图片时，为了和背景色融合
+		bgColor: {
+			type: String,
+			default: '#f3f4f6'
+		}
+	},
+	data() {
+		return {
+			// 图片是否加载错误，如果是，则显示错误占位图
+			isError: false,
+			// 初始化组件时，默认为加载中状态
+			loading: true,
+			// 不透明度，为了实现淡入淡出的效果
+			opacity: 1,
+			// 过渡时间，因为props的值无法修改，故需要一个中间值
+			durationTime: this.duration,
+			// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+			backgroundStyle: {}
+		};
+	},
+	watch: {
+		src: {
+			immediate: true,
+			handler (n) {
+				if(!n) {
+					// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+					this.isError = true;
+					this.loading = false;
+				} else {
+					this.isError = false;
+					this.loading = true;
+				}
+			}
+		}
+	},
+	computed: {
+		wrapStyle() {
+			let style = {};
+			// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+			style.width = this.$u.addUnit(this.width);
+			style.height = this.$u.addUnit(this.height);
+			// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
+			style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
+			// 如果设置圆角，必须要有hidden，否则可能圆角无效
+			style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
+			if (this.fade) {
+				style.opacity = this.opacity;
+				style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
+			}
+			return style;
+		}
+	},
+	methods: {
+		// 点击图片
+		onClick() {
+			this.$emit('click');
+		},
+		// 图片加载失败
+		onErrorHandler(err) {
+			this.loading = false;
+			this.isError = true;
+			this.$emit('error', err);
+		},
+		// 图片加载完成，标记loading结束
+		onLoadHandler() {
+			this.loading = false;
+			this.isError = false;
+			this.$emit('load');
+			// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+			// 否则无需fade效果时，png图片依然能看到下方的背景色
+			if (!this.fade) return this.removeBgColor();
+			// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+			this.opacity = 0;
+			// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+			// 到图片展示的过程中的淡入效果
+			this.durationTime = 0;
+			// 延时50ms，否则在浏览器H5，过渡效果无效
+			setTimeout(() => {
+				this.durationTime = this.duration;
+				this.opacity = 1;
+				setTimeout(() => {
+					this.removeBgColor();
+				}, this.durationTime);
+			}, 50);
+		},
+		// 移除图片的背景色
+		removeBgColor() {
+			// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+			this.backgroundStyle = {
+				backgroundColor: 'transparent'
+			};
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-image {
+	position: relative;
+	transition: opacity 0.5s ease-in-out;
+
+	&__image {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__loading,
+	&__error {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		background-color: $u-bg-color;
+		color: $u-tips-color;
+		font-size: 46rpx;
+	}
+}
+</style>

uview-ui/components/u-index-anchor/u-index-anchor.vue

@@ -0,0 +1,89 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]">
+			<view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]">
+				<slot v-if="useSlot" />
+				<block v-else>
+					<text>{{ index }}</text>
+				</block>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * indexAnchor 索引列表锚点
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
+	 * @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效
+	 * @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}"
+	 * @event {Function} default 锚点位置显示内容，默认为索引字符
+	 * @example <u-index-anchor :index="item" />
+	 */
+	export default {
+		name: "u-index-anchor",
+		props: {
+			useSlot: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: String,
+				default: ''
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				active: false,
+				wrapperStyle: {},
+				anchorStyle: {}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = this.$u.$parent.call(this, 'u-index-list');
+			if(this.parent) {
+				this.parent.children.push(this);
+				this.parent.updateData();
+			}
+		},
+		computed: {
+			customAnchorStyle() {
+				return Object.assign(this.anchorStyle, this.customStyle);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-anchor {
+		box-sizing: border-box;
+		padding: 14rpx 24rpx;
+		color: #606266;
+		width: 100%;
+		font-weight: 500;
+		font-size: 28rpx;
+		line-height: 1.2;
+		background-color: rgb(245, 245, 245);
+	}
+
+	.u-index-anchor--active {
+		right: 0;
+		left: 0;
+		color: #2979ff;
+		background-color: #fff;
+	}
+</style>

uview-ui/components/u-index-list/u-index-list.vue

@@ -0,0 +1,315 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-bar">
+			<slot />
+			<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
+			 @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
+				<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
+				 :data-index="index">
+					{{ item }}
+				</view>
+			</view>
+			<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
+				zIndex: alertZIndex
+			}">
+				<text>{{indexList[touchmoveIndex]}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	var indexList = function() {
+		var indexList = [];
+		var charCodeOfA = 'A'.charCodeAt(0);
+		for (var i = 0; i < 26; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i));
+		}
+		return indexList;
+	};
+
+	/**
+	 * indexList 索引列表
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
+	 * @property {Array} index-list 索引字符列表，数组（默认A-Z）
+	 * @property {Number String} z-index 锚点吸顶时的层级（默认965）
+	 * @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
+	 * @property {Number String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
+	 * @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff）
+	 * @event {Function} select 选中右边索引字符时触发
+	 * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
+	 */
+	export default {
+		name: "u-index-list",
+		props: {
+			sticky: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			scrollTop: {
+				type: [Number, String],
+				default: 0,
+			},
+			offsetTop: {
+				type: [Number, String],
+				default: 0
+			},
+			indexList: {
+				type: Array,
+				default () {
+					return indexList()
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			}
+		},
+		created() {
+			// #ifdef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
+			// #endif
+			// #ifndef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
+			// #endif
+			// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
+			this.children = [];
+		},
+		data() {
+			return {
+				activeAnchorIndex: 0,
+				showSidebar: true,
+				// children: [],
+				touchmove: false,
+				touchmoveIndex: 0,
+			}
+		},
+		watch: {
+			scrollTop() {
+				this.updateData()
+			}
+		},
+		computed: {
+			// 弹出toast的z-index值
+			alertZIndex() {
+				return this.$u.zIndex.toast;
+			}
+		},
+		methods: {
+			updateData() {
+				this.timer && clearTimeout(this.timer);
+				this.timer = setTimeout(() => {
+					this.showSidebar = !!this.children.length;
+					this.setRect().then(() => {
+						this.onScroll();
+					});
+				}, 0);
+			},
+			setRect() {
+				return Promise.all([
+					this.setAnchorsRect(),
+					this.setListRect(),
+					this.setSiderbarRect()
+				]);
+			},
+			setAnchorsRect() {
+				return Promise.all(this.children.map((anchor, index) => anchor
+					.$uGetRect('.u-index-anchor-wrapper')
+					.then((rect) => {
+						Object.assign(anchor, {
+							height: rect.height,
+							top: rect.top
+						});
+					})));
+			},
+			setListRect() {
+				return this.$uGetRect('.u-index-bar').then((rect) => {
+					Object.assign(this, {
+						height: rect.height,
+						top: rect.top + this.scrollTop
+					});
+				});
+			},
+			setSiderbarRect() {
+				return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
+					this.sidebar = {
+						height: rect.height,
+						top: rect.top
+					};
+				});
+			},
+			getActiveAnchorIndex() {
+				const {
+					children
+				} = this;
+				const {
+					sticky
+				} = this;
+				for (let i = this.children.length - 1; i >= 0; i--) {
+					const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+					const reachTop = sticky ? preAnchorHeight : 0;
+					if (reachTop >= children[i].top) {
+						return i;
+					}
+				}
+				return -1;
+			},
+			onScroll() {
+				const {
+					children = []
+				} = this;
+				if (!children.length) {
+					return;
+				}
+				const {
+					sticky,
+					stickyOffsetTop,
+					zIndex,
+					scrollTop,
+					activeColor
+				} = this;
+				const active = this.getActiveAnchorIndex();
+				this.activeAnchorIndex = active;
+				if (sticky) {
+					let isActiveAnchorSticky = false;
+					if (active !== -1) {
+						isActiveAnchorSticky =
+							children[active].top <= 0;
+					}
+					children.forEach((item, index) => {
+						if (index === active) {
+							let wrapperStyle = '';
+							let anchorStyle = {
+								color: `${activeColor}`
+							};
+							if (isActiveAnchorSticky) {
+								wrapperStyle = {
+									height: `${children[index].height}px`
+								};
+								anchorStyle = {
+									position: 'fixed',
+									top: `${stickyOffsetTop}px`,
+									zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+									color: `${activeColor}`
+								};
+							}
+							item.active = active;
+							item.wrapperStyle = wrapperStyle;
+							item.anchorStyle = anchorStyle;
+						} else if (index === active - 1) {
+							const currentAnchor = children[index];
+							const currentOffsetTop = currentAnchor.top;
+							const targetOffsetTop = index === children.length - 1 ?
+								this.top :
+								children[index + 1].top;
+							const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+							const translateY = parentOffsetHeight - currentAnchor.height;
+							const anchorStyle = {
+								position: 'relative',
+								transform: `translate3d(0, ${translateY}px, 0)`,
+								zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+								color: `${activeColor}`
+							};
+							item.active = active;
+							item.anchorStyle = anchorStyle;
+						} else {
+							item.active = false;
+							item.anchorStyle = '';
+							item.wrapperStyle = '';
+						}
+					});
+				}
+			},
+			onTouchMove(event) {
+				this.touchmove = true;
+				const sidebarLength = this.children.length;
+				const touch = event.touches[0];
+				const itemHeight = this.sidebar.height / sidebarLength;
+				let clientY = 0;
+				clientY = touch.clientY;
+				let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
+				if (index < 0) {
+					index = 0;
+				} else if (index > sidebarLength - 1) {
+					index = sidebarLength - 1;
+				}
+				this.touchmoveIndex = index;
+				this.scrollToAnchor(index);
+			},
+			onTouchStop() {
+				this.touchmove = false;
+				this.scrollToAnchorIndex = null;
+			},
+			scrollToAnchor(index) {
+				if (this.scrollToAnchorIndex === index) {
+					return;
+				}
+				this.scrollToAnchorIndex = index;
+				const anchor = this.children.find((item) => item.index === this.indexList[index]);
+				if (anchor) {
+					this.$emit('select', anchor.index);
+					uni.pageScrollTo({
+						duration: 0,
+						scrollTop: anchor.top + this.scrollTop
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-bar {
+		position: relative
+	}
+
+	.u-index-bar__sidebar {
+		position: fixed;
+		top: 50%;
+		right: 0;
+		@include vue-flex;
+		flex-direction: column;
+		text-align: center;
+		transform: translateY(-50%);
+		user-select: none;
+		z-index: 99;
+	}
+
+	.u-index-bar__index {
+		font-weight: 500;
+		padding: 8rpx 18rpx;
+		font-size: 22rpx;
+		line-height: 1
+	}
+
+	.u-indexed-list-alert {
+		position: fixed;
+		width: 120rpx;
+		height: 120rpx;
+		right: 90rpx;
+		top: 50%;
+		margin-top: -60rpx;
+		border-radius: 24rpx;
+		font-size: 50rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.65);
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		z-index: 9999999;
+	}
+
+	.u-indexed-list-alert text {
+		line-height: 50rpx;
+	}
+</style>

uview-ui/components/u-input/u-input.vue

@@ -0,0 +1,394 @@
+<template>
+	<view
+		class="u-input"
+		:class="{
+			'u-input--border': border,
+			'u-input--error': validateState
+		}"
+		:style="{
+			padding: `0 ${border ? 20 : 0}rpx`,
+			borderColor: borderColor,
+			textAlign: inputAlign
+		}"
+		@tap.stop="inputClick"
+	>
+		<textarea
+			v-if="type == 'textarea'"
+			class="u-input__input u-input__textarea"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled"
+			:maxlength="inputMaxlength"
+			:fixed="fixed"
+			:focus="focus"
+			:autoHeight="autoHeight"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:cursor-spacing="getCursorSpacing"
+			:show-confirm-bar="showConfirmbar"
+			@input="handleInput"
+			@blur="handleBlur"
+			@focus="onFocus"
+			@confirm="onConfirm"
+		/>
+		<input
+			v-else
+			class="u-input__input"
+			:type="type == 'password' ? 'text' : type"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:password="type == 'password' && !showPassword"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled || type === 'select'"
+			:maxlength="inputMaxlength"
+			:focus="focus"
+			:confirmType="confirmType"
+			:cursor-spacing="getCursorSpacing"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:show-confirm-bar="showConfirmbar"
+			:adjust-position="adjustPosition"
+			@focus="onFocus"
+			@blur="handleBlur"
+			@input="handleInput"
+			@confirm="onConfirm"
+		/>
+		<view class="u-input__right-icon u-flex">
+			<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
+				<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
+			</view>
+			<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
+				<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
+			</view>
+			<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
+				'u-input__right-icon--select--reverse': selectOpen
+			}">
+				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import Emitter from '../../libs/util/emitter.js';
+
+/**
+ * input 输入框
+ * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ * @tutorial http://uviewui.com/components/input.html
+ * @property {String} type 模式选择，见官网说明
+ * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
+ * @property {} v-model 用于双向绑定输入框的值
+ * @property {String} input-align 输入框文字的对齐方式(默认left)
+ * @property {String} placeholder placeholder显示值(默认 '请输入内容')
+ * @property {Boolean} disabled 是否禁用输入框(默认false)
+ * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
+ * @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
+ * @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
+ * @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
+ * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
+ * @property {Object} custom-style 自定义输入框的样式，对象形式
+ * @property {Boolean} focus 是否自动获得焦点(默认false)
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
+ * @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
+ * @property {Boolean} border 是否显示边框(默认false)
+ * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
+ * @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
+ * @example <u-input v-model="value" :type="type" :border="border" />
+ */
+export default {
+	name: 'u-input',
+	mixins: [Emitter],
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// 输入框的类型，textarea，text，number
+		type: {
+			type: String,
+			default: 'text'
+		},
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		placeholder: {
+			type: String,
+			default: '请输入内容'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		placeholderStyle: {
+			type: String,
+			default: 'color: #c0c4cc;'
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		// 输入框的自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
+		fixed: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动获得焦点
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 密码类型时，是否显示右侧的密码图标
+		passwordIcon: {
+			type: Boolean,
+			default: true
+		},
+		// input|textarea是否显示边框
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框的边框颜色
+		borderColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
+		// open-打开，close-关闭
+		selectOpen: {
+			type: Boolean,
+			default: false
+		},
+		// 高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否可清空
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 指定光标与键盘的距离，单位 px
+		cursorSpacing: {
+			type: [Number, String],
+			default: 0
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: [Number, String],
+			default: -1
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: [Number, String],
+			default: -1
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏
+		showConfirmbar:{
+			type:Boolean,
+			default:true
+		},
+		// 弹出键盘时是否自动调节高度，uni-app默认值是true
+		adjustPosition: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			defaultValue: this.value,
+			inputHeight: 70, // input的高度
+			textareaHeight: 100, // textarea的高度
+			validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
+			focused: false, // 当前是否处于获得焦点的状态
+			showPassword: false, // 是否预览密码
+			lastValue: '', // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间
+		};
+	},
+	watch: {
+		value(nVal, oVal) {
+			this.defaultValue = nVal;
+			// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
+			if(nVal != oVal && this.type == 'select') this.handleInput({
+				detail: {
+					value: nVal
+				}
+			})
+		},
+	},
+	computed: {
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength);
+		},
+		getStyle() {
+			let style = {};
+			// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
+			style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
+				this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
+			style = Object.assign(style, this.customStyle);
+			return style;
+		},
+		//
+		getCursorSpacing() {
+			return Number(this.cursorSpacing);
+		},
+		// 光标起始位置
+		uSelectionStart() {
+			return String(this.selectionStart);
+		},
+		// 光标结束位置
+		uSelectionEnd() {
+			return String(this.selectionEnd);
+		}
+	},
+	created() {
+		// 监听u-form-item发出的错误事件，将输入框边框变红色
+		this.$on('on-form-item-error', this.onFormItemError);
+	},
+	methods: {
+		/**
+		 * change 事件
+		 * @param event
+		 */
+		handleInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if(this.trim) value = this.$u.trim(value);
+			// vue 原生的方法 return 出去
+			this.$emit('input', value);
+			// 当前model 赋值
+			this.defaultValue = value;
+			// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+			// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
+			// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if(this.$u.trim(value) == this.lastValue) return ;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch('u-form-item', 'on-form-change', value);
+			}, 40)
+		},
+		/**
+		 * blur 事件
+		 * @param event
+		 */
+		handleBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			let value = event.detail.value;
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			// vue 原生的方法 return 出去
+			this.$emit('blur', value);
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if(this.$u.trim(value) == this.lastValue) return ;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch('u-form-item', 'on-form-blur', value);
+			}, 40)
+		},
+		onFormItemError(status) {
+			this.validateState = status;
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit('focus');
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.$emit('input', '');
+		},
+		inputClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-input {
+	position: relative;
+	flex: 1;
+	@include vue-flex;
+
+	&__input {
+		//height: $u-form-item-height;
+		font-size: 28rpx;
+		color: $u-main-color;
+		flex: 1;
+	}
+
+	&__textarea {
+		width: auto;
+		font-size: 28rpx;
+		color: $u-main-color;
+		padding: 10rpx 0;
+		line-height: normal;
+		flex: 1;
+	}
+
+	&--border {
+		border-radius: 6rpx;
+		border-radius: 4px;
+		border: 1px solid $u-form-item-border-color;
+	}
+
+	&--error {
+		border-color: $u-type-error!important;
+	}
+
+	&__right-icon {
+
+		&__item {
+			margin-left: 10rpx;
+		}
+
+		&--select {
+			transition: transform .4s;
+
+			&--reverse {
+				transform: rotate(-180deg);
+			}
+		}
+	}
+}
+</style>

uview-ui/components/u-keyboard/u-keyboard.vue

@@ -0,0 +1,217 @@
+<template>
+	<u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
+	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :zIndex="uZIndex">
+		<slot />
+		<view class="u-tooltip" v-if="tooltip">
+			<view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
+				{{cancelBtn ? cancelText : ''}}
+			</view>
+			<view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
+				{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}
+			</view>
+			<view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
+				{{confirmBtn ? confirmText : ''}}
+			</view>
+		</view>
+		<block v-if="mode == 'number' || mode == 'card'">
+			<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
+		</block>
+		<block v-else>
+			<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
+		</block>
+	</u-popup>
+</template>
+
+<script>
+	/**
+	 * keyboard 键盘
+	 * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+	 * @tutorial https://www.uviewui.com/components/keyboard.html
+	 * @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
+	 * @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
+	 * @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
+	 * @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+	 * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
+	 * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
+	 * @property {Boolean} mask 是否显示遮罩（默认true）
+	 * @property {String} confirm-text 确认按钮的文字
+	 * @property {String} cancel-text 取消按钮的文字
+	 * @property {Number String} z-index 弹出键盘的z-index值（默认1075）
+	 * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+	 * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
+	 * @event {Function} change 按键被点击(不包含退格键被点击)
+	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+	 * @event {Function} backspace 键盘退格键被点击
+	 * @example <u-keyboard mode="number" v-model="show"></u-keyboard> 
+	 */
+	export default {
+		name: "u-keyboard",
+		props: {
+			// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
+			mode: {
+				type: String,
+				default: 'number'
+			},
+			// 是否显示键盘的"."符号
+			dotEnabled: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示顶部工具条
+			tooltip: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示工具条中间的提示
+			showTips: {
+				type: Boolean,
+				default: true
+			},
+			// 工具条中间的提示文字
+			tips: {
+				type: String,
+				default: ''
+			},
+			// 是否显示工具条左边的"取消"按钮
+			cancelBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示工具条右边的"完成"按钮
+			confirmBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			},
+			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许通过点击遮罩关闭键盘
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 通过双向绑定控制键盘的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			// z-index值
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 取消按钮的文字
+			cancelText: {
+				type: String,
+				default: '取消'
+			},
+			// 确认按钮的文字
+			confirmText: {
+				type: String,
+				default: '确认'
+			}
+		},
+		data() {
+			return {
+				//show: false
+			}
+		},
+		computed: {
+			uZIndex() {
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		methods: {
+			change(e) {
+				this.$emit('change', e);
+			},
+			// 键盘关闭
+			popupClose() {
+				// 通过发送input这个特殊的事件名，可以修改父组件传给props的value的变量，也即双向绑定
+				this.$emit('input', false);
+			},
+			// 输入完成
+			onConfirm() {
+				this.popupClose();
+				this.$emit('confirm');
+			},
+			// 取消输入
+			onCancel() {
+				this.popupClose();
+				this.$emit('cancel');
+			},
+			// 退格键
+			backspace() {
+				this.$emit('backspace');
+			},
+			// 关闭键盘
+			// close() {
+			// 	this.show = false;
+			// },
+			// // 打开键盘
+			// open() {
+			// 	this.show = true;
+			// }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-keyboard {
+		position: relative;
+		z-index: 1003;
+	}
+
+	.u-tooltip {
+		@include vue-flex;
+		justify-content: space-between;
+	}
+
+	.u-tooltip-item {
+		color: #333333;
+		flex: 0 0 33.333333%;
+		text-align: center;
+		padding: 20rpx 10rpx;
+		font-size: 28rpx;
+	}
+
+	.u-tooltips-submit {
+		text-align: right;
+		flex-grow: 1;
+		flex-wrap: 0;
+		padding-right: 40rpx;
+		color: $u-type-primary;
+	}
+
+	.u-tooltip-cancel {
+		text-align: left;
+		flex-grow: 1;
+		flex-wrap: 0;
+		padding-left: 40rpx;
+		color: #888888;
+	}
+
+	.u-tooltips-submit-hover {
+		color: $u-type-success;
+	}
+
+	.u-tooltip-cancel-hover {
+		color: #333333;
+	}
+</style>