From 15792ad8baea4ab886dbfc58009847f26de45df8 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 02 八月 2024 17:55:19 +0800
Subject: [PATCH] 1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不同的展示风格 4、使用压缩后的背景图与首页gif（效果不好，跳转路由后仍会出现短暂背景图片未加载出情况） 5、修改项目浏览器页签图标
---
src/views/user/LoginPhone.vue | 153 +++++++++++++++++++++++++++-----------------------
1 files changed, 82 insertions(+), 71 deletions(-)
diff --git a/src/views/user/LoginPhone.vue b/src/views/user/LoginPhone.vue
index 4f28bef..37fec5b 100644
--- a/src/views/user/LoginPhone.vue
+++ b/src/views/user/LoginPhone.vue
@@ -16,13 +16,14 @@
</div>
</a-form-model-item>
</a-col>
- <a-col style="height: 55px;display: flex;justify-content: right;align-items: center;padding-left: 15px">
+ <a-col class="code-col-container">
<a-button
class="getCaptcha"
tabindex="-1"
:disabled="state.smsSendBtn"
- @click.stop.prevent="getCaptcha"
- v-text="!state.smsSendBtn && '鑾峰彇楠岃瘉鐮�' || (state.time+' s')"></a-button>
+ @click.stop.prevent="getCaptcha">
+ {{!state.smsSendBtn && '鑾峰彇楠岃瘉鐮�' || (state.time+' s')}}
+ </a-button>
</a-col>
</a-row>
</a-form-model>
@@ -35,18 +36,18 @@
export default {
name: 'LoginPhone',
- data(){
+ data() {
return {
- model:{
+ model: {
mobile: '',
captcha: ''
},
//鎵嬫満鍙风櫥褰曠敤
state: {
time: 60,
- smsSendBtn: false,
+ smsSendBtn: false
},
- validatorRules:{
+ validatorRules: {
mobile: [
{ required: true, message: '璇疯緭鍏ユ墜鏈哄彿鐮�!' },
{ validator: this.validateMobile }
@@ -58,121 +59,131 @@
}
},
- methods:{
+ methods: {
...mapActions(['PhoneLogin']),
- handleLogin(rememberMe){
- this.validateFields([ 'mobile', 'captcha' ], (err) => {
+ handleLogin(rememberMe) {
+ this.validateFields(['mobile', 'captcha'], (err) => {
if (!err) {
let loginParams = {
mobile: this.model.mobile,
captcha: this.model.captcha,
remember_me: rememberMe
}
- console.log("鐧诲綍鍙傛暟", loginParams)
+ console.log('鐧诲綍鍙傛暟', loginParams)
this.PhoneLogin(loginParams).then((res) => {
this.$emit('success', res.result)
}).catch((err) => {
this.$emit('fail', err)
- });
- }else{
+ })
+ } else {
this.$emit('validateFail')
}
})
},
// 鏍￠獙鎵嬫満鍙�
- validateMobile(rule,value,callback){
- if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)){
- callback();
- }else{
- callback("鎮ㄧ殑鎵嬫満鍙风爜鏍煎紡涓嶆纭�!");
+ validateMobile(rule, value, callback) {
+ if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
+ callback()
+ } else {
+ callback('鎮ㄧ殑鎵嬫満鍙风爜鏍煎紡涓嶆纭�!')
}
},
//鑾峰彇楠岃瘉鐮�
- getCaptcha (e) {
- e.preventDefault();
- let that = this;
- that.validateFields([ 'mobile' ], (err) => {
+ getCaptcha(e) {
+ e.preventDefault()
+ let that = this
+ that.validateFields(['mobile'], (err) => {
if (!err) {
- that.state.smsSendBtn = true;
+ that.state.smsSendBtn = true
let interval = window.setInterval(() => {
if (that.state.time-- <= 0) {
- that.state.time = 60;
- that.state.smsSendBtn = false;
- window.clearInterval(interval);
+ that.state.time = 60
+ that.state.smsSendBtn = false
+ window.clearInterval(interval)
}
- }, 1000);
+ }, 1000)
- const hide = that.$message.loading('楠岃瘉鐮佸彂閫佷腑..', 0);
- let smsParams = {};
- smsParams.mobile=that.model.mobile;
- smsParams.smsmode="0";
- postAction("/sys/sms",smsParams)
+ const hide = that.$message.loading('楠岃瘉鐮佸彂閫佷腑..', 0)
+ let smsParams = {}
+ smsParams.mobile = that.model.mobile
+ smsParams.smsmode = '0'
+ postAction('/sys/sms', smsParams)
.then(res => {
- if(!res.success){
- setTimeout(hide, 0);
- that.cmsFailed(res.message);
+ if (!res.success) {
+ setTimeout(hide, 0)
+ that.cmsFailed(res.message)
}
- console.log(res);
- setTimeout(hide, 500);
+ console.log(res)
+ setTimeout(hide, 500)
})
.catch(err => {
- setTimeout(hide, 1);
- clearInterval(interval);
- that.state.time = 60;
- that.state.smsSendBtn = false;
- that.requestFailed(err);
- });
+ setTimeout(hide, 1)
+ clearInterval(interval)
+ that.state.time = 60
+ that.state.smsSendBtn = false
+ that.requestFailed(err)
+ })
}
}
- );
+ )
},
- cmsFailed(err){
- this.$notification[ 'error' ]({
+ cmsFailed(err) {
+ this.$notification['error']({
message: '鑾峰彇楠岃瘉鐮佸け璐�',
- description:err,
- duration: 4,
- });
+ description: err,
+ duration: 4
+ })
},
/**
* 楠岃瘉瀛楁
* @param arr
* @param callback
*/
- validateFields(arr, callback){
+ validateFields(arr, callback) {
let promiseArray = []
- for(let item of arr){
+ for (let item of arr) {
let p = new Promise((resolve, reject) => {
- this.$refs['form'].validateField(item, (err)=>{
- if(!err){
- resolve();
- }else{
- reject(err);
+ this.$refs['form'].validateField(item, (err) => {
+ if (!err) {
+ resolve()
+ } else {
+ reject(err)
}
})
- });
+ })
promiseArray.push(p)
}
- Promise.all(promiseArray).then(()=>{
+ Promise.all(promiseArray).then(() => {
callback()
- }).catch(err=>{
+ }).catch(err => {
callback(err)
})
- },
-
+ }
}
}
</script>
-<style scoped>
-.getCaptcha{
- display: block;
- width: 100%;
- height: 45px;
- border-radius: 15px;
- font-size: 17.9px;
- color: #000;
- border: none;
-}
+<style scoped lang="less">
+ .code-col-container {
+ height: 55px;
+ display: flex;
+ justify-content: right;
+ align-items: center;
+ padding-left: 15px;
+
+ .getCaptcha {
+ display: flex;
+ width: 100%;
+ height: 45px;
+ border-radius: 15px;
+ font-size: 17.9px;
+ color: #000;
+ border: none;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3