dever 4 years ago
parent
commit
e4c55ac79c

+ 53 - 0
template/login/App.vue

@@ -0,0 +1,53 @@
+<script>
+	import Vue from 'vue'
+	
+	export default {
+		created() {
+			// #ifdef APP-PLUS
+			plus.navigator.closeSplashscreen(); 
+			// #endif 
+		},
+		onLaunch: function() {
+			
+			console.log('App Launch')
+			uni.getSystemInfo({
+				success: function(e) {
+					// #ifndef MP
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					if (e.platform == 'android') {
+						Vue.prototype.CustomBar = e.statusBarHeight + 50;
+					} else {
+						Vue.prototype.CustomBar = e.statusBarHeight + 45;
+					};
+					// #endif
+		
+					// #ifdef MP-WEIXIN
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					let custom = wx.getMenuButtonBoundingClientRect();
+					Vue.prototype.Custom = custom;
+					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+					// #endif		
+		
+					// #ifdef MP-ALIPAY
+					Vue.prototype.StatusBar = e.statusBarHeight;
+					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+					// #endif
+				}
+			})
+		},
+		onShow: function() {
+			console.log('App 开启')
+		},
+		onHide: function() {
+			console.log('App 关闭')
+		}
+	}
+</script>
+
+<style >
+
+	body{
+		background: #FFFFFF !important;
+	}
+	
+</style>

+ 146 - 0
template/login/README.md

@@ -0,0 +1,146 @@
+
+## 登录模板说明  
+
+> 极简的登录模板,包含登录,注册,找回密码三个页面。  
+> 这里也写了个简单的项目(无实际功能),可供学习使用。  
+> [喜欢可以star下,点击查看Github](https://github.com/AmosHuKe/Watch-Test)    
+
+## 使用组件  
+> 注:组件写得比较粗糙,更多的使用还得修改组件,后期再慢慢更新,目前主要提供一个样式。  
+> Icon提取的是 ColorUi的Icon库,地址:[链接](http://demo.color-ui.com/h5.html#/pages/basics/icon)  
+>    
+> 引入组件  
+
+```  
+import wInput from './components/watch-login/watch-input.vue' //input
+import wButton from './components/watch-login/watch-button.vue' //button
+
+export default {
+	components:{
+		wInput,  //input
+		wButton  //button
+	}
+}
+```  
+
+### Input的使用    
+
+* 基本用法  
+
+```
+<wInput
+	v-model="username"        //绑定值
+	type="text"               //Input文本类型
+	maxlength="11"            //最大长度(默认20)(选填)
+	placeholder="请输入用户名" //占位符 提示性语句(选填)
+></wInput>
+```
+
+* 密码文本  
+
+```
+<wInput
+	v-model="password"        //绑定值
+	type="password"           //Input密码类型
+	placeholder="请输入密码"   //占位符 提示性语句(选填)
+	isShowPass                //开启 是否显示密码图标(选填)
+></wInput>
+```
+
+* 倒计时
+
+```
+<wInput
+	v-model="verCode"        //绑定值
+	type="number"            //Input数字类型
+	placeholder="验证码"      //占位符 提示性语句(选填)
+
+	isShowCode               //开启 倒计时
+	codeText="获取重置码"     //自定义倒计时文字,默认 获取验证码(选填)
+	setTime="30"             //设置倒计时时间,默认60秒,(选填)
+	ref="runCode"            //注册用于触发验证码倒计时
+	@setCode="getVerCode()"  //设置绑定 点击触发的事件
+></wInput>
+
+//自定义事件
+getVerCode(){
+	//获取验证码
+	console.log("获取验证码")
+	//触发倒计时(一般用于请求成功验证码后调用)
+	this.$refs.runCode.$emit('runCode');
+
+	//终止倒计时(用于突然需要终止倒计时的场景)
+	this.$refs.runCode.$emit('runCode',0);
+}
+```
+
+> Input参数说明
+
+| 参数 | 类型 | 默认 | 是否必选 | 说明 |  
+|-----| ----- |----|----|----|  
+| type | String | 无 | √ | Input类型 |  
+| maxlength | Number | 20 | × | 最大长度 |  
+| placeholder | String | 无 | × | 占位符 提示性语句 |  
+| isShowPass(与isShowCode二选一) | Boolean | false | × | 开启 是否显示密码图标 |  
+| isShowCode(与isShowPass二选一) | Boolean | false | × | 开启 倒计时 |  
+
+> 使用 `isShowCode(倒计时)` 参数  
+
+| 参数 | 类型 | 默认 | 是否必选 | 说明 |  
+|-----|----|----|----|----|  
+| ref="runCode" (配合isShowCode使用) | Type | 无 | √ | 触发倒计时:this.$refs.runCode.$emit('runCode');  <br>终止倒计时:this.$refs.runCode.$emit('runCode',0);  |  
+| @setCode="自定义方法"(配合isShowCode使用) | Function | 无 | √ | 设置绑定 点击触发的事件 |  
+| codeText(配合isShowCode使用)| String | 获取验证码 | × | 自定义倒计时文字 |  
+| setTime(配合isShowCode使用) | Number | 60 | × | 设置倒计时时间(秒) |  
+
+
+
+### Button的使用  
+
+```
+<wButton
+	text="重置密码"                  //按钮文本
+	rotate="false"                  //是否开启加载动画
+	bgColor="#333333"               //按钮背景颜色(可选)
+	fontColor="#FFFFFF"             //字体颜色(可选)
+	@click.native="startRePass()"   //触发自定义点击事件
+></wButton>
+
+<wButton
+	rotate="false"                  //是否开启加载动画
+	bgColor="#333333"               //按钮背景颜色(可选)
+	fontColor="#FFFFFF"             //字体颜色(可选)
+	@click.native="startRePass()"   //触发自定义点击事件
+>
+    <view slot="text">
+        按钮文本另一种用法
+    </view>
+</wButton>
+```
+
+> Button参数说明
+
+| 参数 | 类型 | 默认 | 是否必选 | 说明 |  
+|-----|----|----|----|----|  
+| text | String/slot | 无 | √ | 按钮文本 |  
+| rotate | Boolean | false | × | 是否开启加载动画 |  
+| bgColor | String | linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6)) | × | 按钮背景颜色 |  
+| fontColor | String | #FFFFFF | × | 字体颜色 |  
+
+
+## 目录结构  
+```
+├── components    //组件
+│   └── watch-login    //登录组件
+│   │   └── css    //css
+│   │   │   ├── Icon.css    //从ColorUi提取的Icon
+│   │   └── watch-input.vue    //Input组件
+│   │   └── watch-button.vue    //button组件
+├── pages    //页面文件夹  
+│   └── login
+│   │   └── css    //样式/Icon
+│   │   │   ├── main.css    //主样式
+│   │   ├── login.vue    //登录页
+│   │   ├── register.vue    //注册页
+│   │   ├── forget.vue    //忘记密码页
+```

File diff suppressed because it is too large
+ 36 - 0
template/login/components/watch-login/css/icon.css


+ 124 - 0
template/login/components/watch-login/watch-button.vue

@@ -0,0 +1,124 @@
+<template>
+	<view>
+		<!-- 按钮 -->
+		<button 
+			:class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']" 
+			:style="{'background':bgColor, 'color': fontColor}"
+            
+			@click="$emit('click', $event)"
+			@contact="$emit('contact', $event)"
+			@error="$emit('error', $event)"
+			@getphonenumber="$emit('getphonenumber', $event)"
+			@getuserinfo="$emit('getuserinfo', $event)"
+			@launchapp="$emit('launchapp', $event)"
+			@longtap="$emit('longtap', $event)"
+			@opensetting="$emit('opensetting', $event)"
+			@touchcancel="$emit('touchcancel', $event)"
+			@touchend="$emit('touchend', $event)"
+			@touchmove="$emit('touchmove', $event)"
+			@touchstart="$emit('touchstart', $event)"
+		>
+			<view :class="_rotate?'rotate_loop':''">
+				<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
+				<view v-if="!_rotate"><slot name="text">{{ text }}</slot></view>
+			</view>
+		</button>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			text: String, //显示文本
+			rotate:{
+				//是否启动加载
+				type: [Boolean,String],
+				default: false,
+			}, 
+			bgColor:{
+				//按钮背景颜色
+				type: String,
+				default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
+			},
+			fontColor:{
+				//按钮字体颜色
+				type: String,
+				default: "#FFFFFF",
+			},
+		},
+		computed:{
+			_rotate() {
+				//处理值
+				return String(this.rotate) !== 'false'
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+	
+	.dlbutton {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		white-space:nowrap;
+		overflow: hidden;
+		width:601rpx;
+		height:100rpx;
+		background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
+		box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		margin-top: 0rpx;
+	}
+	.dlbutton_loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		width:100rpx;
+		height:100rpx;
+		background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
+		box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		margin-top: 0rpx;
+	}
+	.buttonBorder{
+	    border: none ;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
+	    box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
+	    -webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	}
+	
+	/* 旋转动画 */
+	.rotate_loop{
+		-webkit-transition-property: -webkit-transform;
+	    -webkit-transition-duration: 1s;
+	    -moz-transition-property: -moz-transform;
+	    -moz-transition-duration: 1s;
+	    -webkit-animation: rotate 1s linear infinite;
+	    -moz-animation: rotate 1s linear infinite;
+	    -o-animation: rotate 1s linear infinite;
+	    animation: rotate 1s linear infinite;
+	}
+	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
+	    to{-webkit-transform: rotate(360deg)}
+	}
+	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
+	    to{-moz-transform: rotate(359deg)}
+	}
+	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
+	    to{-o-transform: rotate(359deg)}
+	}
+	@keyframes rotate{from{transform: rotate(0deg)}
+	    to{transform: rotate(359deg)}
+	}
+</style>

+ 208 - 0
template/login/components/watch-login/watch-input.vue

@@ -0,0 +1,208 @@
+<template>
+	<view class="main-list oBorder">
+		<!-- 文本框 -->
+		<input 
+			class="main-input" 
+			:value="value" 
+			:type="_type" 
+			:maxlength="maxlength" 
+			:placeholder="placeholder" 
+			:password="type==='password'&&!showPassword" 
+			
+			@input="$emit('input', $event.target.value)"
+			@blur="$emit('blur', $event)"
+			@focus="$emit('focus', $event)"
+			@longpress="$emit('longpress', $event)"
+			@confirm="$emit('confirm', $event)"
+			@click="$emit('click', $event)"
+			@longtap="$emit('longtap', $event)"
+			@touchcancel="$emit('touchcancel', $event)"
+			@touchend="$emit('touchend', $event)"
+			@touchmove="$emit('touchmove', $event)"
+			@touchstart="$emit('touchstart', $event)"
+		/>
+		<!-- 是否可见密码 -->
+		<image 
+			v-if="_isShowPass&&type==='password'&&!_isShowCode"
+			class="img cuIcon" 
+			:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" 
+			@tap="showPass"
+		></image>
+		<!-- 倒计时 -->
+		<view 
+			v-if="_isShowCode&&!_isShowPass"
+			:class="['vercode',{'vercode-run': second>0}]" 
+			@click="setCode"
+		>{{ getVerCodeSecond }}</view>
+		
+	</view>
+</template>
+
+<script>
+	var _this, countDown;
+	export default{
+		data(){
+			return{
+				showPassword: false, //是否显示明文
+				second: 0, //倒计时
+				isRunCode: false, //是否开始倒计时
+			}
+		},
+		props:{
+			type: String, //类型
+			value: String, //值
+			placeholder: String, //框内提示
+			maxlength: {
+				//最大长度
+				type: [Number,String],
+				default: 20,
+			},
+			isShowPass:{
+				//是否显示密码图标(二选一)
+				type: [Boolean,String],
+				default: false,
+			},
+			isShowCode:{
+				//是否显示获取验证码(二选一)
+				type: [Boolean,String],
+				default: false,
+			},
+			codeText:{
+				type: String,
+				default: "获取验证码",
+			},
+			setTime:{
+				//倒计时时间设置
+				type: [Number,String],
+				default: 60,
+			}
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		mounted() {
+			_this=this
+			//准备触发
+			this.$on('runCode',(val)=>{
+                this.runCode(val);
+            });
+			clearInterval(countDown);//先清理一次循环,避免缓存
+		},
+		methods:{
+			showPass(){
+				//是否显示密码
+				this.showPassword = !this.showPassword
+			},
+			setCode(){
+				//设置获取验证码的事件
+				if(this.isRunCode){
+					//判断是否开始倒计时,避免重复点击
+					return false;
+				}
+				this.$emit('setCode')
+			},
+			runCode(val){
+				//开始倒计时
+				if(String(val)=="0"){
+					
+					//判断是否需要终止循环
+					this.second = 0; //初始倒计时
+					clearInterval(countDown);//清理循环
+					this.isRunCode= false; //关闭循环状态
+					return false;
+				}
+				if(this.isRunCode){
+					//判断是否开始倒计时,避免重复点击
+					return false;
+				}
+				this.isRunCode= true
+				this.second = this._setTime //倒数秒数
+				
+				let _this=this;
+				countDown = setInterval(function(){
+					_this.second--
+					if(_this.second==0){
+						_this.isRunCode= false
+						clearInterval(countDown)
+					}
+				},1000)
+			}
+		},
+		computed:{
+			_type(){
+				//处理值
+				const type = this.type
+				return type == 'password' ? 'text' : type
+			},
+			_isShowPass() {
+				//处理值
+				return String(this.isShowPass) !== 'false'
+			},
+			_isShowCode() {
+				//处理值
+				return String(this.isShowCode) !== 'false'
+			},
+			_setTime() {
+				//处理值
+				const setTime = Number(this.setTime)
+				return setTime>0 ? setTime : 60
+			},
+			getVerCodeSecond(){
+				//验证码倒计时计算
+				if(this.second<=0){
+					return this.codeText;
+				}else{
+					if(this.second<10){
+						return '0'+this.second;
+					}else{
+						return this.second;
+					}
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+	
+	.main-list{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		/* height: 36rpx; */   /* Input 高度 */
+		color: #333333;
+		padding: 40rpx 32rpx;
+		margin:32rpx 0;
+	}
+	.img{
+		width: 32rpx;
+		height: 32rpx;
+		font-size: 32rpx;
+	}
+	.main-input{
+		flex: 1;
+		text-align: left;
+		font-size: 28rpx;
+		/* line-height: 100rpx; */
+		padding-right: 10rpx;
+		margin-left: 20rpx;
+	}
+	.vercode {
+		color: rgba(0,0,0,0.7);
+		font-size: 24rpx;
+		/* line-height: 100rpx; */
+	}
+	.vercode-run {
+		color: rgba(0,0,0,0.4) !important;
+	}
+	.oBorder{
+	    border: none;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
+	    box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
+	}
+</style>

+ 10 - 0
template/login/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

+ 67 - 0
template/login/manifest.json

@@ -0,0 +1,67 @@
+{
+    "name" : "极简登录注册模板",
+    "appid" : "",
+    "description" : "登录模板",
+    "versionName" : "1.1.2",
+    "versionCode" : 112,
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : false
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    }
+}

+ 21 - 0
template/login/pages.json

@@ -0,0 +1,21 @@
+{
+    "pages": [ //pages数组中第一项表示应用启动页,
+        {
+            "path": "pages/login/login",
+            "style": {}
+        }, {
+            "path": "pages/login/forget",
+            "style": {}
+        }, {
+            "path": "pages/login/register",
+            "style": {}
+        } 
+    ],
+    "globalStyle": {
+    	"navigationBarTextStyle": "black",
+    	"navigationBarTitleText": "登陆模板",
+    	"navigationBarBackgroundColor": "#F8F8F8",
+    	"backgroundColor": "#F8F8F8",
+    	"navigationStyle": "custom" //取消默认的原生导航栏
+    }
+}

+ 87 - 0
template/login/pages/login/css/main.css

@@ -0,0 +1,87 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	justify-content:center;
+	/* margin-top: 128rpx; */
+}
+
+/* 头部 logo */
+.header {
+	width:161rpx;
+	height:161rpx;
+	box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1);
+	border-radius:50%;
+	background-color: #000000; 
+	margin-top: 128rpx;
+	margin-bottom: 72rpx;
+	margin-left: auto;
+	margin-right: auto;
+}
+.header image{
+	width:161rpx;
+	height:161rpx;
+	border-radius:50%;
+}
+
+/* 主体 */
+.main {
+	display: flex;
+	flex-direction: column;
+	padding-left: 70rpx;
+	padding-right: 70rpx;
+}
+.tips {
+	color: #999999;
+	font-size: 28rpx;
+	margin-top: 64rpx;
+	margin-left: 48rpx;
+}
+
+/* 登录按钮 */
+.wbutton{
+	margin-top: 96rpx;
+}
+
+/* 其他登录方式 */
+.other_login{
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	margin-top: 256rpx;
+	text-align: center;
+}
+.login_icon{
+	border: none;
+	font-size: 64rpx;
+	margin: 0 64rpx 0 64rpx;
+	color: rgba(0,0,0,0.7)
+}
+.wechat_color{
+	color: #83DC42;
+}
+.weibo_color{
+	color: #F9221D;
+}
+.github_color{
+	color: #24292E;
+}
+
+/* 底部 */
+.footer{
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	font-size: 28rpx;
+	margin-top: 64rpx;
+	color: rgba(0,0,0,0.7);
+	text-align: center;
+	height: 40rpx;
+	line-height: 40rpx;
+}
+.footer text{
+	font-size: 24rpx;
+	margin-left: 15rpx;
+	margin-right: 15rpx;
+}

+ 141 - 0
template/login/pages/login/forget.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="forget">
+		
+		<view class="content">
+			<!-- 主体 -->
+			<view class="main">
+				<view class="tips">若你忘记了密码,可在此重置新密码。</view>
+				<wInput
+					v-model="phoneData"
+					type="text"
+					maxlength="11"
+					placeholder="请输入手机号码"
+				></wInput>
+				<wInput
+					v-model="passData"
+					type="password"
+					maxlength="11"
+					placeholder="请输入新密码"
+					isShowPass
+				></wInput>
+				
+				<wInput
+					v-model="verCode"
+					type="number"
+					maxlength="4"
+					placeholder="验证码"
+					
+					isShowCode
+					codeText="获取重置码"
+					setTime="30"
+					ref="runCode"
+					@setCode="getVerCode()"
+				></wInput>
+			</view>
+			
+			<wButton 
+				class="wbutton"
+				text="重置密码"
+				:rotate="isRotate" 
+				@click.native="startRePass()"
+			></wButton>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	var _this;
+	import wInput from '../../components/watch-login/watch-input.vue' //input
+	import wButton from '../../components/watch-login/watch-button.vue' //button
+	export default {
+		data() {
+			return {
+				phoneData: "", //电话
+				passData: "", //密码
+				verCode:"", //验证码
+				isRotate: false, //是否加载旋转
+			}
+		},
+		components:{
+			wInput,
+			wButton
+		},
+		mounted() {
+			_this= this;
+		},
+		methods: {
+			getVerCode(){
+				//获取验证码
+				if (_this.phoneData.length != 11) {
+				     uni.showToast({
+				        icon: 'none',
+						position: 'bottom',
+				        title: '手机号不正确'
+				    });
+				    return false;
+				}
+				console.log("获取验证码")
+				this.$refs.runCode.$emit('runCode'); //触发倒计时(一般用于请求成功验证码后调用)
+				uni.showToast({
+				    icon: 'none',
+					position: 'bottom',
+				    title: '模拟倒计时触发'
+				});
+				
+				setTimeout(function(){
+					_this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
+					uni.showToast({
+					    icon: 'none',
+						position: 'bottom',
+					    title: '模拟倒计时终止'
+					});
+				},3000)
+			},
+			startRePass() {
+				//重置密码
+				if(this.isRotate){
+					//判断是否加载中,避免重复点击请求
+					return false;
+				}
+				if (this.phoneData.length != 11) {
+				    uni.showToast({
+				        icon: 'none',
+						position: 'bottom',
+				        title: '手机号不正确'
+				    });
+				    return false;
+				}
+			    if (this.passData.length < 6) {
+			        uni.showToast({
+			            icon: 'none',
+						position: 'bottom',
+			            title: '密码不正确'
+			        });
+			        return false;
+			    }
+				if (this.verCode.length != 4) {
+				    uni.showToast({
+				        icon: 'none',
+						position: 'bottom',
+				        title: '验证码不正确'
+				    });
+				    return false;
+				}
+				console.log("重置密码成功")
+				_this.isRotate=true
+				setTimeout(function(){
+					_this.isRotate=false
+				},3000)
+				
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("../../components/watch-login/css/icon.css");
+	@import url("./css/main.css");
+</style>
+

File diff suppressed because it is too large
+ 61 - 0
template/login/pages/login/login.vue


File diff suppressed because it is too large
+ 66 - 0
template/login/pages/login/register.vue


Some files were not shown because too many files changed in this diff