release: freeze demo v1.1.0 2026-10-19

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

@@ -0,0 +1,164 @@
+<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>