279 lines
8.3 KiB
Vue
279 lines
8.3 KiB
Vue
|
<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>
|