查找密码

pages/findpass/findpass.vue

@@ -1,6 +1,44 @@
 <template>
-	<view>
+	<view class="container">
+		<!-- 页面头部 -->
+		<view class="header">
+		  <view class="title">
+		    <text>找回密码</text>
+		  </view>
+		</view>
+		<!-- 表单 -->
+		<view class="login-form">
+			<form>
+		  <!-- 手机号 -->
+		  <view class="form-item">
+		    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" autocomplete="off" placeholder="输入手机号码"
+			 @input="onInputStepper($event, item)"/>
+		  </view>
+		  <!-- 验证码 -->
+		  <view class="form-item">
+			  <input class="form-item--input" type="number" v-model="chkcode" maxlength="11" autocomplete="off" placeholder="输入6位验证码" />
+			  <button class="abtn" href="" @click="getsmscode" ref="abtn">获取验证码 </button>
+		  </view>
+		  <!-- 密码 -->
+		  <view class="form-item">
+			  <input class="form-item--input" type="password" v-model="vpass" autocomplete="off" placeholder="请输入密码" />
+		  </view>
+		  <!-- 重复密码 -->
+		  <view class="form-item">
+			  <input class="form-item--input" type="password" v-model="repass" autocomplete="off" placeholder="再次请输入密码" />
+		  </view>
 		
+		  <!-- 登录按钮 -->
+		  <view class="login-button" @click="handleLogin">
+		    <text>确认修改</text>
+		  </view>
+		  </form>
+		</view>
+		
+		<!-- 找回密码 注册 -->
+		<view class="regtips">
+			<view>已拥有账户?<a class="loginnow" @tap="gologin">登录</a></view>
+		</view>
 	</view>
 </template>
 
@@ -12,11 +50,111 @@
 			}
 		},
 		methods: {
-			
+			// 调整到登录页面
+			gologin(){
+					this.$navTo("pages/login/index")  
+			},
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
-
+  .container {
+    padding: 100rpx 60rpx;
+    min-height: 100vh;
+    background-color: #fff;
+  }
+  
+  // 页面头部
+  .header {
+    margin-bottom: 60rpx;
+  
+    .title {
+      color: #191919;
+      font-size: 54rpx;
+    }
+  
+  }
+  // 输入框元素
+  .form-item {
+    display: flex;
+    padding: 18rpx;
+    border-bottom: 1rpx solid #f3f1f2;
+    margin-bottom: 30rpx;
+    height: 96rpx;
+  
+    &--input {
+      font-size: 28rpx;
+      letter-spacing: 1rpx;
+      flex: 1;
+      height: 100%;
+    }
+  
+    &--parts {
+      min-width: 100rpx;
+      height: 100%;
+    }
+  	
+  	&--radgrp{
+  		display: flex;
+  		flex:1;
+  		height: 100%;
+  	}
+  	
+  	.abtn{
+  		font-size: 26rpx;
+  	}
+  
+  
+  
+    // 短信验证码
+    .captcha-sms {
+      font-size: 28rpx;
+      line-height: 50rpx;
+      padding-right: 20rpx;
+  
+      .activate {
+        color: #cea26a;
+      }
+  
+      .un-activate {
+        color: #9e9e9e;
+      }
+    }
+  }
+  
+  
+  // 登录按钮
+  .login-button {
+    width: 100%;
+    height: 86rpx;
+    margin-top: 80rpx;
+    background: linear-gradient(to right, #242e4b, #242e4b);
+    color: #fff;
+    // border-radius: 80rpx;
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    letter-spacing: 15rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  // 找回密码和 立即注册
+  .regtips{
+  	  display: flex;
+  	 margin-top: 26rpx;
+  	 line-height: 1.4;
+  	 padding-right: 32rpx;
+  	 
+  	 .loginnow{
+  		 color: #5299dc;
+  		 
+  		 &:hover{
+  			 color: #a60000;
+  		 }
+  	 }
+  	 
+  	 
+  
+  }
+  
 </style>

pages/index/index.vue

@@ -180,7 +180,7 @@
 				.then(res=>{
 					// 合并新数据
 					const newList = app.initList(res.data)
-					// console.log(newList,"newlist")
+					console.log(newList,"newlist")
 					app.gdlist.data = getMoreListData(newList, app.gdlist, pageNo)
 					resolve(newList)
 				})

pages/login/components/main.vue

@@ -35,7 +35,7 @@
     </view>
 	<!-- 找回密码 注册 -->
 	<view class="fdreg">
-		<text class="findpass" @click="findpass">找回密码</text>
+		<text class="findpass" @click="fdpass">找回密码</text>
 		<text class="regnow" @click="register">立即注册</text>
 	</view>
 	<!-- 隐私政策等 -->
@@ -240,8 +240,8 @@
 	  /**
 	   * 
 	   */
-	  findpass(){
+	  fdpass(){
-		this.$navTo("page/findpass/findpass")  
+		this.$navTo("pages/findpass/findpass")  
 	  },
 
     }