[feat](登录页): 对接登录页配置接口，登录页按照配置显示

src/page/login/index.vue

 <template>
-  <div class="login-container">
+  <div
+    class="login-container"
+    :style="{
+      'background-image': `url(${
+        configOptions.backgroundUrl ? JSON.parse(configOptions.backgroundUrl)[0].url : getImageUrl('bg.png')
+      })`,
+    }">
     <div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
     <div class="bg-main">
       <!-- <div class="bg-logo">
@@ -23,9 +29,17 @@
     </div>
     <!-- v-if="pageType !== 'register'" -->
     <div class="bg-msg">
-      <p>Copyright © 比格大数据, All Rights Reserved.</p>
-      <p>ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号</p>
-      <p>法律声明 | 隐私政策</p>
+      <p v-if="configOptions && configOptions.patent">{{ configOptions.patent }}</p>
+      <p v-if="configOptions">
+        <span class="can_click_text" @click="open(configOptions.icpUrl)"> {{ configOptions.icpFiling }} | </span>
+        <span class="can_click_text" @click="open(configOptions.publicSecurityUrl)">
+          {{ configOptions.publicSecurityFiling }}
+        </span>
+      </p>
+      <p>
+        <span class="can_click_text" @click="open(configOptions.legalStatementUrl)">法律声明</span> |
+        <span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)"> 隐私政策 </span>
+      </p>
     </div>
   </div>
 </template>
@@ -33,18 +47,18 @@
 <script setup>
 import LoginByAccount from "@/components/login-by-account.vue";
 import LoginByCode from "@/components/login-by-code.vue";
-// import RegisterPersonalUser from "@/components/register-personal-user.vue";
-// import RegisterFrimUser from "@/components/register-firm-user.vue";
-// import RegisterOrgUser from "@/components/register-org-user.vue";
-// import RegisterSuccess from "@/components/register-success.vue";
-import { ref, computed, onMounted } from "vue";
+import axios from "axios";
+import { ElMessage } from "element-plus";
+import { ref, onBeforeMount, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import store from "../../store";
+import { getImageUrl } from "@/services/helper.js";
 const router = useRouter();
 
 const pageType = ref("login");
 const loginTab = ref("account");
-const registerTab = ref("registerTab");
 
+const configOptions = ref({});
 const switchPageType = (type) => {
   // pageType.value = type
   router.push("/registe");
@@ -52,13 +66,34 @@ const switchPageType = (type) => {
 const password = () => {
   router.push("/password");
 };
+const getLoginPageConfig = () => {
+  axios.get(`/apaas/system/v5/login/loginDetail`).then((res) => {
+    if (res.data.code == 200) {
+      configOptions.value = res.data.data || null;
+      store.commit("setSystemLogo", configOptions.value.logoUrl);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+
+const open = (url) => {
+  if (url !== "") {
+    window.open(url);
+  } else {
+    return;
+  }
+};
+onBeforeMount(() => {
+  getLoginPageConfig();
+});
 </script>
 
 <style lang="scss" scoped>
 .login-container {
   width: 100vw;
   height: calc(100vh - 56px);
-  background-image: url("@/assets/imgs/bg_zhuce.png");
+  background-image: url("@/assets/imgs/bg.png");
   background-size: 100% 100%;
   background-position: center center;
   position: relative;

src/page/main/config/loginPage/index.vue

@@ -4,55 +4,60 @@
     <bg-breadcrumb></bg-breadcrumb>
     <div class="main_container">
       <div class="form_content apaas_scroll_nor">
-        <el-form ref="refForm" :model="formData" :rules="rules" label-width="82px" class="registerForm">
-          <el-form-item label="LOGO" prop="logo">
+        <el-form ref="refForm" :model="formData" :rules="rules" label-width="96px" class="registerForm">
+          <el-form-item label="LOGO" prop="logoUrl">
             <bg-upload-image
-              v-model="formData.logo"
-              :fileSize="1"
+              v-model="formData.logoUrl"
               :showTips="true"
-              customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KBB"
+              customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KB"
+              :fileSize="500"
+              :fileSizeUnit="'KB'"
               :limit="1"
               listType="picture-card"
+              @change="changeLogo"
               :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
           </el-form-item>
-          <el-form-item label="登录背景图" prop="banner">
+          <el-form-item label="登录背景图" prop="backgroundUrl">
             <bg-upload-image
-              v-model="formData.banner"
-              :fileSize="1"
+              v-model="formData.backgroundUrl"
+              :fileSize="2"
               :showTips="true"
-              customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于1MB"
+              customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于2MB"
               :limit="1"
               listType="picture-card"
+              @change="changeBanner"
               :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
           </el-form-item>
           <bg-form-gap title="底部所有权内容"></bg-form-gap>
-          <el-form-item label="内容" prop="force">
-            <el-input placeholder="例如：Copyright © 某某大数据, All Rights Reserved." maxlength="100"></el-input>
+          <el-form-item label="内容" prop="patent">
+            <el-input
+              v-model.trim="formData.patent"
+              placeholder="例如：Copyright © 某某大数据, All Rights Reserved."></el-input>
           </el-form-item>
 
           <bg-form-gap title="底部ICP备案"></bg-form-gap>
-          <el-form-item label="内容" prop="force">
-            <el-input placeholder="请输入" maxlength="100"></el-input>
+          <el-form-item label="内容" prop="icpFiling">
+            <el-input placeholder="请输入" v-model.trim="formData.icpFiling"></el-input>
           </el-form-item>
-          <el-form-item label="跳转连接" prop="force">
-            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
+          <el-form-item label="跳转连接" prop="icpUrl">
+            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.icpUrl"></el-input>
           </el-form-item>
           <bg-form-gap title="底部公安网备案"></bg-form-gap>
-          <el-form-item label="内容" prop="force">
-            <el-input placeholder="请输入" maxlength="100"></el-input>
+          <el-form-item label="内容" prop="publicSecurityFiling">
+            <el-input placeholder="请输入" v-model.trim="formData.publicSecurityFiling"></el-input>
           </el-form-item>
-          <el-form-item label="跳转连接" prop="force">
-            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
+          <el-form-item label="跳转连接" prop="publicSecurityUrl">
+            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.publicSecurityUrl"></el-input>
           </el-form-item>
 
           <bg-form-gap title="法律声明"></bg-form-gap>
-          <el-form-item label="跳转连接" prop="force">
-            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
+          <el-form-item label="跳转连接" prop="legalStatementUrl">
+            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.legalStatementUrl"></el-input>
           </el-form-item>
 
           <bg-form-gap title="隐私政策"></bg-form-gap>
-          <el-form-item label="跳转连接" prop="force">
-            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
+          <el-form-item label="跳转连接" prop="privacyPolicyUrl">
+            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.privacyPolicyUrl"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -70,13 +75,79 @@ import axios from "../../../../request/http.js";
 import { ElMessage } from "element-plus";
 import { useRouter } from "vue-router";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import { validateLink } from "@/services/rules.js";
 
-//表单数据
-const formData = reactive({
-  logo: "",
+const refForm = ref(null);
+
+const state = reactive({
+  formData: {
+    logoUrl: [],
+    backgroundUrl: [],
+    patent: "",
+    icpFiling: "",
+    icpUrl: "",
+    publicSecurityFiling: "",
+    publicSecurityUrl: "",
+    legalStatementUrl: "",
+    privacyPolicyUrl: "",
+  }, //表单数据
+  rules: {
+    logoUrl: [{ required: true, message: "请上传Logo", trigger: "change" }],
+    backgroundUrl: [{ required: true, message: "请上传背景图", trigger: "change" }],
+    icpUrl: [{ validator: validateLink, trigger: "blur" }],
+    publicSecurityUrl: [{ validator: validateLink, trigger: "blur" }],
+    legalStatementUrl: [{ validator: validateLink, trigger: "blur" }],
+    privacyPolicyUrl: [{ validator: validateLink, trigger: "blur" }],
+  }, //表单校验规则
 });
-//表单校验规则
-const rules = reactive({});
+
+const changeLogo = (value) => {
+  if (value && value.length > 0) {
+    refForm.value.clearValidate("logoUrl");
+  }
+};
+const changeBanner = (value) => {
+  if (value && value.length > 0) {
+    refForm.value.clearValidate("backgroundUrl");
+  }
+};
+const save = () => {
+  refForm.value.validate((valid) => {
+    if (valid) {
+      let params = {
+        ...state.formData
+      }
+      params.logoUrl = JSON.stringify(params.logoUrl)
+      params.backgroundUrl = JSON.stringify(params.backgroundUrl)
+      axios.put(`/apaas/system/v5/login/updateLogin`,params).then(res => {
+        if (res.data.code == 200) {
+          ElMessage.success(res.data.msg)
+          getLoginPageConfig()
+        }else {
+          ElMessage.error(res.data.data)
+        }
+      })
+    } else {
+      ElMessage.error("请先将表单填写完整");
+    }
+  });
+};
+const getLoginPageConfig = () => {
+  axios.get(`/apaas/system/v5/login/loginDetail`).then(res => {
+    if (res.data.code == 200) {
+      let data = res.data.data
+      data.logoUrl = data.logoUrl ? JSON.parse(data.logoUrl) : []
+      data.backgroundUrl = data.backgroundUrl ? JSON.parse(data.backgroundUrl) : []
+      Object.assign(state.formData,data)
+    }else {
+      ElMessage.error(res.data.data)
+    }
+  })
+}
+onBeforeMount(() => {
+  getLoginPageConfig()
+})
+const { formData, rules } = toRefs(state);
 </script>
 
 <style lang="scss" scoped>

src/page/password/account-form.vue

@@ -7,25 +7,20 @@
     ref="accountRef"
     style="max-width: 90%">
     <el-form-item label="手机号" prop="phone">
-      <el-input v-model="accountForm.phone"  @input="phoneChange"/>
+      <el-input v-model="accountForm.phone" @input="phoneChange" />
     </el-form-item>
-    <el-form-item label="账号" prop="account" >
+    <el-form-item label="账号" prop="account">
       <el-input v-model="accountForm.account" disabled />
     </el-form-item>
     <el-form-item label="验证码" prop="code">
       <div class="msg-code">
-        <el-input
-          v-model="accountForm.code"
-          placeholder="请输入"
-          style="860px"
-        >
-        </el-input>
+        <el-input v-model="accountForm.code" placeholder="请输入" style="860px"> </el-input>
         <div class="yzm_img">
-            <el-button type="primary" @click.prevent="getMsgCode()" style="width: 100%;height: 34px;">
-              {{countDown > 0 ? countDown + '秒后再次获取' : '发送验证码'}}
-            </el-button>
+          <el-button type="primary" :disabled="countDown > 0" @click.prevent="getMsgCode()" style="width: 100%; height: 34px">
+            {{ countDown > 0 ? countDown + "秒后再次获取" : "发送验证码" }}
+          </el-button>
         </div>
-      </div> 
+      </div>
     </el-form-item>
   </el-form>
 </template>
@@ -34,32 +29,25 @@
 import { reactive, ref, onBeforeMount, onMounted, computed } from "vue";
 import axios from "@/request/http.js";
 import { ElMessage } from "element-plus";
-import { validatePhone } from "@/services/rules.js"
-const props = defineProps({
-
-});
+import { validatePhone } from "@/services/rules.js";
+const props = defineProps({});
 const accountForm = reactive({
   phone: "",
   account: "",
-  code: ""
+  code: "",
 });
 
-
 const formRules = reactive({
   phone: [
     { required: true, message: "请输入手机号", trigger: "blur" },
     { validator: validatePhone, trigger: "blur" },
-    ],
-  account: [
-    { required: true, message: "请输入账号", trigger: "blur" },
-  ],
-  code: [
-    { required: true, message: "请输入验证码", trigger: "blur" },
   ],
+  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
 });
 
-const countDown = ref(0)
-const countDownTimer = ref(null)
+const countDown = ref(0);
+const countDownTimer = ref(null);
 
 const accountRef = ref(null);
 const emit = defineEmits(["action"]);
@@ -84,54 +72,51 @@ const setForm = (data) => {
 };
 
 const getMsgCode = () => {
-      if (accountForm.account) {
-          axios.post('/apaas/system/v5/sms/verifyCode',{phone: accountForm.phone}).then(({ data }) => {
-            if (data.code == 200) {
-                countDownAction();
-            }else {
-              ElMessage.error(data.data);
-            }
-          });
-      }else {
-        ElMessage.error("该手机号未注册，请核对手机号！");
+  if (accountForm.account) {
+    axios.post("/apaas/system/v5/sms/verifyCode", { phone: accountForm.phone }).then(({ data }) => {
+      if (data.code == 200) {
+        countDownAction();
+      } else {
+        ElMessage.error(data.data);
       }
-          
-  };// 获取验证码
+    });
+  } else {
+    ElMessage.error("该手机号未注册，请核对手机号！");
+  }
+}; // 获取验证码
 const countDownAction = () => {
-        countDown.value = 60;
-  
-        if (countDownTimer.value) {
-          clearInterval(countDownTimer.value);
-        }
-  
-        countDownTimer.value = setInterval(() => {
-          if (countDown.value > 0) {
-            countDown.value--;
-          } else {
-            clearInterval(countDownTimer.value);
-          }
-        }, 1000);
-      }
+  countDown.value = 60;
+
+  if (countDownTimer.value) {
+    clearInterval(countDownTimer.value);
+  }
+
+  countDownTimer.value = setInterval(() => {
+    if (countDown.value > 0) {
+      countDown.value--;
+    } else {
+      clearInterval(countDownTimer.value);
+    }
+  }, 1000);
+};
 
 const phoneChange = () => {
-  if(accountForm.phone.length > 10) {
-    accountRef.value.validateField('phone').then(valid => {
-      if(valid) {
+  if (accountForm.phone.length > 10) {
+    accountRef.value.validateField("phone").then((valid) => {
+      if (valid) {
         axios.get(`/apaas/system/v5/user/phoneToAccount?phone=${accountForm.phone}`).then((res) => {
           if (res.data.code == 200) {
-              accountForm.account = res.data.data || ''
+            accountForm.account = res.data.data || "";
           } else {
             ElMessage.error(res.data.data);
           }
         });
       }
-    })
+    });
   }
-}
-
-onBeforeMount(() => {
+};
 
-});
+onBeforeMount(() => {});
 
 onMounted(() => {});
 

src/page/password/index.vue

@@ -3,7 +3,7 @@
     <div class="bg-breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/login' }"> 登录 </el-breadcrumb-item>
-        <el-breadcrumb-item > 忘记密码 </el-breadcrumb-item>
+        <el-breadcrumb-item> 忘记密码 </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="page_content flex_cloumn">
@@ -52,13 +52,8 @@
             v-show="step === 1"
             ref="accountFromRef"
             :form-type="route.query.id ? true : false"
-            :id="route.query.id"
             @action="getAccountFromData"></accountFrom>
-          <passwordForm
-            v-show="step === 2"
-            ref="passwordFormRef"
-            :id="route.query.id"
-            @action="getPasswordFormData"></passwordForm>
+          <passwordForm v-show="step === 2" ref="passwordFormRef" @action="getPasswordFormData"></passwordForm>
           <div class="process_end" v-show="step === 3">
             <div>
               <div>
@@ -66,11 +61,7 @@
                 <img v-else src="@/assets/imgs/img_data-fail.png" alt="" />
               </div>
               <div class="font_bold">
-                {{
-                successFlag
-                      ? "密码修改成功"
-                      : "密码修改失败"
-                }}
+                {{ successFlag ? "密码修改成功" : "密码修改失败" }}
               </div>
               <el-button type="primary" @click="cancel">返回登录页</el-button>
               <el-button type="primary" @click="continueEdit">重新修改</el-button>
@@ -101,7 +92,7 @@ import { reactive, ref, onBeforeMount, toRefs, computed, onBeforeUnmount, onMoun
 import CryptoJS from "crypto-js";
 import axios from "@/request/http.js";
 import { ElMessage } from "element-plus";
-import { Encrypt } from "@/services/secret.js"
+import { Encrypt } from "@/services/secret.js";
 const route = useRoute();
 const router = useRouter();
 const step = ref(1);
@@ -113,7 +104,7 @@ const formData = reactive({
   code: "",
 
   new_password: "",
-}); 
+});
 const successFlag = ref(false);
 
 // 下一步
@@ -126,7 +117,6 @@ const getAccountFromData = (data) => {
     Object.assign(formData, data);
     step.value = 2;
     //校验手机号验证码 未出接口
-
   } else {
   }
 };
@@ -134,19 +124,18 @@ const getAccountFromData = (data) => {
 const getPasswordFormData = (data) => {
   if (data) {
     Object.assign(formData, data);
-      let params = {
-        phone: formData.phone,
-        password: Encrypt(formData.new_password)
-      };
-      axios.post(`/apaas/system/v5/user/update/pwd`, params).then((res) => {
-        if (res.data.code == 200) {
-          successFlag.value = true;
-          
-        } else {
-          ElMessage.error(res.data.data);
-        }
-        step.value = 3;
-      });
+    let params = {
+      phone: formData.phone,
+      password: Encrypt(formData.new_password),
+    };
+    axios.post(`/apaas/system/v5/user/update/pwd`, params).then((res) => {
+      if (res.data.code == 200) {
+        successFlag.value = true;
+      } else {
+        ElMessage.error(res.data.data);
+      }
+      step.value = 3;
+    });
   }
 };
 //上一步
@@ -169,18 +158,15 @@ const cancel = () => {
   router.go(-1);
 };
 
-
-
 onBeforeUnmount(() => {});
-onMounted(() => {
-});
+onMounted(() => {});
 </script>
 
 <style scoped>
 .password_container {
-   margin: 0 auto;
-   width: 1200px;
-   height: 70%;
+  margin: 0 auto;
+  width: 1200px;
+  height: 70%;
 }
 .flex_cloumn {
   display: flex;

src/page/password/password-form.vue

@@ -21,8 +21,7 @@ const passwordForm = reactive({
   new_password: "",
   confirm_password: "",
 });
-const props = defineProps({
-});
+const props = defineProps({});
 
 const validatePass = (rule, value, callback) => {
   if (value !== passwordForm.new_password) {
@@ -34,8 +33,8 @@ const validatePass = (rule, value, callback) => {
 
 const passwordFormRules = reactive({
   new_password: [
-     { required: true, message: "请输入新密码", trigger: "blur" },
-     { min: 8, message: "密码长度不得低于8位", trigger: "blur" },
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 8, message: "密码长度不得低于8位", trigger: "blur" },
   ],
   confirm_password: [
     { required: true, message: "请确认密码", trigger: "blur" },

src/page/registe/index.vue

@@ -62,7 +62,7 @@
                 <div class="msg-code">
                   <el-input v-model="infoForm.code" placeholder="请输入" style="860px"> </el-input>
                   <div class="yzm_img">
-                    <el-button type="primary" style="width: 100%; height: 34px" @click="sendSms" :disabled="countDown">
+                    <el-button type="primary" style="width: 100%; height: 34px" @click="sendSms" :disabled="countDown > 0">
                       {{ countDown > 0 ? countDown + "秒后再次获取" : "发送验证码" }}
                     </el-button>
                   </div>

src/services/helper.js

@@ -255,6 +255,9 @@ var getFirstChild = function(menuObj,path){
     }
   }
 }
+var getImageUrl = function(name) {
+  return new URL(`../assets/imgs/${name}`, import.meta.url).href;
+};
 
 var pathToUrl = (path)=>{
   if(path.includes('http')){
@@ -279,4 +282,5 @@ export {
   timeForMatAdd,
   useConsole,
   getFirstChild,
+  getImageUrl,
 }

src/services/rules.js

@@ -55,3 +55,15 @@ export function validateIdNumber(rule, value, callback) {
     }
   }, 100);
 } // 验证身份证号码
+
+export function validateLink(rule,value,callback) {
+  const reg = /^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/
+  
+  setTimeout(() => {
+    if (reg.test(value) || value == "") {
+      callback()
+    }else {
+      callback(new Error("地址格式不正确，请重新输入"))
+    }
+  })
+}

src/store/index.js

@@ -12,7 +12,8 @@ const store = createStore({
     menuObj:{},
     treeFlag:false,
     registerValid:false,
-    msgUnreadNum: 0
+    msgUnreadNum: 0,
+    systemLogo: "",
   },
   getters: {
     count(state) {
@@ -50,6 +51,9 @@ const store = createStore({
     setUnreadNum(state, num) {
       state.msgUnreadNum = num
     },
+    setSystemLogo(state,logo) {
+      state.systemLogo = logo
+    }
   },
   actions: {}
 });