247 lines
7.7 KiB
Vue
247 lines
7.7 KiB
Vue
<template>
|
|
<NavBar />
|
|
<view class="container">
|
|
<view class="title">
|
|
<PageTitle :title="$t('home.changeROPwd')" />
|
|
</view>
|
|
<uni-forms ref="changeTradePwdForm" :modelValue="changeTradePwdFormData" :rules="changeTradePwdFormRules">
|
|
<view class="availableMoneyOut">
|
|
{{ $t('form.mtAccount.label') }}
|
|
<text class="value">{{ mt4_login ?? '-' }}</text>
|
|
</view>
|
|
<uni-forms-item name="mt4_password_investor">
|
|
<text class="uni-subtitle">{{ $t('form.ROPassword.label') }}</text>
|
|
<uni-easyinput
|
|
class="uni-mt-5"
|
|
type="password"
|
|
trim="all"
|
|
primaryColor="#29BBE4"
|
|
v-model="changeTradePwdFormData.mt4_password_investor"
|
|
@input="investorPasswordInputChange"
|
|
></uni-easyinput>
|
|
<view v-if="investorValidating" class="validateStatusWrapper">
|
|
<view v-for="(status, index) in investorValidateStatuses" :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-popup ref="alertDialog" :isMaskClick="false">
|
|
<view class="detailModal">
|
|
<uni-icons type="closeempty" size="17" class="closeIcon" @click="closeDetailDialog"></uni-icons>
|
|
<view class="detailContent">
|
|
<uni-forms-item name="code">
|
|
<text class="uni-subtitle">{{ $t('form.captcha.label') }}</text>
|
|
<uni-easyinput type="password" trim="all" primaryColor="#29BBE4" v-model="changeTradePwdFormData.code"></uni-easyinput>
|
|
<view class="resendCode" @click="sendCode">
|
|
<image src="/static/reload.png" mode="aspectFit" :class="['resendIcon', sendCodeBtnLoading ? 'loading' : '']"></image>
|
|
<text>{{ $t('form.verificationCode.invalid') }}</text>
|
|
</view>
|
|
</uni-forms-item>
|
|
<button class="primaryButton" :disabled="submitBtnLoading" @click="saveTradePwd">
|
|
<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
|
{{ $t('form.submit') }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</uni-forms>
|
|
<button class="primaryButton" type="button" :disabled="nextBtnLoading" @click="showDetailDialog">
|
|
<image v-show="nextBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
|
{{ $t('form.next') }}
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getApplyLeverageList, updateLeverage, sendCodeMT, checkCodeMT, updateMTPassword } from '@/services/home/home.ts';
|
|
import { getExchangeRate, getGoldRange } from '@/services/capital/deposit.ts';
|
|
import { saveTransfer } from '@/services/capital/transfer.ts';
|
|
import { getBankList } from '@/services/user.ts';
|
|
import { getDictByCode } from '@/services/common.ts';
|
|
import { UserLanguage, patterns } from '@/utils/const';
|
|
import { useUserStore } from '@/stores/user';
|
|
export default {
|
|
name: '',
|
|
data() {
|
|
return {
|
|
mt4_login: undefined,
|
|
mt4_server: undefined,
|
|
mt4_leverage_old: undefined,
|
|
nextBtnLoading: false,
|
|
sendCodeBtnLoading: false,
|
|
submitBtnLoading: false,
|
|
sign: undefined,
|
|
leverageOptions: [],
|
|
changeTradePwdFormData: {},
|
|
changeTradePwdFormRules: {
|
|
mt4_password_investor: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: this.$t('form.ROPassword.required')
|
|
},
|
|
{
|
|
validateFunction: (rule, value, data, callback) => {
|
|
// 异步需要返回 Promise 对象
|
|
return new Promise((resolve, reject) => {
|
|
setTimeout(() => {
|
|
if (this.investorValidateStatuses.every((item) => item.valid)) {
|
|
// 通过返回 resolve
|
|
resolve();
|
|
} else {
|
|
// 不通过返回 reject(new Error('错误信息'))
|
|
reject(new Error(this.$t('form.password.invalid')));
|
|
}
|
|
}, 0);
|
|
});
|
|
}
|
|
}
|
|
]
|
|
},
|
|
code: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: this.$t('form.captcha.required')
|
|
}
|
|
]
|
|
}
|
|
},
|
|
investorValidating: false,
|
|
investorValidateStatuses: [
|
|
{ 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: {
|
|
investorPasswordInputChange(e) {
|
|
this.$nextTick(() => {
|
|
this.changeTradePwdFormData.mt4_password_investor = this.changeTradePwdFormData.mt4_password_investor.replace(/[^a-zA-Z0-9!@#]/g, '')
|
|
if (!this.investorValidating) {
|
|
this.investorValidating = true;
|
|
}
|
|
this.investorValidateStatuses.forEach((item, index) => {
|
|
item.valid = patterns[`passwordPattern${index + 1}`].test(e);
|
|
});
|
|
})
|
|
},
|
|
async sendCode() {
|
|
this.nextBtnLoading = true;
|
|
this.closeDetailDialog()
|
|
const userStore = useUserStore();
|
|
this.sendCodeBtnLoading = true;
|
|
const res = await sendCodeMT({
|
|
email: userStore.userInfo.email,
|
|
mt4_login: this.mt4_login,
|
|
qcc_language: UserLanguage
|
|
});
|
|
this.sendCodeBtnLoading = false;
|
|
this.nextBtnLoading = false;
|
|
let success = false;
|
|
if (res && res.code === 0) {
|
|
this.$nextTick(() => {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'success',
|
|
contentText: this.$t('form.verificationCode.sendSuccess'),
|
|
onClose: () => {
|
|
this.$refs.alertDialog.open();
|
|
}
|
|
});
|
|
})
|
|
success = true;
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'warning',
|
|
contentText: res.msg ?? this.$t('common.error.sysError')
|
|
});
|
|
})
|
|
}
|
|
return success;
|
|
},
|
|
async showDetailDialog() {
|
|
this.$refs.changeTradePwdForm.validateField(['mt4_password_investor']).then(async () => {
|
|
const sendSuccess = await this.sendCode();
|
|
});
|
|
},
|
|
closeDetailDialog() {
|
|
this.$refs.alertDialog.close();
|
|
},
|
|
async saveTradePwd() {
|
|
this.$refs.changeTradePwdForm.validate().then(async (fields) => {
|
|
this.submitBtnLoading = true;
|
|
const userStore = useUserStore();
|
|
const checkRes = await checkCodeMT({
|
|
email: userStore.userInfo.email,
|
|
code: fields.code,
|
|
qcc_language: UserLanguage
|
|
});
|
|
if (checkRes && checkRes.code === 0) {
|
|
this.sign = checkRes.data;
|
|
} else {
|
|
this.closeDetailDialog()
|
|
this.$nextTick(() => {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'warning',
|
|
contentText: checkRes.msg ?? this.$t('common.error.sysError')
|
|
});
|
|
})
|
|
this.submitBtnLoading = false;
|
|
return;
|
|
}
|
|
const res = await updateMTPassword({
|
|
...fields,
|
|
email: userStore.userInfo.email,
|
|
mt4_login: this.mt4_login,
|
|
mt4_server: this.mt4_server,
|
|
qcc_language: UserLanguage,
|
|
sign: this.sign
|
|
});
|
|
this.submitBtnLoading = false;
|
|
this.closeDetailDialog()
|
|
if (res && res.code === 0) {
|
|
this.$nextTick(() => {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'success',
|
|
contentText: this.$t('common.success.action'),
|
|
onClose() {
|
|
uni.redirectTo({
|
|
url: '/pages/home/changeROPwd/success/index'
|
|
});
|
|
}
|
|
});
|
|
})
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$cusModal.showModal({
|
|
type: 'message',
|
|
status: 'warning',
|
|
contentText: res.msg ?? this.$t('common.error.sysError')
|
|
});
|
|
})
|
|
}
|
|
});
|
|
}
|
|
},
|
|
created() {},
|
|
onLoad(params) {
|
|
this.mt4_login = params.mt4_login;
|
|
this.mt4_server = params.mt4_server;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|