| | |
| | | <template> |
| | | <div class="changePassword"> |
| | | <fx-header> |
| | | <template #title> |
| | | {{ $t('changeFunsPassword') }} |
| | | </template> |
| | | </fx-header> |
| | | <div class="content"> |
| | | <ExInput :label="$t('newPassword')" :placeholderText="$t('entryPassword')" :tips="$t('funsPasswordTips')" |
| | | v-model="password" typeText="password" /> |
| | | <ExInput :label="$t('sureNewPassword')" :placeholderText="$t('entryPassword')" :tips="$t('funsPasswordTips')" |
| | | v-model="rePassword" typeText="password" /> |
| | | <ExChecked class="mb-42" :list="list" @checkedSelect="onChecked"></ExChecked> |
| | | <p class="label mt-14 textColor">{{ $t('verificationCode') }}</p> |
| | | <div class="iptbox inputBackground"> |
| | | <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode"> |
| | | <span v-if="currentType != 3" @click="senCode">{{ $t('sendVerifyCode') }}<template v-if="time"> |
| | | ({{ time }})s</template></span> |
| | | <div class="change-funds-password"> |
| | | <assets-head :title="''" :show-left="true" /> |
| | | <div class="edit-content"> |
| | | <div class="edit-input-wrap"> |
| | | <input |
| | | v-model="oldPassword" |
| | | type="password" |
| | | class="edit-input" |
| | | :placeholder="$t('oldPassword')" |
| | | /> |
| | | </div> |
| | | <van-button class="w-full" style="margin-top:10px;" @click="submit" type="primary"> |
| | | {{ $t('sure') }} |
| | | </van-button> |
| | | <div class="edit-input-wrap"> |
| | | <input |
| | | v-model="newPassword" |
| | | type="password" |
| | | class="edit-input" |
| | | :placeholder="$t('newPassword')" |
| | | /> |
| | | </div> |
| | | <div class="edit-input-wrap"> |
| | | <input |
| | | v-model="confirmPassword" |
| | | type="password" |
| | | class="edit-input" |
| | | :placeholder="$t('sureNewPassword')" |
| | | /> |
| | | </div> |
| | | <button class="edit-submit" @click="submit">{{ $t('sure') }}</button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import ExInput from "@/components/ex-input/index.vue"; |
| | | import ExChecked from "@/components/ex-checked/index.vue"; |
| | | import { _setSafeword, _getVerifTarget } from '@/service/user.api.js' |
| | | import { _sendVerifyCode } from "@/service/login.api"; |
| | | import { ref, onMounted, onUnmounted } from "vue"; |
| | | import { ref } from "vue"; |
| | | import { showToast } from "vant"; |
| | | import { useRouter } from "vue-router"; |
| | | import { useI18n } from "vue-i18n"; |
| | | const { t } = useI18n() |
| | | const router = useRouter() |
| | | import { _changeFundsPassword } from "@/service/user.api.js"; |
| | | import AssetsHead from "@/components/Transform/assets-head/index.vue"; |
| | | |
| | | const password = ref('')//密码 |
| | | const rePassword = ref('')//确认密码 |
| | | const verifyCode = ref('') //验证码 |
| | | let currentType = ref(1) //默认选中手机验证1/手机;2/邮箱;3/谷歌验证器; |
| | | const list = ref([ |
| | | { |
| | | name: t('phoneVerify'), |
| | | type: 1 |
| | | }, |
| | | { |
| | | name: t('emailVerify'), |
| | | type: 2 |
| | | }, |
| | | { |
| | | name: t('googleVerify'), |
| | | type: 3 |
| | | }, |
| | | ]) |
| | | const email_authority = ref(false) //是否绑定邮箱 |
| | | const google_auth_bind = ref(false)//是否绑定谷歌 |
| | | const phone_authority = ref(false)//是否绑定手机 |
| | | const email = ref('') |
| | | const phone = ref('') |
| | | const google_auth_secret = ref('') |
| | | const account = ref('') |
| | | const timer = ref(null) |
| | | const time = ref(0) |
| | | const { t } = useI18n(); |
| | | const router = useRouter(); |
| | | |
| | | onMounted(() => { |
| | | getVerifTarget(); |
| | | clearTimer() |
| | | }) |
| | | const oldPassword = ref(""); |
| | | const newPassword = ref(""); |
| | | const confirmPassword = ref(""); |
| | | |
| | | const onChecked = (type) => { |
| | | currentType.value = type; |
| | | if (currentType.value == 3 && !google_auth_bind.value) { |
| | | console.log('sd') |
| | | showToast(t('bindGoogleTips')) |
| | | } |
| | | if (currentType.value == 1) { |
| | | account.value = phone.value; |
| | | } else if (currentType.value == 2) { |
| | | account.value = email.value; |
| | | } else if (currentType.value == 3) { |
| | | account.value = google_auth_secret.value; |
| | | } |
| | | } |
| | | const submit = () => { |
| | | if (password.value.length < 6) { |
| | | showToast(t('funpasswordTips')) |
| | | return false |
| | | if (!oldPassword.value) { |
| | | showToast(t("旧密码不能为空")); |
| | | return; |
| | | } |
| | | _setSafeword({ |
| | | safeword: password.value, |
| | | verifcode_type: currentType.value, |
| | | verifcode: verifyCode.value |
| | | }).then((res) => { |
| | | showToast(t('changeSuccess')) |
| | | setTimeout(() => { |
| | | router.push('/my/index') |
| | | }, 1000) |
| | | if (newPassword.value.length < 6) { |
| | | showToast(t("funpasswordTips")); |
| | | return; |
| | | } |
| | | if (newPassword.value !== confirmPassword.value) { |
| | | showToast(t("两次输入的资金密码不相同")); |
| | | return; |
| | | } |
| | | _changeFundsPassword({ |
| | | old_safeword: oldPassword.value, |
| | | safeword: newPassword.value, |
| | | safeword_confirm: confirmPassword.value, |
| | | }) |
| | | } |
| | | const getVerifTarget = async () => { |
| | | _getVerifTarget({ |
| | | |
| | | }).then((res) => { |
| | | email_authority.value = res.email_authority |
| | | google_auth_bind.value = res.google_auth_bind |
| | | phone_authority.value = res.phone_authority |
| | | email.value = res.email |
| | | phone.value = res.phone |
| | | google_auth_secret.value = res.google_auth_secret |
| | | }) |
| | | |
| | | } |
| | | const senCode = () => { |
| | | if (currentType.value == 1 && !phone_authority.value) { |
| | | showToast(t('bindPhoneTips')); |
| | | return false |
| | | } |
| | | if (currentType.value == 2 && !email_authority.value) { |
| | | showToast(t('bindEmailTips')); |
| | | return false |
| | | } |
| | | onChecked(currentType.value) |
| | | if (time.value > 0) { |
| | | return false |
| | | } |
| | | _sendVerifyCode({ |
| | | target: account.value, |
| | | }).then((res) => { |
| | | showToast(t('sendSuccess')); |
| | | time.value = 30; |
| | | timer.value = setInterval(() => { |
| | | if (time.value > 0) { |
| | | time.value = time.value - 1 |
| | | .then(() => { |
| | | showToast(t("changeSuccess")); |
| | | setTimeout(() => router.push("/my/index"), 1000); |
| | | }) |
| | | .catch((err) => { |
| | | const msg = err?.message || err?.msg; |
| | | if (msg && (msg.includes("旧密码") || msg.includes("incorrect") || msg.includes("wrong"))) { |
| | | showToast(t("旧密码不正确")); |
| | | } else { |
| | | time.value = 0; |
| | | clearTimer() |
| | | showToast(msg || t("fail")); |
| | | } |
| | | }, 1000); |
| | | }) |
| | | } |
| | | |
| | | const clearTimer = () => { |
| | | clearInterval(timer.value) |
| | | timer.value = null |
| | | } |
| | | |
| | | onUnmounted(() => { |
| | | clearTimer() |
| | | }) |
| | | |
| | | }); |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .changePassword { |
| | | width: 100%; |
| | | .change-funds-password { |
| | | min-height: 100vh; |
| | | background: #fff; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .line { |
| | | width: 100%; |
| | | height: 1px; |
| | | background: $light-grey; |
| | | .edit-content { |
| | | padding: 24px 16px; |
| | | } |
| | | |
| | | .content { |
| | | padding: 16px; |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .iptbox { |
| | | height: 44px; |
| | | margin-top: 8px; |
| | | padding: 0 10px; |
| | | .edit-input-wrap { |
| | | height: 48px; |
| | | margin-bottom: 20px; |
| | | padding: 0 16px; |
| | | background: #f5f5f5; |
| | | border-radius: 10px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | border-radius: 3px; |
| | | } |
| | | |
| | | input { |
| | | flex: 1; |
| | | height: 100%; |
| | | border: none; |
| | | } |
| | | .edit-input { |
| | | flex: 1; |
| | | height: 100%; |
| | | border: none; |
| | | background: transparent; |
| | | font-size: 16px; |
| | | color: #333; |
| | | outline: none; |
| | | } |
| | | |
| | | span { |
| | | color: $color_main; |
| | | } |
| | | .edit-input::placeholder { |
| | | color: #999; |
| | | } |
| | | |
| | | .edit-submit { |
| | | width: 100%; |
| | | margin-top: 40px; |
| | | padding: 16px 0; |
| | | border: none; |
| | | border-radius: 12px; |
| | | background: linear-gradient(90deg, #5e2bc8, #a443cf); |
| | | color: #fff; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | cursor: pointer; |
| | | } |
| | | </style> |