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

<template>
  <view class="user-form crm-form">
    <view class="card">
      <view class="bank-menu card-header">
        <view v-for="item in types" :key="item.key" class="bank-menu-item"
          :class="{ active: selectedType === item.key }" @click="selectedType = item.key">
          <!--                        <image class="bank-icon" :src="item.icon" mode="widthFix" />-->
          <text>{{ item.label }}</text>
        </view>
      </view>
      <uni-row class="demo-uni-row uni-row1" :gutter="20">
        <uni-col v-show="selectedType == 1" :xs="{ span: 24, offset: 0 }" :sm="{ span: 24, offset: 0 }" :md="{ span: 24, offset: 0 }"
          :lg="{ span: 12, offset: 6 }" :xl="{ span: 12, offset: 6 }">
          <view class=" 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">
                  <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect mt-4"
                    @click="passwordUpdate">
                    {{ locale == 'es' ?
                      'Actualizarcontraseña' : t('Btn.Application') }}
                  </button>
                </uni-col>
              </uni-row>
            </uni-forms>
          </view>
        </uni-col>
        <uni-col v-show="selectedType == 2" :xs="{ span: 24, offset: 0 }" :sm="{ span: { span: 24, offset: 0 }, offset: 0 }"
          :md="{ span: 24, offset: 0 }" :lg="{ span: 12, offset: 6 }" :xl="{ span: 12, offset: 6 }">
          <view class=" 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">
                  <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect mt-4"
                    @click="emailUpdate">
                    {{ locale == 'es' ?
                      'Actualizarcontraseña' : t('Btn.Application') }}
                  </button>
                </uni-col>
              </uni-row>
            </uni-forms>
          </view>
        </uni-col>
      </uni-row>
    </view>


  </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 selectedType = ref('1')
const types = computed(() => {
  return [
    { key: '1', label: t('PersonalManagement.Title.CustomerZonePasswordChange') },
    {
      key: '2',
      label: t('PersonalManagement.Title.EmailChange'),
    },
  ]
})
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%;
}

.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);
  }

  .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(6) 0 0 px2rpx(6);
    }
  }

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

}

.bank-menu {
  background: #fff;
  overflow: hidden;

  .bank-menu-item {
    display: flex;
    align-items: center;
    gap: px2rpx(12);
    padding: px2rpx(10) px2rpx(16);
    cursor: pointer;
    border: 1px solid #f3f4f6;
    font-size: px2rpx(16);
    font-weight: 500;
    color: #1f2937;
    transition: all 0.3s;
    height: px2rpx(50);
    border-radius: px2rpx(8);
    margin-bottom: px2rpx(8);

    .bank-icon {
      width: px2rpx(50);
    }

    &.active {
      background: #ea2027;
      color: var(--bs-emphasis-color);
      border-radius: px2rpx(0);
    }

    &:hover {
      background: #f9fafb;
    }

    &.active:hover {
      background: #d11920;
    }
  }
}

.bank-menu {
  // background: #fff;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  &.card-header {
    padding: px2rpx(10) px2rpx(20);
  }

  .bank-menu-item {
    flex: 1;
    min-width: px2rpx(260);
    display: flex;
    align-items: center;
    justify-content: center;
    //gap: px2rpx(12);
    padding: 0 px2rpx(16);
    cursor: pointer;
    font-size: px2rpx(16);
    font-weight: bold;
    color: var(--bs-emphasis-color);
    transition: all 0.3s;
    height: px2rpx(36);
    border-radius: px2rpx(8);

    .bank-icon {
      width: px2rpx(50);
    }

    &.active {
      background: #f5f5f5;
      color: #000;
      border-radius: px2rpx(8);

      &:hover {
        background: var(--bs-link-hover-color-rgb);
        color: #333;
      }
    }

    &:hover {
      background: #f5f5f5;
      color: #333;
    }

    &.active:hover {
      background: #f5f5f5;
    }
  }
}
</style>