diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>
diff --git a/pages/guide/guide.vue b/pages/guide/guide.vue
index 1351bc1..f2425bb 100644
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@@ -1,3 +1,4 @@
+<!-- 举报指南 -->
 <template>
 	<view class="guide">
 		<Title />
@@ -123,7 +124,7 @@
 				<image @click="preImage(imgList[0])" :show-menu-by-longpress="true" :src="imgList[0]" style="width: 100%;height: 560px;margin-top: 32rpx;"></image>
 				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图一）</view>
 				<image @click="preImage(imgList[1])" :show-menu-by-longpress="true" :src="imgList[1]" style="width: 100%;height: 650px;margin-top: 20rpx;"></image>
-				<view style="margin: 20rpx 0 32rpx 0;">（图二）</view>
+				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图二）</view>
 				
 				<!-- 4 -->
 				<view class="title-text">四、举报上述信息内容有奖励吗？</view>

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>
diff --git a/pages/guide/guide.vue b/pages/guide/guide.vue
index 1351bc1..f2425bb 100644
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@@ -1,3 +1,4 @@
+<!-- 举报指南 -->
 <template>
 	<view class="guide">
 		<Title />
@@ -123,7 +124,7 @@
 				<image @click="preImage(imgList[0])" :show-menu-by-longpress="true" :src="imgList[0]" style="width: 100%;height: 560px;margin-top: 32rpx;"></image>
 				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图一）</view>
 				<image @click="preImage(imgList[1])" :show-menu-by-longpress="true" :src="imgList[1]" style="width: 100%;height: 650px;margin-top: 20rpx;"></image>
-				<view style="margin: 20rpx 0 32rpx 0;">（图二）</view>
+				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图二）</view>
 				
 				<!-- 4 -->
 				<view class="title-text">四、举报上述信息内容有奖励吗？</view>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
index 6a2f620..0b8d617 100644
--- a/pages/messageList/messageList.vue
+++ b/pages/messageList/messageList.vue
@@ -16,13 +16,24 @@
 		<view class="event-area">
 			<EventList :list="eventList"/>
 		</view>
-		<u-loadmore :status="status" />
+		<u-loadmore :status="status" loadmoreText=" "/>
 		<!-- 返回顶部 -->
 		<u-back-top 
 			:scroll-top="scrollTop" 
 			icon="arrow-up" 
 			duration="200"
 		></u-back-top>
+		
+		<!-- 空 -->
+		<u-empty
+			v-if="isEmpty"
+			mode="search"
+			text="暂无结果"
+			:show="true"
+			iconColor="#77797d"
+			textColor="#77797d"
+			marginTop="80"
+		></u-empty>
 	</view>
 </template>
 
@@ -36,9 +47,10 @@
 		},
 		data() {
 			return {
+				isEmpty: false,   //数据是否为空
 				scrollTop: 0,
 				currentTab: '0', //当前选中的标签的索引
-				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
 				tabList: [
 					{
 						name: '法律法规'
@@ -50,21 +62,20 @@
 						name: '网络辟谣'
 					},
 				],
-				eventList: [{
-							title: '法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},],  //事件数据
+				eventList: [],  //事件数据
+			}
+		},
+		watch: {
+			eventList: {
+				handler(val){
+					if(val.length) {
+						this.isEmpty = false;
+					} else {
+						this.isEmpty = true;
+					}
+				},
+				deep: true,
+				// immediate: true,
 			}
 		},
 		mounted() {
@@ -173,21 +184,7 @@
 					]
 				} else if((val && val.index === 1) || currentTab === '1') {
 					this.eventList = [
-						{
-							title: '工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
+						
 					]
 				} else if((val && val.index === 2) || currentTab === '2') {
 					this.eventList = [

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>
diff --git a/pages/guide/guide.vue b/pages/guide/guide.vue
index 1351bc1..f2425bb 100644
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@@ -1,3 +1,4 @@
+<!-- 举报指南 -->
 <template>
 	<view class="guide">
 		<Title />
@@ -123,7 +124,7 @@
 				<image @click="preImage(imgList[0])" :show-menu-by-longpress="true" :src="imgList[0]" style="width: 100%;height: 560px;margin-top: 32rpx;"></image>
 				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图一）</view>
 				<image @click="preImage(imgList[1])" :show-menu-by-longpress="true" :src="imgList[1]" style="width: 100%;height: 650px;margin-top: 20rpx;"></image>
-				<view style="margin: 20rpx 0 32rpx 0;">（图二）</view>
+				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图二）</view>
 				
 				<!-- 4 -->
 				<view class="title-text">四、举报上述信息内容有奖励吗？</view>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
index 6a2f620..0b8d617 100644
--- a/pages/messageList/messageList.vue
+++ b/pages/messageList/messageList.vue
@@ -16,13 +16,24 @@
 		<view class="event-area">
 			<EventList :list="eventList"/>
 		</view>
-		<u-loadmore :status="status" />
+		<u-loadmore :status="status" loadmoreText=" "/>
 		<!-- 返回顶部 -->
 		<u-back-top 
 			:scroll-top="scrollTop" 
 			icon="arrow-up" 
 			duration="200"
 		></u-back-top>
+		
+		<!-- 空 -->
+		<u-empty
+			v-if="isEmpty"
+			mode="search"
+			text="暂无结果"
+			:show="true"
+			iconColor="#77797d"
+			textColor="#77797d"
+			marginTop="80"
+		></u-empty>
 	</view>
 </template>
 
@@ -36,9 +47,10 @@
 		},
 		data() {
 			return {
+				isEmpty: false,   //数据是否为空
 				scrollTop: 0,
 				currentTab: '0', //当前选中的标签的索引
-				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
 				tabList: [
 					{
 						name: '法律法规'
@@ -50,21 +62,20 @@
 						name: '网络辟谣'
 					},
 				],
-				eventList: [{
-							title: '法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},],  //事件数据
+				eventList: [],  //事件数据
+			}
+		},
+		watch: {
+			eventList: {
+				handler(val){
+					if(val.length) {
+						this.isEmpty = false;
+					} else {
+						this.isEmpty = true;
+					}
+				},
+				deep: true,
+				// immediate: true,
 			}
 		},
 		mounted() {
@@ -173,21 +184,7 @@
 					]
 				} else if((val && val.index === 1) || currentTab === '1') {
 					this.eventList = [
-						{
-							title: '工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
+						
 					]
 				} else if((val && val.index === 2) || currentTab === '2') {
 					this.eventList = [
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 5661374..de691ff 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -1,3 +1,4 @@
+<!-- 我的 -->
 <template>
 	<view class="mine">
 		<view class="card-wrap">

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>
diff --git a/pages/guide/guide.vue b/pages/guide/guide.vue
index 1351bc1..f2425bb 100644
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@@ -1,3 +1,4 @@
+<!-- 举报指南 -->
 <template>
 	<view class="guide">
 		<Title />
@@ -123,7 +124,7 @@
 				<image @click="preImage(imgList[0])" :show-menu-by-longpress="true" :src="imgList[0]" style="width: 100%;height: 560px;margin-top: 32rpx;"></image>
 				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图一）</view>
 				<image @click="preImage(imgList[1])" :show-menu-by-longpress="true" :src="imgList[1]" style="width: 100%;height: 650px;margin-top: 20rpx;"></image>
-				<view style="margin: 20rpx 0 32rpx 0;">（图二）</view>
+				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图二）</view>
 				
 				<!-- 4 -->
 				<view class="title-text">四、举报上述信息内容有奖励吗？</view>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
index 6a2f620..0b8d617 100644
--- a/pages/messageList/messageList.vue
+++ b/pages/messageList/messageList.vue
@@ -16,13 +16,24 @@
 		<view class="event-area">
 			<EventList :list="eventList"/>
 		</view>
-		<u-loadmore :status="status" />
+		<u-loadmore :status="status" loadmoreText=" "/>
 		<!-- 返回顶部 -->
 		<u-back-top 
 			:scroll-top="scrollTop" 
 			icon="arrow-up" 
 			duration="200"
 		></u-back-top>
+		
+		<!-- 空 -->
+		<u-empty
+			v-if="isEmpty"
+			mode="search"
+			text="暂无结果"
+			:show="true"
+			iconColor="#77797d"
+			textColor="#77797d"
+			marginTop="80"
+		></u-empty>
 	</view>
 </template>
 
@@ -36,9 +47,10 @@
 		},
 		data() {
 			return {
+				isEmpty: false,   //数据是否为空
 				scrollTop: 0,
 				currentTab: '0', //当前选中的标签的索引
-				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
 				tabList: [
 					{
 						name: '法律法规'
@@ -50,21 +62,20 @@
 						name: '网络辟谣'
 					},
 				],
-				eventList: [{
-							title: '法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},],  //事件数据
+				eventList: [],  //事件数据
+			}
+		},
+		watch: {
+			eventList: {
+				handler(val){
+					if(val.length) {
+						this.isEmpty = false;
+					} else {
+						this.isEmpty = true;
+					}
+				},
+				deep: true,
+				// immediate: true,
 			}
 		},
 		mounted() {
@@ -173,21 +184,7 @@
 					]
 				} else if((val && val.index === 1) || currentTab === '1') {
 					this.eventList = [
-						{
-							title: '工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
+						
 					]
 				} else if((val && val.index === 2) || currentTab === '2') {
 					this.eventList = [
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 5661374..de691ff 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -1,3 +1,4 @@
+<!-- 我的 -->
 <template>
 	<view class="mine">
 		<view class="card-wrap">
diff --git a/pages/register/register.vue b/pages/register/register.vue
index ce561ff..50ba56a 100644
--- a/pages/register/register.vue
+++ b/pages/register/register.vue
@@ -1,24 +1,351 @@
+<!-- 注册页面 -->
 <template>
 	<view class="register">
-		
+		<view class="main">
+			<u--form
+				labelPosition="left"
+				:model="form"
+				:rules="rules"
+				labelWidth="100"
+				ref="form">
+				<u-form-item label="用户名" prop="name" borderBottom :required="true">
+					<u--input
+						placeholder="请输入用户名"
+						v-model="form.name"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="电子邮箱" prop="email" borderBottom :required="true">
+					<u--input
+						placeholder="请输入电子邮箱"
+						v-model="form.email"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="密码" prop="password" borderBottom :required="true">
+					<u--input
+						placeholder="请输入密码"
+						v-model="form.password"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="确认密码" prop="confirmPassword" borderBottom :required="true">
+					<u--input
+						placeholder="请输入确认密码"
+						v-model="form.confirmPassword"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="手机号" prop="phone" borderBottom :required="true">
+					<u--input
+						placeholder="请输入手机号"
+						v-model="form.phone"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="验证码" prop="code" borderBottom :required="true">
+					<u--input
+						placeholder="验证码"
+						v-model="form.code"
+						border="none"
+					></u--input>
+					<!-- <view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view> -->
+					<image :src="canvasImgUrl" style="width: 140px;height: 80px;" @click="updateImageCode"></image>
+				</u-form-item>
+			</u--form>
+		</view>
+		<view class="button-bottom">
+			<view class="button button-left" @click="register">立即注册</view>
+			<view class="button button-right" @click="clear">清空</view>
+		</view>
+		<Message :show="showMessage" title="注册须知" :content="messageContent" @cancel="cancel"/>
+		<canvas style="position: fixed;left: -100000px;280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
 	</view>
 </template>
 
 <script>
+	import Message from '../../components/base/message.vue';
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
+	import { createCanvas, validateCode } from '../../common/createCanvas.js';
+	// import validate from '../../common/createCanvas.js';
 	export default {
+		components: {
+			Message
+		},
 		data() {
 			return {
-				
+				canvasImgUrl: '',
+				showMessage: false, //注册须知
+				messageContent: '依法打击网上有害不良信息，事关国家安全、民族团结、社会稳定、事关人民群众根本利益。\n\n举报中心欢迎广大网民积极举报网上有害不良信息，对举报有功人员继续给予奖励，对提供重大线索、为打击暴恐犯罪发挥重要作用的举报有功人员最高给予10万元奖励。',
+				form: {
+					name: '',  //用户名
+					email: '', //电子邮箱
+					password: '', //密码
+					confirmPassword: '', //确认密码
+					phone: '', //手机号
+					code: '', //验证码
+				},
+				rules: {
+					// 用户名
+					'name': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写用户名',
+							trigger: ['blur', 'change']
+						},
+					],
+					'email': [
+						{
+							required: true, 
+							message: '请输入电子邮箱',
+							trigger: ['change','blur'],
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// 上面有说，返回true表示校验通过，返回false表示不通过
+								// uni.$u.test.mobile()就是返回true或者false的
+								return uni.$u.test.email(value);
+							},
+							message: '请输入正确的电子邮箱',
+							// 触发器可以同时用blur和change
+							trigger: ['change','blur'],
+						}
+					],
+					// 密码规则
+					'password': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写新密码',
+							trigger: ['blur', 'change']
+						},
+						{
+							min: 8,
+							max: 30,
+							message: '长度在8-30个字符之间'
+						},
+					],
+					// 确认密码规则
+					'confirmPassword': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写确认密码',
+							trigger: ['blur', 'change']
+						},
+						{
+							min: 8,
+							max: 30,
+							message: '长度在8-30个字符之间'
+						},
+						// 自定义规则判断是否包含字母"A"
+						{
+							validator: (rule, value, callback) => {
+								console.log('---', value, this.form.password)
+								if(value + '' === this.form.password + '') {
+									console.log('true')
+									return true;
+								}
+								callback(new Error('密码不一致'));
+							}
+						},
+					],
+					// 手机号验证规则
+					'phone': [
+						{
+							required: true, 
+							message: '请输入手机号',
+							trigger: ['change','blur'],
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// 上面有说，返回true表示校验通过，返回false表示不通过
+								// uni.$u.test.mobile()就是返回true或者false的
+								return uni.$u.test.mobile(value);
+							},
+							message: '请输入正确的手机号',
+							// 触发器可以同时用blur和change
+							trigger: ['change','blur'],
+						}
+					],
+					// 验证码规则
+					'code': [
+						{
+							type: 'string',
+							required: true,
+							message: '请输入验证码',
+							trigger: ['blur', 'change']
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// let validate = this.mcaptcha.validate(value)
+								let validate = validateCode(value);
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
+					],
+				},
 			}
 		},
+		onShow() {
+			this.showMessage = true;
+		},
+		onReady() {
+			this.$refs.form.setRules(this.rules);
+			// this.mcaptcha = new Mcaptcha({
+			// 	el: 'canvas',
+			// 	width: 140,
+			// 	height: 80,
+			// 	createCodeImg: "",
+			// });
+			createCanvas({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: "",
+			}, this).then(res => {
+				this.canvasImgUrl = res;
+				console.log('绘画')
+			})
+		},
 		methods: {
-			
-		}
+			// 立即注册
+			register() {
+				this.$refs.form.validate().then(res => {
+					uni.$u.toast('校验通过')
+					//调改密码接口
+				}).catch(errors => {
+					uni.$u.toast('校验失败')
+				})
+			},
+			//点击清空
+			clear() {
+				// this.$refs.form.resetFields();
+				this.form.name = '';
+				this.form.email = '';
+				this.form.password = '';
+				this.form.confirmPassword = '';
+				this.form.phone = '';
+				this.form.code = '';
+				this.$refs.form.clearValidate();
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  // this.mcaptcha.refresh();
+				createCanvas({
+					el: 'canvas',
+					width: 140,
+					height: 80,
+					createCodeImg: "",
+				}, this).then(res => {
+					this.canvasImgUrl = res;
+					console.log('绘画')
+				})
+			},
+			//关闭注册须知
+			cancel(val) {
+				this.showMessage = val;
+			}
+		} 
 	}
 </script>
 
 <style lang="scss" scoped>
 	.register {
-		
+		width: 100%;
+		padding: 40rpx 20rpx;
+		box-sizing: border-box;
+		.guiCode {
+		    width: calc(70vmin / 3.75);
+		    height: 100%;
+		}
+		.main {
+			padding: 20rpx 20rpx 40rpx 20rpx;
+			box-sizing: border-box;
+			background-color: #fff;
+			border-radius: 16rpx;
+			// .code-img-wrapper {
+			// 	display: flex;
+			// 	justify-content: center;
+			// 	align-items: center;
+			// }
+		}
+		.button {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 20rpx;
+			color: #fff;
+			font-weight: 600;
+			letter-spacing: 4rpx;
+			background-color: #0096e0;
+			border: 2rpx solid #0096e0;
+			border-radius: 10rpx;
+			margin: 64rpx 0 32rpx 0;
+			white-space: nowrap;
+			box-sizing: border-box;
+			&:active {
+				background-color: #fff;
+				color: #0096e0;
+			}
+		}
+		.button-bottom {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			align-items: center;
+			margin-top: 60rpx;
+			.button-left {
+				width: fit-content;
+				padding: 20rpx 40rpx;
+				margin-top: 0;
+			}
+			.button-right {
+				width: fit-content;
+				font-weight: 500;
+				padding: 20rpx 40rpx;
+				margin-top: 0;
+				color: #0096e0;
+				background-color: #fff;
+				&:active {
+					background-color: #d5e0ea;
+					font-weight: 600;
+				}
+			}
+		}
 	}
 </style>
+<style lang="scss">
+	.register { 
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
+		.u-form-item__body__right__content__slot {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+</style>
+

diff --git a/common/createCanvas.js b/common/createCanvas.js
new file mode 100644
index 0000000..781ac87
--- /dev/null
+++ b/common/createCanvas.js
@@ -0,0 +1,113 @@
+import { deepCopy } from '../common/utils.js'
+/** 重要事件分享图绘制
+ * @param {Object} option 参数
+ * @param {Object} this   上下文
+ * @param {Object} el canvasid
+ * @param {Object} createCodeImg 随机四位数
+ */
+let getOptions;
+export function createCanvas(options) {
+	return new Promise(function(resolve, reject) {
+		let fontSize = options.height * 3 / 6;
+		let ctx = uni.createCanvasContext(options.el, this);
+		ctx.setTextBaseline("middle");
+		ctx.setFillStyle(randomColor(180, 240));
+		//生成随机数
+		var code = '';
+		var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+		for(var i=0;i<4;i++){
+		  code += txtArr[randomNum(0, txtArr.length)];
+		}
+		options.createCodeImg = code;
+		let arr = (code + '').split('');
+		if (arr.length === 0) {
+		  arr = ['e', 'r', 'r','o','r'];
+		};
+		let offsetLeft = options.width * 0.6 / (arr.length - 1);
+		let marginLeft = options.width * 0.2;
+		arr.forEach((item, index) => {
+		  ctx.setFillStyle(randomColor(0, 180));
+		  let size = randomNum(32, fontSize);
+		  ctx.setFontSize(size);
+		  let dis = offsetLeft * index + marginLeft - size * 0.3;
+		  let deg = randomNum(-30, 30);
+		  ctx.translate(dis, options.height*0.5);
+		  ctx.rotate(deg * Math.PI / 180);
+		  ctx.fillText(item, 0, 0);
+		  ctx.rotate(-deg * Math.PI / 180);
+		  ctx.translate(-dis, -options.height * 0.5);
+		})
+		for (var i = 0; i < 4; i++) {
+		  ctx.strokeStyle = randomColor(40, 180);
+		  ctx.beginPath();
+		  ctx.moveTo(randomNum(0, options.width), randomNum(0,options.height));
+		  ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
+		  ctx.stroke();
+		}
+		for (var i = 0; i < options.width / 4; i++) {
+		  ctx.fillStyle = randomColor(0, 255);
+		  ctx.beginPath();
+		  ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
+		  ctx.fill();
+		}
+		
+		ctx.save();
+		
+		// 获取系统信息
+		const result = uni.getSystemInfoSync();
+		const platform = result.platform;
+		let time = 0;
+		if (platform === 'android') {
+			// 在安卓平台，如果海报过于复杂在转换时需要做延时，否则样式会错乱
+			time = 300;
+		}
+		// this.ctx.draw();
+		getOptions = deepCopy(options);
+		ctx.draw(false, function() {
+			setTimeout(function() {
+				//将canvas转换成临时图片文件
+				wx.canvasToTempFilePath({
+					width: '140',
+					height: '70',
+					canvasId: options.el,
+					fileType: 'png',
+					success(res) {
+						console.log('生成成功');
+						console.log(res.tempFilePath, '111');
+						resolve(res.tempFilePath);
+					},
+					fail(err) {
+						console.log('生成失败');
+						console.log('canvasToTempFilePath err', err);
+						reject(err);
+					},
+					complete() {
+						console.log('成功、失败都走的回调');
+					}
+				}, this);
+			}, time);
+		});
+	})
+}
+
+export function validateCode(code) {
+	var code = code.toLowerCase();
+	var v_code = getOptions.createCodeImg.toLowerCase();
+	if (code == v_code.substring(v_code.length - 4)) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function randomNum(min, max) {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+function randomColor(min, max) {
+	let r = randomNum(min, max);
+	let g = randomNum(min, max);
+	let b = randomNum(min, max);
+	return "rgb(" + r + "," + g + "," + b + ")";
+}
+
diff --git a/common/mcaptcha.js b/common/mcaptcha.js
new file mode 100644
index 0000000..c0eb1d2
--- /dev/null
+++ b/common/mcaptcha.js
@@ -0,0 +1,76 @@
+/**
+ * 绘制图形验证码
+ */
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(32, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}
\ No newline at end of file
diff --git a/components/base/message.vue b/components/base/message.vue
new file mode 100644
index 0000000..c1c2c52
--- /dev/null
+++ b/components/base/message.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="message">
+		<u-modal 
+			:show="show" 
+			:title="title" 
+			:content='content'
+			:showCancelButton="true"
+			:title-style="{
+
+				color: '#0096e0'
+			}"
+			@confirm="confirm"
+			@cancel="cancel"
+			confirmColor="#0096e0"
+			confirmText="同意"
+			cancelText="拒绝"
+		></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'Message',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '用户需知'
+			},
+			content: {
+				type: String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 同意
+			confirm() {
+				this.cancel();
+			},
+			// 拒绝
+			cancel() {
+				this.$emit('cancel', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.message {
+		.u-modal__title {
+			color: red !important;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/accountBound/accountBound.vue b/pages/accountBound/accountBound.vue
index b18a56a..f811511 100644
--- a/pages/accountBound/accountBound.vue
+++ b/pages/accountBound/accountBound.vue
@@ -1,3 +1,4 @@
+<!-- 账号绑定 -->
 <template>
 	<view class="account-bound">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="用户名"
 						v-model="form.name"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="密码"
 						v-model="form.password"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -29,7 +32,9 @@
 						v-model="form.code"
 						border="none"
 					></u--input>
-					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
+					<view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view>
 				</u-form-item>
 			</u--form>
 		</view>
@@ -38,11 +43,12 @@
 </template>
 
 <script>
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
 	export default {
 		data() {
 			return {
 				rules: {
-					// 旧密码规则
+					// 用户名
 					'name': [
 						{
 							type: 'string',
@@ -70,7 +76,7 @@
 							message: '长度在8-30个字符之间'
 						},
 					],
-					// 确认密码规则
+					// 验证码规则
 					'code': [
 						{
 							type: 'string',
@@ -78,6 +84,16 @@
 							message: '请填写验证码',
 							trigger: ['blur', 'change']
 						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								let validate = this.mcaptcha.validate(value)
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
 					],
 				},
 				form: {
@@ -88,7 +104,13 @@
 			}
 		},
 		onReady() {
-			this.$refs.form.setRules(this.rules)
+			this.$refs.form.setRules(this.rules);
+			this.mcaptcha = new Mcaptcha({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: ""
+			});
 		},
 		methods: {
 			submit() {
@@ -98,7 +120,11 @@
 				}).catch(errors => {
 					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  this.mcaptcha.refresh()
+			},
 		}
 	}
 </script>
@@ -138,6 +164,9 @@
 </style>
 <style lang="scss">
 	.account-bound {
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
 		.u-form-item__body__right__content__slot {
 			display: flex;
 			flex-direction: row;
diff --git a/pages/center/center.vue b/pages/center/center.vue
index 5e3baea..49a0695 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,3 +1,4 @@
+<!-- 举报中心 -->
 <template>
 	<view class="center">
 		<Title />
diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue
index 789a8fc..7bbc8fd 100644
--- a/pages/changePassword/changePassword.vue
+++ b/pages/changePassword/changePassword.vue
@@ -1,3 +1,4 @@
+<!-- 修改密码 -->
 <template>
 	<view class="change-password">
 		<view class="main">
@@ -12,6 +13,7 @@
 						placeholder="请输入旧密码"
 						v-model="form.oldPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -20,6 +22,7 @@
 						placeholder="请输入新密码"
 						v-model="form.newPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 				
@@ -28,6 +31,7 @@
 						placeholder="请输入确认密码"
 						v-model="form.confirmPassword"
 						border="none"
+						clearable
 					></u--input>
 				</u-form-item>
 			</u--form>
diff --git a/pages/guide/guide.vue b/pages/guide/guide.vue
index 1351bc1..f2425bb 100644
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@@ -1,3 +1,4 @@
+<!-- 举报指南 -->
 <template>
 	<view class="guide">
 		<Title />
@@ -123,7 +124,7 @@
 				<image @click="preImage(imgList[0])" :show-menu-by-longpress="true" :src="imgList[0]" style="width: 100%;height: 560px;margin-top: 32rpx;"></image>
 				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图一）</view>
 				<image @click="preImage(imgList[1])" :show-menu-by-longpress="true" :src="imgList[1]" style="width: 100%;height: 650px;margin-top: 20rpx;"></image>
-				<view style="margin: 20rpx 0 32rpx 0;">（图二）</view>
+				<view style="margin: 20rpx 0 32rpx 0;text-align: center;">（图二）</view>
 				
 				<!-- 4 -->
 				<view class="title-text">四、举报上述信息内容有奖励吗？</view>
diff --git a/pages/messageList/messageList.vue b/pages/messageList/messageList.vue
index 6a2f620..0b8d617 100644
--- a/pages/messageList/messageList.vue
+++ b/pages/messageList/messageList.vue
@@ -16,13 +16,24 @@
 		<view class="event-area">
 			<EventList :list="eventList"/>
 		</view>
-		<u-loadmore :status="status" />
+		<u-loadmore :status="status" loadmoreText=" "/>
 		<!-- 返回顶部 -->
 		<u-back-top 
 			:scroll-top="scrollTop" 
 			icon="arrow-up" 
 			duration="200"
 		></u-back-top>
+		
+		<!-- 空 -->
+		<u-empty
+			v-if="isEmpty"
+			mode="search"
+			text="暂无结果"
+			:show="true"
+			iconColor="#77797d"
+			textColor="#77797d"
+			marginTop="80"
+		></u-empty>
 	</view>
 </template>
 
@@ -36,9 +47,10 @@
 		},
 		data() {
 			return {
+				isEmpty: false,   //数据是否为空
 				scrollTop: 0,
 				currentTab: '0', //当前选中的标签的索引
-				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
 				tabList: [
 					{
 						name: '法律法规'
@@ -50,21 +62,20 @@
 						name: '网络辟谣'
 					},
 				],
-				eventList: [{
-							title: '法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '法律法规法律法规法律法规法律法规',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},],  //事件数据
+				eventList: [],  //事件数据
+			}
+		},
+		watch: {
+			eventList: {
+				handler(val){
+					if(val.length) {
+						this.isEmpty = false;
+					} else {
+						this.isEmpty = true;
+					}
+				},
+				deep: true,
+				// immediate: true,
 			}
 		},
 		mounted() {
@@ -173,21 +184,7 @@
 					]
 				} else if((val && val.index === 1) || currentTab === '1') {
 					this.eventList = [
-						{
-							title: '工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
-						{
-							title: '工作动态工作动态工作动态',
-							time: '2121-12-12 12:02:20',
-							img: '../../static/share.png'
-						},
+						
 					]
 				} else if((val && val.index === 2) || currentTab === '2') {
 					this.eventList = [
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 5661374..de691ff 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -1,3 +1,4 @@
+<!-- 我的 -->
 <template>
 	<view class="mine">
 		<view class="card-wrap">
diff --git a/pages/register/register.vue b/pages/register/register.vue
index ce561ff..50ba56a 100644
--- a/pages/register/register.vue
+++ b/pages/register/register.vue
@@ -1,24 +1,351 @@
+<!-- 注册页面 -->
 <template>
 	<view class="register">
-		
+		<view class="main">
+			<u--form
+				labelPosition="left"
+				:model="form"
+				:rules="rules"
+				labelWidth="100"
+				ref="form">
+				<u-form-item label="用户名" prop="name" borderBottom :required="true">
+					<u--input
+						placeholder="请输入用户名"
+						v-model="form.name"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="电子邮箱" prop="email" borderBottom :required="true">
+					<u--input
+						placeholder="请输入电子邮箱"
+						v-model="form.email"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="密码" prop="password" borderBottom :required="true">
+					<u--input
+						placeholder="请输入密码"
+						v-model="form.password"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="确认密码" prop="confirmPassword" borderBottom :required="true">
+					<u--input
+						placeholder="请输入确认密码"
+						v-model="form.confirmPassword"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="手机号" prop="phone" borderBottom :required="true">
+					<u--input
+						placeholder="请输入手机号"
+						v-model="form.phone"
+						border="none"
+						clearable
+					></u--input>
+				</u-form-item>
+				
+				<u-form-item label="验证码" prop="code" borderBottom :required="true">
+					<u--input
+						placeholder="验证码"
+						v-model="form.code"
+						border="none"
+					></u--input>
+					<!-- <view class="code-img-wrapper" @click="updateImageCode">
+					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
+					</view> -->
+					<image :src="canvasImgUrl" style="width: 140px;height: 80px;" @click="updateImageCode"></image>
+				</u-form-item>
+			</u--form>
+		</view>
+		<view class="button-bottom">
+			<view class="button button-left" @click="register">立即注册</view>
+			<view class="button button-right" @click="clear">清空</view>
+		</view>
+		<Message :show="showMessage" title="注册须知" :content="messageContent" @cancel="cancel"/>
+		<canvas style="position: fixed;left: -100000px;280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
 	</view>
 </template>
 
 <script>
+	import Message from '../../components/base/message.vue';
+	import { Mcaptcha  } from '../../common/mcaptcha.js';
+	import { createCanvas, validateCode } from '../../common/createCanvas.js';
+	// import validate from '../../common/createCanvas.js';
 	export default {
+		components: {
+			Message
+		},
 		data() {
 			return {
-				
+				canvasImgUrl: '',
+				showMessage: false, //注册须知
+				messageContent: '依法打击网上有害不良信息，事关国家安全、民族团结、社会稳定、事关人民群众根本利益。\n\n举报中心欢迎广大网民积极举报网上有害不良信息，对举报有功人员继续给予奖励，对提供重大线索、为打击暴恐犯罪发挥重要作用的举报有功人员最高给予10万元奖励。',
+				form: {
+					name: '',  //用户名
+					email: '', //电子邮箱
+					password: '', //密码
+					confirmPassword: '', //确认密码
+					phone: '', //手机号
+					code: '', //验证码
+				},
+				rules: {
+					// 用户名
+					'name': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写用户名',
+							trigger: ['blur', 'change']
+						},
+					],
+					'email': [
+						{
+							required: true, 
+							message: '请输入电子邮箱',
+							trigger: ['change','blur'],
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// 上面有说，返回true表示校验通过，返回false表示不通过
+								// uni.$u.test.mobile()就是返回true或者false的
+								return uni.$u.test.email(value);
+							},
+							message: '请输入正确的电子邮箱',
+							// 触发器可以同时用blur和change
+							trigger: ['change','blur'],
+						}
+					],
+					// 密码规则
+					'password': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写新密码',
+							trigger: ['blur', 'change']
+						},
+						{
+							min: 8,
+							max: 30,
+							message: '长度在8-30个字符之间'
+						},
+					],
+					// 确认密码规则
+					'confirmPassword': [
+						{
+							type: 'string',
+							required: true,
+							message: '请填写确认密码',
+							trigger: ['blur', 'change']
+						},
+						{
+							min: 8,
+							max: 30,
+							message: '长度在8-30个字符之间'
+						},
+						// 自定义规则判断是否包含字母"A"
+						{
+							validator: (rule, value, callback) => {
+								console.log('---', value, this.form.password)
+								if(value + '' === this.form.password + '') {
+									console.log('true')
+									return true;
+								}
+								callback(new Error('密码不一致'));
+							}
+						},
+					],
+					// 手机号验证规则
+					'phone': [
+						{
+							required: true, 
+							message: '请输入手机号',
+							trigger: ['change','blur'],
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// 上面有说，返回true表示校验通过，返回false表示不通过
+								// uni.$u.test.mobile()就是返回true或者false的
+								return uni.$u.test.mobile(value);
+							},
+							message: '请输入正确的手机号',
+							// 触发器可以同时用blur和change
+							trigger: ['change','blur'],
+						}
+					],
+					// 验证码规则
+					'code': [
+						{
+							type: 'string',
+							required: true,
+							message: '请输入验证码',
+							trigger: ['blur', 'change']
+						},
+						{
+							// 自定义验证函数
+							validator: (rule, value, callback) => {
+								// let validate = this.mcaptcha.validate(value)
+								let validate = validateCode(value);
+								if(validate) {
+									return true
+								}
+								callback(new Error('验证码错误'));
+							},
+						}
+					],
+				},
 			}
 		},
+		onShow() {
+			this.showMessage = true;
+		},
+		onReady() {
+			this.$refs.form.setRules(this.rules);
+			// this.mcaptcha = new Mcaptcha({
+			// 	el: 'canvas',
+			// 	width: 140,
+			// 	height: 80,
+			// 	createCodeImg: "",
+			// });
+			createCanvas({
+				el: 'canvas',
+				width: 140,
+				height: 80,
+				createCodeImg: "",
+			}, this).then(res => {
+				this.canvasImgUrl = res;
+				console.log('绘画')
+			})
+		},
 		methods: {
-			
-		}
+			// 立即注册
+			register() {
+				this.$refs.form.validate().then(res => {
+					uni.$u.toast('校验通过')
+					//调改密码接口
+				}).catch(errors => {
+					uni.$u.toast('校验失败')
+				})
+			},
+			//点击清空
+			clear() {
+				// this.$refs.form.resetFields();
+				this.form.name = '';
+				this.form.email = '';
+				this.form.password = '';
+				this.form.confirmPassword = '';
+				this.form.phone = '';
+				this.form.code = '';
+				this.$refs.form.clearValidate();
+			},
+			// 刷新验证码
+			updateImageCode() {
+			  // this.mcaptcha.refresh();
+				createCanvas({
+					el: 'canvas',
+					width: 140,
+					height: 80,
+					createCodeImg: "",
+				}, this).then(res => {
+					this.canvasImgUrl = res;
+					console.log('绘画')
+				})
+			},
+			//关闭注册须知
+			cancel(val) {
+				this.showMessage = val;
+			}
+		} 
 	}
 </script>
 
 <style lang="scss" scoped>
 	.register {
-		
+		width: 100%;
+		padding: 40rpx 20rpx;
+		box-sizing: border-box;
+		.guiCode {
+		    width: calc(70vmin / 3.75);
+		    height: 100%;
+		}
+		.main {
+			padding: 20rpx 20rpx 40rpx 20rpx;
+			box-sizing: border-box;
+			background-color: #fff;
+			border-radius: 16rpx;
+			// .code-img-wrapper {
+			// 	display: flex;
+			// 	justify-content: center;
+			// 	align-items: center;
+			// }
+		}
+		.button {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 20rpx;
+			color: #fff;
+			font-weight: 600;
+			letter-spacing: 4rpx;
+			background-color: #0096e0;
+			border: 2rpx solid #0096e0;
+			border-radius: 10rpx;
+			margin: 64rpx 0 32rpx 0;
+			white-space: nowrap;
+			box-sizing: border-box;
+			&:active {
+				background-color: #fff;
+				color: #0096e0;
+			}
+		}
+		.button-bottom {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			align-items: center;
+			margin-top: 60rpx;
+			.button-left {
+				width: fit-content;
+				padding: 20rpx 40rpx;
+				margin-top: 0;
+			}
+			.button-right {
+				width: fit-content;
+				font-weight: 500;
+				padding: 20rpx 40rpx;
+				margin-top: 0;
+				color: #0096e0;
+				background-color: #fff;
+				&:active {
+					background-color: #d5e0ea;
+					font-weight: 600;
+				}
+			}
+		}
 	}
 </style>
+<style lang="scss">
+	.register { 
+		.u-form-item__body__left__content__label {
+			white-space: nowrap;
+		}
+		.u-form-item__body__right__content__slot {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+</style>
+
diff --git a/pages/search/search.vue b/pages/search/search.vue
index 6f7158f..ff3126d 100644
--- a/pages/search/search.vue
+++ b/pages/search/search.vue
@@ -1,3 +1,4 @@
+<!-- 搜索 -->
 <template>
 	<view class="search">
 		<view class="search-area">
@@ -22,7 +23,7 @@
 		</view>
 		
 		<!-- 加载更多 -->
-		<u-loadmore :status="status" />
+		<u-loadmore :status="status" loadmoreText=" "/>
 		
 		<!-- 返回顶部 -->
 		<u-back-top 
@@ -30,6 +31,16 @@
 			icon="arrow-up" 
 			duration="200"
 		></u-back-top>
+		
+		<u-empty
+			v-if="isEmpty"
+			mode="search"
+			text="暂无结果"
+			:show="true"
+			iconColor="#77797d"
+			textColor="#77797d"
+			marginTop="80"
+		></u-empty>
 	</view>
 </template>
 
@@ -42,10 +53,24 @@
 		},
 		data() {
 			return {
+				isEmpty: false, //是否为空
 				eventList: [], //事件数据
 				keyword: '新疆', //搜索关键字
 				scrollTop: 0,
-				status: 'nomore', //上滑加载状态 loading加载中，nomore没有更多了
+				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
+			}
+		},
+		watch: {
+			eventList: {
+				handler(val){
+					if(val.length) {
+						this.isEmpty = false;
+					} else {
+						this.isEmpty = true;
+					}
+				},
+				deep: true,
+				// immediate: true,
 			}
 		},
 		mounted() {