ucard-person-app-front/pages/mine/pay-password.vue

<template>
  <cwg-page-wrapper>
    <view class="page">
      <u-form ref="resetForm">
        <cwg-input v-model:value="loginName" type="text" :required="true" fkey="loginName" :label="t('login.p1')"
          :clearable="true" :placeholder="t('login.msg1')" :rules="[{ required: true, message: t('login.msg1') }]"
          @change="handleChange">
        </cwg-input>
        <cwg-input v-model:value="oldPassword" :type="showPassword ? 'text' : 'password'" fkey="oldPassword"
          :required="true" :label="t('login.p3')" :clearable="true" :placeholder="t('login.msg3')"
          :rules="[{ required: true, message: t('login.msg3') }]" @change="handleChange">
          <template #right-icon1>
            <!-- <u-icon name="eye-o" @click="showPassword = !showPassword" /> -->
          </template>
        </cwg-input>
        <cwg-input v-model:value="newPassword" :type="showPassword1 ? 'text' : 'password'" fkey="newPassword"
          :required="true" :label="t('login.p4')" :clearable="true" :placeholder="t('login.msg3')"
          :rules="[{ required: true, message: t('login.msg3') }]" @change="handleChange">
          <template #right-icon1>
            <!-- <u-icon name="eye-o" @click="showPassword1 = !showPassword1" /> -->
          </template>
        </cwg-input>
        <view class="fixed-btn">
          <view class="cwg-button">
            <u-button type="primary" block :loading="loading" @click="handleReset">{{ t("pages.mine.pay-password")
            }}</u-button>
          </view>
        </view>
      </u-form>
      <SuccessPrompt v-if="isShow" :btn-click="btnClick" :btn-title="t('newSignin.item7')" />
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { showToast } from "@/utils/toast";
import { useI18n } from "vue-i18n";
import useRouter from "@/hooks/useRouter";
import { userApi } from "@/api/user";

const { t } = useI18n();
const resetForm = ref();
const router = useRouter();
const loading = ref(false);
const loginName = ref("");
const oldPassword = ref("");
const newPassword = ref("");
const isShow = ref(false);
const showPassword = ref(false);
const showPassword1 = ref(false);
function btnClick() {
  router.push("/pages/login/index");
}
async function handleReset() {
  loading.value = true;
  try {
    await resetForm.value?.validate([
      "loginName",
      "newPassword",
      "oldPassword",
    ]);
    if (newPassword.value == oldPassword.value) {
      showToast(t("login.msg5"));
      return;
    }
    const res = await userApi.updateEmailPassword({
      newPassword: newPassword.value,
      oldPassword: oldPassword.value,
    });
    if (res.code == 200) {
      isShow.value = true;
    } else {
      showToast(res.msg);
    }
  } catch (error: any) {
    if (Array.isArray(error) && error.length > 0) {
      showToast(error[0].message);
    } else {
      showToast(t("login.msg0_2"));
    }
    return;
  } finally {
    loading.value = false;
  }
}
function handleChange(value: any) { }
</script>

<style scoped lang="scss"></style>