VAVABUY/pages/setting/compoments/deleteAccount.vue

<template>
  <view>
    <view class="logout__btn" @click="handleOpenModal">
      <view>
        <trans _t="删除账户" style="letter-spacing: 2px" />
      </view>
    </view>

    <Popup
      ref="tipPopupRef"
      mode="center"
      class="cancel_registration_tip_popup"
      title="删除账户"
    >
      <template #content>
        <view class="popup_content">
          <view class="warning-text">
            <text>{{ $t("cancelRegistrationTips") }}</text>
          </view>
          <view class="form-group">
            <text class="form-label">
              <trans _t="请输入密码验证身份" />
            </text>
            <up-input
              type="password"
              border="bottom"
              :placeholder="t(`请输入密码`)"
              v-model="formData.userpass"
            >
              <template #prefix>
                <view class="prefix">
                  <image
                    src="@/static/login/password.png"
                    class="img"
                    mode="widthFix"
                  ></image>
                </view>
              </template>
            </up-input>
            <p class="info-text">
              <trans _t="验证通过后将执行账户删除操作"></trans>
            </p>
          </view>
        </view>
      </template>
      <template #footer>
        <view class="popup__footer">
          <view class="popup__footer-btn" @click="onClose">{{
            $t("取消")
          }}</view>
          <view
            class="popup__footer-btn popup__footer-btn__confirm"
            @click="onConfirm"
          >
            <up-loading-icon
              size="30rpx"
              style="margin-right: 12rpx"
              v-if="isSubmitting"
            ></up-loading-icon>
            <text>{{ $t("确认") }}</text>
          </view>
        </view>
      </template>
    </Popup>
  </view>
</template>

<script setup>
import Popup from "@/components/popup";
import { ref, reactive } from "vue";
import { t } from "@/locale";
import { Toast } from "@/utils";
import { DEL_ACCOUNT } from "@/api";
import { useUserStore, useTabbarStore } from "@/store";

const useUser = useUserStore();
const useTabbar = useTabbarStore();

const tipPopupRef = ref(null);
const isSubmitting = ref(false);

const formData = reactive({
  userpass: "",
});

function handleOpenModal() {
  tipPopupRef.value && tipPopupRef.value.open();
}
function onClose() {
  tipPopupRef.value && tipPopupRef.value.close();
}

function onConfirm() {
  if (!formData.userpass.trim()) {
    return Toast(t("密码不能为空"));
  }

  if (isSubmitting.value) return;
  isSubmitting.value = true;

  DEL_ACCOUNT(formData)
    .then((result) => {
      Toast(result.msg ? result.msg : t("账户删除成功"));
      useUser.loginOut(true);
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/index/index",
          success: () => {
            useTabbar.getPageCur("index");
            useTabbar.getPageIndex(0);
          },
        });
      }, 600);
    })
    .catch((err) => {
      Toast(err.msg);
    })
    .finally(() => {
      isSubmitting.value = false;
    });
}
</script>

<style scoped lang="less">
@import url("@/style.less");

.logout__btn {
  display: flex;
  align-items: cneter;
  justify-content: center;
  width: 100%;
  background-color: var(--black);
  color: var(--light);
  .size(28rpx);
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
}

.cancel_registration_tip_popup :deep(.u-popup__content) {
  width: 90%;
}

.cancel_registration_tip_popup :deep(.pop .conts),
.cancel_registration_tip_popup :deep(.pop .top) {
  justify-content: center;
}

.footer_btn {
  .btn {
    background-color: var(--black);
    padding: 16rpx 30rpx;
    border-radius: 16rpx;
    height: 76rpx;
    .flex_center();
    .size(24rpx);
    color: var(--light);
  }
}

.popup_content {
  line-height: 1.5;
  font-size: 30rpx;

  .warning-text {
    margin-bottom: 14px;
    color: #ff4d4f;
    text-align: left;
    font-size: 28rpx;
  }

  .form-group {
  }

  .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 28rpx;
    color: #666;
  }

  .prefix {
    width: 40rpx;
    margin-right: 18rpx;

    .img {
      width: inherit;
      display: block;
    }
  }

  .info-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 6px;
    line-height: 1.4;
  }
}

.popup__footer {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;

  .popup__footer-btn {
    padding: 8rpx 36rpx;
    border: 1rpx solid #333;
    border-radius: 12rpx;
    font-size: 28rpx;
  }

  .popup__footer-btn__confirm {
    display: flex;
    align-items: center;
    background-color: var(--black);
    color: var(--light);
  }
}
</style>