登录页面逻辑模块优化

src/pages.json

@@ -11,7 +11,8 @@
     {
       "path": "pages/serveConfig",
       "style": {
-        "navigationBarTitleText": "服务器配置"
+        "navigationBarTitleText": "服务器配置",
+        "navigationStyle": "custom"
       }
     },
     {

src/pages/login.vue

@@ -18,40 +18,41 @@
       <view class="content">
         <text class="title">请登录</text>
 
-        <!-- #ifdef APP-PLUS || H5 -->
+        <!-- #ifdef APP-PLUS -->
         <view id="okay">首次账号登录请先配置服务器</view>
         <!-- <u-icon class="icons" name="scan" color="gray" size="22"></u-icon> -->
         <view class="setting" @tap="goSeverConfig"> 配置服务器 </view>
         <!--#endif-->
       </view>
 
-      <view id="login-input" style="margin-top: 20px" v-if="switchText == '账号密码登录'">
+      <view id="login-input" v-if="switchText == '账号密码登录'">
         <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号码" />
       </view>
 
-      <view id="login-input" style="display: flex; margin-top: 20px" v-if="switchText == '账号密码登录'">
-        <u-input style="width: 60%" v-model="verify" prefixIcon="email" placeholder="请输入验证码" />
-
-        <u-button @click="getVerifyCode">{{ !codeTime ? "获取验证码" : codeTime + "s" }}</u-button>
+      <view id="login-input" v-if="switchText == '账号密码登录'">
+        <u-input v-model="verify" prefixIcon="email" placeholder="请输入验证码">
+          <template #suffix>
+            <u-button @click="getVerifyCode">{{ !codeTime ? "获取验证码" : codeTime + "s" }}</u-button>
+          </template>
+        </u-input>
       </view>
 
-      <view id="login-input" style="margin-top: 20px" v-if="switchText == '验证码登录'">
+      <view id="login-input" v-if="switchText == '验证码登录'">
         <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" />
 
-        <u-input style="margin-top: 20px" v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
+        <u-input v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="inputIconBool">
           <template #suffix>
-            <text class="iconfont ucicon-eye" @click="inputIcon()" v-if="!inputIconBool"></text>
-            <text class="iconfont ucicon-eye-close" @click="inputIcon()" v-if="inputIconBool"></text>
+            <text :class="!inputIconBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="inputIconBool = !inputIconBool"></text>
           </template>
         </u-input>
       </view>
 
       <!--  -->
+      <button class="submit" @click="submitRes">登 录</button>
 
       <view class="switchText" @click="switchMode">
         <text>{{ switchText }}</text>
       </view>
-      <button class="submit" @click="submitRes">登 录</button>
     </view>
     <view class="bottom">
       <div class="title">{{ bottomTitle }}</div>
@@ -100,6 +101,7 @@ function goSeverConfig() {
     url: "/pages/serveConfig",
   });
 }
+
 /**登录方式切换 */
 function switchMode() {
   if (switchText.value == "验证码登录") {
@@ -108,32 +110,23 @@ function switchMode() {
     switchText.value = "验证码登录";
   }
 }
+
 /** 点击发送验证码 */
 function getVerifyCode() {
   if (!phone.value) {
-    uni.showToast({
-      title: "请输入手机号码...",
-      icon: "none",
-    });
+    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)) {
-    uni.showToast({
-      title: "请输入正确的手机号码...",
-      icon: "none",
-    });
+    proxy.$modal.msg("请输入正确的手机号码");
     return;
   }
   verify.value = undefined;
   getSendSms({
     phone: phone.value,
   });
-  //
   if (codeTime.value > 0) {
-    uni.showToast({
-      title: "不能重复获取",
-      icon: "none",
-    });
+    proxy.$modal.msg("不能重复获取");
     return;
   } else {
     codeTime.value = 60;
@@ -146,6 +139,7 @@ function getVerifyCode() {
     }, 1000);
   }
 }
+
 /** 获取验证码 */
 async function getSendSms(params) {
   getCodeImg(params).then((res) => {
@@ -204,34 +198,22 @@ async function submitRes() {
   //#ifdef APP-PLUS
   var linkUrl = newPublicStore.serveUrl;
   if (!newPublicStore.serveUrl) {
-    uni.showToast({
-      title: "首次登录请先进行服务器配置...",
-      icon: "none",
-    });
+    proxy.$modal.msg("首次登录请先进行服务器配置");
     return;
   }
   //#endif
 
   if (switchText.value == "账号密码登录") {
     if (!phone.value) {
-      uni.showToast({
-        title: "请输入手机号码...",
-        icon: "none",
-      });
+      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)) {
-      uni.showToast({
-        title: "请输入正确的手机号码...",
-        icon: "none",
-      });
+      proxy.$modal.msg("请输入正确的手机号码");
       return;
     }
     if (!verify.value) {
-      uni.showToast({
-        title: "请输入验证码...",
-        icon: "none",
-      });
+      proxy.$modal.msg("请输入验证码");
       return;
     }
     login({
@@ -241,17 +223,11 @@ async function submitRes() {
     });
   } else {
     if (!username.value) {
-      uni.showToast({
-        title: "请输入账户",
-        icon: "none",
-      });
+      proxy.$modal.msg("请输入账户");
       return;
     }
     if (!password.value) {
-      uni.showToast({
-        title: "请输入密码",
-        icon: "none",
-      });
+      proxy.$modal.msg("请输入密码");
       return;
     }
 
@@ -265,7 +241,7 @@ async function submitRes() {
 
 /** 获取登录数据 */
 async function login(data) {
-  // proxy.$modal.loading("登录中，请耐心等待...");
+  proxy.$modal.loading("登录中，请耐心等待...");
 
   useStore.Login(data).then(() => {
     info();
@@ -295,14 +271,6 @@ async function getMobileTenantConfigApi(params) {
   });
 }
 
-/**
- * @密码显示隐藏icon图标事件
- * @icon点击事件
- */
-function inputIcon() {
-  inputIconBool.value = !inputIconBool.value;
-}
-
 /**
  * @onLoad
  */
@@ -318,11 +286,6 @@ onLoad(() => {
   }
 });
 </script>
-<style>
-.uni-input {
-  color: red !important;
-}
-</style>
 
 <style lang="scss" scoped>
 .section {
@@ -361,20 +324,17 @@ onLoad(() => {
         border: 0 !important;
         // border-color: #000 !important;
         // border-color: gray !important;
-        background-color: rgba(255, 255, 255, 0.1) !important;
+        // background-color: rgba(255, 255, 255, 0.1) !important;
         background-color: #f5f6fa !important;
+        margin-bottom: 20px;
       }
 
-      :deep(.uni-input-wrapper) {
-        font-size: 16px;
+      :deep(.input-placeholder) {
         color: #a0a4af;
       }
 
-      :deep(uni-input) {
-        color: #000 !important;
-        background-color: rgba(255, 255, 255, 0) !important;
-        border: 0px solid #ededed !important;
-        padding-left: 0 !important;
+      :deep(.uni-input-wrapper) {
+        font-size: 16px;
       }
 
       :deep(.u-icon__icon) {
@@ -387,19 +347,6 @@ onLoad(() => {
         color: gray !important;
       }
 
-      :deep(.u-button) {
-        width: 35%;
-        height: 45px;
-        line-height: 45px;
-        color: #2a98ff;
-        border-radius: 24px;
-        margin: 0 0 0 5%;
-        font-size: 17px !important;
-        white-space: nowrap;
-        border-color: #2a98ff !important;
-        background-color: rgba(255, 255, 255, 0.1) !important;
-      }
-
       :deep(:-webkit-autofill) {
         caret-color: #a0a4af; // 设置光标颜色
         // -webkit-text-fill-color: gray !important;
@@ -408,6 +355,19 @@ onLoad(() => {
         background-image: none;
         transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
       }
+
+      :deep(.u-button) {
+        color: #2a98ff;
+        font-size: 16px !important;
+        white-space: nowrap;
+        border: 0;
+        border-color: #2a98ff !important;
+        background-color: rgba(255, 255, 255, 0) !important;
+
+        &:before {
+          opacity: 0;
+        }
+      }
     }
 
     .top {
@@ -433,14 +393,15 @@ onLoad(() => {
     .content {
       display: flex;
       position: relative;
+      margin: 30px 0 30px 0;
       .title {
         margin: auto auto auto 0;
         color: #000;
-        font-size: 17px;
+        font-size: 18px;
       }
 
       .icons {
-        margin: auto 5px 0 0;
+        margin: auto 5px auto 0;
       }
 
       .setting {
@@ -473,9 +434,9 @@ onLoad(() => {
 
     .switchText {
       color: #a0a4af;
-      margin-top: 20px;
       width: 100%;
       display: block;
+      margin-top: 20px;
     }
 
     .submit {
@@ -484,7 +445,6 @@ onLoad(() => {
       border-radius: 24px;
       background: #2a98ff;
       color: #fff;
-      margin-top: 30px;
       border: 0px;
     }
   }

src/pages/serveConfig.vue

@@ -1,100 +1,146 @@
 <template>
-    <view id="serveConfig">
-        <view style="padding: 10px 40px 20px 40px;">
-            <u--form :model="form" ref="uForm" :rules="rules" labelWidth="80">
-                <u-form-item label="链接地址" prop="linkUrl" required :borderBottom="true">
-                    <u-input class="configInput" v-model="form.linkUrl" :placeholder='newPublicStore.serveUrl?newPublicStore.serveUrl:"请输入链接地址"' border="none">
-                    </u-input>
-                </u-form-item>
-                <view >
-                    <u-button type="primary" style="width: 50%; height: 36px; font-size: 14px;margin-top:20px" @click="handleSubmit()"
-                        shape="circle"> 保 存</u-button>
-                </view>
-            </u--form>
-        </view>
+  <view id="serveConfig">
+    <view class="top">
+      <u-icon name="arrow-left" size="17px" color="#000" :bold="true" @click="navigateTo"></u-icon>
     </view>
+
+    <view class="content">
+      <text class="title">设置服务器地址</text>
+      <!-- <u-icon class="icons" name="scan" color="#2a98ff" size="22"></u-icon>
+      <text class="setting" @tap="goSeverConfig"> 扫码添加 </text> -->
+    </view>
+
+    <view class="bottom">
+      <u-input v-model="linkUrl" placeholder="服务器地址(必填)" border="none" clearable> </u-input>
+
+      <u-button type="primary" style="width: 100%; height: 45px; font-size: 17px; margin-top: 20px" @click="handleSubmit()" shape="circle"> 保 存</u-button>
+    </view>
+  </view>
 </template>
 
 <script setup>
+import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
 import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
 import publicStore from "@/store/modules/public.js";
 const newPublicStore = publicStore();
+
+const { proxy } = getCurrentInstance();
+
 const dataList = reactive({
-    form: {
-        linkUrl: "", //链接地址
-       
-    },
-    rules: {
-    linkUrl: [
-      {
-        required: true,
-        message: "请输入链接地址",
-        trigger: ["blur"],
-      },
-    //   {
-    //     type: "string",
-    //     required: true,
-    //     message: "请输入正确的链接地址",
-    //     pattern: /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/,
-    //     trigger: ["blur", "change"],
-    //   },
-    ],
-  
-  },
+  linkUrl: "", //链接地址
 });
 
 const uForm = ref(null);
-const { form, baseBuildListForm, rules, baseBuildListRules, noticeBarText, pagingBool, actionTitle, actionIndex, actionsList, actionShow, showTime, timeValue, timeTitle, timeIndex, modalShow } =
-    toRefs(dataList);
+const { linkUrl } = toRefs(dataList);
 
 /**
  * @提交
  * @按钮点击事件
  */
 function handleSubmit() {
-    uForm.value
-    .validate()
-    .then((res) => {
-        newPublicStore.serveUrl=form.value.linkUrl
-      uni.navigateTo({
-            url: '/pages/login'
-        })
-    })
+  if (!linkUrl.value) {
+    proxy.$modal.msg("请输入链接地址");
+    return;
+  }
+
+  if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/.test(linkUrl.value)) {
+    proxy.$modal.msg("请输入正确的链接地址");
+    return;
+  }
+
+  newPublicStore.serveUrl = linkUrl.value;
+  navigateTo();
+}
+
+/**
+ * @跳转登录
+ */
 
+function navigateTo() {
+  uni.navigateTo({
+    url: "/pages/login",
+  });
 }
+
+onLoad((options) => {
+  if (newPublicStore.serveUrl) {
+    linkUrl.value = newPublicStore.serveUrl;
+  }
+});
 </script>
 
-<style lang="scss" scoped>
-body {
-    background: #fff;
+<style>
+body,
+uni-page-body,
+uni-page-refresh {
+  background-color: #ffffff;
 }
+</style>
 
+<style lang="scss" scoped>
 #serveConfig {
-    background: #fff;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  padding: 0 40px;
+  margin: auto;
+  padding-top: 20%;
+
+  .top {
+  }
+
+  .content {
+    display: flex;
+    margin: 30px 0;
 
-    ::v-deep .u-input__content__field-wrapper__field {
-        height: 30px;
-        line-height: 30px
+    .title {
+      margin: auto auto auto 0;
+      color: #000;
+      font-size: 18px;
     }
-    ::v-deep .u-button--circle{
-        border-radius:5px
+
+    .icons {
+      margin: auto 5px auto 0;
+    }
+
+    .setting {
+      color: #2a98ff;
+      margin: auto 0;
     }
+  }
 
-    .configInput {
-        border: 1px solid gray;
+  .bottom {
+    :deep(.u-input) {
+      height: 45px;
+      border-radius: 8px;
+      padding: 5px 12px !important;
+      border: 0 !important;
+      //   border-color: #000 !important;
+      //   border-color: gray !important;
+      //   background-color: rgba(255, 255, 255, 0.1) !important;
+      background-color: #f5f6fa !important;
+    }
 
+    :deep(.input-placeholder) {
+      color: #a0a4af;
     }
-    ::v-deep .uni-input-input{
-        // padding:8px
+
+    :deep(.uni-input-wrapper) {
+      font-size: 16px;
     }
 
-    ::v-deep .u-input {
-        padding:0 5px!important;
+    :deep(.u-input__content__field-wrapper__field) {
+      height: 30px;
+      line-height: 30px;
     }
 
-    ::v-deep .u-line {
-        display: none !important
+    :deep(.uni-input-input) {
+      // padding:8px
     }
 
+    :deep(.u-line) {
+      display: none !important;
+    }
+  }
 }
-</style>
+</style>