danyang-match/h5-demo/src/pages/account/AccountStatusPage.vue

<template>
  <PageLayout title="账号状态">
    <div class="acc">
      <UiLoading v-if="loading" />
      <UiErrorState v-else-if="error" @retry="load" />
      <template v-else>
        <!-- 正常 -->
        <div v-if="!hasRestriction" class="acc__normal">
          <div class="acc__normal-icon">✓</div>
          <div class="acc__normal-title">账号状态正常</div>
          <p class="acc__normal-hint">您的账号目前无限制，可以正常使用所有功能。</p>
        </div>

        <!-- 受限 -->
        <template v-else>
          <div class="acc__banner">
            <div class="acc__banner-icon">!</div>
            <div class="acc__banner-title">账号受限</div>
            <div class="acc__banner-status">{{ statusText }}</div>
          </div>
          <p class="acc__banner-desc">
            如认为处置有误，可提交申诉，工作人员将在 1-3 个工作日内审核。
          </p>
          <van-button type="primary" block round @click="goAppeal">提交申诉</van-button>
        </template>

        <van-cell-group inset class="acc__links">
          <van-cell title="状态明细" is-link @click="router.push('/account/status/detail')" />
          <van-cell title="帮助中心" is-link @click="router.push('/help')" />
        </van-cell-group>

        <p class="acc__free">本平台为公益服务，所有功能永久免费</p>
      </template>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { userService } from '@/api/services'
import PageLayout from '@/layouts/PageLayout.vue'
import UiLoading from '@/components/UiLoading.vue'
import UiErrorState from '@/components/UiErrorState.vue'

const router = useRouter()

const STATUS_TEXT: Record<string, string> = {
  normal: '正常',
  banned: '已封禁',
  suspended: '临时暂停',
  limited: '功能限制',
}

const loading = ref(true)
const error = ref(false)
const status = ref<any>(null)

const accountStatus = computed(() => status.value?.accountStatus || 'normal')
const hasRestriction = computed(() => accountStatus.value !== 'normal')
const statusText = computed(() => STATUS_TEXT[accountStatus.value] || accountStatus.value)
const appealType = computed(() => (accountStatus.value === 'banned' ? 'ban_appeal' : 'suspend_appeal'))

async function load() {
  loading.value = true
  error.value = false
  try {
    status.value = await userService.getStatus()
  } catch {
    error.value = true
  } finally {
    loading.value = false
  }
}

function goAppeal() {
  router.push({ path: '/appeal', query: { type: appealType.value } })
}

onMounted(load)
</script>

<style scoped>
.acc {
  padding: 16px;
}
.acc__normal,
.acc__banner {
  text-align: center;
  background: var(--mini-surface);
  border-radius: var(--mini-radius);
  box-shadow: var(--mini-shadow);
  padding: 24px 16px;
}
.acc__normal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(47, 179, 109, 0.14);
  color: var(--mini-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.acc__normal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mini-text-strong);
}
.acc__normal-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--mini-text-secondary);
  line-height: 1.7;
}
.acc__banner-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(240, 72, 62, 0.12);
  color: var(--mini-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.acc__banner-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mini-text-strong);
}
.acc__banner-status {
  margin-top: 6px;
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(240, 72, 62, 0.12);
  color: var(--mini-danger);
}
.acc__banner-desc {
  margin: 12px 0 16px;
  font-size: 13px;
  color: var(--mini-text-secondary);
  line-height: 1.7;
}
.acc__links {
  margin-top: 16px;
}
.acc :deep(.van-cell-group--inset) {
  margin-left: 0;
  margin-right: 0;
}
.acc__free {
  text-align: center;
  font-size: 11px;
  color: var(--mini-text-muted);
  margin: 20px 0 0;
}
</style>