注册功能模块完成/优化部分页面逻辑-样式

src/api/system/user.js

@@ -37,4 +37,13 @@ export function uploadAvatar(data) {
     name: data.name,
     filePath: data.filePath,
   });
+}
+
+// 注册用户个人信息
+export function appAdd(data) {
+  return request({
+    url: '/system/user/appAdd',
+    method: 'POST',
+    data: data
+  })
 }

src/manifest.json

@@ -2,8 +2,8 @@
     "name" : "综合智慧云",
     "appid" : "__UNI__36DE3A0",
     "description" : "综合智慧云app，助力企业数字化转型升级",
-    "versionName" : "2.0.7",
-    "versionCode" : 9,
+    "versionName" : "2.0.8",
+    "versionCode" : 10,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

src/pages.json

@@ -19,6 +19,14 @@
         "navigationBarTextStyle": "black" // 仅支持 black/white
       }
     },
+    {
+      "path": "pages/register",
+      "style": {
+        "navigationBarTitleText": "注册",
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "black" // 仅支持 black/white
+      }
+    },
     {
       "path": "pages/serveConfigSelect",
       "style": {

src/pages/common/phoneVerify/index.vue

@@ -29,20 +29,16 @@ import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, on
 import { reactive, getCurrentInstance, toRefs, inject } from "vue";
 import { useStores, publicStores } from "@/store/modules/index";
 
-import { getCodeImg } from "@/api/login";
-import { phoneVerify } from "@/api/common/index.js";
-
 const useStore = useStores();
 const { proxy } = getCurrentInstance();
 
 const data = reactive({
+  path: "",
   phone: undefined,
   verify: undefined,
-  codeTime: 0,
-  path: "",
 });
 
-const { phone, verify, codeTime, path } = toRefs(data);
+const { phone, verify, path } = toRefs(data);
 
 /** 点击发送验证码 */
 function getVerifyCode() {
@@ -57,25 +53,17 @@ function getVerifyCode() {
 
 /** 点击提交按钮 */
 function submitRes() {
-  if (!phone.value) {
-    proxy.$modal.msg("请输入手机号码");
-    return;
-  }
-  if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(phone.value)) {
-    proxy.$modal.msg("请输入正确的手机号码");
-    return;
-  }
-  if (!verify.value) {
-    proxy.$modal.msg("请输入验证码");
-    return;
-  }
-  phoneVerify({
-    phone: phone.value,
-    verify: verify.value,
-  }).then((requset) => {
-    if (requset.status === "SUCCESS") {
+  useStore.PhoneVerify({
+    data: {
+      phone: phone.value,
+      verify: verify.value,
+    },
+    success: (res) => {
       proxy.$tab.redirectTo(path.value + `?statusBool=${true}&phone=${phone.value}`);
-    }
+    },
+    error: (res) => {
+      return false;
+    },
   });
 }
 

src/pages/login.vue

@@ -1,27 +1,23 @@
 <template>
-  <view id="login" class="section">
-    <view class="bg">
-      <image class="bgImage" :src="useStore.$state.loginBg" v-if="useStore.$state.loginBg" />
-    </view>
+  <view id="login-container" class="login-container">
+    <image class="bgImage" :src="useStore.$state.loginBg" v-if="useStore.$state.loginBg" />
 
     <view class="middle">
-      <view class="top">
+      <view class="middle-top">
         <image class="logo" mode="heightFix" :src="useStore.$state.loginLogo" v-if="useStore.$state.loginLogo" />
-        <!-- <image class="logo" mode="heightFix" src="@/static/logo200.png" v-else /> -->
         <text class="title" :style="{ color: useStore.$state.loginBg ? '#FFFFFF' : '#000000' }" v-if="useStore.$state.loginTitle">{{ useStore.$state.loginTitle }}</text>
-        <!-- <text class="title" v-else>移动端登录</text> -->
       </view>
 
-      <view class="content">
+      <view class="middle-content">
         <text class="title" :style="{ color: useStore.$state.loginBg ? '#FFFFFF' : '#000000' }">请登录</text>
 
-        <!-- #ifdef APP-PLUS || MP-WEIXIN  -->
-        <view id="okay" v-if="!linkUrl">首次账号登录请先配置服务器</view>
+        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
+        <view class="prompt" v-if="!linkUrl">首次账号登录请先配置服务器</view>
         <view class="setting" @tap="goSeverConfig"> 配置服务器 </view>
         <!--#endif-->
       </view>
 
-      <view id="login-input" v-if="switchText == '账号密码登录'">
+      <view class="middle-input" v-if="switchText == '账号密码登录'">
         <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号码" />
 
         <u-input v-model="verify" prefixIcon="email" placeholder="请输入验证码" :maxlength="6">
@@ -31,7 +27,7 @@
         </u-input>
       </view>
 
-      <view id="login-input" v-if="switchText == '验证码登录'">
+      <view class="middle-input" v-if="switchText == '验证码登录'">
         <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" />
 
         <u-input v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
@@ -41,24 +37,28 @@
         </u-input>
       </view>
 
-      <button class="submit" @click="submitRes">登 录</button>
+      <button class="middle-submit" @click="submitRes">登 录</button>
 
-      <view class="switchText">
-        <text @click="switchMode">{{ switchText }}</text>
+      <view class="middle-switch">
+        <text class="switch-loginMethod" @click="switchMode(1)">{{ switchText }}</text>
+        <div style="margin: auto"></div>
+        <text class="switch-register" @click="switchMode(2)">注册账号</text>
       </view>
 
       <!-- #ifdef APP-PLUS || MP-WEIXIN -->
-      <view class="xieyi text-center">
+      <view class="middle-agreed text-center">
         <u-checkbox-group v-model="userChecked">
           <u-checkbox :name="true" shape="circle" inactiveColor="#0081ff" size="13"></u-checkbox>
         </u-checkbox-group>
-        <text>我已阅读并同意</text>
+        <text>登录即已代表阅读并同意</text>
+        <!-- <text>我已阅读并同意</text> -->
         <text @click="handleUserAgrement" class="text-blue">用户协议</text>
         <text>和</text>
         <text @click="handlePrivacy" class="text-blue">隐私协议</text>
       </view>
       <!--#endif-->
     </view>
+
     <view class="bottom">
       <div class="title">{{ useStore.$state.loginBottomTitle }}</div>
     </view>
@@ -102,11 +102,11 @@ function goSeverConfig() {
 /**
  * @登录方式切换
  */
-function switchMode() {
-  if (switchText.value == "验证码登录") {
-    switchText.value = "账号密码登录";
-  } else {
-    switchText.value = "验证码登录";
+function switchMode(value) {
+  if (value == 1) {
+    switchText.value == "验证码登录" ? (switchText.value = "账号密码登录") : (switchText.value = "验证码登录");
+  } else if (value == 2) {
+    proxy.$tab.navigateTo("/pages/register");
   }
 }
 
@@ -242,14 +242,16 @@ function handlePrivacy() {
 }
 
 onShow(() => {
-  init();
+  setTimeout(() => {
+    init();
+  }, 50);
 });
 
 onLoad((options) => {});
 </script>
 
 <style lang="scss" scoped>
-.section {
+.login-container {
   position: fixed;
   top: 0;
   left: 0;
@@ -260,18 +262,14 @@ onLoad((options) => {});
   height: 100vh;
   background-color: $uni-bg-color;
 
-  .bg {
-    width: 100%;
-    height: 100%;
+  .bgImage {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 0;
-    .bgImage {
-      width: 100%;
-      height: 100%;
-    }
+    width: 100%;
+    height: 100%;
   }
 
   .middle {
@@ -282,7 +280,7 @@ onLoad((options) => {});
     margin: auto;
     margin-top: 30%;
 
-    .top {
+    &-top {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -304,7 +302,7 @@ onLoad((options) => {});
       }
     }
 
-    .content {
+    &-content {
       display: flex;
       position: relative;
       margin: 30px 0 30px 0;
@@ -314,16 +312,12 @@ onLoad((options) => {});
         font-size: 18px;
       }
 
-      .icons {
-        margin: auto 5px auto 0;
-      }
-
       .setting {
         color: #2a98ff;
         margin: auto 0;
       }
 
-      #okay {
+      .prompt {
         position: absolute;
         top: -35px;
         right: 0px;
@@ -348,7 +342,7 @@ onLoad((options) => {});
     }
 
     // 登录页-服务器配置样式 开始
-    #login-input {
+    &-input {
       :deep(.u-input) {
         height: 45px;
         border: 0 !important;
@@ -384,28 +378,24 @@ onLoad((options) => {});
         background-image: none;
         transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
       }
-
-      .verify {
-        color: #2a98ff;
-        font-size: 14px;
-        padding-left: 0px;
-        padding-right: 0px;
-        background-color: transparent;
-
-        &::after {
-          border: 0px;
-        }
-      }
     }
 
-    .switchText {
-      color: #96a6b5;
+    &-switch {
       width: 100%;
-      display: block;
+      display: flex;
       margin-top: 20px;
+      color: #96a6b5;
+
+      &-loginMethod {
+        display: block;
+      }
+
+      &-register {
+        display: block;
+      }
     }
 
-    .submit {
+    &-submit {
       height: 45px;
       line-height: 45px;
       border-radius: 24px;
@@ -414,7 +404,7 @@ onLoad((options) => {});
       border: 0px;
     }
 
-    .xieyi {
+    &-agreed {
       color: #96a6b5;
       margin-top: 30px;
       display: flex;

src/pages/register.vue

@@ -0,0 +1,207 @@
+<template>
+  <view id="register-container">
+    <view class="top-area">
+      <u-icon name="arrow-left" size="17px" color="#000" :bold="true" @click="navigateTo"></u-icon>
+    </view>
+
+    <view class="content-area">
+      <text class="content-area-title">注册</text>
+    </view>
+
+    <view class="bottom-area">
+      <u-input v-model="phone" prefixIcon="phone" placeholder="手机号码(必填)" border="none" />
+      <u-input v-model="verify" prefixIcon="email" placeholder="验证码(必填)" border="none" :maxlength="6">
+        <template #suffix>
+          <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
+        </template>
+      </u-input>
+      <u-input v-model="nickName" prefixIcon="account" placeholder="昵称(必填)" border="none" />
+      <u-input v-model="newPassword" prefixIcon="lock" placeholder="密码(必填)" border="none" :password="newPasswordBool">
+        <template #suffix>
+          <text :class="!newPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
+        </template>
+      </u-input>
+      <u-input v-model="confirmPassword" prefixIcon="lock" placeholder="再次输入密码(必填)" border="none" :password="confirmPasswordBool">
+        <template #suffix>
+          <text :class="!confirmPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
+        </template>
+      </u-input>
+
+      <u-button
+        type="primary"
+        shape="circle"
+        :customStyle="{
+          display: 'block',
+          width: '100%',
+          height: '45px',
+          lineHeight: '45px',
+          fontSize: '17px',
+        }"
+        @click="handleSubmit()"
+      >
+        注 册
+      </u-button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import config from "@/config";
+import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
+import { getToken, setToken, removeToken } from "@/utils/auth";
+
+const publicStore = publicStores();
+const useStore = useStores();
+
+const { proxy } = getCurrentInstance();
+
+const dataList = reactive({
+  nickName: undefined,
+  phone: undefined,
+  verify: undefined,
+  newPassword: undefined,
+  newPasswordBool: true,
+  confirmPassword: undefined,
+  confirmPasswordBool: true,
+});
+
+const uForm = ref(null);
+const { nickName, phone, verify, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool } = toRefs(dataList);
+
+/**
+ * @点击发送验证码
+ */
+function getVerifyCode() {
+  verify.value = undefined;
+  useStore.GetCodeImg({
+    phone: phone.value,
+    success: (res) => {
+      proxy.$modal.msgSuccess("发送成功");
+    },
+  });
+}
+
+/**
+ * @注册
+ * @按钮点击事件
+ */
+function handleSubmit() {
+  useStore.PhoneVerify({
+    data: {
+      phone: phone.value,
+      verify: verify.value,
+    },
+    success: (res) => {
+      useStore.UserAdd({
+        data: {
+          nickName: nickName.value,
+          phone: phone.value,
+          verify: verify.value,
+          newPassword: newPassword.value,
+          confirmPassword: confirmPassword.value,
+        },
+        success: (res) => {
+          proxy.$modal.msgSuccess("注册成功");
+
+          setTimeout(() => {
+            proxy.$modal.loading("登录中，请耐心等待...");
+            useStore
+              .Login({
+                username: phone.value,
+                password: newPassword.value,
+                tenantId: useStore.$state.tenantId,
+              })
+              .then(() => {
+                /** 获取用户信息 */
+                proxy.$modal.closeLoading();
+                useStore.GetInfo().then((res) => {
+                  proxy.$tab.reLaunch("/pages/index");
+                });
+              });
+          }, 1000);
+        },
+      });
+    },
+    error: (res) => {
+      return false;
+    },
+  });
+}
+
+/**
+ * @跳转登录
+ */
+function navigateTo() {
+  proxy.$tab.navigateBack(1);
+}
+
+onLoad((options) => {});
+</script>
+
+<style lang="scss" scoped>
+#register-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  margin: auto;
+  padding: 0 30px;
+  padding-top: 20%;
+  //#ifdef MP-WEIXIN
+  padding-top: 30%;
+  //#endif
+  background-color: #ffffff;
+
+  .top-area {
+  }
+
+  .content-area {
+    display: flex;
+    margin: 30px 0;
+
+    &-title {
+      margin: auto auto auto 0;
+      color: #000;
+      font-size: 18px;
+    }
+  }
+
+  .bottom-area {
+    :deep(.u-input) {
+      height: 45px;
+      border-radius: 8px;
+      padding: 5px 12px !important;
+      border: 0 !important;
+      background-color: #f5f6fa !important;
+      margin-bottom: 15px;
+    }
+
+    :deep(.u-icon__icon) {
+      font-size: 24px !important;
+      line-height: 24px !important;
+      color: gray !important;
+    }
+
+    :deep(.iconfont) {
+      color: gray !important;
+    }
+
+    :deep(.input-placeholder) {
+      color: #c0c4cc !important;
+    }
+
+    :deep(.uni-input-wrapper) {
+      font-size: 16px;
+    }
+
+    :deep(.u-line) {
+      display: none !important;
+    }
+  }
+}
+</style>

src/pages/serveConfig.vue

@@ -186,7 +186,7 @@ onLoad((options) => {
       margin: auto 5px auto 0;
     }
 
-    &setting {
+    &-setting {
       color: #2a98ff;
       margin: auto 0;
     }

src/pages/serveConfigSelect.vue

@@ -185,7 +185,7 @@ onLoad((options) => {});
 </script>
 
 <style lang="scss" scoped>
-#serveConfig-container {
+#serveConfigSelect-container {
   position: fixed;
   top: 0;
   left: 0;

src/permission.js

@@ -6,9 +6,10 @@ const loginPage = "/pages/login";
 
 // 页面白名单
 const whiteList = [
-  "/pages/login",
-  "/pages/serveConfig",
-  "/pages/serveConfigSelect",
+  "/pages/login",//登录
+  "/pages/register",//注册
+  "/pages/serveConfig",//服务器配置
+  "/pages/serveConfigSelect",//服务器配置
   "/pages/common/textview/index1",
   "/pages/common/webview/index",
   "/pages/business/mhxf/unitInfoCollection/index",//单位信息采集

src/static/scss/index.scss

@@ -99,4 +99,16 @@
     overflow: hidden; //超出的文本隐藏
     text-overflow: ellipsis; //溢出用省略号显示
     white-space: nowrap; // 默认不换行；
+}
+
+.verify {
+    color: #2a98ff;
+    font-size: 14px;
+    padding-left: 0px;
+    padding-right: 0px;
+    background-color: transparent;
+
+    &::after {
+        border: 0px;
+    }
 }

src/store/modules/user.js

@@ -3,7 +3,8 @@ import { getToken, setToken, removeToken } from "@/utils/auth";
 import { defineStore } from "pinia";
 // 接口引用
 import { login, logout, getInfo, getMobileTenantConfig, getCodeImg } from "@/api/login";
-import { getUserProfile } from "@/api/system/user";
+import { getUserProfile, appAdd } from "@/api/system/user";
+import { phoneVerify } from "@/api/common/index.js";
 // 组件引用
 import modal from "@/plugins/modal.plugins.js";
 
@@ -52,6 +53,7 @@ const useStores = defineStore("useStores", {
           .then((res) => {
             this.SET_TOKEN(res.data.access_token)
             setToken(res.data.access_token);
+            this.codeTime = 0
             resolve();
           })
           .catch((error) => {
@@ -167,6 +169,90 @@ const useStores = defineStore("useStores", {
       }, 1000);
     },
 
+    /**
+     * @手机验证码校验
+     * @param { 数据 } data 
+     * @param { 成功 } success 
+     * @param { 失败 } error 
+     */
+    PhoneVerify({ data, success, error }) {
+      if (!data.phone) {
+        modal.msg("请输入手机号码");
+        return;
+      }
+
+      if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(data.phone)) {
+        modal.msg("请输入正确的手机号码");
+        return;
+      }
+
+      if (!data.verify) {
+        modal.msg("请输入验证码");
+        return;
+      }
+
+      phoneVerify({
+        phone: data.phone,
+        verify: data.verify,
+      }).then((res) => {
+        if (res.status === "SUCCESS") {
+          success(res)
+
+        } else {
+          error(res)
+        }
+        modal.closeLoading();
+      });
+    },
+
+    /**
+     * @注册
+     * @param { 数据 } data 
+     * @param { 成功 } success 
+     * @param { 失败 } error 
+     */
+    UserAdd({ data, success, error }) {
+      if (!data.nickName) {
+        modal.showToast("昵称不能为空");
+        return;
+      }
+
+      if (!data.newPassword) {
+        modal.showToast("新密码不能为空");
+        return;
+      }
+
+      if (data.newPassword.length < 6 && data.newPassword.length > 20) {
+        modal.showToast("长度在 6 到 20 个字符");
+        return;
+      }
+
+      if (!data.confirmPassword) {
+        modal.showToast("确认密码不能为空");
+        return;
+      }
+
+      if (data.confirmPassword != data.newPassword) {
+        modal.showToast("两次输入的密码不一致");
+        return;
+      }
+
+      modal.loading("加载中");
+      appAdd({
+        tenantId: this.tenantId,
+        nickName: data.nickName,
+        phonenumber: data.phone,
+        userName: data.phone,
+        status: "0",
+        password: data.newPassword,
+      }).then((res) => {
+        if (res.status === "SUCCESS") {
+          success(res)
+          modal.closeLoading();
+        }
+      })
+    },
+
     // 退出系统
     LogOut() {
       return new Promise((resolve, reject) => {

src/utils/request.js

@@ -38,7 +38,7 @@ function verification(res, resolve, reject) {
       reject(data.msg);
     }
     modal.closeLoading();
-  } else if (code === 500 || res.statusCode === 500) {
+  } else if (code === 500 || res.statusCode === 500 || code === 'BIZ-0000') {
     if (data.msg.indexOf(":") !== -1) {
       modal.msg(data.msg.split(":")[1]);
       reject(data.msg.split(":")[1]);