个人中心账号设置添加校验
continuous-integration/drone/push Build is passing Details

uat_us
DESKTOP-6C3NK6N\WXS 2024-09-23 10:03:23 +08:00
parent f2e6ecce8e
commit ca1b95201c
2 changed files with 103 additions and 70 deletions

View File

@ -207,7 +207,7 @@ export default {
} }
} }
return { return {
active: 1, active: 0,
Img, Img,
form: { form: {
EmailOrPhone: '', EmailOrPhone: '',

View File

@ -3,9 +3,14 @@
<div class="trial-myinfo-right-box"> <div class="trial-myinfo-right-box">
<div class="trial-myinfo-head"> <div class="trial-myinfo-head">
<!-- 账号信息 --> <!-- 账号信息 -->
{{ $t("trials:trials-myinfo:title:accountInfo") }} {{ $t('trials:trials-myinfo:title:accountInfo') }}
</div> </div>
<el-form label-position="right" label-width="100px"> <el-form
label-position="right"
label-width="100px"
:rules="rule"
:model="userForm"
>
<!-- 用户名 --> <!-- 用户名 -->
<el-form-item <el-form-item
:label="$t('trials:trials-myinfo:form:userName')" :label="$t('trials:trials-myinfo:form:userName')"
@ -27,18 +32,18 @@
size="small" size="small"
@click="setNewUserName" @click="setNewUserName"
> >
{{ $t("trials:trials-myinfo:button:update") }} {{ $t('trials:trials-myinfo:button:update') }}
</el-button> </el-button>
</el-form-item> </el-form-item>
<!-- 电话 --> <!-- 电话 -->
<el-form-item <el-form-item
:label="$t('trials:trials-myinfo:form:phone')" :label="$t('trials:trials-myinfo:form:phone')"
style="margin-bottom: 5px" style="margin-bottom: 5px"
prop="UserName" prop="Phone"
> >
<span>{{ user.Phone }}</span> <span>{{ user.Phone }}</span>
</el-form-item> </el-form-item>
<el-form-item label="" style="position: relative" prop="UserName"> <el-form-item label="" style="position: relative" prop="Phone">
<el-input <el-input
v-model="userForm.Phone" v-model="userForm.Phone"
:placeholder="$t('trials:trials-myinfo:form:phone')" :placeholder="$t('trials:trials-myinfo:form:phone')"
@ -51,14 +56,14 @@
size="small" size="small"
@click="setNewPhone" @click="setNewPhone"
> >
{{ $t("trials:trials-myinfo:button:update") }} {{ $t('trials:trials-myinfo:button:update') }}
</el-button> </el-button>
</el-form-item> </el-form-item>
<!-- 邮箱 --> <!-- 邮箱 -->
<el-form-item <el-form-item
:label="$t('trials:trials-myinfo:form:email')" :label="$t('trials:trials-myinfo:form:email')"
style="margin-bottom: 5px" style="margin-bottom: 5px"
prop="UserName" prop="EMail"
> >
<span>{{ user.EMail }}</span> <span>{{ user.EMail }}</span>
</el-form-item> </el-form-item>
@ -100,7 +105,7 @@
size="small" size="small"
@click="setNewEmail" @click="setNewEmail"
> >
{{ $t("trials:trials-myinfo:button:update") }} {{ $t('trials:trials-myinfo:button:update') }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -114,19 +119,19 @@ import {
setNewEmail, setNewEmail,
setNewPhone, setNewPhone,
setNewUserName, setNewUserName,
} from "@/api/system/user.js"; } from '@/api/system/user.js'
import { removeToken } from "@/utils/auth"; import { removeToken } from '@/utils/auth'
import password from "./password.vue"; import password from './password.vue'
var timer = ""; var timer = ''
var countdown = 60; var countdown = 60
export default { export default {
name: "account", name: 'account',
components: { password }, components: { password },
props: { props: {
user: { user: {
required: true, required: true,
default: () => { default: () => {
return {}; return {}
}, },
}, },
IsCanConnectInternet: { IsCanConnectInternet: {
@ -138,108 +143,136 @@ export default {
return { return {
userForm: {}, userForm: {},
sendDisabled: true, sendDisabled: true,
sendTitle: this.$t("trials:trials-myinfo:button:getVCode"), sendTitle: this.$t('trials:trials-myinfo:button:getVCode'),
}; rule: {
UserName: [
{
validator: (rule, value, callback) => {
if (!value) return callback()
var lang = zzSessionStorage.getItem('lang')
? zzSessionStorage.getItem('lang')
: 'zh'
/* eslint-disable */
var reg1 = /^[a-zA-Z0-9_]{4,16}$/ //8
if (!reg1.test(value)) {
callback(
lang === 'zh'
? new Error(
'1用户名字符长度最小为4个字符最大为16个字符只可使用字母、数字、下划线'
)
: new Error(
'the username must have:1) At least 4 characters;2) At most 16 characters;3)Only letters, numbers, and underscores are allowed.'
)
)
} else {
callback()
}
},
trigger: 'blur',
},
],
},
}
}, },
methods: { methods: {
setNewEmail() { setNewEmail() {
setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then( setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then(
() => { () => {
this.userForm.EMail = ""; this.userForm.EMail = ''
this.userForm.VerificationCode = ""; this.userForm.VerificationCode = ''
this.$message.success( this.$message.success(
this.$t("trials:trials-myinfo:message:updateSuccessfully") this.$t('trials:trials-myinfo:message:updateSuccessfully')
); )
this.$emit("getUserInfo"); this.$emit('getUserInfo')
} }
); )
}, },
async setNewUserName() { async setNewUserName() {
try { try {
let confirm = await this.$confirm( let confirm = await this.$confirm(
this.$t("trials:trials-myInfo:confirmMessage:updateUserName"), this.$t('trials:trials-myInfo:confirmMessage:updateUserName'),
{ {
type: "warning", type: 'warning',
distinguishCancelAndClose: true, distinguishCancelAndClose: true,
confirmButtonText: this.$t("common:button:confirm"), confirmButtonText: this.$t('common:button:confirm'),
cancelButtonText: this.$t("common:button:cancel"), cancelButtonText: this.$t('common:button:cancel'),
} }
); )
if (confirm !== "confirm") return; if (confirm !== 'confirm') return
let res = await setNewUserName(this.userForm.UserName); let res = await setNewUserName(this.userForm.UserName)
if (res.IsSuccess) { if (res.IsSuccess) {
this.userForm.UserName = ""; this.userForm.UserName = ''
this.$message.success( this.$message.success(
this.$t("trials:trials-myinfo:message:updateSuccessfully") this.$t('trials:trials-myinfo:message:updateSuccessfully')
); )
this.$emit("getUserInfo"); this.$emit('getUserInfo')
removeToken(); removeToken()
this.logout(); this.logout()
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err)
} }
}, },
setNewPhone() { setNewPhone() {
setNewPhone(this.userForm.Phone).then(() => { setNewPhone(this.userForm.Phone).then(() => {
this.userForm.Phone = ""; this.userForm.Phone = ''
this.$message.success( this.$message.success(
this.$t("trials:trials-myinfo:message:updateSuccessfully") this.$t('trials:trials-myinfo:message:updateSuccessfully')
); )
this.$emit("getUserInfo"); this.$emit('getUserInfo')
}); })
}, },
handleEmailChange() { handleEmailChange() {
var reg = var reg =
/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/; /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
if (this.userForm.EMail && reg.test(this.userForm.EMail)) { if (this.userForm.EMail && reg.test(this.userForm.EMail)) {
this.sendDisabled = false; this.sendDisabled = false
} else { } else {
this.sendDisabled = true; this.sendDisabled = true
} }
}, },
sendVerificationCode() { sendVerificationCode() {
sendVerificationCode(this.userForm.EMail).then(() => { sendVerificationCode(this.userForm.EMail).then(() => {
this.settime(this); this.settime(this)
// //
this.$message.success( this.$message.success(
this.$t("trials:trials-myinfo:message:sendSuccessfully") this.$t('trials:trials-myinfo:message:sendSuccessfully')
); )
}); })
}, },
settime(obj) { settime(obj) {
if (countdown === 0) { if (countdown === 0) {
obj.sendDisabled = false; obj.sendDisabled = false
obj.sendTitle = this.$t("trials:trials-myinfo:button:getVCode"); // '' obj.sendTitle = this.$t('trials:trials-myinfo:button:getVCode') // ''
countdown = 60; countdown = 60
clearTimeout(timer); clearTimeout(timer)
return; return
} else { } else {
obj.sendDisabled = true; obj.sendDisabled = true
obj.sendTitle = `${this.$t( obj.sendTitle = `${this.$t(
"trials:trials-myinfo:button:wait" 'trials:trials-myinfo:button:wait'
)}(${countdown}s)`; )}(${countdown}s)`
countdown--; countdown--
// eslint-disable-next-line no-self-assign // eslint-disable-next-line no-self-assign
countdown = countdown; countdown = countdown
timer = setTimeout(function () { timer = setTimeout(function () {
obj.settime(obj); obj.settime(obj)
}, 1000); }, 1000)
} }
}, },
async logout() { async logout() {
/* eslint-disable */ /* eslint-disable */
var loginType = zzSessionStorage.getItem("loginType"); var loginType = zzSessionStorage.getItem('loginType')
await this.$store.dispatch("user/logout"); await this.$store.dispatch('user/logout')
if (loginType) { if (loginType) {
this.$router.push(`/login?loginType=${loginType}`); this.$router.push(`/login?loginType=${loginType}`)
} else { } else {
this.$router.push(`/login`); this.$router.push(`/login`)
} }
this.$i18n.locale = "zh"; this.$i18n.locale = 'zh'
this.setLanguage("zh"); this.setLanguage('zh')
this.$updateDictionary(); this.$updateDictionary()
}, },
}, },
}; }
</script> </script>