feat: 初始化
This commit is contained in:
George
134
pages/user/accountSecurity/index.scss
Normal file
134
pages/user/accountSecurity/index.scss
Normal file
@ -0,0 +1,134 @@
|
||||
.container {
|
||||
padding: 0 24px 24px 16px;
|
||||
.title {
|
||||
margin: 33px 0 15px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.validateStatusWrapper {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
.validateStatus {
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
align-items: center;
|
||||
.verificationRes {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
.right {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.error {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.rightText {
|
||||
color: #43cf7c;
|
||||
}
|
||||
.errorText {
|
||||
color: #d43030;
|
||||
}
|
||||
}
|
||||
}
|
||||
.availableMoneyOut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
.value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #29bbe4;
|
||||
}
|
||||
}
|
||||
.exchangeRate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
.value {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.detailModal {
|
||||
position: relative;
|
||||
width: calc(100vw - 50px);
|
||||
max-width: 363px;
|
||||
padding: 32px 29px 42px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
.closeIcon {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 21px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 12px;
|
||||
color: #333333;
|
||||
padding: 12px;
|
||||
margin: 24px 0;
|
||||
box-shadow: -1px 0 5px 1px rgba(0, 0, 0, 0.1);
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #29bbe4;
|
||||
line-height: 52px;
|
||||
}
|
||||
}
|
||||
.resendCode {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #4dc0e5;
|
||||
.resendIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
&.loading {
|
||||
animation: rotate infinite 2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.uni-subtitle {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
::v-deep .is-input-border {
|
||||
background: #F7F8FA !important;
|
||||
border: 1px solid #F7F8FA !important;
|
||||
}
|
||||
198
pages/user/accountSecurity/index.vue
Normal file
198
pages/user/accountSecurity/index.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
{{ $t('changeLoginPassword.pageTitle') }}
|
||||
</view>
|
||||
<uni-forms ref="changeLoginPwdForm" :modelValue="changeLoginPwdFormData" :rules="changeLoginPwdFormRules">
|
||||
<uni-forms-item name="old_password">
|
||||
<text class="uni-subtitle">{{ $t('form.oldPassword.label') }}</text>
|
||||
<uni-easyinput class="uni-mt-5" type="password" trim="all" primaryColor="#29BBE4" v-model="changeLoginPwdFormData.old_password"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="new_password">
|
||||
<text class="uni-subtitle">{{ $t('form.newPassword.label') }}</text>
|
||||
<uni-easyinput
|
||||
class="uni-mt-5"
|
||||
type="password"
|
||||
trim="all"
|
||||
primaryColor="#29BBE4"
|
||||
v-model="changeLoginPwdFormData.new_password"
|
||||
@input="passwordInputChange"
|
||||
></uni-easyinput>
|
||||
<view v-if="validating" class="validateStatusWrapper">
|
||||
<view v-for="(status, index) in validateStatuses" :key="index" class="validateStatus">
|
||||
<view class="verificationRes">
|
||||
<image :src="status.valid ? '/static/right.png' : '/static/error.png'" :class="status.valid ? 'right' : 'error'" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view :class="status.valid ? 'rightText' : 'errorText'">{{ status.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="new_password2">
|
||||
<text class="uni-subtitle">{{ $t('form.confirmPassword.label') }}</text>
|
||||
<uni-easyinput
|
||||
class="uni-mt-5"
|
||||
type="password"
|
||||
trim="all"
|
||||
primaryColor="#29BBE4"
|
||||
v-model="changeLoginPwdFormData.new_password2"
|
||||
@input="confirmPasswordInputChange"
|
||||
></uni-easyinput>
|
||||
<view v-if="confirmValidating" class="validateStatusWrapper">
|
||||
<view v-for="(status, index) in confirmValidateStatuses" :key="index" class="validateStatus">
|
||||
<view class="verificationRes">
|
||||
<image :src="status.valid ? '/static/right.png' : '/static/error.png'" :class="status.valid ? 'right' : 'error'" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view :class="status.valid ? 'rightText' : 'errorText'">{{ status.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="primaryButton" type="button" :disabled="submitBtnLoading" @click="saveLoginPwd">
|
||||
<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
||||
{{ $t('form.submit') }}
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeLoginPwd } from '@/services/user/completeInfo.ts';
|
||||
import { UserLanguage, patterns } from '@/utils/const';
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
submitBtnLoading: false,
|
||||
changeLoginPwdFormData: {},
|
||||
changeLoginPwdFormRules: {
|
||||
new_password: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.password.required')
|
||||
},
|
||||
{
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
// 异步需要返回 Promise 对象
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (this.validateStatuses.every((item) => item.valid)) {
|
||||
// 通过返回 resolve
|
||||
resolve();
|
||||
} else {
|
||||
// 不通过返回 reject(new Error('错误信息'))
|
||||
reject(new Error(this.$t('form.password.invalid')));
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
new_password2: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.password.required')
|
||||
},
|
||||
{
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
// 异步需要返回 Promise 对象
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (this.confirmValidateStatuses.every((item) => item.valid)) {
|
||||
// 通过返回 resolve
|
||||
resolve();
|
||||
} else {
|
||||
// 不通过返回 reject(new Error('错误信息'))
|
||||
reject(new Error(this.$t('form.password.invalid')));
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
// 异步需要返回 Promise 对象
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (this.changeLoginPwdFormData.new_password2 === this.changeLoginPwdFormData.new_password) {
|
||||
// 通过返回 resolve
|
||||
resolve();
|
||||
} else {
|
||||
// 不通过返回 reject(new Error('错误信息'))
|
||||
reject(new Error(this.$t('form.confirmPassword.invalid')));
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
validating: false,
|
||||
confirmValidating: false,
|
||||
validateStatuses: [
|
||||
{ valid: false, text: this.$t('form.password.pattern1') },
|
||||
{ valid: false, text: this.$t('form.password.pattern2') },
|
||||
{ valid: false, text: this.$t('form.password.pattern3') },
|
||||
{ valid: false, text: this.$t('form.password.pattern4') }
|
||||
],
|
||||
confirmValidateStatuses: [
|
||||
{ valid: false, text: this.$t('form.password.pattern1') },
|
||||
{ valid: false, text: this.$t('form.password.pattern2') },
|
||||
{ valid: false, text: this.$t('form.password.pattern3') },
|
||||
{ valid: false, text: this.$t('form.password.pattern4') }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
passwordInputChange(e) {
|
||||
if (!this.validating) {
|
||||
this.validating = true;
|
||||
}
|
||||
this.validateStatuses.forEach((item, index) => {
|
||||
item.valid = patterns[`passwordPattern${index + 1}`].test(e);
|
||||
});
|
||||
},
|
||||
confirmPasswordInputChange(e) {
|
||||
if (!this.confirmValidating) {
|
||||
this.confirmValidating = true;
|
||||
}
|
||||
this.confirmValidateStatuses.forEach((item, index) => {
|
||||
item.valid = patterns[`passwordPattern${index + 1}`].test(e);
|
||||
});
|
||||
},
|
||||
async saveLoginPwd() {
|
||||
this.$refs.changeLoginPwdForm.validate().then(async (fields) => {
|
||||
this.submitBtnLoading = true;
|
||||
const res = await changeLoginPwd({
|
||||
...fields,
|
||||
qcc_language: UserLanguage
|
||||
});
|
||||
this.submitBtnLoading = false;
|
||||
if (res && res.code === 0) {
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'success',
|
||||
contentText: this.$t('common.success.action')
|
||||
});
|
||||
this.changeLoginPwdFormData = {};
|
||||
this.validating = false;
|
||||
this.confirmValidating = false;
|
||||
} else {
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'warning',
|
||||
contentText: res.msg ?? this.$t('common.error.sysError')
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
32
pages/user/accountSecurity/success/index.scss
Normal file
32
pages/user/accountSecurity/success/index.scss
Normal file
@ -0,0 +1,32 @@
|
||||
.container {
|
||||
padding: 0 24px 24px 16px;
|
||||
.title {
|
||||
margin: 14px 0 15px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
margin-top: 62px;
|
||||
.successTitle {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
.successDesc {
|
||||
margin-top: 19px;
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 12px;
|
||||
margin-top: 120px;
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
pages/user/accountSecurity/success/index.vue
Normal file
46
pages/user/accountSecurity/success/index.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
<PageTitle :title="$t('home.changeTradePwd')" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<image src="/static/success.png" mode="aspectFit" style="width: 56px; height: 56px"></image>
|
||||
<text class="successTitle">{{ $t('changeTradePwd.success') }}</text>
|
||||
<text class="successDesc">{{ $t('changeTradePwd.successDesc') }}</text>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button class="btn primaryButton" type="button" @click="handleContinueTransfer">
|
||||
{{ $t('mtTransfer.continue') }}
|
||||
</button>
|
||||
<button class="btn secondaryButton" type="button" @click="handleClose">
|
||||
{{ $t('form.close') }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/home/index'
|
||||
});
|
||||
},
|
||||
handleContinueTransfer() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/capital/transfer/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user