wip

beike/Shop/Http/Controllers/Account/LoginController.php

@@ -29,12 +29,10 @@ class LoginController extends Controller
 
     public function store(LoginRequest $request)
     {
-        $credentials = $request->only('login');
+        if (!auth(Customer::AUTH_GUARD)->attempt($request->only('email', 'password'))) {
-
-        if (!auth(Customer::AUTH_GUARD)->attempt($credentials['login'])) {
             throw new \Exception("账号密码错误！");
         }
 
-        json_success("登录成功!");
+        return json_success("登录成功!");
     }
 }

beike/Shop/Http/Controllers/Account/RegisterController.php

@@ -28,8 +28,7 @@ class RegisterController extends Controller
 
     public function store(RegisterRequest $request)
     {
-        $data = $request->only('register.email', 'register.password');
+        AccountService::register($request->only('email', 'password'));
-        AccountService::register($data['register']);
 
         return json_success("注册成功，您现在可以使用您的账号登录网站!");
     }

beike/Shop/Http/Requests/LoginRequest.php

@@ -24,16 +24,16 @@ class LoginRequest extends FormRequest
     public function rules()
     {
         return [
-            'login.email' => 'required|email:rfc,dns',
+            'email' => 'required|email:rfc,dns',
-            'login.password' => 'required',
+            'password' => 'required',
         ];
     }
 
     public function attributes()
     {
         return [
-            'login.email' => '邮箱地址',
+            'email' => '邮箱地址',
-            'login.password' => '密码'
+            'password' => '密码'
         ];
     }
 }

beike/Shop/Http/Requests/RegisterRequest.php

@@ -24,16 +24,16 @@ class RegisterRequest extends FormRequest
     public function rules()
     {
         return [
-            'register.email' => 'required|email:rfc,dns|unique:customers,email',
+            'email' => 'required|email:rfc,dns|unique:customers,email',
-            'register.password' => 'required|confirmed',
+            'password' => 'required|confirmed',
         ];
     }
 
     public function attributes()
     {
         return [
-            'register.email' => '邮箱地址',
+            'email' => '邮箱地址',
-            'register.password' => '密码'
+            'password' => '密码'
         ];
     }
 }

public/build/beike/shop/default/css/app.css

@@ -655,3 +655,7 @@ body.page-checkout .radio-line-wrap .radio-line-item .right .title {
   font-weight: bold;
   margin-bottom: 10px;
 }
+
+.el-input__inner {
+  border-radius: 0 !important;
+}

public/build/beike/shop/default/js/app.js

@@ -3,6 +3,12 @@ var __webpack_exports__ = {};
 /*!************************************************!*\
   !*** ./resources/beike/shop/default/js/app.js ***!
   \************************************************/
+var instance = axios.create({
+  headers: {
+    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+  } // baseURL: 'https://api.example.com'
+
+});
 $(document).ready(function ($) {
   $.ajaxSetup({
     headers: {

resources/beike/shop/default/css/app.scss

@@ -16,3 +16,4 @@ $primary: #fd560f;
 @import './product';
 @import './cart';
 @import './page-checkout';
+@import './element-ui';

resources/beike/shop/default/css/element-ui.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+.el-input__inner {
+  border-radius: 0 !important;
+}

resources/beike/shop/default/js/app.js

@@ -1,3 +1,9 @@
+const instance = axios.create({
+  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
+  // baseURL: 'https://api.example.com'
+});
+
+
 $(document).ready(function ($) {
   $.ajaxSetup({
     headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

themes/default/account/login.blade.php

@@ -2,8 +2,15 @@
 
 @section('body-class', 'page-login')
 
+@push('header')
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
+@endpush
+
+
 @section('content')
-  <div class="container">
+  <div class="container" id="page-login" v-cloak>
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb justify-content-center">
         <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -14,46 +21,30 @@
     <div class="justify-content-center row mb-5">
       <div class="col-lg-5">
         <div class="card">
-          <div class="login-item-header card-header">
+          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
-            <h6 class="text-uppercase mb-0">Login</h6>
+            <div class="login-item-header card-header">
-          </div>
+              <h6 class="text-uppercase mb-0">Login</h6>
-          <div class="card-body">
+            </div>
-            <p class="lead">Already our customer?</p>
+            <div class="card-body">
-            <p class="text-muted">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
+              <p class="lead">Already our customer?</p>
-              egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+              <p class="text-muted">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
-              amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
-            <hr>
+                amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+              <hr>
 
-            <form action="{{ route('shop.login.store') }}" method="post">
+              <el-form-item label="邮箱" prop="email">
-              @csrf
+                <el-input v-model="loginForm.email" placeholder="邮箱地址"></el-input>
+              </el-form-item>
 
-              <div class="mb-4">
+              <el-form-item label="密码" prop="password">
-                <label class="form-label" for="email_1">Email</label>
+                <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
-                <input type="text" name="login[email]" class="form-control" value="{{ old('login.email') }}" placeholder="邮箱地址">
+              </el-form-item>
-                @error('login.email')
+
-                  <x-admin::form.error :message="$message" />
+              <div class="mt-5 mb-3">
-                @enderror
+                <button type="button" @click="checkedBtnLogin('loginForm')" class="btn btn-outline-dark"><i class="bi bi-box-arrow-in-right"></i> 登录</button>
               </div>
-
+            </div>
-              <div class="mb-4">
+          </el-form>
-                <label class="form-label" for="email_1">Password</label>
-                <input type="password" name="login[password]" class="form-control" placeholder="密码">
-                @error('login.password')
-                  <x-admin::form.error :message="$message" />
-                @enderror
-              </div>
-
-              @if (session('error'))
-                <div class="alert alert-success">
-                  {{ session('error') }}
-                </div>
-              @endif
-
-              <div class="mb-4">
-                <button type="submit" class="btn btn-outline-dark"><i class="bi bi-box-arrow-in-right"></i> 登录</button>
-              </div>
-            </form>
-          </div>
         </div>
       </div>
       <div class="col-lg-5">
@@ -69,46 +60,98 @@
               customer service center is working for you 24/7.</p>
               <hr>
 
-              <form action="{{ route('shop.register.store') }}" method="post">
+              <el-form ref="registerForm" :model="registerForm" :rules="registeRules">
-                @csrf
+                <el-form-item label="邮箱" prop="email">
+                  <el-input v-model="registerForm.email" placeholder="邮箱地址"></el-input>
+                </el-form-item>
 
-                <div class="mb-4">
+                <el-form-item label="密码" prop="password">
-                  <label class="form-label" for="name">邮箱</label>
+                  <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
-                  <input type="text" name="register[email]" class="form-control" value="{{ old('register.email') }}" placeholder="邮箱地址">
+                </el-form-item>
-                  @error('register.email')
+
-                    <x-admin::form.error :message="$message" />
+                <el-form-item label="确认密码" prop="password_confirmation">
-                  @enderror
+                  <el-input type="password" v-model="registerForm.password_confirmation" placeholder="确认密码"></el-input>
+                </el-form-item>
+
+
+                <div class="mt-5 mb-3">
+                  <button type="button" @click="checkedBtnLogin('registerForm')" class="btn btn-outline-dark"><i class="bi bi-person"></i> 注册</button>
                 </div>
-
+              </el-form>
-                <div class="mb-4">
-                  <label class="form-label" for="name">密码</label>
-                  <input type="password" name="register[password]" class="form-control" placeholder="密码">
-                  @error('register.password')
-                    <x-admin::form.error :message="$message" />
-                  @enderror
-                </div>
-
-                <div class="mb-4">
-                  <label class="form-label" for="name">确认密码</label>
-                  <input type="password" name="register[password_confirmation]" class="form-control" placeholder="密码">
-                  @error('register.password_confirmation')
-                    <x-admin::form.error :message="$message" />
-                  @enderror
-                </div>
-
-                @if (session('error'))
-                  <div class="alert alert-success">
-                    {{ session('error') }}
-                  </div>
-                @endif
-
-                <div class="mb-4">
-                  <button type="submit" class="btn btn-outline-dark"><i class="bi bi-person"></i> 注册</button>
-                </div>
-              </form>
           </div>
         </div>
       </div>
     </div>
   </div>
 @endsection
+
+@push('add-scripts')
+  <script>
+    new Vue({
+      el: '#page-login',
+
+      data: {
+        loginForm: {
+          email: '',
+          password: '',
+        },
+
+        registerForm: {
+          email: '',
+          password: '',
+          password_confirmation: '',
+        },
+
+        loginRules: {
+          email: [
+            {required: true, message: '请输入邮箱', trigger: 'blur'},
+            {type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
+          ],
+          password: [
+            {required: true, message: '请输入密码', trigger: 'blur'}
+          ]
+        },
+
+        registeRules: {
+          email: [
+            {required: true, message: '请输入邮箱', trigger: 'blur'},
+            {type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
+          ],
+          password: [
+            {required: true, message: '请输入密码', trigger: 'blur'}
+          ],
+          password_confirmation: [
+            {required: true, message: '请输入密码', trigger: 'blur'}
+          ]
+        }
+      },
+
+      beforeMount () {
+      },
+
+      methods: {
+        checkedBtnLogin(form) {
+          let _data = this.loginForm, url = '/login'
+
+          if (form == 'registerForm') {
+            _data = this.registerForm, url = '/register'
+          }
+
+          this.$refs[form].validate((valid) => {
+            if (!valid) {
+              layer.msg('请检查表单是否填写正确', () =>{})
+              return;
+            }
+
+            axios.post(url, _data).then((res) => {
+              this.$message.success(res.data.message);
+              location = "{{ shop_route('account.index') }}"
+            }).catch(function (error) {
+              layer.msg(error.message, () =>{})
+            });
+          });
+        }
+      }
+    })
+  </script>
+@endpush

themes/default/layout/master.blade.php

@@ -9,6 +9,7 @@
   <link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/bootstrap.css') }}">
   <script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
   <script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
+  <script src="{{ asset('vendor/axios/0.27.2/axios.min.js') }}"></script>
   <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script>
   <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script>
   <script src="{{ asset('/build/beike/shop/default/js/app.js') }}"></script>