فهرست منبع

wesmiler ECY 画画交易平台

APPLE 3 سال پیش
والد
کامیت
e32b172e20
4فایلهای تغییر یافته به همراه466 افزوده شده و 147 حذف شده
  1. 3 1
      .gitignore
  2. 83 69
      application/index/view/user/findpwd.html
  3. 195 77
      application/index/view/user/login.html
  4. 185 0
      public/assets/shop/css/login/style.css

+ 3 - 1
.gitignore

@@ -1,3 +1,5 @@
 /runtime/*
 /application/shop/view的副本/*
-/application/shop/*.zip
+/application/shop/*.zip
+/application/index/view/user-back/*
+/public/uploads/*

+ 83 - 69
application/index/view/user/findpwd.html

@@ -1,87 +1,101 @@
-<!doctype html>
-<html class="no-js">
+<!DOCTYPE html>
+<html lang="en" class="no-js">
 <head>
+	<meta charset="UTF-8">
+	<title>找回密码</title>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta name="keywords" content="">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>注册</title>
+	<!-- Set render engine for 360 browser -->
 	<meta name="renderer" content="webkit">
-	<link rel="stylesheet" href="__CDN__/assets/index/css/amazeui.css">
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
-	<link rel="stylesheet" href="__CDN__/assets/index/css/login1.css" />
-	<style>
-	    .loginBg{    
-	        background: url({:config('site')['loginBg']});
-            background-size: cover;
-	        
-	    }
-	    .am-form input[type="text"], .am-form input[type="password"]{background:#fff;border-radius: 5px;}
-	    #goCode{margin-top:-5rem;}
-	    
-	    #yzmcode{height: 38px;}
-		.smsverfy{margin-left: 10%;}
-		.verifyimg{vertical-align:middle;cursor:pointer;height:39px;width: 40%;}
-	</style>
+	<link rel="stylesheet" href="__CDN__/assets/shop/css/login/style.css">
 </head>
-<body class="loginBg">
-<header data-am-widget="header" class="am-header am-header-default" style="background: transparent;">
-	<div class="am-header-left am-header-nav">
-		<a href="javascript:void(0);" onclick="javascript:history.back(-1);return false;"><i class=" am-header-icon am-icon-angle-left"></i></a>
-	</div>
-	<h1 class="am-header-title " style="">找回密码
-	</h1>
-</header>
-<div class="wapper fv" style="padding-top:80px;">
-	<div class="am-padding-left am-padding-right">
-		<form class="am-form" id="form1">
-			{:token()}
-				<div class="am-form-group">
-					<input type="text" name="mobile"  placeholder="请输入手机号">
-				</div>
-				<div class="am-form-group">
-					<input type="text" name="password" placeholder="请输入密码" maxlength="12" min="6">
-				</div>
-				<div class="am-form-group">
-					<input type="text" name="repassword" placeholder="请再次输入密码" maxlength="12" min="6">
-				</div>
+<body>
+<div class="wrapper">
+	<div class="container">
+		<div class="sign-in-container">
+			<form id="forgetForm" onsubmit="return false;">
+				<h1>找回密码</h1>
+				<span>使用您的手机号码找回密码</span>
+				{:token()}
+				<input class="input" type="text" name="mobile" placeholder="手机号码">
+				<input class="input" type="password" name="password" placeholder="登录密码">
+				<input class="input" type="password" name="repassword" placeholder="再次输入密码">
+				<button class="form_btn" onclick="forget()">找回密码</button>
+				<a href="login.html" >返回</a>
 			</form>
-
 		</div>
-	<div class=" am-margin-xl">
-		<input type="button" class="am-btn am-btn-danger am-btn-block am-round" id="submit" value="找回密码">
 	</div>
 </div>
+<!-- partial -->
 <script src="__CDN__/assets/index/js/jquery.min.js"></script>
 <script src="__CDN__/assets/index/js/amazeui.min.js"></script>
 <script src="__CDN__/assets/libs/layer/layer.js"></script>
-<script>
-    //提交
-    $('#submit').click(function(){
-        var formData = new FormData($('#form1')[0]);
-        $.ajax({
-            type: "POST",
-            url: "{:url('api/user/findpwd')}",
-            data: formData,
-            contentType: false,
-            processData: false,
-            success: function(data) {
-                if(data.code>0)
-                {
-                    layer.msg(data.msg,{time:1000},function(){
-                        location='login.html';
-                    });
-                }else{
-                    layer.msg(data.msg);
-                }
-            },
-            error: function(XMLHttpRequest, textStatus, errorThrown) {
-                layer.msg("{:__('网络错误,请稍后重试')}");
-            }
-        });
-    })
+<script >
+	/**
+	 * 找回密码
+	 */
+	function forget(){
+		var dd = decodeURIComponent($("#forgetForm").serialize());
+		console.log($('#forgetForm')[0])
+		// var formData = new FormData($('#forgetForm')[0]);
+		var formData = getFormData('forgetForm');
+		console.log(formData)
+		// var formData = new FormData($('#forgetForm')[0]);
+		if(formData.mobile == ''){
+			layer.msg('请输入手机号');
+			return false;
+		}
+		if(formData.password == ''){
+			layer.msg('请输入密码');
+			return false;
+		}
+		if(formData.repassword == ''){
+			layer.msg('请输入再次输入密码');
+			return false;
+		}
+		console.log(formData)
+		$.ajax({
+			type: "POST",
+			url: "{:url('api/user/findpwd')}",
+			data: formData,
+			success: function(data) {
+				if(data.code>0)
+				{
+					layer.msg(data.msg,{time:1000},function(){
+						location='login.html';
+					});
+				}else{
+					layer.msg(data.msg);
+				}
+			},
+			error: function(XMLHttpRequest, textStatus, errorThrown) {
+				layer.msg("{:__('网络错误,请稍后重试')}");
+			}
+		});
+
+		return false;
+	}
+
+	/**
+	 * 获取表单格式化数据
+	 * @param id
+	 * @returns {{}}
+	 */
+	function getFormData(id){
+		var fields = {};
+		var arr = $("#"+id).serializeArray();
+		console.log(arr)
+		$.each(arr, function(k,item){
+			fields[item.name] = item.value;
+		})
+
+		return fields;
+	}
 
 </script>
 </body>
-</html>
+</html>

+ 195 - 77
application/index/view/user/login.html

@@ -1,95 +1,213 @@
-<!doctype html>
-<html class="no-js">
+<!DOCTYPE html>
+<html lang="en" class="no-js">
 <head>
+	<meta charset="UTF-8">
+	<title>登录</title>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta name="keywords" content="">
-	<title>商城</title>
 	<!-- Set render engine for 360 browser -->
 	<meta name="renderer" content="webkit">
-	<link rel="stylesheet" href="__CDN__/assets/shop/css/normalize.css" />
-	<link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
-	<link rel="stylesheet" href="__CDN__/assets/shop/css/login.css">
-	<style>
-		body {
-			background: url('{$loginbg}');
-			background-size: cover;
+	<link rel="stylesheet" href="__CDN__/assets/shop/css/login/style.css">
+</head>
+<body>
+<div class="wrapper">
+	<div class="container">
+		<div class="sign-up-container">
+			<form id="regForm" onsubmit="return false;">
+				<h1>创建账号</h1>
+				<div class="social-links">
+					<div>
+						<a><i class="fa fa-facebook" aria-hidden="true"></i></a>
+					</div>
+					<div>
+						<a><i class="fa fa-twitter" aria-hidden="true"></i></a>
+					</div>
+					<div>
+						<a><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+					</div>
+				</div>
+				<span>或者使用您的手机号码</span>
+				{:token()}
+				<input class="input" type="text" name="mobile" placeholder="手机号码">
+				<input class="input" type="email" name="referee" placeholder="邀请码">
+				<input class="input" type="password" name="password" placeholder="登录密码">
+				<input class="input" type="password" name="password2" placeholder="安全密码">
+				<label class="am-checkbox am-secondary am-padding-top-0">
+					<input type="checkbox" data-am-ucheck value=""> 我同意<a class="publish" onclick="showAgree()">《注册协议》</a>条款
+				</label>
+				<button class="form_btn" onclick="register()">注册</button>
+				<span id="signIn">登录</span>
+			</form>
+		</div>
+		<div class="sign-in-container">
+			<form id="loginForm" onsubmit="return false;">
+				<h1>登录</h1>
+				<div class="social-links">
+					<div>
+						<a><i class="fa fa-facebook" aria-hidden="true"></i></a>
+					</div>
+					<div>
+						<a><i class="fa fa-twitter" aria-hidden="true"></i></a>
+					</div>
+					<div>
+						<a><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+					</div>
+				</div>
+				<span>或者使用你的账号</span>
+				{:token()}
+				<input class="input" type="text" name="account" placeholder="手机号码">
+				<input class="input" type="password" name="password" placeholder="登录密码">
+				<input class="input" type="text" name="studio" placeholder="商家编号">
+				<div class="action">
+					<a href="findpwd.html" class="am-u-sm-6" style="color: #fff;">忘记密码</a>
+					<a href="{:config('site')['appdowm']}" style="color: #fff;" class="download">下载App</a>
+				</div>
+				<button class="form_btn" onclick="login()">登录</button>
+				<span id="signUp" >注册</span>
+			</form>
+		</div>
+	</div>
+</div>
+<!-- partial -->
+{php}$art1=db('article')->where(['catid'=>3,'status'=>1])->find();{/php}
+<script src="__CDN__/assets/index/js/jquery.min.js"></script>
+<script src="__CDN__/assets/index/js/amazeui.min.js"></script>
+<script src="__CDN__/assets/libs/layer/layer.js"></script>
+<script >
+	$(function(){
+		$("#signUp").click(function(){
+			$(".container").addClass('right-panel-active')
+		})
+
+		$("#signIn").click(function(){
+			$(".container").removeClass('right-panel-active')
+		})
+	})
+
+	/**
+	 * 登录
+	 */
+	function login(){
+		var formData = getFormData('loginForm');
+		if(formData.account == ''){
+			layer.msg('请输入手机号');
+			return false;
 		}
-		.name{
-			font-size: 2rem;
-			color: #fff;
-			font-weight: bold;
+		if(formData.password == ''){
+			layer.msg('请输入登录密码');
+			return false;
 		}
-	</style>
-</head>
-<body data-html="login">
+		if(formData.studio == ''){
+			layer.msg('请输入商家编号');
+			return false;
+		}
+		$.ajax({
+			type: "POST",
+			url: "{:url('user/login')}",
+			data: formData,
+			success: function(data) {
+				console.log(data);
+				layer.msg(data.msg,{time:1200},function(){
+					if(data.code >0 )
+					{
+						// location='/shop/index/run';
+						location='/shop/index/index';
+					}else{
 
-<!-- form -->
-<div class="pos_re am-padding-top-lg" >
-	<div class="am-text-center am-padding-top-sm am-padding-bottom-sm">
-		<img src="{$logoimg}"style="width: 100px;border-radius: 100%;">
-		<p class="name">{$siteName}</p>
-	</div>
-	<div class="form-box  am-margin-left am-margin-right am-radius"  style="margin-top:2rem;background:ffffff69;    border-radius: 10px;">
-		<form class="am-form am-padding-left am-padding-right" id="form1" style="padding-top:4rem;padding-bottom: 2rem;">
-			{:token()}
-			<div class="am-form-group am-form-icon am-margin-bottom-lg">
-				<img class="icons" src="__CDN__/assets/shop/img/login_user.png" >
-				<input type="text" class="am-form-field am-input-lg" placeholder="请输入手机号" value="" name="account">
-			</div>
-			<div class="am-form-group am-form-icon">
-				<img class="icons" src="__CDN__/assets/shop/img/login_pwd.png" >
-				<input type="password" class="am-form-field" placeholder="请输入登录密码" value="" name="password">
-			</div>
-			<div class="am-form-group am-form-icon">
-				<img class="icons" src="__CDN__/assets/shop/img/login_verify.png" >
-				<input type="text" class="am-form-field am-input-lg" placeholder="请输入商家编号" value="" name="studio">
-			</div>
-			<div class="am-form-group am-form-icon am-margin-top-lg am-margin-bottom-lg">
-				<button type="button" class="am-btn am-btn-danger am-round am-btn-block " id="submit">登录</button>
-			</div>
-			<div class="am-g">
-				<a href="findpwd.html" class="am-u-sm-6" style="color: #fff;">忘记密码</a>
-				<a href="{:config('site')['appdowm']}" style="color: #fff;" class="am-u-sm-6 am-text-right">下载App</a>
-			</div>
-		</form>
+					}
+				});
+			},
+			error: function(XMLHttpRequest, textStatus, errorThrown) {
+				layer.msg("{:__('网络错误,请稍后重试')}");
+			}
+		});
+	}
 
-	</div>
+	/**
+	 * 注册协议
+	 */
+	function showAgree(){
+		layer.alert('{$art1["content"]}',{title:'注册协议',area:['90%','90%']});
+	}
 
-</div>
-<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
-<script src="__CDN__/assets/shop/js/amazeui.js"></script>
-<script src="__CDN__/assets/libs/layer/layer.js"></script>
-<script>
+	/**
+	 * 注册
+	 */
+	function register(){
+		var formData = getFormData('registerForm');
+		if(formData.mobile == ''){
+			layer.msg('请输入手机号');
+			return false;
+		}
+		if(formData.referee == ''){
+			layer.msg('请输入邀请码');
+			return false;
+		}
+		if(formData.password == ''){
+			layer.msg('请输入登录密码');
+			return false;
+		}
+		if(formData.password2 == ''){
+			layer.msg('请输入安全密码');
+			return false;
+		}
+		layer.open({
+			type: 1
+			,title: false //不显示标题栏
+			,closeBtn: false
+			,area: ['90%','90%']
+			,shade: 0.8
+			,id: 'LAY_layuipro' //设定一个id,防止重复弹出
+			,btn: ['已阅读', '取消']
+			,btnAlign: 'c'
+			,moveType: 1 //拖拽模式,0或者1
+			,content: '<div style="padding:  10px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">{$art1["content"]}</div>'
+			,yes: function(){
+				layer.close(layer.index);
+				parent.$('input[type=checkbox]').prop('checked',true);
+				var formData = new FormData($('#form1')[0]);
+				$.ajax({
+					type: "POST",
+					url: "{:url('api/user/register')}",
+					data: formData,
+					success: function (data) {
+						if (data.code > 0) {
+							layer.msg(data.msg, {time: 1200}, function () {
+								location = 'login.html';
+							});
+						} else {
+							layer.msg(data.msg);
+						}
+					},
+					error: function (XMLHttpRequest, textStatus, errorThrown) {
+						layer.msg("{:__('网络错误,请稍后重试')}");
+					}
+				});
+
+
+			}
+		});
+	}
+
+	/**
+	 * 获取表单格式化数据
+	 * @param id
+	 * @returns {{}}
+	 */
+	function getFormData(id){
+		var fields = {};
+		var arr = $("#"+id).serializeArray();
+		console.log(arr)
+		$.each(arr, function(k,item){
+			fields[item.name] = item.value;
+		})
 
-    $('#submit').click(function(){
-        var formData = new FormData($('#form1')[0]);
-        $.ajax({
-            type: "POST",
-            url: "{:url('user/login')}",
-            data: formData,
-            contentType: false,
-            processData: false,
-            success: function(data) {
-                console.log(data);
-                layer.msg(data.msg,{time:1000},function(){
-                    if(data.code >0 )
-                    {
-                        // location='/shop/index/run';
-                        location='/shop/index/index';
-                    }else{
-                        location=location;
-                    }
-                });
-            },
-            error: function(XMLHttpRequest, textStatus, errorThrown) {
-                layer.msg("{:__('网络错误,请稍后重试')}");
-            }
-        });
-    });
+		return fields;
+	}
 </script>
 </body>
 </html>

+ 185 - 0
public/assets/shop/css/login/style.css

@@ -0,0 +1,185 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
+
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: "Montserrat", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+.wrapper {
+  width: 100%;
+  height: 100vh;
+  /*display: flex;*/
+  justify-content: center;
+  align-items: center;
+  background: #eee;
+  overflow: hidden;
+}
+.container {
+  border-radius: 10px;
+  box-shadow: -5px -5px 10px #fff, 5px 5px 10px #ff4b2b;
+  position: absolute;
+  width: calc(100% - 40px);
+  margin: auto;
+  height: 530px;
+  overflow: hidden;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+form {
+  width: 100%;
+  /*background: #ebecf0;*/
+  background-color: #ff4b2b;
+  display: flex;
+  flex-direction: column;
+  /*padding: 0 50px;*/
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+form .input {
+  background: #eee;
+  padding: 16px;
+  margin: 8px 0;
+  width: 85%;
+  border: 0;
+  outline: none;
+  border-radius: 20px;
+  box-shadow: inset 7px 2px 10px #babebc, inset -5px -5px 12px #fff;
+}
+form .action {
+  width: 85%;
+  margin: 0 auto;
+}
+form .action .download {
+  float: right;
+}
+button {
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 15px 45px;
+  margin: 14px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform 80ms ease-in;
+}
+.form_btn {
+  box-shadow: -5px -5px 10px #fff, 5px 5px 8px #babebc;
+}
+.form_btn:active {
+  box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff;
+}
+.overlay_btn {
+  background-color: #ff4b2b;
+  color: #fff;
+  box-shadow: -5px -5px 10px #ff6b3f, 5px 5px 8px #bf4b2b;
+}
+.sign-in-container {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  margin: 0 auto;
+  height: 100%;
+  transition: all 0.5s;
+}
+.sign-up-container {
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+}
+.overlay-left {
+  display: flex;
+  flex-direction: column;
+  padding: 0 50px;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  opacity: 0;
+  background-color: #ff4b2b;
+  color: #fff;
+  transition: all 0.5s;
+}
+.overlay-right {
+  display: flex;
+  flex-direction: column;
+  padding: 0 50px;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  background-color: #ff4b2b;
+  color: #fff;
+  transition: all 0.5s;
+}
+.container.right-panel-active .sign-in-container {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.container.right-panel-active .sign-up-container {
+  transform: translateX(100%);
+  opacity: 1;
+  z-index: 2;
+}
+.container.right-panel-active .overlay-right {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.container.right-panel-active .overlay-left {
+  transform: translateX(-100%);
+  opacity: 1;
+  z-index: 2;
+}
+.social-links {
+  margin: 20px 0;
+}
+form h1 {
+  font-weight: bold;
+  margin: 0;
+  color: #000;
+}
+
+p {
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+}
+span {
+  font-size: 12px;
+  color: #000;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+}
+.social-links div {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  border-radius: 50%;
+  box-shadow: -5px -5px 10px #fff, 5px 5px 8px #babebc;
+  cursor: pointer;
+}
+.social-links a {
+  color: #000;
+}
+.social-links div:active {
+  box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff;
+}