gypsy-crm-frontend-vu/pages/mine/components/SecurityCenterTab.vue

<template>
    <view class="user-form crm-form">
        <uni-row class="demo-uni-row uni-row1" :gutter="20">
            <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" >
              <view class="card bg-body p-3">
                <view class="content-title">
                    <view v-t="'PersonalManagement.Title.CustomerZonePasswordChange'"></view>
                </view>
                <hr>
                <uni-forms :model="passwordInfo" labelWidth="200" label-position="top">
                    <uni-row class="demo-uni-row">
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Label.OldPassword')">
                                <uni-easyinput :clearable="false" v-model="passwordInfo.oldPassword"
                                    :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Label.NewPassword')">
                                <uni-easyinput :clearable="false" v-model="passwordInfo.newPassword"
                                    :placeholder="locale == 'es' ? 'Introduzca nueva contraseña' : t('placeholder.input')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Label.NewPasswordConfirmation')">
                                <uni-easyinput :clearable="false" v-model="passwordInfo.checkPass"
                                    :placeholder="locale == 'es' ? 'Introduzca nueva contraseña' : t('placeholder.input')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <view class="notice-list">
                                <view v-for="(item, index) in noticeItems" :key="index"
                                    :class="['notice-item', item.valid ? 'isOK' : '']">
                                    {{ item.label }}
                                </view>
                            </view>
                        </uni-col>
                        <uni-col :xs="24">
                            <view class="btn btn-confirm mt-4" @click="passwordUpdate">{{ locale == 'es' ?
                                'Actualizarcontraseña' : t('Btn.Application') }}</view>
                        </uni-col>
                    </uni-row>
                </uni-forms>
              </view>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <view class="card bg-body p-3">
                <view class="content-title">
                    <view v-t="'PersonalManagement.Title.EmailChange'"></view>
                </view>
                <hr>
                <uni-forms :model="emailInfo" labelWidth="200" label-position="top">
                    <uni-row class="demo-uni-row">
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Label.OldEmail')">
                                <uni-easyinput :clearable="false" v-model="emailInfo.oldEmail"
                                    :placeholder="t('placeholder.input')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Label.NewEmail')">
                                <uni-easyinput :clearable="false" v-model="emailInfo.email"
                                    :placeholder="t('placeholder.input')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <view class="email-code">
                                <uni-forms-item :label="t('PersonalManagement.Label.MailboxVerificationCode')"
                                    class="email-code-item">
                                    <uni-easyinput :clearable="false" v-model="emailInfo.emailCode"
                                        :placeholder="locale == 'es' ? 'Código de 6 dígitos' : t('placeholder.input')" />
                                </uni-forms-item>
                                <view class="btn btn-code" @click="handleGetCode">{{ getCodeString }}</view>
                            </view>
                        </uni-col>
                        <uni-col :xs="24">
                            <view class="btn btn-confirm mt-4" @click="emailUpdate">{{ locale == 'es' ?
                                'Actualizarcontraseña' : t('Btn.Application') }}</view>
                        </uni-col>
                    </uni-row>
                </uni-forms>
              </view>
            </uni-col>
        </uni-row>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { showToast } from "@/utils/toast";
import { personalApi } from '@/service/personal';
import { useEmailCountdown } from '@/hooks/useEmailCountdown';
import config from '@/config';
const {
    time,
    text: getCodeString,
    canSend,
    start,
    restore,
    clear,
} = useEmailCountdown()
const { t, locale } = useI18n();
interface BankListType {
    key: string;
    label: string;
    icon: string;
}
const passwordInfo = ref({
    oldPassword: '',
    newPassword: '',
    checkPass: ''
});
const emailInfo = ref({
    email: '',
});
const rule1 = computed(() => {
    if (!passwordInfo.value.newPassword) {
        return false;
    }
    return /^.{8,16}$/.test(passwordInfo.value.newPassword);
});
const rule2 = computed(() => {
    return /^(?=.*?[a-z])(?=.*?[A-Z]).*$/.test(passwordInfo.value.newPassword);
});
const rule3 = computed(() => {
    return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?!.*([~!@&%$^\\(\\)#_]).*\\1.*\\1)[A-Za-z0-9~!@&%$^\\(\\)#_]{8,16}$/.test(
        passwordInfo.value.newPassword
    );
});
const rule4 = computed(() => {
    console.log(/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~!@&%$^*./\\(\\)\\+\\=#_-])[A-Za-z0-9~!@&%$^*./\\(\\)\\+\\=#_-]{8,16}$/.test(passwordInfo.value.newPassword))
    return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~!@&%$^*./\\(\\)\\+\\=#_-])[A-Za-z0-9~!@&%$^*./\\(\\)\\+\\=#_-]{8,16}$/.test(
        passwordInfo.value.newPassword
    );
});
const noticeItems = computed(() => [
    { label: t('signup.form.rules.1st'), valid: rule1.value },
    { label: t('signup.form.rules.2nd'), valid: rule2.value },
    { label: t('signup.form.rules.4rd'), valid: rule4.value }
])
// 发送邮箱验证码
async function sendEmailCode() {
    try {
        const res = await personalApi.customUpdateEmailCode({
            email: emailInfo.value.email,
            oldEmail: emailInfo.value.oldEmail,
        });
        if (res.code === 200) {
            start()
            return true;
        } else {
            showToast(t("Msg.CodeFail"));
            return false;
        }
    } catch (error: any) {
        console.log(error, 12);

        showToast(t("Msg.CodeFail"));
        return false;
    }
}
async function handleGetCode() {
    if (!emailInfo.value.email) {
        showToast(t("vaildate.email.empty"));
        return;
    }
    if (!config.Pattern.Email.test(emailInfo.value.email)) {
        showToast(t("vaildate.email.format"));
        return;
    }

    if (!canSend.value) return
    await sendEmailCode();
}
// 提交修改邮箱
async function emailUpdate() {
    try {
        const res = await personalApi.customUpdateEmail({
            ...emailInfo.value
        });
        if (res.code === 200) {
            clear()
            emailInfo.value = {}
            showToast(t("Msg.Success"));
        } else {
            showToast(res.msg);
        }
    } catch (error: any) {
        showToast(error.msg);
    }
}
// 提交修改密码
async function passwordUpdate() {
    try {
        if (!rule1.value) {
            showToast(t("signup.form.rules.1st"));
            return;
        }
        if (!rule2.value) {
            showToast(t("signup.form.rules.2nd"));
            return;
        }
        if (!rule4.value) {
            showToast(t("signup.form.rules.4rd"));
            return;
        }
        if (passwordInfo.value.newPassword !== passwordInfo.value.checkPass) {
            showToast(t("vaildate.password.same"));
            return;
        }
        const res = await personalApi.customUpdatePassword({
            ...passwordInfo.value
        });
        if (res.code === 200) {
            // start()
            showToast(t("Msg.Success"));
        } else {
            showToast(res.msg);
        }
    } catch (error: any) {
        showToast(error.msg);
    }
}
onMounted(() => {
    restore()
})


</script>



<style scoped lang="scss">
  @import "@/uni.scss";
:deep(.uni-row1) {
    .uni-col {
    }

    .uni-forms-item {
        min-height: px2rpx(79);
        margin-bottom: px2rpx(10);
    }

    .uni-easyinput__content {
        //border: none !important;
        background-color: transparent;
        //background-color: var(--color-zinc-100) !important;
    }
}

.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: px2rpx(12) 0;
    background-color: var(--color-error);
    color: white;
    border: none;
    font-size: px2rpx(16);
    cursor: pointer;
    margin-bottom: px2rpx(24);
}

.notice-list {
    margin: 0;
    padding: 0 px2rpx(12) px2rpx(12) 0;

    .notice-item {
        font-size: px2rpx(14);
        color: var(--bs-emphasis-color);
        line-height: px2rpx(24);

        &::before {
            content: '●';
            display: inline-block;
            font-size: px2rpx(10);
            margin-right: px2rpx(4);
        }
    }

    .isOK {
        color: var(--bs-success);
    }
}

.email-code {
    display: flex;
    align-items: flex-end;

    :deep(.email-code-item) {
        flex: 1;
      .uni-easyinput__content{
        border-radius: px2rpx(8) 0 0 px2rpx(8);
      }
    }

    .btn-code {
      width: 30%;
        margin-bottom: px2rpx(10);
        padding: px2rpx(10) px2rpx(16);
        background-color: #102047;
        color: #fff;
      height: 3rem;
      text-align: center;
      border-radius: 0 25px 25px 0;
      cursor: pointer;
      font-size: 14px;
      flex-shrink: 0;
    }

}
</style>