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

h5-demo/src/pages/auth/ContactConsentPage.vue

@@ -0,0 +1,231 @@
+<template>
+  <PageLayout title="红娘联系授权">
+    <div class="cc">
+      <div class="cc__intro">
+        <div class="cc__intro-title">红娘联系授权</div>
+        <div class="cc__intro-text">
+          红娘经平台审批后会向你发起联系授权申请。你可以单独决定同意或拒绝，同意后在有效期内生效，
+          到期自动失效，也可随时被撤销。
+        </div>
+      </div>
+
+      <UiLoading v-if="loading" text="加载中…" />
+      <UiErrorState v-else-if="error" @retry="load" />
+
+      <template v-else>
+        <!-- 待确认队列 -->
+        <template v-if="pending.length">
+          <div class="cc__section-title">待你确认（{{ pending.length }}）</div>
+          <div v-for="item in pending" :key="item.id" class="card">
+            <div class="cc__row">
+              <span class="cc__label">授权渠道</span>
+              <span class="cc__value cc__value--strong">{{ channelLabel(item.channel) }}</span>
+            </div>
+            <div class="cc__row">
+              <span class="cc__label">授权目的</span>
+              <span class="cc__value">{{ item.purpose || '—' }}</span>
+            </div>
+            <div class="cc__row">
+              <span class="cc__label">确认截止</span>
+              <span class="cc__value">{{ formatDateTime(item.expiresAt) || '—' }}</span>
+            </div>
+            <div class="cc__actions">
+              <van-button size="small" plain :loading="actingId === item.id" @click="onDecline(item)">
+                拒绝
+              </van-button>
+              <van-button size="small" type="primary" :loading="actingId === item.id" @click="onConsent(item)">
+                同意
+              </van-button>
+            </div>
+          </div>
+        </template>
+        <UiEmpty v-else description="暂无待确认的授权申请" />
+
+        <!-- 历史记录 -->
+        <template v-if="list.length">
+          <div class="cc__section-title">历史记录</div>
+          <div v-for="item in list" :key="item.id" class="card card--slim">
+            <div class="cc__row">
+              <span class="cc__label">渠道</span>
+              <span class="cc__value">{{ channelLabel(item.channel) }}</span>
+            </div>
+            <div class="cc__row">
+              <span class="cc__label">目的</span>
+              <span class="cc__value">{{ item.purpose || '—' }}</span>
+            </div>
+            <div class="cc__row">
+              <span class="cc__label">状态</span>
+              <span class="cc__value">
+                <UiTag :type="statusTag(item.status)">{{ statusLabel(item.status) }}</UiTag>
+              </span>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+  </PageLayout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { showConfirmDialog } from 'vant'
+import { contactConsentService } from '@/api/services'
+import { useAppStore } from '@/stores/app'
+import { formatDateTime } from '@/utils/datetime'
+import PageLayout from '@/layouts/PageLayout.vue'
+import UiLoading from '@/components/UiLoading.vue'
+import UiEmpty from '@/components/UiEmpty.vue'
+import UiErrorState from '@/components/UiErrorState.vue'
+import UiTag from '@/components/UiTag.vue'
+
+const appStore = useAppStore()
+
+const loading = ref(true)
+const error = ref(false)
+const pending = ref<any[]>([])
+const list = ref<any[]>([])
+const actingId = ref('')
+
+const CHANNEL_LABELS: Record<string, string> = {
+  phone: '电话联系',
+  offline_meeting: '线下见面',
+  full_contact: '完整联系方式',
+}
+const STATUS_LABELS: Record<string, string> = {
+  pending_approval: '待审批',
+  pending_consent: '待你确认',
+  active: '生效中',
+  rejected: '已拒绝',
+  expired: '已过期',
+  revoked: '已撤销',
+}
+
+function channelLabel(code: string): string {
+  return CHANNEL_LABELS[code] || code || '—'
+}
+function statusLabel(code: string): string {
+  return STATUS_LABELS[code] || code || '—'
+}
+function statusTag(code: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
+  if (code === 'active') return 'success'
+  if (code === 'pending_consent' || code === 'pending_approval') return 'warning'
+  if (code === 'rejected' || code === 'revoked') return 'danger'
+  return 'info'
+}
+
+async function load() {
+  loading.value = true
+  error.value = false
+  try {
+    const result: any = await contactConsentService.my()
+    pending.value = result?.pendingConsent || []
+    list.value = result?.list || result?.items || result?.records || []
+  } catch {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onConsent(item: any) {
+  try {
+    await showConfirmDialog({
+      title: '确认同意联系授权',
+      message: `同意「${channelLabel(item.channel)}」：${item.purpose || ''}。同意后红娘可在有效期内通过该方式联系你。`,
+    })
+  } catch {
+    return
+  }
+  actingId.value = item.id
+  try {
+    await contactConsentService.consent(item.id)
+    appStore.toastSuccess('已同意')
+    await load()
+  } catch (err: any) {
+    appStore.toastError(err?.message || '操作失败')
+  } finally {
+    actingId.value = ''
+  }
+}
+
+async function onDecline(item: any) {
+  actingId.value = item.id
+  try {
+    await contactConsentService.decline(item.id)
+    appStore.toast('已拒绝')
+    await load()
+  } catch (err: any) {
+    appStore.toastError(err?.message || '操作失败')
+  } finally {
+    actingId.value = ''
+  }
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.cc {
+  padding: 16px;
+}
+.cc__intro {
+  background: rgba(255, 79, 145, 0.06);
+  border: 1px solid rgba(255, 79, 145, 0.16);
+  border-radius: var(--mini-radius);
+  padding: 14px;
+  margin-bottom: 12px;
+}
+.cc__intro-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mini-text-strong);
+}
+.cc__intro-text {
+  font-size: 12px;
+  color: var(--mini-text-secondary);
+  line-height: 1.7;
+  margin-top: 6px;
+}
+.cc__section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mini-text-strong);
+  margin: 16px 0 8px;
+}
+.card {
+  background: var(--mini-surface);
+  border-radius: var(--mini-radius);
+  box-shadow: var(--mini-shadow);
+  padding: 14px;
+  margin-bottom: 10px;
+}
+.card--slim {
+  padding: 12px 14px;
+}
+.cc__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+}
+.cc__label {
+  font-size: 13px;
+  color: var(--mini-text-secondary);
+  flex: none;
+}
+.cc__value {
+  font-size: 13px;
+  color: var(--mini-text);
+  text-align: right;
+}
+.cc__value--strong {
+  font-weight: 600;
+  color: var(--mini-text-strong);
+}
+.cc__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 12px;
+}
+</style>