From 296b15acbe92135f404c66c90fa58c40b9511c6a Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Tue, 11 Jul 2023 17:09:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=98=AF=E5=90=A6=E5=BC=80?=
 =?UTF-8?q?=E5=90=AF=E7=94=A8=E6=88=B7=E6=B3=A8=E5=86=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/login.js       |  12 +++
 pages.json         |   5 ++
 pages/login.vue    |  36 ++++++---
 pages/register.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++
 permission.js      |   2 +-
 5 files changed, 239 insertions(+), 12 deletions(-)
 create mode 100644 pages/register.vue

diff --git a/api/login.js b/api/login.js
index 770d8d7..54fb62c 100644
--- a/api/login.js
+++ b/api/login.js
@@ -18,6 +18,18 @@ export function login(username, password, code, uuid) {
   })
 }
 
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
 // 获取用户详细信息
 export function getInfo() {
   return request({
diff --git a/pages.json b/pages.json
index cc76d21..955146f 100644
--- a/pages.json
+++ b/pages.json
@@ -4,6 +4,11 @@
     "style": {
       "navigationBarTitleText": "登录"
     }
+  }, {
+    "path": "pages/register",
+    "style": {
+      "navigationBarTitleText": "注册"
+    }
   }, {
     "path": "pages/index",
     "style": {
diff --git a/pages/login.vue b/pages/login.vue
index 6e18f72..2c86fcc 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -19,18 +19,22 @@
         <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
         <view class="login-code"> 
           <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
-        </view  >
+        </view>
       </view>
       <view class="action-btn">
         <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+      </view>
+      <view class="reg text-center" v-if="register">
+        <text class="text-grey1">没有账号？</text>
+        <text @click="handleUserRegister" class="text-blue">立即注册</text>
+      </view>
+      <view class="xieyi text-center">
+        <text class="text-grey1">登录即代表同意</text>
+        <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
+        <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
       </view>
-    </view>
-
-    <view class="xieyi text-center">
-      <text class="text-grey1">登录即代表同意</text>
-      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
-      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
-    </view>
+    </view>
+     
   </view>
 </template>
 
@@ -41,7 +45,9 @@
     data() {
       return {
         codeUrl: "",
-        captchaEnabled: true,
+        captchaEnabled: true,
+        // 用户注册开关
+        register: false,
         globalConfig: getApp().globalData.config,
         loginForm: {
           username: "admin",
@@ -54,7 +60,11 @@
     created() {
       this.getCode()
     },
-    methods: {
+    methods: {
+      // 用户注册
+      handleUserRegister() {
+        this.$tab.redirectTo(`/pages/register`)
+      },
       // 隐私协议
       handlePrivacy() {
         let site = this.globalConfig.appInfo.agreements[0]
@@ -165,7 +175,11 @@
         margin-top: 40px;
         height: 45px;
       }
-
+      
+      .reg {
+        margin-top: 15px;
+      }
+      
       .xieyi {
         color: #333;
         margin-top: 20px;
diff --git a/pages/register.vue b/pages/register.vue
new file mode 100644
index 0000000..61e6d5c
--- /dev/null
+++ b/pages/register.vue
@@ -0,0 +1,196 @@
+<template>
+  <view class="normal-login-container">
+    <view class="logo-content align-center justify-center flex">
+      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
+      </image>
+      <text class="title">若依移动端注册</text>
+    </view>
+    <view class="login-form-content">
+      <view class="input-item flex align-center">
+        <view class="iconfont icon-user icon"></view>
+        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+      </view>
+      <view class="input-item flex align-center">
+        <view class="iconfont icon-password icon"></view>
+        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+      </view>
+      <view class="input-item flex align-center">
+        <view class="iconfont icon-password icon"></view>
+        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
+      </view>
+      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
+        <view class="iconfont icon-code icon"></view>
+        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
+        <view class="login-code"> 
+          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
+        </view>
+      </view>
+      <view class="action-btn">
+        <button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
+      </view>
+    </view>
+    <view class="xieyi text-center">
+      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { getCodeImg, register } from '@/api/login'
+
+  export default {
+    data() {
+      return {
+        codeUrl: "",
+        captchaEnabled: true,
+        globalConfig: getApp().globalData.config,
+        registerForm: {
+          username: "",
+          password: "",
+          confirmPassword: "",
+          code: "",
+          uuid: ''
+        }
+      }
+    },
+    created() {
+      this.getCode()
+    },
+    methods: {
+      // 用户登录
+      handleUserLogin() {
+        this.$tab.navigateTo(`/pages/login`)
+      },
+      // 获取图形验证码
+      getCode() {
+        getCodeImg().then(res => {
+          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+          if (this.captchaEnabled) {
+            this.codeUrl = 'data:image/gif;base64,' + res.img
+            this.registerForm.uuid = res.uuid
+          }
+        })
+      },
+      // 注册方法
+      async handleRegister() {
+        if (this.registerForm.username === "") {
+          this.$modal.msgError("请输入您的账号")
+        } else if (this.registerForm.password === "") {
+          this.$modal.msgError("请输入您的密码")
+        } else if (this.registerForm.confirmPassword === "") {
+          this.$modal.msgError("请再次输入您的密码")
+        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
+          this.$modal.msgError("两次输入的密码不一致")
+        } else if (this.registerForm.code === "" && this.captchaEnabled) {
+          this.$modal.msgError("请输入验证码")
+        } else {
+          this.$modal.loading("注册中，请耐心等待...")
+          this.register()
+        }
+      },
+      // 用户注册
+      async register() {
+        register(this.registerForm).then(res => {
+          this.$modal.closeLoading()
+          uni.showModal({
+          	title: "系统提示",
+          	content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
+          	success: function (res) {
+          		if (res.confirm) {
+                uni.redirectTo({ url: `/pages/login` });
+          		}
+          	}
+          })
+        }).catch(() => {
+          if (this.captchaEnabled) {
+            this.getCode()
+          }
+        })
+      },
+      // 注册成功后，处理函数
+      registerSuccess(result) {
+        // 设置用户信息
+        this.$store.dispatch('GetInfo').then(res => {
+          this.$tab.reLaunch('/pages/index')
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  page {
+    background-color: #ffffff;
+  }
+
+  .normal-login-container {
+    width: 100%;
+
+    .logo-content {
+      width: 100%;
+      font-size: 21px;
+      text-align: center;
+      padding-top: 15%;
+
+      image {
+        border-radius: 4px;
+      }
+
+      .title {
+        margin-left: 10px;
+      }
+    }
+
+    .login-form-content {
+      text-align: center;
+      margin: 20px auto;
+      margin-top: 15%;
+      width: 80%;
+
+      .input-item {
+        margin: 20px auto;
+        background-color: #f5f6f7;
+        height: 45px;
+        border-radius: 20px;
+
+        .icon {
+          font-size: 38rpx;
+          margin-left: 10px;
+          color: #999;
+        }
+
+        .input {
+          width: 100%;
+          font-size: 14px;
+          line-height: 20px;
+          text-align: left;
+          padding-left: 15px;
+        }
+
+      }
+
+      .register-btn {
+        margin-top: 40px;
+        height: 45px;
+      }
+
+      .xieyi {
+        color: #333;
+        margin-top: 20px;
+      }
+      
+      .login-code {
+        height: 38px;
+        float: right;
+      
+        .login-code-img {
+          height: 38px;
+          position: absolute;
+          margin-left: 10px;
+          width: 200rpx;
+        }
+      }
+    }
+  }
+
+</style>
diff --git a/permission.js b/permission.js
index 44a3a7c..a41a5e6 100644
--- a/permission.js
+++ b/permission.js
@@ -5,7 +5,7 @@ const loginPage = "/pages/login"
   
 // 页面白名单
 const whiteList = [
-  '/pages/login', '/pages/common/webview/index'
+  '/pages/login', '/pages/register', '/pages/common/webview/index'
 ]
 
 // 检查地址白名单