@中文描述:判断是否检查手机号格式 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:判断是否检查手机号格式 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 894cf86 commit 18edcc3675891bc06f5a620af31ea128d8d3a5d3 20278 authored on 19 Jun

Showing 6 changed files

Ignore Space Show notes View project/hivuiLogin/App.vue
<template> <router-view/> </template> <script> import { projectName } from "./config"; import { getUrlValue,getUrlSearch } from "./utils/index"; import merge from 'lodash/merge'; export default { components: {}, data() { return { }; }, computed: { }, async created() { let _pt=window.__loginCfg&&window.__loginCfg.pageType; let _red=window.__loginCfg&&window.__loginCfg.redirect; let _param=this.getParam(); let urlPn=getUrlValue(location.href,"pn") if(urlPn){ if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){ window.HIVUI_SETTING.loginUrl+="?pn="+urlPn; } if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){ window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn; } } if(_pt){ switch(_pt){ case "mini": this.$router.replace({ name:"miniLogin", params:_param, }); break; case "middle": this.$router.replace({ name:"middlePage", params:_param, }); break; case "sso-middle": this.$router.replace({ name:"ssoMiddlePage", params:_param, }); break; } } await this.$store.dispatch('user/getProjectDefValue',{ key:"checkPhone", defaultValue:true, }).then((res)=>{ if(typeof(res)!="undefined" && window.customSysCofig){ window.customSysCofig.__checkPhone=res; } }); }, mounted(){ //window.customSysCofig=merge(window.default_customSysCfg,window.customSysCofig\|\|{}); }, methods: { getParam(){ let hash=location.hash; let result={}; result=getUrlSearch("?"+hash.substring(2)); return result; }, }, }; </script> <style lang="scss"> </style> <template> <router-view/> </template> <script> import { projectName } from "./config"; import { getUrlValue,getUrlSearch } from "./utils/index"; import merge from 'lodash/merge'; export default { components: {}, data() { return { }; }, computed: { }, created() { let _pt=window.__loginCfg&&window.__loginCfg.pageType; let _red=window.__loginCfg&&window.__loginCfg.redirect; let _param=this.getParam(); let urlPn=getUrlValue(location.href,"pn") if(urlPn){ if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){ window.HIVUI_SETTING.loginUrl+="?pn="+urlPn; } if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){ window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn; } } if(_pt){ switch(_pt){ case "mini": this.$router.replace({ name:"miniLogin", params:_param, }); break; case "middle": this.$router.replace({ name:"middlePage", params:_param, }); break; case "sso-middle": this.$router.replace({ name:"ssoMiddlePage", params:_param, }); break; } } }, mounted(){ //window.customSysCofig=merge(window.default_customSysCfg,window.customSysCofig\|\|{}); }, methods: { getParam(){ let hash=location.hash; let result={}; result=getUrlSearch("?"+hash.substring(2)); return result; }, }, }; </script> <style lang="scss"> </style>

Ignore Space Show notes View

project/hivuiLogin/App.vue

<template>
    <router-view/>
</template>
<script>
import { projectName } from "./config";
import { getUrlValue,getUrlSearch } from "./utils/index";
import merge from 'lodash/merge';
export default {
  components: {},
  data() {
    return {
      
    };
  },
  computed: {
    
  },
  async created() {
    let _pt=window.__loginCfg&&window.__loginCfg.pageType;
    let _red=window.__loginCfg&&window.__loginCfg.redirect;
    let _param=this.getParam();
    let urlPn=getUrlValue(location.href,"pn")
    if(urlPn){
      if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){
          window.HIVUI_SETTING.loginUrl+="?pn="+urlPn;
      }
      if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){
          window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn;
      }
    }
    if(_pt){
        switch(_pt){
            case "mini":
              this.$router.replace({
                  name:"miniLogin",
                  params:_param,
              });
              break;
            case "middle":
              this.$router.replace({
                  name:"middlePage",
                  params:_param,
              });
              break;
            case "sso-middle":
              this.$router.replace({
                  name:"ssoMiddlePage",
                  params:_param,
              });
              break;
        }
    }
    await this.$store.dispatch('user/getProjectDefValue',{
      key:"checkPhone",
      defaultValue:true,
    }).then((res)=>{
      if(typeof(res)!="undefined" && window.customSysCofig){
        window.customSysCofig.__checkPhone=res;
      }
    });
  },
  mounted(){
    //window.customSysCofig=merge(window.default_customSysCfg,window.customSysCofig||{});
  },
  methods: {
    getParam(){
      let hash=location.hash;
      let result={};
      result=getUrlSearch("?"+hash.substring(2));
      return result;
    },
  },
};
</script>
<style lang="scss">
</style>

<template>
    <router-view/>
</template>
<script>
import { projectName } from "./config";
import { getUrlValue,getUrlSearch } from "./utils/index";
import merge from 'lodash/merge';
export default {
  components: {},
  data() {
    return {
      
    };
  },
  computed: {
    
  },
  created() {
    let _pt=window.__loginCfg&&window.__loginCfg.pageType;
    let _red=window.__loginCfg&&window.__loginCfg.redirect;
    let _param=this.getParam();
    let urlPn=getUrlValue(location.href,"pn")
    if(urlPn){
      if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){
          window.HIVUI_SETTING.loginUrl+="?pn="+urlPn;
      }
      if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){
          window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn;
      }
    }
    if(_pt){
        switch(_pt){
            case "mini":
              this.$router.replace({
                  name:"miniLogin",
                  params:_param,
              });
              break;
            case "middle":
              this.$router.replace({
                  name:"middlePage",
                  params:_param,
              });
              break;
            case "sso-middle":
              this.$router.replace({
                  name:"ssoMiddlePage",
                  params:_param,
              });
              break;
        }
    }
  },
  mounted(){
    //window.customSysCofig=merge(window.default_customSysCfg,window.customSysCofig||{});
  },
  methods: {
    getParam(){
      let hash=location.hash;
      let result={};
      result=getUrlSearch("?"+hash.substring(2));
      return result;
    },
  },
};
</script>
<style lang="scss">
</style>

Ignore Space Show notes View project/hivuiLogin/api/user.js
import request from '../utils/request' import {codeProjectName,requestUrl} from '../config' let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const __base=(window.HIVUI_SETTING.serverUrl\|\|codeProjectName); //密码重置 export function resetpw(data) { debugger;return _request({ url: __base + "/sys/user/forgot-pwd", method: 'post', data }) } //注册获取验证码 export function captcha(data) { return _request({ url: __base+"/sms/captcha", method: 'post', data }) } //用户注册 export function register(data) { return _request({ url: __base+"/login/sso-reg", method: 'post', data }) } //获取多岗列表 export function getBzList(param) { return _request({ url: __base+"/sys/user/detail-list", method: 'post', data: param, }) } //切换编制岗位 export function changeBz(param) { return _request({ url: __base+"/sys/user/switch-bz", method: 'post', data: param, }) } //获取后端项目配置参数 export function getProjectDefValue(param){ return _request({ url:__base+"/utils/getProjectDefValue", method: 'post', data: param, }); } import request from '../utils/request' import {codeProjectName,requestUrl} from '../config' let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const __base=(window.HIVUI_SETTING.serverUrl\|\|codeProjectName); //密码重置 export function resetpw(data) { debugger;return _request({ url: __base + "/sys/user/forgot-pwd", method: 'post', data }) } //注册获取验证码 export function captcha(data) { return _request({ url: __base+"/sms/captcha", method: 'post', data }) } //用户注册 export function register(data) { return _request({ url: __base+"/login/sso-reg", method: 'post', data }) } //获取多岗列表 export function getBzList(param) { return _request({ url: __base+"/sys/user/detail-list", method: 'post', data: param, }) } //切换编制岗位 export function changeBz(param) { return _request({ url: __base+"/sys/user/switch-bz", method: 'post', data: param, }) }

Ignore Space Show notes View

project/hivuiLogin/api/user.js

import request from '../utils/request'
import {codeProjectName,requestUrl} from '../config'

import request from '../utils/request'
import {codeProjectName,requestUrl} from '../config'

Ignore Space Show notes View project/hivuiLogin/components/resetPw.vue
<template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_reset_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" :placeholder="$t('hivuiLogin_reset_password_tip')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_reset_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">{{$t('hivuiLogin_reset_reset')}}</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_reset_def_copyright'), registerRules: { phone: [ { required: true, message: this.$t('hivuiLogin_reset_phone_tip'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value) && window?.customSysCofig.__checkPhone==false) { callback(new Error(this.$t('hivuiLogin_reset_phone_msg'))); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: this.$t('hivuiLogin_reset_password_tip2'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error(this.$t('hivuiLogin_reset_password_msg1')+this.minPw+this.$t('hivuiLogin_reset_password_msg2'))); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: this.$t('hivuiLogin_reset_captcha_msg'), trigger: "blur" } ], /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({ "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({ "phone":me.registerForm.phone, "password":md5(me.registerForm.pw), "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: me.$t('hivuiLogin_reset_reset_success'), type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style> <template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_reset_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" :placeholder="$t('hivuiLogin_reset_password_tip')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_reset_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">{{$t('hivuiLogin_reset_reset')}}</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_reset_def_copyright'), registerRules: { phone: [ { required: true, message: this.$t('hivuiLogin_reset_phone_tip'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error(this.$t('hivuiLogin_reset_phone_msg'))); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: this.$t('hivuiLogin_reset_password_tip2'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error(this.$t('hivuiLogin_reset_password_msg1')+this.minPw+this.$t('hivuiLogin_reset_password_msg2'))); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: this.$t('hivuiLogin_reset_captcha_msg'), trigger: "blur" } ], /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({ "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({ "phone":me.registerForm.phone, "password":md5(me.registerForm.pw), "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: me.$t('hivuiLogin_reset_reset_success'), type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style>

Ignore Space Show notes View

project/hivuiLogin/components/resetPw.vue

<template>
  <div class="reset">
		<el-form ref="registerForm" :model="registerForm" :rules="registerRules">
			<el-form-item class="register_field" prop="phone">
				<el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_reset_phone')"></el-input>
			</el-form-item>
			<el-form-item class="register_field" prop="pw">
				<el-input ref="pw" v-model="registerForm.pw" type="password" :placeholder="$t('hivuiLogin_reset_password_tip')"></el-input>
				<pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength>
			</el-form-item>
			<el-form-item class="register_field register_row" prop="captcha">
				<el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_reset_captcha')"></el-input>
				<el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button>
			</el-form-item>
			<el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">{{$t('hivuiLogin_reset_reset')}}</el-button>
		</el-form>
  </div>
</template>

Ignore Space Show notes View project/hivuiLogin/store/index.js
import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ modules:{ user }, getters, states: { appStatus:'loading'//failed , loading ,success }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') //await me.dispatch('app/getMenus')//菜单 // console.log('//菜单 end') // await me.dispatch('app/getLatelyUse')//最近使用 // console.log('//最近使用 end') //await me.dispatch('app/getQuickNav')//快速导航 // console.log('//快速导航 end') // await me.dispatch('portal/loadColumns')//栏目功能 // console.log('//栏目功能 end') // await me.dispatch('portal/loadList')//工作台门户列表 // console.log('//工作台门户列表 end') // await me.dispatch('portal/loadSysList')//系统门户列表 // console.log('//系统门户列表 end') }, setAppLoad({state,commit},status){ commit('SET_appStatus',status); } } }) import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ modules:{ user }, getters, states: { appStatus:'loading'//failed , loading ,success }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') await me.dispatch('app/getMenus')//菜单 // console.log('//菜单 end') // await me.dispatch('app/getLatelyUse')//最近使用 // console.log('//最近使用 end') //await me.dispatch('app/getQuickNav')//快速导航 // console.log('//快速导航 end') // await me.dispatch('portal/loadColumns')//栏目功能 // console.log('//栏目功能 end') // await me.dispatch('portal/loadList')//工作台门户列表 // console.log('//工作台门户列表 end') // await me.dispatch('portal/loadSysList')//系统门户列表 // console.log('//系统门户列表 end') }, setAppLoad({state,commit},status){ commit('SET_appStatus',status); } } })

Ignore Space Show notes View

project/hivuiLogin/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)
export default new Vuex.Store({
  modules:{
    user
  }, 
  getters,
  states: {
    appStatus:'loading'//failed , loading ,success
  },
  mutations: {
    SET_appStatus(state,str){
      state.appStatus = str;
    }
  },
  actions: {
    async initApp(me){
      // await me.dispatch('user/load')
      //await me.dispatch('app/getPowers')//权限
      // console.log('//权限 end')
      //await me.dispatch('app/getMenus')//菜单
      // console.log('//菜单 end')
      // await me.dispatch('app/getLatelyUse')//最近使用 
      // console.log('//最近使用 end')   
      //await me.dispatch('app/getQuickNav')//快速导航
      // console.log('//快速导航 end')
      // await me.dispatch('portal/loadColumns')//栏目功能
      // console.log('//栏目功能 end')
      // await me.dispatch('portal/loadList')//工作台门户列表
      // console.log('//工作台门户列表 end')
      // await me.dispatch('portal/loadSysList')//系统门户列表
      // console.log('//系统门户列表 end')
    },
    setAppLoad({state,commit},status){
      commit('SET_appStatus',status);
    }
  }
})

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)
export default new Vuex.Store({
  modules:{
    user
  }, 
  getters,
  states: {
    appStatus:'loading'//failed , loading ,success
  },
  mutations: {
    SET_appStatus(state,str){
      state.appStatus = str;
    }
  },
  actions: {
    async initApp(me){
      // await me.dispatch('user/load')
      //await me.dispatch('app/getPowers')//权限
      // console.log('//权限 end')
      await me.dispatch('app/getMenus')//菜单
      // console.log('//菜单 end')
      // await me.dispatch('app/getLatelyUse')//最近使用 
      // console.log('//最近使用 end')   
      //await me.dispatch('app/getQuickNav')//快速导航
      // console.log('//快速导航 end')
      // await me.dispatch('portal/loadColumns')//栏目功能
      // console.log('//栏目功能 end')
      // await me.dispatch('portal/loadList')//工作台门户列表
      // console.log('//工作台门户列表 end')
      // await me.dispatch('portal/loadSysList')//系统门户列表
      // console.log('//系统门户列表 end')
    },
    setAppLoad({state,commit},status){
      commit('SET_appStatus',status);
    }
  }
})

Ignore Space Show notes View project/hivuiLogin/store/modules/user.js
import {baseLogin, } from '../../api/login' import { getProjectDefValue } from "../../api/user"; import { getToken, setToken, removeToken } from '../../utils/auth' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo } }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { baseLogin({ username: username.trim(), password: md5(password) }).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // get user info getInfo({ commit, state }) { /return new Promise((resolve, reject) => { getInfo(state.token).then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = { bzid: info.fbzid, id: info.fuserid, name: info.fusername, weixin: info.fweixin, qq: info.fqq, mbPhone: info.fmbphone, email: info.femail, roleid: info.froleid, rolename: info.frolename, enterpriseid: info.fenterpriseid, enterprisename: info.fenterprisename, shopid: info.fshopid, shopname: info.fshopname, //org } // roles must be a non-empty array if (!roles \|\| roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) })/ }, // user logout logout({ commit, state }) { /return new Promise((resolve, reject) => { logout(state.token).then(() => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resetRouter() resolve() }).catch(error => { reject(error) }) })/ }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, setToken({ commit },token) { return new Promise(resolve => { commit('SET_TOKEN', token) setToken(token) resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) }, //获取后端项目配置参数 getProjectDefValue({ commit, dispatch }, param){ return new Promise((resolve, reject) => { getProjectDefValue({ "key":param.key, "defaultValue": param.defaultValue }).then((res)=>{ resolve(res?res.dataPack:res); }).catch((err)=>{ reject(err); }); }); }, } } export default user import {baseLogin, } from '../../api/login' import { getToken, setToken, removeToken } from '../../utils/auth' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo } }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { baseLogin({ username: username.trim(), password: md5(password) }).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // get user info getInfo({ commit, state }) { /return new Promise((resolve, reject) => { getInfo(state.token).then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = { bzid: info.fbzid, id: info.fuserid, name: info.fusername, weixin: info.fweixin, qq: info.fqq, mbPhone: info.fmbphone, email: info.femail, roleid: info.froleid, rolename: info.frolename, enterpriseid: info.fenterpriseid, enterprisename: info.fenterprisename, shopid: info.fshopid, shopname: info.fshopname, //org } // roles must be a non-empty array if (!roles \|\| roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) })/ }, // user logout logout({ commit, state }) { /return new Promise((resolve, reject) => { logout(state.token).then(() => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resetRouter() resolve() }).catch(error => { reject(error) }) })/ }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, setToken({ commit },token) { return new Promise(resolve => { commit('SET_TOKEN', token) setToken(token) resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) } } } export default user

Ignore Space Show notes View

project/hivuiLogin/store/modules/user.js

import {baseLogin, } from '../../api/login'
import { getProjectDefValue } from "../../api/user";
import { getToken, setToken, removeToken } from '../../utils/auth'
import md5 from 'js-md5'
if(window.Scp==null){
  window.Scp = {} 
}
if(window.Scp.User==null){
  window.Scp.User={}
}
const user = {
  namespaced: true,
  state: {
    token: getToken(),
    avatar: '',
    introduction: '',
    roles: [],
    //后面加的
    userInfo: {},
    id:Scp.User.id,
    name:Scp.User.name,
    deptId:Scp.User.deptId,
    deptName:Scp.User.deptName,
    positionId:Scp.User.positionId,
    postionName:Scp.User.postionName,  
  
    bzId:Scp.User.bzId,
    bzName:Scp.User.bzName,
  
    bzDeptId:Scp.User.bzDeptId,
    bzDeptName:Scp.User.bzDeptName,
  
    bzPositionId:Scp.User.bzPositionId,
    bzPositionName:Scp.User.bzPositionName,
  
    orgId:Scp.User.orgId ,
    defOrgId:Scp.User.defOrgId
  },
  mutations: {
    SET_CODE: (state, code) => {
      state.code = code
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_INTRODUCTION: (state, introduction) => {
      state.introduction = introduction
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
    }
  },
  actions: { 
    load({ commit, state }) {
      
    },
    // user login
    login({ commit }, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        baseLogin({ username: username.trim(), password: md5(password) }).then(response => {
          const data = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

// get user info
    getInfo({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {

if (!response.dataPack) {
            reject('Verification failed, please Login again.')
          }
          //const { info ,org} = response.data;
          const info = response.dataPack
          // if (!info) {
          //   reject('Verification failed, please Login again.')
          // }

//const { roles, name, avatar, introduction } = data
          let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = {
            bzid: info.fbzid,
            id: info.fuserid,
            name: info.fusername,
            weixin: info.fweixin,
            qq: info.fqq,
            mbPhone: info.fmbphone,
            email: info.femail,
            roleid: info.froleid,
            rolename: info.frolename,
            enterpriseid: info.fenterpriseid,
            enterprisename: info.fenterprisename,
            shopid: info.fshopid,
            shopname: info.fshopname,
            //org
          }

// roles must be a non-empty array
          if (!roles || roles.length <= 0) {
            reject('getInfo: roles must be a non-null array!')
          }
          commit('SET_USERINFO', userInfo)
          commit('SET_ROLES', roles)
          commit('SET_NAME', name)
          commit('SET_AVATAR', avatar)
          commit('SET_INTRODUCTION', introduction)
          resolve(info)
        }).catch(error => {
          reject(error)
        })
      })*/
    },

// user logout
    logout({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resetRouter()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })*/
    },

// remove token
    resetToken({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        commit('SET_ROLES', [])
        removeToken()
        resolve()
      })
    },
    setToken({ commit },token) {
      return new Promise(resolve => {
        commit('SET_TOKEN', token)
        setToken(token)
        resolve()
      })
    },

// dynamically modify permissions
    changeRoles({ commit, dispatch }, role) {
      return new Promise(async resolve => {
        const token = role + '-token'

commit('SET_TOKEN', token)
        setToken(token)

const { roles } = await dispatch('getInfo')

//resetRouter()
        // generate accessible routes map based on roles
        const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })

// dynamically add accessible routes
        router.addRoutes(accessRoutes)

// reset visited views and cached views
        dispatch('tagsView/delAllViews', null, { root: true })

resolve()
      })
    },
    //获取后端项目配置参数
    getProjectDefValue({ commit, dispatch }, param){
      return new Promise((resolve, reject) => {
        getProjectDefValue({
          "key":param.key,
          "defaultValue": param.defaultValue
        }).then((res)=>{
          resolve(res?res.dataPack:res);
        }).catch((err)=>{
          reject(err);
        });
      });
    },
  }
}

export default user

import {baseLogin, } from '../../api/login'
import { getToken, setToken, removeToken } from '../../utils/auth'
import md5 from 'js-md5'
if(window.Scp==null){
  window.Scp = {} 
}
if(window.Scp.User==null){
  window.Scp.User={}
}
const user = {
  namespaced: true,
  state: {
    token: getToken(),
    avatar: '',
    introduction: '',
    roles: [],
    //后面加的
    userInfo: {},
    id:Scp.User.id,
    name:Scp.User.name,
    deptId:Scp.User.deptId,
    deptName:Scp.User.deptName,
    positionId:Scp.User.positionId,
    postionName:Scp.User.postionName,  
  
    bzId:Scp.User.bzId,
    bzName:Scp.User.bzName,
  
    bzDeptId:Scp.User.bzDeptId,
    bzDeptName:Scp.User.bzDeptName,
  
    bzPositionId:Scp.User.bzPositionId,
    bzPositionName:Scp.User.bzPositionName,
  
    orgId:Scp.User.orgId ,
    defOrgId:Scp.User.defOrgId
  },
  mutations: {
    SET_CODE: (state, code) => {
      state.code = code
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_INTRODUCTION: (state, introduction) => {
      state.introduction = introduction
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
    }
  },
  actions: { 
    load({ commit, state }) {
      
    },
    // user login
    login({ commit }, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        baseLogin({ username: username.trim(), password: md5(password) }).then(response => {
          const data = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

// get user info
    getInfo({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {

// dynamically modify permissions
    changeRoles({ commit, dispatch }, role) {
      return new Promise(async resolve => {
        const token = role + '-token'

commit('SET_TOKEN', token)
        setToken(token)

const { roles } = await dispatch('getInfo')

//resetRouter()
        // generate accessible routes map based on roles
        const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })

// dynamically add accessible routes
        router.addRoutes(accessRoutes)

// reset visited views and cached views
        dispatch('tagsView/delAllViews', null, { root: true })

resolve()
      })
    }
  }
}

export default user

Ignore Space Show notes View project/hivuiLogin/views/register.vue
<template> <div class="register"> <div class="register_hd"> <div class="register_logo" :style="register_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="register_text">{{$t('hivuiLogin_register_title')}}</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>{{$t('hivuiLogin_register_box_title')}}</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >{{$t('hivuiLogin_register_submit')}}</el-button> </el-form> <div class="register_tips"> {{$t('hivuiLogin_register_tiptext1')}} <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span> </div> </div> </div> <div class="register_ft" v-html="config.copyright"></div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: this.$t('hivuiLogin_register_valid_user'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error(this.$t('hivuiLogin_register_valid_user2'))); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: this.$t('hivuiLogin_register_valid_phone'), trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value) && window?.customSysCofig.__checkPhone==false) { callback(new Error(this.$t('hivuiLogin_register_valid_phone2'))); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error(this.$t('hivuiLogin_register_valid_pw_msg') + this.minPw + this.$t('hivuiLogin_register_valid_pw_msg2'))); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw2'), trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error(this.$t('hivuiLogin_register_valid_pw2_msg'))); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: this.$t('hivuiLogin_register_valid_captcha'), trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, register_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: me.$t('hivuiLogin_register_success'), type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(206); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style> <template> <div class="register"> <div class="register_hd"> <div class="register_logo" :style="register_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="register_text">{{$t('hivuiLogin_register_title')}}</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>{{$t('hivuiLogin_register_box_title')}}</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >{{$t('hivuiLogin_register_submit')}}</el-button> </el-form> <div class="register_tips"> {{$t('hivuiLogin_register_tiptext1')}} <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span> </div> </div> </div> <div class="register_ft" v-html="config.copyright"></div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: this.$t('hivuiLogin_register_valid_user'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error(this.$t('hivuiLogin_register_valid_user2'))); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: this.$t('hivuiLogin_register_valid_phone'), trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error(this.$t('hivuiLogin_register_valid_phone2'))); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error(this.$t('hivuiLogin_register_valid_pw_msg') + this.minPw + this.$t('hivuiLogin_register_valid_pw_msg2'))); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw2'), trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error(this.$t('hivuiLogin_register_valid_pw2_msg'))); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: this.$t('hivuiLogin_register_valid_captcha'), trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, register_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: me.$t('hivuiLogin_register_success'), type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(206); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style>

Ignore Space Show notes View

project/hivuiLogin/views/register.vue

<template>
  <div class="register">
    <div class="register_hd">
      <div class="register_logo" :style="register_logo_style">
        <img :src="config.loginLogoImg">
      </div>
      <div class="register_text">{{$t('hivuiLogin_register_title')}}</div>
    </div>
    <div class="register_main" :style="bgStyle">
      <div class="register_box">
        <h3>{{$t('hivuiLogin_register_box_title')}}</h3>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
          <el-form-item class="register_field" prop="username">
            <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="phone">
            <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="pw1">
            <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input>
            <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength>
          </el-form-item>
          <el-form-item class="register_field" prop="pw2">
            <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input>
          </el-form-item>
          <el-form-item class="register_field register_row" prop="captcha">
            <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input>
            <el-button
              class="register_capbtn"
              :loading="captchaLoading"
              type="primary"
              :disabled="captchaTimer==0?false:true"
              @click="getCaptcha"
            >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button>
          </el-form-item>
          
          <el-button
            class="register_submit"
            :loading="registerLoading"
            type="primary"
            @click="register"
          >{{$t('hivuiLogin_register_submit')}}</el-button>
        </el-form>
        <div class="register_tips">
          {{$t('hivuiLogin_register_tiptext1')}}
          <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span>
        </div>
      </div>
    </div>
    <div class="register_ft" v-html="config.copyright"></div>
  </div>
</template>

Show line notes below