提交

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+.idea/
+node_modules/
+unpackage/

.project

+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>shoppingMall_web</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>

App.vue

+<script>
+	import updata from '@/util/updata.js'; //版本更新
+	import homeservice from '@/service/homeservice.js';
+	export default {
+		globalData: {  
+			typefacedata: [],
+			num:0
+		},
+		onLaunch: function() {
+			// 字体列表
+			homeservice.queryList({
+				s: 'Material.fontFamilyList'
+			}).then(result => {
+				result.forEach(item=>{
+					item.long = false
+					item.textlong = null
+				})
+				result.unshift({
+					id: 0,
+					key: "SourceHanSansCN-Normal",
+					remark: "",
+					title: "思源黑体",
+					textlong:true,
+					long:true
+				})
+				this.globalData.typefacedata = result
+				this.$base.typefacedata = this.globalData.typefacedata
+				var t1 = new Date().getTime();
+				var that = this
+				this.globalData.typefacedata.forEach(textlist => {
+					wx.loadFontFace({
+						global:true,
+						family: textlist.key,
+						source: 'url(' + textlist.remark + ')',
+						desc: {
+							weight: 100
+						},
+						success: function(message) {
+							textlist.textlong = true
+						},
+						fail: function(message) {
+							textlist.textlong = false
+						},
+						complete(res) {
+							textlist.long = true
+							that.globalData.typefacedata.forEach(item=>{
+								if(item.long == true){
+									that.globalData.num++
+								}
+							})
+							that.$base.typefacedata = that.globalData.typefacedata
+							if(that.globalData.num == that.globalData.typefacedata.length){
+								that.$base.typefacedata = that.globalData.typefacedata
+							}
+							that.globalData.num = 0
+						}
+					})
+				})
+			}).catch(err => {
+				
+			});
+		},
+		onShow: function() {
+			//调用监听网络状态的方法
+			wx.getNetworkType({
+				success: function(res) {
+					if (res.networkType == 'none') {
+						uni.showToast({
+							title: '网络似乎不太顺畅',
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				}
+			})
+		},
+		onHide: function() {
+			//console.log('App Hide');
+		}
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.page {
+		height: 100%;
+		width: 100%;
+		background-color: #ebeef5;
+		font-size: 28upx;
+		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+	}
+	.hover-class-bg {
+		background: #888888 !important;
+	}
+	.hover-class-text {
+		color: #888888 !important;
+	}
+</style>

api/BaseApi.js

+import request from '../util/request'
+import $n from '../util/nothing'
+import Enums from '../util/Enums'
+import Qs from 'qs'
+
+/**
+ * ajax请求
+ * @param {*}
+ */
+export function _request ({
+  url,
+  params = {},
+  method = 'post',
+  token = false,
+  timeout = false,
+  contentType = Enums.ContentType.JSON_UTF8,
+  headers = {}
+} = {}) {
+  headers['Content-Type'] = contentType;
+  return request.request(url, $n._caseValue(contentType, Enums.ContentType.FORM_UTF8, Qs.stringify(params), params), {
+    method: method,
+    _token: token,
+	_timeout: timeout,
+    headers
+  })
+}
+
+/**
+ * 分页查询
+ * @param {*}
+ */
+export function _queryPage ({
+  url,
+  params = {},
+  page = {},
+  method = 'post',
+  token = false,
+  contentType = Enums.ContentType.JSON_UTF8
+} = {}) {
+  return _request({
+    url,
+    params,
+    method,
+    token,
+    contentType,
+    headers: {
+      'pageNum': page.pageNum,
+      'pageSize': page.pageSize
+    }
+  })
+}
+/**
+ * 流式分页查询
+ * @param {*}
+ */
+export function _queryFlowPage ({
+  url,
+  params = {},
+  page = {},
+  method = 'post',
+  token = false,
+  contentType = Enums.ContentType.JSON_UTF8
+} = {}) {
+  return _request({
+    url,
+    params,
+    method,
+    token,
+    contentType,
+    headers: {
+      'beginTime': page.beginTime,
+      'direction': page.direction,
+      'orderBy': page.orderBy,
+      'pageSize': page.pageSize
+    }
+  })
+}

api/UserApi.js

+import Enums from '../util/Enums'
+import {
+  _request
+} from './BaseApi'
+
+/**
+ * 登录
+ * @param {*} params
+ */
+export const _login = (params = {}) => _request({url: '/lite/index', params, method: 'post', contentType: Enums.ContentType.FORM_UTF8})

api/homeApi.js

+import Enums from '../util/Enums'
+import {
+  _request
+} from './BaseApi'
+
+/**
+ * contentType: Enums.ContentType.FORM_UTF8
+ * 
+ * @param {*} params
+ */
+export const route = (params = {}) => _request({url: '/lite/index', params, method: 'post',token: true})
+
+export const route_timeout = (params = {}) => _request({url: '/lite/index', params, method: 'post',token: true,timeout: true})
+
+export const newroute = (params = {}) => _request({url: '/lite/index/index', params, method: 'post',token: true})
\ No newline at end of file

cache/CacheKeys.js

+export default {
+	app: {
+		APP_USER: 'APP_USER', // app信息
+		WX_INFO: 'WX_INFO', // 微信信息
+		USER_INFO: 'USER_INFO', // 用户信息
+		DATA_SYNC_TIME: 'DATA_SYNC_TIME', // 数据同步时间
+		BACKGROUND_COLOR: 'BACKGROUND_COLOR', // 背景色
+		NAVIGATION_BAR_BACKGROUND_COLOR: 'NAVIGATION_BAR_BACKGROUND_COLOR', // 导航条背景颜色
+		NAVIGATION_BAR_FRONT_COLOR: 'NAVIGATION_BAR_FRONT_COLOR' // 导航条前景颜色
+	},
+	SEARCH: 'SEARCH', // 搜索
+	DECIMALS: 'DECIMALS', // 小数位数
+	DICT: 'DICT_' // 字典
+}

cache/index.js

+import CacheKeys from './CacheKeys'
+
+/**
+ * 本地存储KEY前缀
+ */
+const _KEY_PREFIX = 'HL_'
+
+/**
+ * 用户级缓存定义
+ */
+const CACHE_LEVEL_USER = []
+
+/**
+ * 构造缓存KEY
+ * @param {*} key
+ */
+const buildKey = (key) => {
+	let newKey = _KEY_PREFIX
+	newKey += CACHE_LEVEL_USER.indexOf(key) !== -1 ? (newKey.endsWith('_') ? '' : '_') + this.$AppContext.$store.getters.sysUser
+		.username : ''
+	return newKey + (newKey.endsWith('_') ? '' : '_') + key
+}
+
+/**
+ * 缓存对象API
+ */
+const cache = {
+	$Keys: CacheKeys,
+	_KEY_PREFIX: _KEY_PREFIX,
+	set: (object) => uni.setStorage(Object.assign(object, {
+		key: buildKey(object.key)
+	})),
+	get: (object) => uni.getStorage(Object.assign(object, {
+		key: buildKey(object.key)
+	})),
+	setSync: (key, data) => uni.setStorageSync(buildKey(key), data),
+	getSync: (key) => uni.getStorageSync(buildKey(key)),
+	remove: (object) => uni.removeStorage(Object.assign(object, {
+		key: buildKey(object.key)
+	})),
+	removeSync: (key) => uni.removeStorageSync(buildKey(key)),
+	clear: (object) => uni.clearStorage(object),
+	clearSync: () => uni.clearStorageSync(),
+	getInfo: (object) => uni.getStorageInfo(object),
+	getInfoSync: () => uni.getStorageInfoSync()
+}
+
+export default cache

components/ay-firework/README.md

+## 使用注意
+- 引入该组件，用v-if控制组件，组件create会触发喷发特效函数，然后可以传入一些位置参数，具体参考组件内的props属性，每个属性都备注了
+- 
+## 示例代码
+```
+  <template>
+  	<view>
+  		<fireworks v-if="isReady" />
+  	</view>
+  </template>
+  
+  <script>
+  	import fireworks from '@/components/fireworks/index.vue'
+  	export default {
+		data() {
+			return {
+				isReady: false
+			}
+		},
+  		components: {
+  			fireworks
+  		},
+		onReady() {
+			this.$nextTick(() => {//后面记得销毁哈，不使用时设置为false
+				setTimeout(() => {
+					this.isReady = true;
+				}, 50)
+			})
+		},
+  	}
+  </script>
+```
\ No newline at end of file

components/ay-firework/firework.vue

+<template>
+	<canvas class="fire-canvas" :style="{width: width + 'px', height: height + 'px', 'z-index': zIndex}" 
+	:canvas-id="canvasId" @error="canvasIdErrorCallback"></canvas>
+</template>
+
+<script>
+	/*
+		浏览器的最高刷新赔率（最后一个表示1秒刷新60次）
+	*/
+	const minBrowserRefreshTime = window && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame) || function(t) {
+		setTimeout(t, 1e3 / 60)
+	}
+	const systenInfo = uni.getSystemInfoSync();
+	let fireCanvasBox = null;
+	export default {
+		props: {
+			/*
+				礼花数量（最好小于500,太多会卡顿）
+			*/
+			particleCount: {
+				type: [Number, String],
+				default: 80
+			},
+			/*取值	0-360
+				喷发角度示意图（简单说就是喷射方向）
+						礼花（90）
+				礼花（180）		礼花0
+						礼花（270）
+			*/
+			angle: {
+				type: [Number, String],
+				default: 90
+			},
+			/*
+				爆炸范围
+			*/
+			spread: {
+				type: [Number, String],
+				default: 100
+			},
+			/*
+				喷发的初始速度
+			*/
+			startVelocity: {
+				type: [Number, String],
+				default: 45
+			},
+			/*
+				喷发的衰退时间，超出canvas会被清除，跟startVelocity配合使用
+			*/
+			decay: {
+				type: [Number, String],
+				default: 0.9
+			},
+			/*
+				刷新几次消失（其实是透明度为0），这个跟间隔的刷新频率有关
+			*/
+			ticks: {
+				type: [Number, String],
+				default: 150
+			},
+			/*
+				礼花层级
+			*/
+			zIndex: {
+				type: [Number, String],
+				default: 1
+			},
+			/*
+				所有要随机的礼花颜色预选值
+			*/
+			colors: {
+				type: Array,
+				default: () => ["#5BC0EB", "#2176AE", "#FDE74C", "#9BC53D", "#E55934", "#FA7921", "#FF4242"]
+			},
+			canvasId: {
+				type: String,
+				default: 'fireCanvas'
+			},
+			/*
+				canvas宽度(单位px)
+			*/
+			width: {
+				type: [Number, String],
+				default: () => {
+					return systenInfo.windowWidth
+				}
+			},
+			/*
+				canvas高度(单位px)
+			*/
+			height: {
+				type: [Number, String],
+				default: () => {
+					return systenInfo.windowHeight
+				}
+			},
+			/*
+				中心点-x
+			*/
+			x: {
+				type: [Number, String],
+				default: () => {
+					return systenInfo.windowWidth / 2
+				}
+			},
+			/*
+				中心点-y
+			*/
+			y: {
+				type: [Number, String],
+				default: () => {
+					return systenInfo.windowHeight * 0.4
+				}
+			}
+		},
+		data() {
+			return {
+				/*
+					手机分辨率
+				*/
+				pixelRatio: systenInfo.pixelRatio
+			}
+		},
+		onShow(){
+			console.log('onShow');
+			this.initCanvas();
+		},
		created() {
+			console.log('created');
+			this.initCanvas();
+		},
+		methods: {
+			open(){
+				
+			},
+			/*
+				转16进制（颜色用）
+			*/
+			parseInt16(t) {
+				return parseInt(t, 16);
+			},
+			canvasIdErrorCallback(e) {
+				console.error(e.detail.errMsg)
+			},
+			initCanvas() {
+				fireCanvasBox = null;
+				fireCanvasBox = uni.createCanvasContext(this.canvasId, this);
+				fireCanvasBox.fillRect(0, 0, this.width * this.pixelRatio, this.height * this.pixelRatio);
+				fireCanvasBox.scale(this.pixelRatio,this.pixelRatio);
+				fireCanvasBox.save();
+				this.fireworksDraw();
+			},
+			fireworksDraw() {
+					let ribbon = [] ,//彩带容器
+					particleCount = this.particleCount, n = null, r = null, a = null,i = null;
+					for (; particleCount--;){
+						n = {
+							x: this.x,
+							y: this.y,
+							angle: this.angle,
+							spread: this.spread,
+							startVelocity: this.startVelocity,
+							color: this.colors[particleCount % this.colors.length],
+							ticks: this.ticks,
+							decay: this.decay
+						}, 
+						i = 0, 
+						r = n.angle * (Math.PI / 180), 
+						a = n.spread * (Math.PI / 180);
+						ribbon.push({//菜单位置初始化
+							x: n.x,
+							y: n.y,
+							depth: .5 * Math.random() + .6,
+							wobble: 10 * Math.random(),
+							velocity: .5 * n.startVelocity + Math.random() * n.startVelocity,
+							angle2D: -r + (.5 * a - Math.random() * a),
+							tiltAngle: Math.random() * Math.PI,
+							color: (i = (n.color + "").replace(/[^0-9a-f]/gi, ""), i.length < 6 && (i = i[0] + i[0] + i[1] + i[1] + i[2] + i[2]), {//生成随机颜色
+								r: this.parseInt16(i.substring(0, 2)),
+								g: this.parseInt16(i.substring(2, 4)),
+								b: this.parseInt16(i.substring(4, 6))
+							}),
+							tick: 0,
+							totalTicks: n.ticks,
+							decay: n.decay,
+							random: Math.random() + 5,
+							tiltSin: 0,
+							tiltCos: 0,
+							wobbleX: 0,
+							wobbleY: 0
+						})
+					}
+					minBrowserRefreshTime(function drawRibbon() {
+						if(!fireCanvasBox) return ;
+						fireCanvasBox.draw(),
+						fireCanvasBox.restore(),
+						ribbon = ribbon.filter((e) => {
+							e.x += Math.cos(e.angle2D) * e.velocity,
+							e.y += Math.sin(e.angle2D) * e.velocity + 5 * e.depth,
+							e.wobble += .1,
+							e.velocity *= e.decay,
+							e.tiltAngle += .02 * Math.random() + .12,
+							e.tiltSin = Math.sin(e.tiltAngle),
+							e.tiltCos = Math.cos(e.tiltAngle),
+							e.random = Math.random() + 4,
+							e.wobbleX = e.x + 10 * Math.cos(e.wobble) * e.depth,
+							e.wobbleY = e.y + 10 * Math.sin(e.wobble) * e.depth;
+							// 开始画图
+							fireCanvasBox.fillStyle="rgba(" + e.color.r + ", " + e.color.g + ", " + e.color.b + ", " + (1 - (e.tick++) / e.totalTicks) + ")",
+							fireCanvasBox.beginPath(),
+							fireCanvasBox.moveTo(Math.floor(e.x),Math.floor(e.y)),
+							fireCanvasBox.lineTo(Math.floor(e.wobbleX),Math.floor(e.y + e.random * e.tiltSin)),
+							fireCanvasBox.lineTo(Math.floor(e.wobbleX + e.random * e.tiltCos),Math.floor(e.wobbleY + e.random * e.tiltSin)),
+							fireCanvasBox.lineTo(Math.floor(e.x + e.random * e.tiltCos),Math.floor(e.wobbleY)),
+							fireCanvasBox.closePath(),
+							fireCanvasBox.fill();
+							return e.tick < e.totalTicks
+						})
+						ribbon.length ? minBrowserRefreshTime(drawRibbon): fireCanvasBox = null;//轮询调用或者释放掉
+					}
+				)
+			}
+		},
+		
+	}
+</script>
+
+<style>
+	.fire-canvas{
+		position: fixed; 
+		top: 0px; 
+		left: 0px;
+		pointer-events: none;
+		z-index: 99999999;
+	}
+</style>

components/cropper/readme.md

+#### 【注意】由于赶时间，只做了功能性测试，兼容性测试暂时无法进行，更不用说优化测试了。欢迎有遇到问题的留言，或者自己动手修改也可以。
+#### 【注意】因为属于业余时间开发的一个项目所依赖的插件，所以更新较缓慢。
+
+### 使用方式
+
+```javascript
+import Cropper from '@/components/cropper/cropper.vue';
+```
+
+```html
+<cropper :imagePath="originalFaceSrc" :aspectRatio="1" @complete="complete" @cancel="cancel" v-if="handleFaceStatus"></cropper>
+```
+
+使用v-if控制显示，mounted内执行init方法，使用简单，操作便利。
+
+## 参数
+| 参数  | 类型  | 解释  |  默认 |  必填 | 备注  |
+| ------------ | ------------ | ------------ | ------------ | ------------ | ------------ |
+|  quality | Number  | 返回图片质量  | 1  | 否  |  如返回的图片仅需预览不用上传，请适当调低 |
+|  imagePath | String  | 原始图片路径  |""  | 是  | blob、静态图片资源地址或者base64（未测试）  |
+|  outputFileType | String  | 目标文件的类型  | jpg  | 否  | jpg：输出jpg格式图片；png：输出png格式图片  |
+|  aspectRatio | Number, null  | 目标图片的宽高比  | null  | 否  | null，即不限制剪裁宽高比。aspectRatio需大于0  |
+|  minBoxWidthRatio | Number  | 最小剪裁尺寸与原图尺寸的比率（宽）  | 0.15  | 否  | 宽度最小剪裁到原图的0.15宽  |
+|  minBoxHeightRatio  | Number  | 最小剪裁尺寸与原图尺寸的比率（高）  | 0.15  | 否  | 当设置aspectRatio时，minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到  |
+|  initialBoxWidthRatio | Number  | 剪裁框初始大小比率（宽）  | 0.8  | 否  | 裁框默认宽度为图片宽度的0.8倍  |
+|  initialBoxHeightRatio | Number  | 剪裁框初始大小比率（高）  | 0.8  | 否  | 当设置aspectRatio时，initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到  |
+
+## 事件
+
+| 事件名  | 解释  | 参数  |  备注 |
+| ------------ | ------------ | ------------ | ------------ |
+|  reset |  用户点击重做后触发 | 无  | 可能无用，但留一个给开发者备用  |
+|  cancel |  用户点击取消后触发 | 无  | 开发者可以将组件置为消失v-if（尽量不要用v-show）   |
+|  complete |  用户点击裁剪后触发 | path：路径，h5为base64，app与小程序为临时路径；param：裁切参数，见【备注1】  | 核心功能   |
+
+
+### 备注1
+param：
+```json
+｛
+	x:Number, //裁切左上角X坐标
+	y:Number, //裁切左上角Y坐标
+	width:Number, //裁切宽度
+	height:Number, //裁切高度
+	rotate:Number, //旋转（未实现，预留）
+	scaleX:Number, //X轴缩放（未实现，预留）
+	scaleY:Number, //Y轴缩放（未实现，预留）
+｝
+```
+
+### 备注2
+本组件样式支持iphone安全范围但需要手动开启
+请在插件被样式中最后备注的地方解除备注即可。
+控制台会报错，无视即可。
+或者复制如下样式样式代码
+```css
+// 安全域兼容样式
+page {
+	--safe-area-inset-top: 0px;
+	--safe-area-inset-right: 0px;
+	--safe-area-inset-bottom: 0px;
+	--safe-area-inset-left: 0px;
+
+	@supports (top: constant(safe-area-inset-top)) {
+		--safe-area-inset-top: constant(safe-area-inset-top);
+		--safe-area-inset-right: constant(safe-area-inset-right);
+		--safe-area-inset-bottom: constant(safe-area-inset-bottom);
+		--safe-area-inset-left: constant(safe-area-inset-left);
+	}
+
+	@supports (top: env(safe-area-inset-top)) {
+		--safe-area-inset-top: env(safe-area-inset-top);
+		--safe-area-inset-right: env(safe-area-inset-right);
+		//--safe-area-inset-bottom: 12px;
+		--safe-area-inset-bottom: env(safe-area-inset-bottom);
+		--safe-area-inset-left: env(safe-area-inset-left);
+	}
+}
+```
\ No newline at end of file

components/fr-image/fr-image.vue

+<template>
+	<view class="fr_img">
+		<!-- 主图 -->
+		<image class="fr_img_content" 
+		:src="src" :mode="mode" :lazy-load="lazyLoad" :webp="webp" :show-menu-by-longpress="showMenuByLongpress" @error="onImgError" @load="onImgLoad"/>
+		<view v-if="loading_complete && completeTransition" class="loading_complete_transition"></view>
+		
+		<!-- 加载失败图 -->
+		<view v-if="loading_error" class="loading_error"> <image class="loading_error_img" :src="loadingErrorImg" mode="aspectFit"></image> </view>
+		
+		<!-- 加载中图 -->
+		<view v-else-if="!loading_complete" class="loading"> 
+			<image v-if="loadingIngImg == 'two-balls'" class="loading_img" :src="require('./loading_two_balls.gif')" mode="aspectFit"></image>
+			<view v-if="loadingIngImg == 'oblique-light'" class="loading_oblique_light"></view>
+			<view v-if="loadingIngImg == 'looming'" class="loading_looming"></view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		
+		props: {
+		  
+		  // 和官方Image组件属性一致
+		  src: { 
+		    type: String,
+			default: "",
+		  },
+		  
+		  mode: { 
+		    type: String,
+			default: "",
+		  },
+		  
+		  lazyLoad: {
+			  type: Boolean,
+			  default: false,
+		  },
+		  
+		  webp: {
+			  type: Boolean,
+			  default: false,
+		  },
+		  
+		  showMenuByLongpress: {
+			  type: Boolean,
+			  default: false,
+		  },
+		  
+		  
+		  // 可选： 加载失败图片：可以本地url、网络url、base64 （与src一致）
+		  loadingErrorImg: {
+			  type: String,
+			  default: require('./loading_error.png'),
+		  },
+		  
+		  // 可选： 加载中的图片
+		  // two-balls = 两个球来回转 
+		  // oblique-light = 斜光 
+		  // looming = 若影若现
+		  // 本地url、网络url、base64 = 自定义的加载中图片（与src一致）
+		  loadingIngImg: {
+			  type: String,
+			  default: "oblique-light",
+		  },
+		  
+		  // 可选：是否需要加载完成动画
+		  completeTransition: {
+			  type: Boolean,
+			  default: true,
+		  },
+		  
+		  
+		},
+		
+		data() {
+			return {
+				loading_complete: false,
+				loading_error: false,
+			};
+		},
+		
+		methods: {
+			onImgError: function(event){
+				this.loading_error = true;
+				this.$emit("error", event);
+			},
+			
+			onImgLoad: function(event){
+				this.loading_complete = true;
+				this.$emit("load", event);
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+
+.fr_img{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	
+	.fr_img_content{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+	}
+	
+	.loading_complete_transition{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		background-color: #FFFFFF;
+	    animation: loading_complete_transition 1.2s forwards;
+	}
+	
+	@keyframes loading_complete_transition{
+	    0% { opacity: 1; }
+	    100% { opacity: 0; }
+	} 
+	
+	
+	
+	.loading_error{
+		width: 100%;
+		height: 100%;
+		background-color: #F8F8F8;
+		position: absolute;
+		
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		.loading_error_img{
+			width: 100rpx;
+			height: 100rpx;
+			max-width: 100%;
+			max-height: 100%;
+		}
+	}
+	
+	.loading{
+		width: 100%;
+		height: 100%;
+		background-color: #FFFFFF;
+		position: absolute;
+		
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		// 加载图
+		.loading_img{
+			width: 100rpx;
+			height: 100rpx;
+			max-width: 100%;
+			max-height: 100%;
+		}
+		
+		// 斜光
+		.loading_oblique_light{
+			width: 100%;
+			height: 100%;
+			
+			background-color: #e3e3e3;
+			background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
+			background-size: 100rpx 100%;
+			background-repeat: repeat-y;
+			background-position:0 0;
+			animation: loading_oblique_light .6s infinite;
+		}
+		
+		@keyframes loading_oblique_light {
+		    to {
+		        background-position: 200% 0;
+		    }
+		}
+		
+		
+		// 若隐若现
+		.loading_looming{
+			width: 100%;
+			height: 100%;
+		    animation: loading_looming 1s infinite linear;
+		    background-color: #e3e3e3;
+		}
+		@keyframes loading_looming{
+		    0%   {background-color:rgba($color: #e3e3e3, $alpha: 0.5);}
+		    50%  {background-color:rgba($color: #e3e3e3, $alpha: 1.0);}
+		    100% {background-color:rgba($color: #e3e3e3, $alpha: 0.5);}
+		} 
+		
+	}
+	
+	
+}
+
+</style>

components/load-line/css/loadline.css

+/* 线形 */
+.line {
+	background-color: #fff;
+	color: #555;
+	border-radius: 8upx;
+	padding: 10px 15px;
+	overflow: hidden;
+	width: 85%;
+	margin: auto;
+	position: relative;
+	top: 200px;
+}
+.v-title{
+	width: 100%;
+}
+.loadline{
+	height:2px;
+}
+
+/* 圆形 */
+.circle{
+	position: absolute;
+	top: 300px;
+	width: 100%;
+}
+.third{
+	margin: auto;
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    position: relative;
+}
+.second{
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    clip:rect(0,91px,auto,0);
+    position: absolute;
+	
+}
+.second_{
+	width: 180px;
+	height: 180px;
+	border-radius: 50%;
+	clip:rect(0,auto,auto,90px);
+}
+.first{
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    clip:rect(0,auto,auto,90px);
+}
+.third *{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.mask{
+	width: 80%;
+	height: 80%;
+	border-radius: 50%;
+	margin: auto;
+	box-shadow: -2px -2px 4px rgba(0,0,0,.5) inset,2px 2px 4px rgba(0,0,0,.5) inset;
+	z-index: 10;
+}
+.mask>text{
+    display: block;
+    color: white;
+    line-height: 145px;
+	text-align: center;
+}
+
+/* 球形 */
+.ball{
+	/* position: absolute; */
+	overflow: hidden;
+/* 	left: 20%;
+	top: 20%; */
+	margin: auto;
+	padding-top: 200px;
+}
+.loading-ball{
+	border-radius: 50%;
+	border: 5px solid #5be9ff;
+	overflow: hidden;
+	margin: auto;
+}
+.loading-wave{
+	position: absolute;
+	border-radius: 50%;
+	background: #5be9ff;
+}
+.loading-wave1,.loading-wave2{
+	position: absolute;
+	left: 50%;
+	/* background: #FFFFFF; */
+	opacity: .5;
+	border-radius: 37%;
+	transform: translate(-50%,-40%);
+	animation: rotate 2s linear infinite;
+	z-index: 10;
+	/* transition: 0.3s; */
+}
+.loading-wave2{
+	border-radius: 40%;
+	opacity: 0.7;
+	transform: translate(-50%,-43%) rotate(0);
+	animation: rotate 3s linear -5s infinite;
+	z-index: 20;
+}
+.loading-text{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	color: #FFFFFF;
+}
+@keyframes rotate{
+	50%{
+		transform: translate(-50%,-43%) rotate(180deg);
+	}
+	100%{
+		transform: translate(-50%,-40%) rotate(360deg);
+	}
+}
\ No newline at end of file

components/load-line/load-line.vue

+<template>
+	<view>
+		<view>
+			<view class="line" v-if="loadType=='line'">
+				<view class="loadline"
+				:style="{width:loadPercent+'%',
+				background:lineInfo.colorChange?'linear-gradient(to right,'+lineInfo.loadColor+')':lineInfo.loadColor.split(',')[0]}"></view>
+				<view class="v-title">
+					<text class="fa fa-spinner fa-spin"></text>
+					{{loadText}}{{loadPercent}}%
+				</view>
+			</view>
+			<view class="circle" v-if="loadType=='circle'">
+				<view class="third" :style="{background:circleInfo.background}">
+					<view class="second" v-if="loadPercent!=100" :style="{background:circleInfo.foreground}"></view>
+					<view class="second_" :style="{transform: 'rotate('+(loadPercent>=50?((loadPercent-50)/100)*360:0)+'deg)',background:circleInfo.background}"></view>
+					<view class="first" v-if="loadPercent<50" :style="{transform: 'rotate('+(360*(loadPercent/100))+'deg)',background:circleInfo.foreground}"></view>
+					<view class="mask" :style="{background:circleInfo.circleColor}">
+						<text>{{loadPercent}}%</text>
+					</view>
+				</view>
+			</view>
+			<view class="ball" v-if="loadType=='ball'" :style="{width:(ballSize_+25)+'px',height:(ballSize_+25)+'px'}">
+				<view class="loading-ball" :style="{width:ballSize_+'px',height:ballSize_+'px',padding:ballInfo.ballPadding}">
+					<view class="loading-wave" :style="{overflow:ballInfo.ballType=='all'?'initial':'hidden',width:ballSize_+'px',height:ballSize_+'px'}">
+						<view v-if="loadPercent<100" class="loading-wave1" :style="{background:ballInfo.waveColor,top:(ballInfo.ballType=='all'?-(loadPercent*1.3):-(loadPercent*1.2))-4+'%',width:ballSize_*2+'px',height:ballSize_*2+'px'}"></view>
+						<view v-if="loadPercent<100" class="loading-wave2" :style="{background:ballInfo.waveColor,top:(ballInfo.ballType=='all'?-(loadPercent*1.3):-(loadPercent*1.2))-4+'%',width:ballSize_*2+'px',height:ballSize_*2+'px'}"></view>
+						<view class="loading-text" :style="{lineHeight:ballSize_+'px'}">{{loadPercent}}%</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			loadType:{//加载条的类型，line-线形，circle-圆形
+				type:String,
+				default:'line'
+			},
+			lineInfo:{
+				type:Object,
+				default:function(){
+					var info={
+						colorChange:false,//颜色是否渐变
+						loadColor:'#6ee2e1,#2ba98c,#a07e1e'//进度条颜色,渐变时色值至少三种，非渐变时只需一种色值，多传取第一条，多个色值','逗号分开
+					}
+					return info;
+				}
+			},
+			circleInfo:{
+				type:Object,
+				default:function(){
+					var info={
+						foreground:'#FFFFFF',//圆形进度条前景色
+						background:'#6ED4BF',//背景色
+						circleColor:'#cec4c4'//中心圆盘的颜色
+					}
+					return info;
+				}
+			},
+			ballInfo:{
+				type:Object,
+				default:function(){
+					var info={
+						ballType:'all',//center-只中心出现水波，all-球面也出现水波
+						ballSize:100,//球形的大小，最大200，最小50，超出范围可能样式需要再进行优化
+						waveColor:'#cec4c4',//水波颜色
+						ballPadding:'5px',//球内间距
+						
+					}
+					return info;
+				}
+			},
+			loadText:{//加载时显示的文字
+				type:String,
+				default:'加载中：'
+			},
+			loadPercent:{//进度百分比，不需要加%
+				type:Number,
+				default:0
+			}
+		},
+		data() {
+			return {
+				ballSize_:0
+			};
+		},
+		mounted() {
+			if(this.ballInfo.ballSize>200){
+				this.ballSize_=200;
+			}else if(this.ballInfo.ballSize<50){
+				this.ballSize_=50;
+			}else{
+				this.ballSize_=this.ballInfo.ballSize;
+			}
+		}
+	}
+</script>
+
+<style>
+	/* 图标使用的是font-awesome，图标可在http://fontawesome.dashgame.com/找 */
+	@import url("./css/font-awesome.min.css");
+	@import url("./css/loadline.css");
+</style>

components/m-icon/m-icon.css

+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
+}
+
+.m-icon {
+	font-family: uniicons;
+	font-size: 24px;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.m-icon.uni-active {
+	color: #007aff;
+}
+
+.m-icon-contact:before {
+	content: '\e100';
+}
+
+.m-icon-person:before {
+	content: '\e101';
+}
+
+.m-icon-personadd:before {
+	content: '\e102';
+}
+
+.m-icon-contact-filled:before {
+	content: '\e130';
+}
+
+.m-icon-person-filled:before {
+	content: '\e131';
+}
+
+.m-icon-personadd-filled:before {
+	content: '\e132';
+}
+
+.m-icon-phone:before {
+	content: '\e200';
+}
+
+.m-icon-email:before {
+	content: '\e201';
+}
+
+.m-icon-chatbubble:before {
+	content: '\e202';
+}
+
+.m-icon-chatboxes:before {
+	content: '\e203';
+}
+
+.m-icon-phone-filled:before {
+	content: '\e230';
+}
+
+.m-icon-email-filled:before {
+	content: '\e231';
+}
+
+.m-icon-chatbubble-filled:before {
+	content: '\e232';
+}
+
+.m-icon-chatboxes-filled:before {
+	content: '\e233';
+}
+
+.m-icon-weibo:before {
+	content: '\e260';
+}
+
+.m-icon-weixin:before {
+	content: '\e261';
+}
+
+.m-icon-pengyouquan:before {
+	content: '\e262';
+}
+
+.m-icon-chat:before {
+	content: '\e263';
+}
+
+.m-icon-qq:before {
+	content: '\e264';
+}
+
+.m-icon-videocam:before {
+	content: '\e300';
+}
+
+.m-icon-camera:before {
+	content: '\e301';
+}
+
+.m-icon-mic:before {
+	content: '\e302';
+}
+
+.m-icon-location:before {
+	content: '\e303';
+}
+
+.m-icon-mic-filled:before,
+.m-icon-speech:before {
+	content: '\e332';
+}
+
+.m-icon-location-filled:before {
+	content: '\e333';
+}
+
+.m-icon-micoff:before {
+	content: '\e360';
+}
+
+.m-icon-image:before {
+	content: '\e363';
+}
+
+.m-icon-map:before {
+	content: '\e364';
+}
+
+.m-icon-compose:before {
+	content: '\e400';
+}
+
+.m-icon-trash:before {
+	content: '\e401';
+}
+
+.m-icon-upload:before {
+	content: '\e402';
+}
+
+.m-icon-download:before {
+	content: '\e403';
+}
+
+.m-icon-close:before {
+	content: '\e404';
+}
+
+.m-icon-redo:before {
+	content: '\e405';
+}
+
+.m-icon-undo:before {
+	content: '\e406';
+}
+
+.m-icon-refresh:before {
+	content: '\e407';
+}
+
+.m-icon-star:before {
+	content: '\e408';
+}
+
+.m-icon-plus:before {
+	content: '\e409';
+}
+
+.m-icon-minus:before {
+	content: '\e410';
+}
+
+.m-icon-circle:before,
+.m-icon-checkbox:before {
+	content: '\e411';
+}
+
+.m-icon-close-filled:before,
+.m-icon-clear:before {
+	content: '\e434';
+}
+
+.m-icon-refresh-filled:before {
+	content: '\e437';
+}
+
+.m-icon-star-filled:before {
+	content: '\e438';
+}
+
+.m-icon-plus-filled:before {
+	content: '\e439';
+}
+
+.m-icon-minus-filled:before {
+	content: '\e440';
+}
+
+.m-icon-circle-filled:before {
+	content: '\e441';
+}
+
+.m-icon-checkbox-filled:before {
+	content: '\e442';
+}
+
+.m-icon-closeempty:before {
+	content: '\e460';
+}
+
+.m-icon-refreshempty:before {
+	content: '\e461';
+}
+
+.m-icon-reload:before {
+	content: '\e462';
+}
+
+.m-icon-starhalf:before {
+	content: '\e463';
+}
+
+.m-icon-spinner:before {
+	content: '\e464';
+}
+
+.m-icon-spinner-cycle:before {
+	content: '\e465';
+}
+
+.m-icon-search:before {
+	content: '\e466';
+}
+
+.m-icon-plusempty:before {
+	content: '\e468';
+}
+
+.m-icon-forward:before {
+	content: '\e470';
+}
+
+.m-icon-back:before,
+.m-icon-left-nav:before {
+	content: '\e471';
+}
+
+.m-icon-checkmarkempty:before {
+	content: '\e472';
+}
+
+.m-icon-home:before {
+	content: '\e500';
+}
+
+.m-icon-navigate:before {
+	content: '\e501';
+}
+
+.m-icon-gear:before {
+	content: '\e502';
+}
+
+.m-icon-paperplane:before {
+	content: '\e503';
+}
+
+.m-icon-info:before {
+	content: '\e504';
+}
+
+.m-icon-help:before {
+	content: '\e505';
+}
+
+.m-icon-locked:before {
+	content: '\e506';
+}
+
+.m-icon-more:before {
+	content: '\e507';
+}
+
+.m-icon-flag:before {
+	content: '\e508';
+}
+
+.m-icon-home-filled:before {
+	content: '\e530';
+}
+
+.m-icon-gear-filled:before {
+	content: '\e532';
+}
+
+.m-icon-info-filled:before {
+	content: '\e534';
+}
+
+.m-icon-help-filled:before {
+	content: '\e535';
+}
+
+.m-icon-more-filled:before {
+	content: '\e537';
+}
+
+.m-icon-settings:before {
+	content: '\e560';
+}
+
+.m-icon-list:before {
+	content: '\e562';
+}
+
+.m-icon-bars:before {
+	content: '\e563';
+}
+
+.m-icon-loop:before {
+	content: '\e565';
+}
+
+.m-icon-paperclip:before {
+	content: '\e567';
+}
+
+.m-icon-eye:before {
+	content: '\e568';
+}
+
+.m-icon-arrowup:before {
+	content: '\e580';
+}
+
+.m-icon-arrowdown:before {
+	content: '\e581';
+}
+
+.m-icon-arrowleft:before {
+	content: '\e582';
+}
+
+.m-icon-arrowright:before {
+	content: '\e583';
+}
+
+.m-icon-arrowthinup:before {
+	content: '\e584';
+}
+
+.m-icon-arrowthindown:before {
+	content: '\e585';
+}
+
+.m-icon-arrowthinleft:before {
+	content: '\e586';
+}
+
+.m-icon-arrowthinright:before {
+	content: '\e587';
+}
+
+.m-icon-pulldown:before {
+	content: '\e588';
+}
+
+.m-icon-scan:before {
+	content: "\e612";
+}

components/m-icon/m-icon.vue

+<template>
+	<view class="m-icon" :class="['m-icon-'+type]" @click="onClick()"></view>
+</template>
+
+<script>
+	export default {
+		props: {
+			/**
+			 * 图标类型
+			 */
+			type: String
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style>
+	@import "./m-icon.css";
+</style>

components/marked/index.js

+module.exports = require('./lib/marked');

components/mpvue-citypicker/city-data/province.js

+/* eslint-disable */
+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;

components/mpvue-citypicker/mpvueCityPicker.vue

+<template>
+  <div class="mpvue-picker">
+    <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
+    <div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
+      <div class="mpvue-picker__hd" catchtouchmove="true">
+        <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
+        <div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
+      </div>
+      <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
+        <block>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+        </block>
+      </picker-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import provinceData from './city-data/province.js';
+import cityData from './city-data/city.js';
+import areaData from './city-data/area.js';
+export default {
+  data() {
+    return {
+      pickerValue: [0, 0, 0],
+      provinceDataList: [],
+      cityDataList: [],
+      areaDataList: [],
+			/* 是否显示控件 */
+			showPicker: false,
+    };
+  },
+  created() {
+    this.init()
+  },
+  props: {
+    /* 默认值 */
+    pickerValueDefault: {
+      type: Array,
+      default(){
+				return [0, 0, 0]
+			}
+    },
+    /* 主题色 */
+    themeColor: String
+  },
+	watch:{
+		pickerValueDefault(){
+			this.init();
+		}
+	},
+  methods: {
+		init() {
+			this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
+			this.provinceDataList = provinceData;
+			this.cityDataList = cityData[this.pickerValueDefault[0]];
+			this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
+			this.pickerValue = this.pickerValueDefault;
+		},
+    show() {
+      setTimeout(() => {
+        this.showPicker = true;
+      }, 0);
+    },
+    maskClick() {
+      this.pickerCancel();
+    },
+    pickerCancel() {
+      this.showPicker = false;
+      this._$emit('onCancel');
+    },
+    pickerConfirm(e) {
+      this.showPicker = false;
+      this._$emit('onConfirm');
+    },
+    showPickerView() {
+      this.showPicker = true;
+    },
+    handPickValueDefault() {
+      if (this.pickerValueDefault !== [0, 0, 0]) {
+        if (this.pickerValueDefault[0] > provinceData.length - 1) {
+          this.pickerValueDefault[0] = provinceData.length - 1;
+        }
+        if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
+          this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
+        }
+        if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
+          this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
+        }
+      }
+    },
+    pickerChange(e) {
+      let changePickerValue = e.mp.detail.value;
+      if (this.pickerValue[0] !== changePickerValue[0]) {
+        // 第一级发生滚动
+        this.cityDataList = cityData[changePickerValue[0]];
+        this.areaDataList = areaData[changePickerValue[0]][0];
+        changePickerValue[1] = 0;
+        changePickerValue[2] = 0;
+      } else if (this.pickerValue[1] !== changePickerValue[1]) {
+        // 第二级滚动
+        this.areaDataList =
+          areaData[changePickerValue[0]][changePickerValue[1]];
+        changePickerValue[2] = 0;
+      }
+      this.pickerValue = changePickerValue;
+      this._$emit('onChange');
+    },
+    _$emit(emitName) {
+      let pickObj = {
+        label: this._getLabel(),
+        value: this.pickerValue,
+        cityCode: this._getCityCode()
+      };
+      this.$emit(emitName, pickObj);
+    },
+    _getLabel() {
+      let pcikerLabel =
+        this.provinceDataList[this.pickerValue[0]].label +
+        '-' +
+        this.cityDataList[this.pickerValue[1]].label +
+        '-' +
+        this.areaDataList[this.pickerValue[2]].label;
+      return pcikerLabel;
+    },
+    _getCityCode() {
+      return this.areaDataList[this.pickerValue[2]].value;
+    }
+  }
+};
+</script>
+
+<style>
+.pickerMask {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.mpvue-picker-content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transition: all 0.3s ease;
+  transform: translateY(100%);
+  z-index: 3000;
+}
+.mpvue-picker-view-show {
+  transform: translateY(0);
+}
+.mpvue-picker__hd {
+  display: flex;
+  padding: 9px 15px;
+  background-color: #fff;
+  position: relative;
+  text-align: center;
+  font-size: 17px;
+}
+.mpvue-picker__hd:after {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
+.mpvue-picker__action {
+  display: block;
+  flex: 1;
+  color: #1aad19;
+}
+.mpvue-picker__action:first-child {
+  text-align: left;
+  color: #888;
+}
+.mpvue-picker__action:last-child {
+  text-align: right;
+}
+.picker-item {
+  text-align: center;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+}
+.mpvue-picker-view {
+  position: relative;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 238px;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>

components/uParse/src/components/wxParseAudio.vue

+<template>
+  <!--增加audio标签支持-->
+  <audio
+    :id="node.attr.id"
+    :class="node.classStr"
+    :style="node.styleStr"
+    :src="node.attr.src"
+    :loop="node.attr.loop"
+    :poster="node.attr.poster"
+    :name="node.attr.name"
+    :author="node.attr.author"
+    controls></audio>
+</template>
+
+<script>
+export default {
+  name: 'wxParseAudio',
+  props: {
+    node: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>

components/uParse/src/components/wxParseImg.vue

+<template>
+	<image :mode="node.attr.mode" :lazy-load="node.attr.lazyLoad" :class="node.classStr || ''" :style="newStyleStr || node.styleStr || ''"
+	 :data-src="node.attr.src" :src="node.attr.src" @tap="wxParseImgTap" @load="wxParseImgLoad" 
+	 style="display:block;vertical-align:top;vertical-align:bottom;font-size:0;"/>
+</template>
+
+<script>
+	export default {
+		name: 'wxParseImg',
+		data() {
+			return {
+				newStyleStr: '',
+				preview: true,
+			};
+		},
+		props: {
+			node: {
+				type: Object,
+				default () {
+					return {};
+				},
+			},
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseImgTap(e) {
+				if (!this.preview) return;
+				const {
+					src
+				} = e.currentTarget.dataset;
+				if (!src) return;
+				this.uparse.preview(src, e);
+			},
+			// 图片视觉宽高计算函数区
+			wxParseImgLoad(e) {
+				const {
+					src
+				} = e.currentTarget.dataset;
+				if (!src) return;
+				const {
+					width,
+					height
+				} = e.mp.detail;
+				const recal = this.wxAutoImageCal(width, height);
+				const {
+					imageheight,
+					imageWidth
+				} = recal;
+				const {
+					padding,
+					mode
+				} = this.node.attr;
+				const {
+					styleStr
+				} = this.node;
+				const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
+				this.newStyleStr = `${styleStr || ''}; ${imageHeightStyle || ''}; width:` + (!imageWidth || imageWidth === '100%' ? '100%;' : `${imageWidth}px;`) +`padding: 0 ${+padding}px;`;
+			},
+			// 计算视觉优先的图片宽高
+			wxAutoImageCal(originalWidth, originalHeight) {
+				// 获取图片的原始长宽
+				const {
+					padding
+				} = this.node.attr;
+				const windowWidth = this.node.$screen.width - (2 * padding);
+				const results = {};
+
+				if (originalWidth < 60 || originalHeight < 60) {
+					const {
+						src
+					} = this.node.attr;
+					this.uparse.removeImageUrl(src);
+					this.preview = false;
+				}
+
+				// 判断按照那种方式进行缩放
+				if (originalWidth > windowWidth) {
+					// 在图片width大于手机屏幕width时候
+					results.imageWidth = '100%';
+					results.imageheight = (windowWidth * (originalHeight / originalWidth));
+				} else {
+					// 否则展示原来的数据
+					results.imageWidth = originalWidth;
+					results.imageheight = originalHeight;
+				}
+
+				return results;
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate0.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--table类型-->
+			<block v-else-if="node.tag == 'table'">
+				<view :class="node.classStr" class="table" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate1';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate0',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;// TODO currentTarget才有dataset
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate1.vue

+<template>
+	<view :class="(node.tag == 'li' ? node.classStr : (node.node==='text'?'text':''))">
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<!-- <view :class="node.classStr" :style="node.styleStr"> -->
+				<view :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<!-- <text>\n</text> -->
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate2';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate1',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			},
+		},
+	};
+</script>

components/uParse/src/components/wxParseTemplate10.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate11';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate10',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate11.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<!--button类型-->
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate11',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate2.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate3';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate2',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate3.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate4';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate3',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate4.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate5';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate4',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate5.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate6';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate5',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate6.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate7';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate6',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate7.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate8';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate7',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate8.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate9';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate8',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseTemplate9.vue

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate10';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate9',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		inject: ['uparse'],
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				this.uparse.navigate(href, e);
+			}
+		}
+	};
+</script>

components/uParse/src/components/wxParseVideo.vue

+<template>
+  <!--增加video标签支持，并循环添加-->
+  <view :class="node.classStr" :style="node.styleStr">
+    <video :class="node.classStr" class="video-video" :src="node.attr.src"></video>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'wxParseVideo',
+  props: {
+    node: {},
+  },
+};
+</script>

components/uParse/src/libs/html2json.js

+/**
+ * html2Json 改造来自: https://github.com/Jxck/html2json
+ *
+ *
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+import wxDiscode from './wxDiscode';
+import HTMLParser from './htmlparser';
+
+function makeMap(str) {
+	const obj = {};
+	const items = str.split(',');
+	for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
+	return obj;
+}
+
+// Block Elements - HTML 5
+const block = makeMap(
+	'br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
+);
+
+// Inline Elements - HTML 5
+const inline = makeMap(
+	'a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
+);
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr');
+
+function removeDOCTYPE(html) {
+	const isDocument = /<body.*>([^]*)<\/body>/.test(html);
+	return isDocument ? RegExp.$1 : html;
+}
+
+function trimHtml(html) {
+	return html
+		.replace(/<!--.*?-->/gi, '')
+		.replace(/\/\*.*?\*\//gi, '')
+		.replace(/[ ]+</gi, '<')
+		.replace(/<script[^]*<\/script>/gi, '')
+		.replace(/<style[^]*<\/style>/gi, '');
+}
+
+function getScreenInfo() {
+	const screen = {};
+	wx.getSystemInfo({
+		success: (res) => {
+			screen.width = res.windowWidth;
+			screen.height = res.windowHeight;
+		},
+	});
+	return screen;
+}
+
+function html2json(html, customHandler, imageProp, host) {
+	// 处理字符串
+	html = removeDOCTYPE(html);
+	html = trimHtml(html);
+	html = wxDiscode.strDiscode(html);
+	// 生成node节点
+	const bufArray = [];
+	const results = {
+		nodes: [],
+		imageUrls: [],
+	};
+
+	const screen = getScreenInfo();
+
+	function Node(tag) {
+		this.node = 'element';
+		this.tag = tag;
+
+		this.$screen = screen;
+	}
+
+	HTMLParser(html, {
+		start(tag, attrs, unary) {
+			// node for this element
+			const node = new Node(tag);
+
+			if (bufArray.length !== 0) {
+				const parent = bufArray[0];
+				if (parent.nodes === undefined) {
+					parent.nodes = [];
+				}
+			}
+
+			if (block[tag]) {
+				node.tagType = 'block';
+			} else if (inline[tag]) {
+				node.tagType = 'inline';
+			} else if (closeSelf[tag]) {
+				node.tagType = 'closeSelf';
+			}
+
+			node.attr = attrs.reduce((pre, attr) => {
+				const {
+					name
+				} = attr;
+				let {
+					value
+				} = attr;
+				if (name === 'class') {
+					node.classStr = value;
+				}
+				// has multi attibutes
+				// make it array of attribute
+				if (name === 'style') {
+					node.styleStr = value;
+				}
+				if (name === 'align') {
+					node.styleStr = node.styleStr || '';
+					node.styleStr = node.styleStr += 'text-align:' + value + ';';
+				}
+				if (value.match(/ /)) {
+					value = value.split(' ');
+				}
+
+				// if attr already exists
+				// merge it
+				if (pre[name]) {
+					if (Array.isArray(pre[name])) {
+						// already array, push to last
+						pre[name].push(value);
+					} else {
+						// single value, make it array
+						pre[name] = [pre[name], value];
+					}
+				} else {
+					// not exist, put it
+					pre[name] = value;
+				}
+
+				return pre;
+			}, {});
+
+			// 优化样式相关属性
+			if (node.classStr) {
+				node.classStr += ` ${node.tag}`;
+			} else {
+				node.classStr = node.tag;
+			}
+			if (node.tagType === 'inline') {
+				node.classStr += ' inline';
+			}
+
+			// 对img添加额外数据
+			if (node.tag === 'img') {
+				let imgUrl = node.attr.src;
+				imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
+				Object.assign(node.attr, imageProp, {
+					src: imgUrl || '',
+				});
+				if (imgUrl) {
+					results.imageUrls.push(imgUrl);
+				}
+			}
+
+			// 处理a标签属性
+			if (node.tag === 'a') {
+				node.attr.href = node.attr.href || '';
+			}
+
+			// 处理font标签样式属性
+			if (node.tag === 'font') {
+				const fontSize = [
+					'x-small',
+					'small',
+					'medium',
+					'large',
+					'x-large',
+					'xx-large',
+					'-webkit-xxx-large',
+				];
+				const styleAttrs = {
+					color: 'color',
+					face: 'font-family',
+					size: 'font-size',
+				};
+				if (!node.styleStr) node.styleStr = '';
+				Object.keys(styleAttrs).forEach((key) => {
+					if (node.attr[key]) {
+						const value = key === 'size' ? fontSize[node.attr[key] - 1] : node.attr[key];
+						node.styleStr += `${styleAttrs[key]}: ${value};`;
+					}
+				});
+			}
+
+			// 临时记录source资源
+			if (node.tag === 'source') {
+				results.source = node.attr.src;
+			}
+
+			if (customHandler.start) {
+				customHandler.start(node, results);
+			}
+
+			if (unary) {
+				// if this tag doesn't have end tag
+				// like <img src="hoge.png"/>
+				// add to parents
+				const parent = bufArray[0] || results;
+				if (parent.nodes === undefined) {
+					parent.nodes = [];
+				}
+				parent.nodes.push(node);
+			} else {
+				bufArray.unshift(node);
+			}
+		},
+		end(tag) {
+			// merge into parent tag
+			const node = bufArray.shift();
+			if (node.tag !== tag) {
+				console.error('invalid state: mismatch end tag');
+			}
+
+			// 当有缓存source资源时于于video补上src资源
+			if (node.tag === 'video' && results.source) {
+				node.attr.src = results.source;
+				delete results.source;
+			}
+
+			if (customHandler.end) {
+				customHandler.end(node, results);
+			}
+
+			if (bufArray.length === 0) {
+				results.nodes.push(node);
+			} else {
+				const parent = bufArray[0];
+				if (!parent.nodes) {
+					parent.nodes = [];
+				}
+				parent.nodes.push(node);
+			}
+		},
+		chars(text) {
+			if (!text.trim()) return;
+
+			const node = {
+				node: 'text',
+				text,
+			};
+
+			if (customHandler.chars) {
+				customHandler.chars(node, results);
+			}
+
+			if (bufArray.length === 0) {
+				results.nodes.push(node);
+			} else {
+				const parent = bufArray[0];
+				if (parent.nodes === undefined) {
+					parent.nodes = [];
+				}
+				parent.nodes.push(node);
+			}
+		},
+	});
+
+	return results;
+}
+
+export default html2json;

components/uParse/src/libs/htmlparser.js

+/**
+ *
+ * htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
+ *
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+// Regular Expressions for parsing tags and attributes
+
+const startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+const attr = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+
+function makeMap(str) {
+  const obj = {};
+  const items = str.split(',');
+  for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
+  return obj;
+}
+
+// Empty Elements - HTML 5
+const empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr');
+
+// Block Elements - HTML 5
+const block = makeMap('address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video');
+
+// Inline Elements - HTML 5
+const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var');
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr');
+
+// Attributes that have their values filled in disabled="disabled"
+const fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected');
+
+function HTMLParser(html, handler) {
+  let index;
+  let chars;
+  let match;
+  let last = html;
+  const stack = [];
+
+  stack.last = () => stack[stack.length - 1];
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    let pos;
+    if (!tagName) {
+      pos = 0;
+    } else {
+      // Find the closest opened tag of the same type
+      tagName = tagName.toLowerCase();
+      for (pos = stack.length - 1; pos >= 0; pos -= 1) {
+        if (stack[pos] === tagName) break;
+      }
+    }
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (let i = stack.length - 1; i >= pos; i -= 1) {
+        if (handler.end) handler.end(stack[i]);
+      }
+
+      // Remove the open elements from the stack
+      stack.length = pos;
+    }
+  }
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase();
+
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last());
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() === tagName) {
+      parseEndTag('', tagName);
+    }
+
+    unary = empty[tagName] || !!unary;
+
+    if (!unary) stack.push(tagName);
+
+    if (handler.start) {
+      const attrs = [];
+
+      rest.replace(attr, function genAttr(matches, name) {
+        const value = arguments[2] || arguments[3] || arguments[4] || (fillAttrs[name] ? name : '');
+
+        attrs.push({
+          name,
+          value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), // "
+        });
+      });
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary);
+      }
+    }
+  }
+
+  while (html) {
+    chars = true;
+
+    if (html.indexOf('</') === 0) {
+      match = html.match(endTag);
+
+      if (match) {
+        html = html.substring(match[0].length);
+        match[0].replace(endTag, parseEndTag);
+        chars = false;
+      }
+
+      // start tag
+    } else if (html.indexOf('<') === 0) {
+      match = html.match(startTag);
+
+      if (match) {
+        html = html.substring(match[0].length);
+        match[0].replace(startTag, parseStartTag);
+        chars = false;
+      }
+    }
+
+    if (chars) {
+      index = html.indexOf('<');
+      let text = '';
+      while (index === 0) {
+        text += '<';
+        html = html.substring(1);
+        index = html.indexOf('<');
+      }
+      text += index < 0 ? html : html.substring(0, index);
+      html = index < 0 ? '' : html.substring(index);
+
+      if (handler.chars) handler.chars(text);
+    }
+
+    if (html === last) throw new Error(`Parse Error: ${html}`);
+    last = html;
+  }
+
+  // Clean up any remaining tags
+  parseEndTag();
+}
+
+export default HTMLParser;

components/uParse/src/libs/wxDiscode.js

+// HTML 支持的数学符号
+function strNumDiscode(str) {
+  str = str.replace(/∀/g, '∀');
+  str = str.replace(/∂/g, '∂');
+  str = str.replace(/∃/g, '∃');
+  str = str.replace(/∅/g, '∅');
+  str = str.replace(/∇/g, '∇');
+  str = str.replace(/∈/g, '∈');
+  str = str.replace(/∉/g, '∉');
+  str = str.replace(/∋/g, '∋');
+  str = str.replace(/∏/g, '∏');
+  str = str.replace(/∑/g, '∑');
+  str = str.replace(/−/g, '−');
+  str = str.replace(/∗/g, '∗');
+  str = str.replace(/√/g, '√');
+  str = str.replace(/∝/g, '∝');
+  str = str.replace(/∞/g, '∞');
+  str = str.replace(/∠/g, '∠');
+  str = str.replace(/∧/g, '∧');
+  str = str.replace(/∨/g, '∨');
+  str = str.replace(/∩/g, '∩');
+  str = str.replace(/∪/g, '∪');
+  str = str.replace(/∫/g, '∫');
+  str = str.replace(/∴/g, '∴');
+  str = str.replace(/∼/g, '∼');
+  str = str.replace(/≅/g, '≅');
+  str = str.replace(/≈/g, '≈');
+  str = str.replace(/≠/g, '≠');
+  str = str.replace(/≤/g, '≤');
+  str = str.replace(/≥/g, '≥');
+  str = str.replace(/⊂/g, '⊂');
+  str = str.replace(/⊃/g, '⊃');
+  str = str.replace(/⊄/g, '⊄');
+  str = str.replace(/⊆/g, '⊆');
+  str = str.replace(/⊇/g, '⊇');
+  str = str.replace(/⊕/g, '⊕');
+  str = str.replace(/⊗/g, '⊗');
+  str = str.replace(/⊥/g, '⊥');
+  str = str.replace(/⋅/g, '⋅');
+  return str;
+}
+
+// HTML 支持的希腊字母
+function strGreeceDiscode(str) {
+  str = str.replace(/Α/g, 'Α');
+  str = str.replace(/Β/g, 'Β');
+  str = str.replace(/Γ/g, 'Γ');
+  str = str.replace(/Δ/g, 'Δ');
+  str = str.replace(/Ε/g, 'Ε');
+  str = str.replace(/Ζ/g, 'Ζ');
+  str = str.replace(/Η/g, 'Η');
+  str = str.replace(/Θ/g, 'Θ');
+  str = str.replace(/Ι/g, 'Ι');
+  str = str.replace(/Κ/g, 'Κ');
+  str = str.replace(/Λ/g, 'Λ');
+  str = str.replace(/Μ/g, 'Μ');
+  str = str.replace(/Ν/g, 'Ν');
+  str = str.replace(/Ξ/g, 'Ν');
+  str = str.replace(/Ο/g, 'Ο');
+  str = str.replace(/Π/g, 'Π');
+  str = str.replace(/Ρ/g, 'Ρ');
+  str = str.replace(/Σ/g, 'Σ');
+  str = str.replace(/Τ/g, 'Τ');
+  str = str.replace(/Υ/g, 'Υ');
+  str = str.replace(/Φ/g, 'Φ');
+  str = str.replace(/Χ/g, 'Χ');
+  str = str.replace(/Ψ/g, 'Ψ');
+  str = str.replace(/Ω/g, 'Ω');
+
+  str = str.replace(/α/g, 'α');
+  str = str.replace(/β/g, 'β');
+  str = str.replace(/γ/g, 'γ');
+  str = str.replace(/δ/g, 'δ');
+  str = str.replace(/ε/g, 'ε');
+  str = str.replace(/ζ/g, 'ζ');
+  str = str.replace(/η/g, 'η');
+  str = str.replace(/θ/g, 'θ');
+  str = str.replace(/ι/g, 'ι');
+  str = str.replace(/κ/g, 'κ');
+  str = str.replace(/λ/g, 'λ');
+  str = str.replace(/μ/g, 'μ');
+  str = str.replace(/ν/g, 'ν');
+  str = str.replace(/ξ/g, 'ξ');
+  str = str.replace(/ο/g, 'ο');
+  str = str.replace(/π/g, 'π');
+  str = str.replace(/ρ/g, 'ρ');
+  str = str.replace(/ς/g, 'ς');
+  str = str.replace(/σ/g, 'σ');
+  str = str.replace(/τ/g, 'τ');
+  str = str.replace(/υ/g, 'υ');
+  str = str.replace(/φ/g, 'φ');
+  str = str.replace(/χ/g, 'χ');
+  str = str.replace(/ψ/g, 'ψ');
+  str = str.replace(/ω/g, 'ω');
+  str = str.replace(/ϑ/g, 'ϑ');
+  str = str.replace(/ϒ/g, 'ϒ');
+  str = str.replace(/ϖ/g, 'ϖ');
+  str = str.replace(/·/g, '·');
+  return str;
+}
+
+function strcharacterDiscode(str) {
+  // 加入常用解析
+  str = str.replace(/ /g, ' ');
+  str = str.replace(/ /g, ' ');
+  str = str.replace(/ /g, '　');
+  str = str.replace(/"/g, "'");
+  str = str.replace(/&/g, '&');
+  str = str.replace(/&lt;/g, '<');
+  str = str.replace(/&gt;/g, '>');
+  str = str.replace(/&#8226;/g, '•');
+
+  return str;
+}
+
+// HTML 支持的其他实体
+function strOtherDiscode(str) {
+  str = str.replace(/&OElig;/g, 'Œ');
+  str = str.replace(/&oelig;/g, 'œ');
+  str = str.replace(/&Scaron;/g, 'Š');
+  str = str.replace(/&scaron;/g, 'š');
+  str = str.replace(/&Yuml;/g, 'Ÿ');
+  str = str.replace(/&fnof;/g, 'ƒ');
+  str = str.replace(/&circ;/g, 'ˆ');
+  str = str.replace(/&tilde;/g, '˜');
+  str = str.replace(/&ensp;/g, '');
+  str = str.replace(/&emsp;/g, '');
+  str = str.replace(/&thinsp;/g, '');
+  str = str.replace(/&zwnj;/g, '');
+  str = str.replace(/&zwj;/g, '');
+  str = str.replace(/&lrm;/g, '');
+  str = str.replace(/&rlm;/g, '');
+  str = str.replace(/&ndash;/g, '–');
+  str = str.replace(/&mdash;/g, '—');
+  str = str.replace(/&lsquo;/g, '‘');
+  str = str.replace(/&rsquo;/g, '’');
+  str = str.replace(/&sbquo;/g, '‚');
+  str = str.replace(/&ldquo;/g, '“');
+  str = str.replace(/&rdquo;/g, '”');
+  str = str.replace(/&bdquo;/g, '„');
+  str = str.replace(/&dagger;/g, '†');
+  str = str.replace(/&Dagger;/g, '‡');
+  str = str.replace(/&bull;/g, '•');
+  str = str.replace(/&hellip;/g, '…');
+  str = str.replace(/&permil;/g, '‰');
+  str = str.replace(/&prime;/g, '′');
+  str = str.replace(/&Prime;/g, '″');
+  str = str.replace(/&lsaquo;/g, '‹');
+  str = str.replace(/&rsaquo;/g, '›');
+  str = str.replace(/&oline;/g, '‾');
+  str = str.replace(/&euro;/g, '€');
+  str = str.replace(/&trade;/g, '™');
+
+  str = str.replace(/&larr;/g, '←');
+  str = str.replace(/&uarr;/g, '↑');
+  str = str.replace(/&rarr;/g, '→');
+  str = str.replace(/&darr;/g, '↓');
+  str = str.replace(/&harr;/g, '↔');
+  str = str.replace(/&crarr;/g, '↵');
+  str = str.replace(/&lceil;/g, '⌈');
+  str = str.replace(/&rceil;/g, '⌉');
+
+  str = str.replace(/&lfloor;/g, '⌊');
+  str = str.replace(/&rfloor;/g, '⌋');
+  str = str.replace(/&loz;/g, '◊');
+  str = str.replace(/&spades;/g, '♠');
+  str = str.replace(/&clubs;/g, '♣');
+  str = str.replace(/&hearts;/g, '♥');
+
+  str = str.replace(/&diams;/g, '♦');
+  str = str.replace(/&#39;/g, "'");
+  return str;
+}
+
+function strDiscode(str) {
+  str = strNumDiscode(str);
+  str = strGreeceDiscode(str);
+  str = strcharacterDiscode(str);
+  str = strOtherDiscode(str);
+  return str;
+}
+
+function urlToHttpUrl(url, domain) {
+  if (/^\/\//.test(url)) {
+    return `https:${url}`;
+  } else if (/^\//.test(url)) {
+    return `https://${domain}${url}`;
+  }
+  return url;
+}
+
+export default {
+  strDiscode,
+  urlToHttpUrl,
+};

components/uParse/src/wxParse.css

+/**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *         垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+.wxParse {
+  width: 100%;
+  font-family: Helvetica, sans-serif;
+  font-size: 30upx;
+  color: #666;
+  line-height: 1.8;
+}
+
+.wxParse view {
+  word-break: hyphenate;
+}
+
+.wxParse .inline {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+.wxParse .div {
+  margin: 0;
+  padding: 0;
+}
+
+.wxParse .h1 .text {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.wxParse .h2 .text {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.wxParse .h3 .text {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.wxParse .h4 .text {
+  margin: 1.33em 0;
+}
+.wxParse .h5 .text {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+.wxParse .h6 .text {
+  font-size: 0.67em;
+  margin: 2.33em 0;
+}
+
+.wxParse .h1 .text,
+.wxParse .h2 .text,
+.wxParse .h3 .text,
+.wxParse .h4 .text,
+.wxParse .h5 .text,
+.wxParse .h6 .text,
+.wxParse .b,
+.wxParse .strong {
+  font-weight: bolder;
+}
+
+
+.wxParse .p {
+  margin: 1em 0;
+}
+
+.wxParse .i,
+.wxParse .cite,
+.wxParse .em,
+.wxParse .var,
+.wxParse .address {
+  font-style: italic;
+}
+
+.wxParse .pre,
+.wxParse .tt,
+.wxParse .code,
+.wxParse .kbd,
+.wxParse .samp {
+  font-family: monospace;
+}
+.wxParse .pre {
+  overflow: auto;
+  background: #f5f5f5;
+  padding: 16upx;
+  white-space: pre;
+  margin: 1em 0upx;
+}
+.wxParse .code {
+  display: inline;
+  background: #f5f5f5;
+}
+
+.wxParse .big {
+  font-size: 1.17em;
+}
+
+.wxParse .small,
+.wxParse .sub,
+.wxParse .sup {
+  font-size: 0.83em;
+}
+
+.wxParse .sub {
+  vertical-align: sub;
+}
+.wxParse .sup {
+  vertical-align: super;
+}
+
+.wxParse .s,
+.wxParse .strike,
+.wxParse .del {
+  text-decoration: line-through;
+}
+
+.wxParse .strong,
+.wxParse .s {
+  display: inline;
+}
+
+.wxParse .a {
+  color: deepskyblue;
+}
+
+.wxParse .video {
+  text-align: center;
+  margin: 22upx 0;
+}
+
+.wxParse .video-video {
+  width: 100%;
+}
+
+.wxParse .img {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.wxParse .blockquote {
+  margin: 10upx 0;
+  padding: 22upx 0 22upx 22upx;
+  font-family: Courier, Calibri, "宋体";
+  background: #f5f5f5;
+  border-left: 6upx solid #dbdbdb;
+}
+.wxParse .blockquote .p {
+  margin: 0;
+}
+
+.wxParse .ul, .wxParse .ol {
+  display: block;
+  margin: 1em 0;
+  padding-left: 33upx;
+}
+.wxParse .ol {
+  list-style-type: disc;
+}
+.wxParse .ol {
+  list-style-type: decimal;
+}
+.wxParse .ol>weixin-parse-template,.wxParse .ul>weixin-parse-template {
+  display: list-item;
+  align-items: baseline;
+  text-align: match-parent;
+}
+
+.wxParse .ol>.li,.wxParse .ul>.li {
+  display: list-item;
+  align-items: baseline;
+  text-align: match-parent;
+}
+.wxParse .ul .ul, .wxParse .ol .ul {
+  list-style-type: circle;
+}
+.wxParse .ol .ol .ul, .wxParse .ol .ul .ul, .wxParse .ul .ol .ul, .wxParse .ul .ul .ul {
+    list-style-type: square;
+}
+
+.wxParse .u {
+  text-decoration: underline;
+}
+.wxParse .hide {
+  display: none;
+}
+.wxParse .del {
+  display: inline;
+}
+.wxParse .figure {
+  overflow: hidden;
+}
+
+.wxParse .table {
+  width: 100%;
+}
+.wxParse .thead, .wxParse .tfoot, .wxParse .tr {
+  display: flex;
+  flex-direction: row;
+}
+.wxParse .tr {
+  width:100%;
+  display: flex;
+  border-right: 2upx solid #e0e0e0;
+  border-bottom: 2upx solid #e0e0e0;
+}
+.wxParse .th,
+.wxParse .td {
+  display: flex;
+  width: 1276upx;
+  overflow: auto;
+  flex: 1;
+  padding: 11upx;
+  border-left: 2upx solid #e0e0e0;
+}
+.wxParse .td:last {
+  border-top: 2upx solid #e0e0e0;
+}
+.wxParse .th {
+  background: #f0f0f0;
+  border-top: 2upx solid #e0e0e0;
+}

components/uParse/src/wxParse.vue

+<!--**
+ * forked from：https://github.com/F-loat/mpvue-wxParse
+ *
+ * github地址: https://github.com/dcloudio/uParse
+ *
+ * for: uni-app框架下 富文本解析
+ */-->
+
+<template>
+	<!--基础元素-->
+	<view class="wxParse" :class="className" v-if="!loading">
+	  <view v-for="(node,index) of nodes" :key="index">
+		<wxParseTemplate :node="node" />
+	  </view>
+	</view>
+</template>
+
+<script>
+import HtmlToJson from './libs/html2json';
+import wxParseTemplate from './components/wxParseTemplate0';
+
+export default {
+  name: 'wxParse',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    noData: {
+      type: String,
+      default: '<div style="color: red;">数据不能为空</div>',
+    },
+    startHandler: {
+      type: Function,
+      default() {
+        return (node) => {
+          node.attr.class = null;
+          node.attr.style = null;
+        };
+      },
+    },
+    endHandler: {
+      type: Function,
+      default: null,
+    },
+    charsHandler: {
+      type: Function,
+      default: null,
+    },
+    imageProp: {
+      type: Object,
+      default() {
+        return {
+          mode: 'aspectFit',
+          padding: 0,
+          lazyLoad: false,
+          domain: '',
+        };
+      },
+    },
+  },
+	provide() {
+		return {
+			uparse: this
+		}
+	},
+  components: {
+    wxParseTemplate,
+  },
+  data() {
+    return {
+      imageUrls: []
+    };
+  },
+  computed: {
+    nodes() {
+      const {
+        content,
+        noData,
+        imageProp,
+        startHandler,
+        endHandler,
+        charsHandler,
+      } = this;
+      const parseData = content || noData;
+      const customHandler = {
+        start: startHandler,
+        end: endHandler,
+        chars: charsHandler,
+      };
+      const results = HtmlToJson(parseData, customHandler, imageProp, this);
+      this.imageUrls = results.imageUrls;
+	  console.log(results.nodes)
+      return results.nodes;
+    },
+  },
+  methods: {
+    navigate(href, $event) {
+      this.$emit('navigate', href, $event);
+    },
+    preview(src, $event) {
+      if (!this.imageUrls.length) return;
+      wx.previewImage({
+        current: src,
+        urls: this.imageUrls,
+      });
+      this.$emit('preview', src, $event);
+    },
+    removeImageUrl(src) {
+      const { imageUrls } = this;
+      imageUrls.splice(imageUrls.indexOf(src), 1);
+    },
+  },
+};
+</script>
+<style>
+	
+</style>

components/uni-badge/uni-badge.vue

+<template>
+	<text class="uni-badge" v-if="text" :class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" @click="onClick()">{{text}}</text>
+</template>
+
+<script>
+	export default {
+		name: 'uni-badge',
+		props: {
+			type: {
+				type: String,
+				default: 'default'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			text: {
+				type: String,
+				default: ''
+			},
+			size: { //small.normal
+				type: String,
+				default: 'normal'
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.uni-badge {
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
+		box-sizing: border-box;
+		font-size: 12px;
+		line-height: 1;
+		display: inline-block;
+		padding: 3px 6px;
+		color: #333;
+		border-radius: 100px;
+		background-color: #f1f1f1
+	}
+
+	.uni-badge.uni-badge-inverted {
+		padding: 0 5px 0 0;
+		color: #999;
+		background-color: transparent
+	}
+
+	.uni-badge-primary {
+		color: #fff;
+		background-color: #007aff
+	}
+
+	.uni-badge-primary.uni-badge-inverted {
+		color: #007aff;
+		background-color: transparent
+	}
+
+	.uni-badge-success {
+		color: #fff;
+		background-color: #4cd964
+	}
+
+	.uni-badge-success.uni-badge-inverted {
+		color: #4cd964;
+		background-color: transparent
+	}
+
+	.uni-badge-warning {
+		color: #fff;
+		background-color: #f0ad4e
+	}
+
+	.uni-badge-warning.uni-badge-inverted {
+		color: #f0ad4e;
+		background-color: transparent
+	}
+
+	.uni-badge-error {
+		color: #fff;
+		background-color: #dd524d
+	}
+
+	.uni-badge-error.uni-badge-inverted {
+		color: #dd524d;
+		background-color: transparent
+	}
+
+	.uni-badge--small {
+		transform: scale(.8);
+		transform-origin: center center
+	}
+</style>
\ No newline at end of file

components/uni-calendar/uni-calendar-item.vue

+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+		'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
+		'uni-calendar-item--before-checked':weeks.beforeMultiple,
+		'uni-calendar-item--multiple': weeks.multiple,
+		'uni-calendar-item--after-checked':weeks.afterMultiple,
+		}"
+	 @click="choiceDate(weeks)">
+		<view class="uni-calendar-item__weeks-box-item">
+			<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text" :class="{
+				'uni-calendar-item--isDay-text': weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.date}}</text>
+			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				}">今天</text>
+			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
+			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--extra':weeks.extraInfo.info,
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--before-checked':weeks.beforeMultiple,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--after-checked':weeks.afterMultiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.extraInfo.info}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: $uni-font-size-base;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-lunar-text {
+		font-size: $uni-font-size-sm;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100rpx;
+	}
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: $uni-color-error;
+
+	}
+
+	.uni-calendar-item--disable {
+		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
+		color: $uni-text-color-disable;
+	}
+
+	.uni-calendar-item--isDay-text {
+		color: $uni-color-primary;
+	}
+
+	.uni-calendar-item--isDay {
+		background-color: $uni-color-primary;
+		opacity: 0.8;
+		color: #fff;
+	}
+
+	.uni-calendar-item--extra {
+		color: $uni-color-error;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--checked {
+		background-color: $uni-color-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color: $uni-color-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+	.uni-calendar-item--before-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+	.uni-calendar-item--after-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+</style>

components/uni-calendar/util.js

+import CALENDAR from './calendar.js'
+
+class Calendar {
+	constructor({
+		date,
+		selected,
+		startDate,
+		endDate,
+		range
+	} = {}) {
+		// 当前日期
+		this.date = this.getDate(new Date()) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 范围开始
+		this.startDate = startDate
+		// 范围结束
+		this.endDate = endDate
+		this.range = range
+		// 多选状态
+		this.cleanMultipleStatus()
+		// 每周日期
+		this.weeks = {}
+		// this._getWeek(this.date.fullDate)
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this.selectDate = this.getDate(date)
+		this._getWeek(this.selectDate.fullDate)
+	}
+
+	/**
+	 * 清理多选状态
+	 */
+	cleanMultipleStatus() {
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+	}
+
+	/**
+	 * 重置开始日期
+	 */
+	resetSatrtDate(startDate) {
+		// 范围开始
+		this.startDate = startDate
+
+	}
+
+	/**
+	 * 重置结束日期
+	 */
+	resetEndDate(endDate) {
+		// 范围结束
+		this.endDate = endDate
+	}
+
+	/**
+	 * 获取任意时间
+	 */
+	getDate(date, AddDayCount = 0, str = 'day') {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+		switch (str) {
+			case 'day':
+				dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+			case 'month':
+				if (dd.getDate() === 31) {
+					dd.setDate(dd.getDate() + AddDayCount)
+				} else {
+					dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
+				}
+				break
+			case 'year':
+				dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+		}
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+	/**
+	 * 获取上月剩余天数
+	 */
+	_getLastMonthDays(firstDay, full) {
+		let dateArr = []
+		for (let i = firstDay; i > 0; i--) {
+			const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
+			dateArr.push({
+				date: beforeDate,
+				month: full.month - 1,
+				lunar: this.getlunar(full.year, full.month - 1, beforeDate),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 获取本月天数
+	 */
+	_currentMonthDys(dateData, full) {
+		let dateArr = []
+		let fullDate = this.date.fullDate
+		for (let i = 1; i <= dateData; i++) {
+			let isinfo = false
+			let nowDate = full.year + '-' + (full.month < 10 ?
+				full.month : full.month) + '-' + (i < 10 ?
+				'0' + i : i)
+			// 是否今天
+			let isDay = fullDate === nowDate
+			// 获取打点信息
+			let info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(nowDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				let dateCompBefore = this.dateCompare(this.startDate, fullDate)
+				disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
+			}
+
+			if (this.endDate) {
+				let dateCompAfter = this.dateCompare(fullDate, this.endDate)
+				disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
+			}
+			let multiples = this.multipleStatus.data
+			let checked = false
+			let multiplesStatus = -1
+			if (this.range) {
+				if (multiples) {
+					multiplesStatus = multiples.findIndex((item) => {
+						return this.dateEqual(item, nowDate)
+					})
+				}
+				if (multiplesStatus !== -1) {
+					checked = true
+				}
+			}
+			let data = {
+				fullDate: nowDate,
+				year: full.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
+				afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
+				month: full.month,
+				lunar: this.getlunar(full.year, full.month, i),
+				disable: !disableBefore || !disableAfter,
+				isDay
+			}
+			if (info) {
+				data.extraInfo = info
+			}
+
+			dateArr.push(data)
+		}
+		return dateArr
+	}
+	/**
+	 * 获取下月天数
+	 */
+	_getNextMonthDays(surplus, full) {
+		let dateArr = []
+		for (let i = 1; i < surplus + 1; i++) {
+			dateArr.push({
+				date: i,
+				month: Number(full.month) + 1,
+				lunar: this.getlunar(full.year, Number(full.month) + 1, i),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+		const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
+		return dateInfo
+	}
+
+	/**
+	 * 比较时间大小
+	 */
+	dateCompare(startDate, endDate) {
+		// 计算截止时间
+		startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+		if (startDate <= endDate) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		// 计算截止时间
+		before = new Date(before.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		after = new Date(after.replace('-', '/').replace('-', '/'))
+		if (before.getTime() - after.getTime() === 0) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDate(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+	/**
+	 * 计算阴历日期显示
+	 */
+	getlunar(year, month, date) {
+		return CALENDAR.solar2lunar(year, month, date)
+	}
+	/**
+	 * 设置打点
+	 */
+	setSelectInfo(data, value) {
+		this.selected = value
+		this._getWeek(data)
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+
+		if (!this.range) return
+		if (before && after) {
+			this.multipleStatus.before = ''
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+			} else {
+				this.multipleStatus.after = fullDate
+				if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+				}
+			}
+		}
+		this._getWeek(fullDate)
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	_getWeek(dateData) {
+		const {
+			fullDate,
+			year,
+			month,
+			date,
+			day
+		} = this.getDate(dateData)
+		let firstDay = new Date(year, month - 1, 1).getDay()
+		let currentDay = new Date(year, month, 0).getDate()
+		let dates = {
+			lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
+			currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
+			nextMonthDays: [], // 下个月开始几天
+			weeks: []
+		}
+		let canlender = []
+		const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
+		dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
+		canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
+		let weeks = {}
+		// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
+		for (let i = 0; i < canlender.length; i++) {
+			if (i % 7 === 0) {
+				weeks[parseInt(i / 7)] = new Array(7)
+			}
+			weeks[parseInt(i / 7)][i % 7] = canlender[i]
+		}
+		this.canlender = canlender
+		this.weeks = weeks
+	}
+
+	//静态方法
+	// static init(date) {
+	// 	if (!this.instance) {
+	// 		this.instance = new Calendar(date);
+	// 	}
+	// 	return this.instance;
+	// }
+}
+
+
+export default Calendar

components/uni-card/uni-card.vue

+<template>
+	<view class="uni-card" :class="isFull === true || isFull === 'true' ? 'uni-card--full' : ''" @click="onClick">
+		<view class="uni-card__header" v-if="title">
+			<view class="uni-card__header-extra-img-view" v-if="thumbnail">
+				<image class="uni-card__header-extra-img" :src="thumbnail"></image>
+			</view>
+			<view class="uni-card__header-title-text">{{title}}</view>
+			<view class="uni-card__header-extra-text" v-if="extra">{{extra}}</view>
+		</view>
+		<view class="uni-card__content uni-card__content--pd">
+			<slot />
+		</view>
+		<view class="uni-card__footer" v-if="note">{{note}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "uni-card",
+		props: {
+			title: String, //标题
+			extra: String, //扩展信息
+			note: String, //Tips
+			thumbnail: String, //缩略图
+			isFull: { //内容区域是否通栏
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.uni-card {
+		margin-left: 24upx;
+		margin-right: 24upx;
+		background: #fff;
+		box-shadow: none;
+		position: relative;
+		display: flex;
+		flex-direction: column
+	}
+
+	.uni-card:after {
+		content: '';
+		position: absolute;
+		transform-origin: center;
+		box-sizing: border-box;
+		pointer-events: none;
+		top: -50%;
+		left: -50%;
+		right: -50%;
+		bottom: -50%;
+		border: 1px solid #c8c7cc;
+		border-radius: 12upx;
+		transform: scale(.5)
+	}
+
+	.uni-card__footer,
+	.uni-card__header {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		padding: 16upx;
+		align-items: center
+	}
+
+	.uni-card__header:after {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: #c8c7cc
+	}
+
+	.uni-card__header-title {
+		flex: 1;
+		margin-right: 16upx;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center
+	}
+
+	.uni-card__header-title-text {
+		font-size: 32upx;
+		flex: 1;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden
+	}
+
+	.uni-card__header-extra-img-view {
+		display: flex
+	}
+
+	.uni-card__header-extra-img {
+		height: 40upx;
+		width: 40upx;
+		margin-right: 16upx
+	}
+
+	.uni-card__header-extra-text {
+		flex: 0 0 auto;
+		width: 30%;
+		margin-left: 16upx;
+		font-size: 28upx;
+		text-align: right;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden
+	}
+
+	.uni-card__content--pd {
+		padding: 16upx
+	}
+
+	.uni-card__footer {
+		justify-content: space-between;
+		color: #999;
+		font-size: 24upx;
+		padding-top: 0
+	}
+
+	.uni-card--full {
+		margin: 0
+	}
+</style>
\ No newline at end of file

components/uni-collapse-item/uni-collapse-item.vue

+<template>
+	<view :class="['uni-collapse-cell',{'uni-collapse-cell--disabled':disabled,'uni-collapse-cell--open':isOpen}]" :hover-class="disabled ? '' : 'uni-collapse-cell--hover'">
+		<view class="uni-collapse-cell__title" @click="onClick">
+			<view class="uni-collapse-cell__title-extra" v-if="thumb">
+				<image class="uni-collapse-cell__title-img" :src="thumb"></image>
+			</view>
+			<view class="uni-collapse-cell__title-inner">
+				<view class="uni-collapse-cell__title-text">{{title}}</view>
+			</view>
+			<view class="uni-collapse-cell__title-arrow" :class="{'uni-active':isOpen,'uni-collapse-cell--animation':showAnimation===true}">
+				<uni-icon color="#bbb" size="20" type="arrowdown"></uni-icon>
+			</view>
+		</view>
+		<view class="uni-collapse-cell__content" :class="{'uni-collapse-cell--animation':showAnimation===true}" :style="{height:isOpen ? height : '0px'}">
+			<view :id="elId">
+				<slot />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcon from '../uni-icon/uni-icon.vue'
+	export default {
+		name: 'uni-collapse-item',
+		components: {
+			uniIcon
+		},
+		props: {
+			title: { //列表标题
+				type: String,
+				default: ''
+			},
+			name: { //唯一标识符
+				type: [Number, String],
+				default: 0
+			},
+			disabled: { //是否禁用
+				type: [Boolean, String],
+				default: false
+			},
+			showAnimation: { //是否显示动画
+				type: Boolean,
+				default: false
+			},
+			open: { //是否展开
+				type: [Boolean, String],
+				default: false
+			},
+			thumb: { //缩略图
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				isOpen: false,
+				height: 'auto',
+				elId: elId
+			};
+		},
+		watch: {
+			open(val) {
+				this.isOpen = val
+			}
+		},
+		inject: ['collapse'],
+		created() {
+			this.isOpen = this.open
+			this.nameSync = this.name ? this.name : this.collapse.childrens.length
+			this.collapse.childrens.push(this)
+			if (String(this.collapse.accordion) === 'true') {
+				if (this.isOpen) {
+					let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
+					if (lastEl) {
+						this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
+					}
+				}
+			}
+		},
+		// #ifdef H5
+		mounted() {
+			this.getSize()
+		},
+		// #endif
+		// #ifndef H5
+		onReady() {
+			this.getSize()
+		},
+		// #endif
+		methods: {
+			getSize() {
+				if (this.showAnimation) {
+					uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => {
+						this.height = ret[0].height + 'px'
+					});
+				}
+			},
+			onClick() {
+				if (this.disabled) {
+					return
+				}
+				if (String(this.collapse.accordion) === 'true') {
+					this.collapse.childrens.forEach(vm => {
+						if (vm === this) {
+							return
+						}
+						vm.isOpen = false
+					})
+				}
+				this.isOpen = !this.isOpen
+				this.collapse.onChange && this.collapse.onChange()
+			}
+		}
+	}
+</script>
+
+<style>
+	@charset "UTF-8";
+
+	.uni-collapse-cell {
+		position: relative
+	}
+
+	.uni-collapse-cell--hover {
+		background-color: #f1f1f1
+	}
+
+	.uni-collapse-cell--open {
+		background-color: #f1f1f1
+	}
+
+	.uni-collapse-cell--disabled {
+		opacity: .3
+	}
+
+	.uni-collapse-cell--animation {
+		transition: all .3s
+	}
+
+	.uni-collapse-cell:after {
+		position: absolute;
+		z-index: 3;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 1px;
+		content: '';
+		-webkit-transform: scaleY(.5);
+		transform: scaleY(.5);
+		background-color: #c8c7cc
+	}
+
+	.uni-collapse-cell__title {
+		padding: 24upx 30upx;
+		width: 100%;
+		box-sizing: border-box;
+		flex: 1;
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center
+	}
+
+	.uni-collapse-cell__title-extra {
+		margin-right: 18upx;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center
+	}
+
+	.uni-collapse-cell__title-img {
+		height: 52upx;
+		width: 52upx
+	}
+
+	.uni-collapse-cell__title-arrow {
+		width: 20px;
+		height: 20px;
+		transform: rotate(0);
+		transform-origin: center center
+	}
+
+	.uni-collapse-cell__title-arrow.uni-active {
+		transform: rotate(-180deg)
+	}
+
+	.uni-collapse-cell__title-inner {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column
+	}
+
+	.uni-collapse-cell__title-text {
+		font-size: 32upx;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: inherit;
+		line-height: 1.5;
+		overflow: hidden
+	}
+
+	.uni-collapse-cell__content {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		background: #fff
+	}
+
+	.uni-collapse-cell__content view {
+		font-size: 28upx
+	}
+</style>
\ No newline at end of file