找回密码，设置静态页面

src/pages.json

@@ -18,6 +18,23 @@
       }
     },
     {
+      "path":"pages/index/setting/setting",
+      "navigationBarTitleText": "设置"
+    },
+    {
+      "path": "pages/public/confirmpassword",
+      "navigationBarTitleText": "找回密码",
+      "app-plus": {
+        "bounce": "none",
+        "titleNView": false,
+        "pullToRefresh": {
+          "support": true,
+          "color": "#fa436a",
+          "style": "default"
+        }
+      }
+    },
+    {
       "path": "pages/index/index",
       "style": {
         "enablePullDownRefresh": true,

src/pages/components/header.vue

@@ -0,0 +1,43 @@
+<template name="Header">
+	<view class="header">
+		<image src="../../static/images/backicon.png" class="back"></image>
+		<view class="title">{{ title }}</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'setting',
+	props: {
+		title: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss" scopde>
+.header {
+  width: 100%;
+	background-color: #ffffff;
+	display: flex;
+	padding: 23upx 33upx;
+  position: fixed;
+	.back {
+		width: 24upx;
+		height: 43upx;
+	}
+  .title {
+    flex: 1;
+    font-size: 34upx;
+    font-weight: 700;
+    color: $titleColor;
+    text-align: center;
+    letter-spacing: 3upx;
+  }
+}
+</style>

src/pages/index/setting/setting.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="setting">
+		<Header :title="title"></Header>
+		<view style="height:94upx"></view>
+		<view class="setting-warp">
+			<view class="item-warp">
+				<view class="item" @tap="topage">
+					<text class="name">密码修改</text>
+					<image src="../../../static/images/moreicon.png" class="more" @tap='topage'></image>
+				</view>
+			</view>
+			<view class="item-warp cellme-warp">
+				<view class="item cellme" @tap="topage">
+					<text class="name">联系我们</text>
+					<image src="../../../static/images/moreicon.png" class="more"></image>
+				</view>
+			</view>
+			<view class="item-warp">
+				<view class="item" @tap="topage">
+					<text class="name">公告管理</text>
+					<image src="../../../static/images/moreicon.png" class="more"></image>
+				</view>
+			</view>
+			<view class="item-warp">
+				<view class="item" @tap="topage">
+					<text class="name">退出登陆</text>
+					<image src="../../../static/images/moreicon.png" class="more"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import Header from '../../components/header';
+export default {
+	name: 'setting',
+	components: {
+		Header
+	},
+	data() {
+		return {
+			title: '设置'
+		};
+  },
+  onLoad () {
+
+  },
+  methods: {
+    topage () {
+      console.log(1);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scopde>
+.setting {
+	height: 100vh;
+	background-color: #f4f4f4;
+	.setting-warp {
+		.item-warp {
+			background-color: #fff;
+			padding: 0 33upx;
+			margin-top: 25upx;
+			.item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 93upx;
+				.name {
+					font-size: 32upx;
+					color: #232828;
+					letter-spacing: 2upx;
+				}
+				.more {
+					width: 19upx;
+					height: 27upx;
+				}
+			}
+		}
+		.cellme-warp {
+			margin-top: 0;
+			.cellme {
+				border-top: 1px solid #e7e7e7;
+			}
+		}
+	}
+}
+</style>

src/pages/public/confirmpassword.vue

@@ -0,0 +1,119 @@
+<!-- 找回密码 -->
+<template>
+	<view class="confirmpassword">
+		<view class="goback" @tap="navBack"
+			><image src="../../static/images/backicon.png" class="backicon"></image
+		></view>
+		<view class="title">找回密码</view>
+		<view class="input-item cellphone">
+			<input type="text" placeholder="请输入新密码" />
+		</view>
+		<view class="input-item imgcode">
+			<input type="text" class="inputcode" placeholder="请再次输入新密码" />
+		</view>
+		<view class="btn-warp">
+			<view class="btn" @tap="next">确认</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'confirmpassword',
+	components: {},
+	data() {
+		//这里存放数据
+		return {
+			codeImage: ''
+		};
+	},
+	//监控data中的数据变化
+	watch: {},
+	onLoad() {},
+	//方法集合
+	methods: {
+		// 返回上一页
+		navBack() {
+			this.$mRouter.back();
+		},
+
+		// 确认进入下一步
+		next() {
+			console.log(3);
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.confirmpassword {
+	padding: 0 50upx;
+	.goback {
+		padding-top: 100upx;
+		.backicon {
+			width: 24upx;
+			height: 43upx;
+		}
+	}
+	.title {
+		font-size: 48upx;
+		color: $titleColor;
+		background: url('../../static/images/passworddown.png') no-repeat left 82%;
+		background-size: 192upx 14upx;
+		margin-top: 65upx;
+	}
+	.input-item {
+		height: 95upx;
+		border-bottom: 1px solid #e7e7e7;
+		margin-top: 50upx;
+		position: relative;
+		input {
+			width: 100%;
+			height: 100%;
+			font-size: 32upx;
+		}
+		.inputcode {
+			width: 65%;
+		}
+		.gifimg {
+			position: absolute;
+			right: 0;
+			top: -17upx;
+			width: 200upx;
+			height: 80upx;
+		}
+		.getcode {
+			position: absolute;
+			right: 0;
+			top: 0;
+			width: 180upx;
+			height: 95upx;
+			font-size: 35upx;
+			color: #999999;
+			text-align: center;
+			line-height: 95upx;
+		}
+	}
+	.cellphone {
+		margin-top: 100upx;
+	}
+	.btn-warp {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 170upx;
+		.btn {
+			width: 586upx;
+			height: 98upx;
+			border-radius: 35upx;
+			background-color: $barColor;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 36upx;
+			font-weight: 700;
+			color: $titleColor;
+			letter-spacing: 5upx;
+		}
+	}
+}
+</style>

src/pages/public/login.vue

@@ -164,7 +164,7 @@ export default {
     },
     // 统一跳转路由
     navTo() {
-      this.$mRouter.push({ route: '/pages/public/resetpassword' });
+      this.$mRouter.redirectTo({ route: '/pages/public/resetpassword' });
     },
     // 返回主页
     toHome() {

src/pages/public/resetpassword.vue

@@ -1,51 +1,139 @@
 <!-- 找回密码 -->
 <template>
-  <view class="resetpassword">
-    <view class="goback" @tap="navBack"><image src="../../static/images/backicon.png" class="backicon"></image></view>
-    <view class="title">找回密码</view>
-    <view class=""></view>
-  </view>
+	<view class="resetpassword">
+		<view class="goback" @tap="navBack"
+			><image src="../../static/images/backicon.png" class="backicon"></image
+		></view>
+		<view class="title">找回密码</view>
+		<view class="input-item cellphone">
+			<input type="text" placeholder="请输入手机号" />
+		</view>
+		<view class="input-item imgcode">
+			<input type="text" class="inputcode" placeholder="请输入图形验证码" />
+			<image class="gifimg" :src="codeImage" @tap="getimgcode"></image>
+		</view>
+		<view class="input-item sellcode">
+			<input type="text" class="inputcode" placeholder="请输入短信验证码" />
+			<view class="getcode" @tap="getsellcode">获取短信</view>
+		</view>
+		<view class="btn-warp">
+			<view class="btn" @tap="next">确认</view>
+		</view>
+	</view>
 </template>
 
 <script>
 export default {
-  name: 'resetpassword',
-  components: {},
-  data() {
-    //这里存放数据
-    return {};
-  },
-  //监控data中的数据变化
-  watch: {},
-  onLoad () {
-    console.log(1);
-  },
-  //方法集合
-  methods: {
-     // 返回上一页
-    navBack() {
-      this.$mRouter.back();
-    }
-  }
-  
+	name: 'resetpassword',
+	components: {},
+	data() {
+		//这里存放数据
+		return {
+			codeImage: ''
+		};
+	},
+	//监控data中的数据变化
+	watch: {},
+	onLoad() {
+		this.getimgcode();
+	},
+	//方法集合
+	methods: {
+		// 返回上一页
+		navBack() {
+			this.$mRouter.back();
+		},
+		// 获取图形验证码
+		async getimgcode() {
+			// 获取验证码
+			await this.$http.get('captchaImage', {}).then(async res => {
+				console.log(res);
+				this.codeImage = 'data:image/gif;base64,' + res.data.img;
+			});
+		},
+		// 获取短信验证码
+		getsellcode() {
+			console.log(2);
+		},
+		// 验证规则图片验证码和短信验证码成功后可以点击确认进入下一步
+
+		// 确认进入下一步
+		next() {
+			this.$mRouter.push({ route: '/pages/public/confirmpassword' });
+		}
+	}
 };
 </script>
-<style lang='scss' scoped>
-  .resetpassword {
-    padding-left: 50upx;
-    .goback{
-      padding-top: 100upx;
-      .backicon{
-        width: 24upx;
-        height: 43upx;
-      }
-    }
-    .title {
-      font-size: 48upx;
-      color: $titleColor;
-      background: url('../../static/images/passworddown.png') no-repeat left 82%;
-      background-size: 192upx 14upx;
-      margin-top: 65upx;
-    }
-  }
-</style>
+<style lang="scss" scoped>
+.resetpassword {
+	padding: 0 50upx;
+	.goback {
+		padding-top: 100upx;
+		.backicon {
+			width: 24upx;
+			height: 43upx;
+		}
+	}
+	.title {
+		font-size: 48upx;
+		color: $titleColor;
+		background: url('../../static/images/passworddown.png') no-repeat left 82%;
+		background-size: 192upx 14upx;
+		margin-top: 65upx;
+	}
+	.input-item {
+		height: 95upx;
+		border-bottom: 1px solid #e7e7e7;
+		margin-top: 50upx;
+		position: relative;
+		input {
+			width: 100%;
+			height: 100%;
+			font-size: 32upx;
+		}
+		.inputcode {
+			width: 65%;
+		}
+		.gifimg {
+			position: absolute;
+			right: 0;
+			top: -17upx;
+			width: 200upx;
+			height: 80upx;
+		}
+		.getcode {
+			position: absolute;
+			right: 0;
+			top: 0;
+			width: 180upx;
+			height: 95upx;
+			font-size: 35upx;
+			color: #999999;
+			text-align: center;
+			line-height: 95upx;
+		}
+	}
+	.cellphone {
+		margin-top: 100upx;
+	}
+	.btn-warp {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 170upx;
+		.btn {
+			width: 586upx;
+			height: 98upx;
+			border-radius: 35upx;
+			background-color: $barColor;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 36upx;
+			font-weight: 700;
+			color: $titleColor;
+			letter-spacing: 5upx;
+		}
+	}
+}
+</style>

src/utils/router.js

@@ -16,22 +16,27 @@ class Router {
 		if (callBack instanceof Function) this.callBack = callBack;
 	}
 
+	// 保留当前页面，跳转到应用内的某个页面
 	push(to) {
 		this.callBack('navigateTo', to);
 	}
 
+	// 关闭当前页面，跳转到应用内的某个页面
 	redirectTo(to) {
 		this.callBack('redirectTo', to);
 	}
 
+	// 关闭所有页面，打开到应用内的某个页面
 	reLaunch(to) {
 		this.callBack('reLaunch', to);
 	}
 
+	// 用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，只可以跳转tabbar页面，其他页面不支持
 	switchTab(to) {
 		this.callBack('switchTab', to);
 	}
 
+	// 用于关闭当前页面，返回上一页面或多级页面。
 	back(delta) {
 		uni.navigateBack({
 			delta