2020

pages/public/forget.vue

@@ -1,35 +1,41 @@
 <template>
 	<view class="container">
-		<view class="container_text">
-			<image class="banner-img" src="/static/img/img01.png" mode=" scaleToFill"></image>
-		</view>
-		<view class="loginTitle"><text>手机号登录</text></view>
+		<view class="logo-img"><image src="../../static/img/log.png" mode=""></image></view>
+		<view class="logo">易趣go</view>
 		<view class="login_text">
-			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img03.png"></image></view>
-				<view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
+			<view class="login_input flex_item">
+				<view class="login_img"><image class="phone" src="/static/img/phone.png"></image></view>
+				<view class="login_name"><input class="uni-input" type="text" v-model="phone" focus placeholder="请输入手机" /></view>
+			</view>
+			<view class="login_input flex_item">
+				<view class="login_img"><image src="/static/img/zfpwd.png"></image></view>
+				<view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder=" 请输入新的不少于6位的密码" /></view>
+			</view>
+			<view class="login_input flex_item">
+				<view class="login_img"><image src="/static/img/zfpwd.png"></image></view>
+				<view class="login_name"><input class="uni-input" type="password" v-model="password2" focus placeholder="请重复输入新密码" /></view>
 			</view>
 			<view class="login_input flex">
-				<view class="login_img"><image src="/static/icon/img06.png"></image></view>
+				<view class="login_img"><image class="codeimg" src="/static/img/yan.png"></image></view>
 				<view class="login_name flex">
-					<input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
-					<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
+					<input class="uni-input width" v-model="code" type="number" focus placeholder="请输入验证码" />
+					<view class="code" @click="verification">{{ countDown == 0 ? '发送验证码' : countDown }}</view>
 				</view>
 			</view>
-			<view>
-				<button type="green" @click="register" class="uni-button uni-button-green">登录</button>
-			</view>
 		</view>
+		<view class="login" @click="updatalogin">确认修改</view>
 	</view>
 </template>
 <script>
-import { mapMutations } from 'vuex';
-import { verify, loginMobile, getUserInfo } from '@/api/login.js';
+import { registerReset } from '@/api/set.js';
+import { verify } from '@/api/login.js';
 export default {
 	data() {
 		return {
 			phone: '', //用户
 			code: '', //验证码
+			password2: '',
+			password: '',
 			time: '', //保存倒计时对象
 			countDown: 0 //倒计时
 		};
@@ -44,50 +50,58 @@ export default {
 		}
 	},
 	methods: {
-		...mapMutations('user', ['setUserInfo', 'login']),
-		// 手机登录
-		register() {
+		updatalogin() {
 			let obj = this;
 			if (obj.phone == '') {
-				obj.$api.msg('请输入电话号码');
+				obj.$api.msg('请输入邮箱');
+				return;
+			}
+			if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.phone) && (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.phone))) {
+				obj.$api.msg('请输入正确的邮箱或手机');
+				return;
+			}
+			if (obj.password == '') {
+				obj.$api.msg('请输入密码');
 				return;
 			}
-			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) {
-				obj.$api.msg('请输入正确的手机号');
+			if (obj.password2 == '') {
+				obj.$api.msg('请再次输入密码');
+				return;
+			}
+			if (obj.password2 != obj.password) {
+				obj.$api.msg('两次密码不正确');
 				return;
 			}
 			if (obj.code == '') {
 				obj.$api.msg('请输入验证码');
 				return;
 			}
-
-			loginMobile({
-				phone: obj.phone, //账号
+			registerReset({
+				account: obj.phone, //账号
+				password: obj.password,
+				password2: obj.password2,
+				type: 1,
 				captcha: obj.code
-			}).then(function(e) {
-				uni.setStorageSync('token', e.data.token);
-				getUserInfo({}).then(e => {
-					obj.login();
-					// 保存返回用户数据
-					obj.setUserInfo(e.data);
-					//成功跳转首页
-					uni.switchTab({
-						url: '/pages/index/index'
+			})
+				.then(function(e) {
+					obj.$api.msg(e.msg);
+					uni.navigateTo({
+						url: '/pages/public/login'
 					});
+				})
+				.catch(e => {
+					console.log(e);
 				});
-			}).catch((e) => {
-				console.log(e);
-			});
 		},
 		//发送验证码
 		verification() {
 			let obj = this;
 			if (this.phone == '') {
-				this.$api.msg('请输入电话号码');
+				this.$api.msg('请输入邮箱号码');
 				return;
 			}
-			if (this.phone.length < 11) {
-				this.$api.msg('请输入正确的手机号');
+			if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.phone) && (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.phone))) {
+				obj.$api.msg('请输入正确的邮箱或手机');
 				return;
 			}
 			// 判断是否在倒计时
@@ -103,17 +117,18 @@ export default {
 					phone: obj.phone,
 					type: 'login'
 				})
-					.then(({ data }) => {})
+					.then(({ data }) => {
+						uni.showToast({
+							title: '验证码已发送',
+							duration: 2000,
+							position: 'top',
+							icon: 'none'
+						});
+					})
 					.catch(err => {
 						console.log(err);
 					});
 			}
-		},
-		login() {
-			//返回登录
-			uni.navigateTo({
-				url: '/pages/public/login'
-			});
 		}
 	}
 };
@@ -121,47 +136,64 @@ export default {
 
 <style lang="scss">
 page {
-	height: 100%;
-}
-.container {
-	width: 100%;
-	height: 100%;
-	background-size: 100%;
-}
-.container_text {
-	width: 100%;
-	height: 500rpx;
-	top: 0rpx;
-	.banner-img {
+	min-height: 100%;
+	background-color: #ffffff;
+	.container {
 		width: 100%;
-		height: 100%;
+		padding: 60rpx 70rpx;
 	}
 }
+.logo-img {
+	width: 161rpx;
+	height: 161rpx;
+	margin:auto;
+	margin-top: 52rpx !important;
+	margin-bottom: 15rpx !important;
+	box-shadow: 0px 12rpx 13rpx 0px rgba(68, 150, 157, 0.47);
+	border-radius: 50%;
+	image {
+		width: 161rpx;
+		height: 161rpx;
+		border-radius: 50%;
+	}
+}
+.logo {
+	font-size: 36rpx;
+	font-weight: 400;
+	color: #5dbc7c;
+	text-align: center;
+}
+.phone {
+	height: 43rpx !important;
+	width: 27rpx !important;
+}
+.codeimg {
+	height: 39rpx !important;
+	width: 31rpx !important;
+}
 .login_text {
-	margin: auto 30rpx;
-	position: relative;
-	padding: 100rpx 102rpx;
-	background-color: #ffffff;
-	margin-top: -180rpx;
 	border-radius: 20rpx;
+	margin-top: 80rpx;
 	.login_input {
-		border-bottom: 1px solid #f0f0f0;
-		margin-bottom: 65rpx;
-		.login_img image {
+		// border-bottom: 1px solid #C5CEE0;
+		margin-bottom: 35rpx;
+		padding-bottom: 60rpx;
+		.login_img {
 			height: 35rpx;
-			width: 29rpx;
+			width: 31rpx;
 			margin-right: 20rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
 		}
 		.uni-input {
 			text-align: left;
-			width: 470rpx;
-			font-size: 28rpx !important;
+			width: 400rpx;
+			font-size: 32rpx !important;
 		}
 		.login_name {
 			color: #333333;
-			.width {
-				width: 325rpx !important;
-			}
 			.code {
 				color: #5dbc7c;
 				font-size: 23rpx;
@@ -172,29 +204,14 @@ page {
 			}
 		}
 	}
-	.uni-button-green {
-		color: #ffffff;
-		background-color: #5dbc7c;
-		margin: 40rpx 10rpx;
-		border-radius: 50rpx;
-	}
-	.uni-button {
-		height: 85rpx;
-		line-height: 85rpx;
-	}
-}
-.loginTitle {
-	position: absolute;
-	top: 250rpx;
-	width: 100%;
-	text-align: center;
-	color: white;
-	font-size: 40rpx;
 }
 
-uni-button {
-	height: 80rpx !important;
-	line-height: 80rpx !important;
+.login {
+	background: #5dbc7c;
+	margin-top: 96rpx;
+	color: #ffffff;
+	text-align: center;
+	padding: 26rpx 0rpx;
+	border-radius: 20rpx;
 }
-
 </style>

unpackage/dist/build/h5/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>商城</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.d618d095.js></script><script src=/index/static/js/index.e2186282.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.d618d095.js></script><script src=/index/static/js/index.ec2e761d.js></script></body></html>