f
This commit is contained in:
278
src/views/CancelAccount.vue
Normal file
278
src/views/CancelAccount.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { showConfirmDialog, showToast } from 'vant'
|
||||
import AccountCancelAgreement from '@/views/AccountCancelAgreement.vue'
|
||||
import useApiFetch from '@/composables/useApiFetch'
|
||||
import { useAgentStore } from '@/stores/agentStore'
|
||||
import { useUserStore } from '@/stores/userStore'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const userStore = useUserStore()
|
||||
const agentStore = useAgentStore()
|
||||
const { mobile } = storeToRefs(userStore)
|
||||
const { isAgent, level } = storeToRefs(agentStore)
|
||||
|
||||
const loading = ref(true)
|
||||
const revenueData = ref(null)
|
||||
|
||||
const showSmsModal = ref(false)
|
||||
const cancelAccountCode = ref('')
|
||||
const cancelSmsCountdown = ref(0)
|
||||
let cancelSmsTimer = null
|
||||
|
||||
function maskName(name) {
|
||||
if (!name || name.length < 11)
|
||||
return name
|
||||
return `${name.substring(0, 3)}****${name.substring(7)}`
|
||||
}
|
||||
|
||||
const hasWalletBalance = computed(() => {
|
||||
const b = Number(revenueData.value?.balance ?? 0)
|
||||
const f = Number(revenueData.value?.frozen_balance ?? 0)
|
||||
return b > 0 || f > 0
|
||||
})
|
||||
const showBalanceWarning = computed(() => isAgent.value && hasWalletBalance.value)
|
||||
|
||||
const showVipLevelReminder = computed(() =>
|
||||
isAgent.value && (level.value === 'VIP' || level.value === 'SVIP'),
|
||||
)
|
||||
const vipLevelLabel = computed(() => (level.value === 'SVIP' ? 'SVIP' : 'VIP'))
|
||||
|
||||
const showAnyReminder = computed(() => showBalanceWarning.value || showVipLevelReminder.value)
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.fetchUserInfo()
|
||||
if (!userStore.mobile) {
|
||||
loading.value = false
|
||||
showToast('请先绑定手机号')
|
||||
setTimeout(() => router.back(), 1500)
|
||||
return
|
||||
}
|
||||
try {
|
||||
await agentStore.fetchAgentStatus()
|
||||
if (agentStore.isAgent) {
|
||||
const { data, error } = await useApiFetch('/agent/revenue').get().json()
|
||||
if (!error.value && data.value?.code === 200)
|
||||
revenueData.value = data.value.data
|
||||
}
|
||||
}
|
||||
catch {
|
||||
/* ignore */
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function onExit() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function startCancelSmsCountdown() {
|
||||
cancelSmsCountdown.value = 60
|
||||
if (cancelSmsTimer)
|
||||
clearInterval(cancelSmsTimer)
|
||||
cancelSmsTimer = setInterval(() => {
|
||||
if (cancelSmsCountdown.value > 0)
|
||||
cancelSmsCountdown.value--
|
||||
else
|
||||
clearInterval(cancelSmsTimer)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (cancelSmsTimer)
|
||||
clearInterval(cancelSmsTimer)
|
||||
})
|
||||
|
||||
function openSmsModal() {
|
||||
cancelAccountCode.value = ''
|
||||
showSmsModal.value = true
|
||||
}
|
||||
|
||||
function onConfirmTap() {
|
||||
if (showBalanceWarning.value) {
|
||||
showConfirmDialog({
|
||||
title: '确认注销',
|
||||
message: '您的代理账户仍有余额或待结账金额，注销后将无法通过本账号提现，确定继续注销？',
|
||||
confirmButtonText: '继续',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(() => openSmsModal())
|
||||
.catch(() => {})
|
||||
}
|
||||
else {
|
||||
openSmsModal()
|
||||
}
|
||||
}
|
||||
|
||||
function closeSmsModal() {
|
||||
showSmsModal.value = false
|
||||
cancelAccountCode.value = ''
|
||||
}
|
||||
|
||||
async function sendCancelAccountSms() {
|
||||
if (!mobile.value) {
|
||||
showToast('请先绑定手机号')
|
||||
return
|
||||
}
|
||||
if (cancelSmsCountdown.value > 0)
|
||||
return
|
||||
const { data, error } = await useApiFetch('/auth/sendSms')
|
||||
.post({ mobile: mobile.value, actionType: 'cancelAccount', captchaVerifyParam: '' })
|
||||
.json()
|
||||
if (!error.value && data.value?.code === 200) {
|
||||
showToast({ message: '验证码已发送' })
|
||||
startCancelSmsCountdown()
|
||||
}
|
||||
else {
|
||||
showToast({ message: data.value?.msg || '发送失败' })
|
||||
}
|
||||
}
|
||||
|
||||
function clearAuthAndGoHome() {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('refreshAfter')
|
||||
localStorage.removeItem('accessExpire')
|
||||
localStorage.removeItem('userInfo')
|
||||
localStorage.removeItem('agentInfo')
|
||||
userStore.resetUser()
|
||||
agentStore.resetAgent()
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
async function submitCancelAccount() {
|
||||
if (cancelAccountCode.value.length !== 6) {
|
||||
showToast('请输入6位验证码')
|
||||
return
|
||||
}
|
||||
const { data, error } = await useApiFetch('/user/cancelOut')
|
||||
.post({ code: cancelAccountCode.value })
|
||||
.json()
|
||||
if (!error.value && data.value?.code === 200) {
|
||||
showToast({ message: '账号已注销' })
|
||||
closeSmsModal()
|
||||
clearAuthAndGoHome()
|
||||
}
|
||||
else {
|
||||
showToast({ message: data.value?.msg || '注销失败' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 减导航栏占位高度，避免整页超出视口（与 PageLayout 的 van-nav-bar placeholder 配合） -->
|
||||
<div
|
||||
class="box-border flex flex-col bg-gray-50"
|
||||
style="min-height: calc(100vh - var(--van-nav-bar-height, 46px)); height: calc(100vh - var(--van-nav-bar-height, 46px));"
|
||||
>
|
||||
<div v-if="loading" class="flex flex-1 items-center justify-center py-20 text-gray-500">
|
||||
加载中...
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
<div class="min-h-0 flex-1 overflow-y-auto border-b border-gray-100 bg-white">
|
||||
<AccountCancelAgreement />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showAnyReminder"
|
||||
class="flex-shrink-0 space-y-2 border-t border-gray-100 bg-gray-50 px-4 py-3"
|
||||
>
|
||||
<div
|
||||
v-if="showBalanceWarning"
|
||||
class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900"
|
||||
>
|
||||
<p class="font-medium">
|
||||
钱包提示
|
||||
</p>
|
||||
<p class="mt-1 leading-relaxed">
|
||||
检测到您为代理且账户仍有余额（¥{{ (revenueData?.balance ?? 0).toFixed(2) }}）或待结账金额（¥{{ (revenueData?.frozen_balance ?? 0).toFixed(2) }}）。注销后将无法通过本账号提现，请确认已了解风险。
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="showVipLevelReminder"
|
||||
class="rounded-lg border border-violet-200 bg-violet-50 p-3 text-sm text-violet-900"
|
||||
>
|
||||
<p class="font-medium">
|
||||
会员提示
|
||||
</p>
|
||||
<p class="mt-1 leading-relaxed">
|
||||
您当前为 {{ vipLevelLabel }} 代理会员，注销后该账号下的代理身份与相关权益将按平台规则终止，请确认已了解风险。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0 border-t border-gray-200 bg-gray-50 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3">
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-lg border border-gray-300 bg-white py-3 text-gray-800"
|
||||
@click="onExit"
|
||||
>
|
||||
退出
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-lg bg-red-500 py-3 text-white"
|
||||
@click="onConfirmTap"
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="showSmsModal"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
@click.self="closeSmsModal"
|
||||
>
|
||||
<div class="w-full max-w-sm rounded-xl bg-white p-5 shadow-lg" @click.stop>
|
||||
<p class="mb-2 text-base font-medium text-gray-800">
|
||||
验证手机号
|
||||
</p>
|
||||
<p class="mb-4 text-sm text-gray-500">
|
||||
将向 {{ maskName(mobile) }} 发送验证码。
|
||||
</p>
|
||||
<input
|
||||
v-model="cancelAccountCode"
|
||||
type="text"
|
||||
maxlength="6"
|
||||
inputmode="numeric"
|
||||
placeholder="请输入6位验证码"
|
||||
class="mb-4 w-full rounded-lg border border-gray-200 px-3 py-2 text-base"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full rounded-lg bg-gray-100 py-2 text-sm text-gray-700 disabled:opacity-50"
|
||||
:disabled="cancelSmsCountdown > 0"
|
||||
@click="sendCancelAccountSms"
|
||||
>
|
||||
{{ cancelSmsCountdown > 0 ? `${cancelSmsCountdown}s` : '获取验证码' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-lg bg-gray-200 py-2 text-gray-800"
|
||||
@click="closeSmsModal"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-lg bg-red-500 py-2 text-white"
|
||||
@click="submitCancelAccount"
|
||||
>
|
||||
确认注销
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user