@tbox.cn/app-module-member 0.2.0 → 0.8.7

package/src/client/cards/member-enrollment-status/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * member-enrollment-status 富卡（0.4.0 D6/D10）：四态变体 + pending 刷新。
+ */
+import { useRef, useState } from 'react';
+import { ArrowClockwise, CheckCircle, Clock, WarningCircle } from '@phosphor-icons/react';
+import { sendCardAction, markSelfRendering } from '@tbox.cn/app-sdk/client';
+import { enrollmentStateText, enrollmentTone } from '../view';
+import type { MemberEnrollmentStatusCardData } from '@tbox.cn/app-contracts-mall';
+
+const ICONS = { success: CheckCircle, warning: Clock, neutral: WarningCircle } as const;
+
+export function MemberEnrollmentStatusCard(props: {
+  data: MemberEnrollmentStatusCardData;
+  cardId: string;
+  isHistory: boolean;
+  actionTokens?: Record<string, string>;
+}) {
+  const { data, cardId, isHistory, actionTokens } = props;
+  const tone = enrollmentTone(data.state);
+  const Icon = ICONS[tone];
+  const refreshToken = actionTokens?.['member.query-enrollment-status'];
+  const [refreshing, setRefreshing] = useState(false);
+  const refreshingRef = useRef(false);
+
+  return (
+    <section className={`member-card member-es member-es--${data.state}`}>
+      <span className="member-es__eyebrow">入会申请</span>
+      <div className={`member-es__icon member-es__icon--${tone}`}>
+        <Icon size={30} weight="duotone" />
+      </div>
+      <h4>{enrollmentStateText(data.state)}</h4>
+      {data.message && <p className="member-es__message">{data.message}</p>}
+      {data.state === 'active' && <p className="member-es__support">会员状态已更新，可继续查询会员卡或积分</p>}
+      {(data.state === 'failed' || data.state === 'confirmation_timeout') && (
+        <p className="member-es__support">本次未确认成功，请根据提示重新发起或稍后再试</p>
+      )}
+      {data.state === 'pending_confirmation' && data.attemptRef && (
+        <button
+          type="button"
+          className="member-es__refresh"
+          disabled={isHistory || !refreshToken || refreshing}
+          onClick={() => {
+            if (!refreshToken || isHistory || refreshingRef.current) return;
+            refreshingRef.current = true;
+            setRefreshing(true);
+            sendCardAction(
+              cardId,
+              { type: 'moduleAction', actionId: 'member.query-enrollment-status', contextToken: refreshToken },
+              { attemptRef: data.attemptRef },
+            );
+          }}
+        >
+          <ArrowClockwise size={16} weight="bold" />
+          {refreshing ? '正在刷新…' : '刷新状态'}
+        </button>
+      )}
+      {isHistory && data.state === 'pending_confirmation' && (
+        <p className="member-es__support">历史申请不可刷新，请重新查询当前会员状态</p>
+      )}
+    </section>
+  );
+}
+
+// 0.4.0 D10 评审补位：卡内"刷新状态"按钮（attemptRef 依赖卡数据）自持动作，跳过 SDK 默认按钮条
+export default markSelfRendering(MemberEnrollmentStatusCard);

package/src/client/cards/member-info/index.tsx

@@ -0,0 +1,60 @@
+/** member-info：账户状态与基础资料，不暴露厂商内部会员标识。 */
+import { CalendarBlank, Phone, Tag, UserCircle } from '@phosphor-icons/react';
+import { ImageWithFallback } from '../../components/ImageWithFallback';
+import { formatMemberDate, memberStateText } from '../view';
+import type { MemberInfoCardData } from '@tbox.cn/app-contracts-mall';
+
+export function MemberInfoCard(props: { data: MemberInfoCardData }) {
+  const { data } = props;
+  return (
+    <section className="member-card member-info">
+      <div className="member-info__head">
+        {data.avatarUrl ? (
+          <ImageWithFallback src={data.avatarUrl} alt={data.displayName ?? '会员头像'} className="member-info__avatar" size={48} />
+        ) : (
+          <div className="member-info__avatar member-info__avatar--fallback" aria-hidden="true">
+            <UserCircle size={34} weight="duotone" />
+          </div>
+        )}
+        <div className="member-info__body">
+          <span className="member-info__eyebrow">会员资料</span>
+          <div className="member-info__name-row">
+            <strong>{data.displayName ?? '会员'}</strong>
+            <span className={`member-status member-status--${data.state === 'active' ? 'active' : 'inactive'}`}>
+              {memberStateText(data.state, data.authState)}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {(data.contactDisplay || data.registeredAt) && (
+        <dl className="member-info__details">
+          {data.contactDisplay && (
+            <div>
+              <dt><Phone size={16} weight="duotone" />联系方式</dt>
+              <dd>{data.contactDisplay}</dd>
+            </div>
+          )}
+          {data.registeredAt && (
+            <div>
+              <dt><CalendarBlank size={16} weight="duotone" />入会时间</dt>
+              <dd>{formatMemberDate(data.registeredAt)}</dd>
+            </div>
+          )}
+        </dl>
+      )}
+      {data.labels.length > 0 && (
+        <div className="member-info__labels">
+          <div className="member-info__section-title"><Tag size={16} weight="duotone" />会员标签</div>
+          <div className="member-tags">
+            {data.labels.map((l) => (
+              <span key={l.labelRef}>{l.name}</span>
+            ))}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export default MemberInfoCard;

package/src/client/cards/member-login-cta/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * member-login-cta：未登录引导卡。
+ *
+ * 舞台形态：上半是商圈吉祥物站台（顶部水彩天光 + 米色纸底 + 地面光斑），撕纸边分隔，
+ * 下半留给标题与登录按钮。视觉语言取自首页活动卡——同一个角色、同一套纸质涂鸦。
+ *
+ * 只做一件事——把用户送去商场小程序的登录页。**不承诺登录之后有什么**：
+ * 会员权益要等登录后由厂商返回才知道，此刻列出来就是编造。
+ */
+import { useRef, useState } from 'react';
+import { ArrowSquareOut, WarningCircle } from '@phosphor-icons/react';
+import { sendCardAction } from '@tbox.cn/app-sdk/client';
+import type { MemberLoginCtaCardData } from '@tbox.cn/app-contracts-mall';
+
+export function MemberLoginCtaCard(props: {
+  data: MemberLoginCtaCardData;
+  cardId: string;
+  isHistory: boolean;
+}) {
+  const { data, cardId, isHistory } = props;
+  const [opening, setOpening] = useState(false);
+  const openingRef = useRef(false);
+
+  function handleLogin() {
+    // 深链为可选透传素材（schema optional）；无 URL 时不发 openLink（壳能力/门禁接管）
+    if (isHistory || openingRef.current || !data.loginUrl) return;
+    openingRef.current = true;
+    setOpening(true);
+    sendCardAction(cardId, { type: 'openLink', url: data.loginUrl });
+  }
+
+  return (
+    <section className="member-card member-login-cta">
+      <div className="member-login-cta__stage">
+        {/* 天光只铺顶部：吉祥物图自带米色底，渐变穿过它会露出矩形边界 */}
+        <span className="member-login-cta__sky" aria-hidden="true" />
+        <svg className="member-login-cta__doodle" viewBox="0 0 390 170" aria-hidden="true">
+          <path d="M50 40 l5,11 12,2 -9,9 3,12 -11,-6 -11,6 3,-12 -9,-9 12,-2 Z" />
+          <path d="M318 56 c10,-12 23,-11 29,-1 c6,10 -3,20 -12,17" />
+          <path d="M40 122 c12,-8 20,2 11,9" />
+        </svg>
+        {/* 地面光斑：把角色钉在台面上，否则它像浮在纸上 */}
+        <span className="member-login-cta__ground" aria-hidden="true" />
+        {/* 素材变量链（主题轨 T-2.3）：装饰主视觉走 CSS background，主题包经 --tbox-asset-member-mascot 覆写 */}
+        <span className="member-login-cta__mascot" aria-hidden="true" />
+        <span className="member-login-cta__grain" aria-hidden="true" />
+      </div>
+
+      {/* 撕纸边：与活动卡同一种分隔手法 */}
+      <svg className="member-login-cta__tear" viewBox="0 0 390 16" preserveAspectRatio="none" aria-hidden="true">
+        <path d="M0,16 L390,16 L390,6 L358,10 L330,4 L298,11 L266,5 L236,12 L204,6 L174,12 L144,6 L112,13 L82,7 L52,14 L24,8 L0,12 Z" />
+      </svg>
+
+      <div className="member-login-cta__body">
+        <h4>{data.title ?? '登录后继续'}</h4>
+        {/* 说明文案统一：各触发场景的理由大同小异，按场景注入只会变成没人写的字段 */}
+        <p className="member-login-cta__reason">登录后可解锁全部功能</p>
+
+        <button
+          type="button"
+          className="member-login-cta__btn"
+          disabled={isHistory || opening || !data.loginUrl}
+          onClick={handleLogin}
+          aria-label={data.loginUrl ? '前往登录' : '登录暂不可用（请联系商场客服）'}
+        >
+          {opening ? '正在打开商场小程序…' : data.loginUrl ? '立即登录' : '暂不可用（请联系商场客服）'}
+          {/* 有 URL 才暗示可跳转；无 URL（壳能力接管/未配置深链）用警示图标传达“不可点” */}
+          {data.loginUrl ? (
+            <ArrowSquareOut size={18} weight="bold" aria-hidden="true" />
+          ) : (
+            <WarningCircle size={18} weight="fill" aria-hidden="true" />
+          )}
+        </button>
+        <p className="member-login-cta__hint">登录在商场小程序内完成，完成后回到这里继续</p>
+        {isHistory && <p className="member-login-cta__history">历史卡片不可重复操作</p>}
+      </div>
+    </section>
+  );
+}
+
+export default MemberLoginCtaCard;

package/src/client/cards/member-point-usage-list/index.tsx

@@ -0,0 +1,53 @@
+/** member-point-usage-list：积分账户余额与真实流水。 */
+import { ArrowDownRight, ArrowUpRight, Coins } from '@phosphor-icons/react';
+import { formatMemberDate, pointAmountClass } from '../view';
+import type { MemberPointUsageListCardData } from '@tbox.cn/app-contracts-mall';
+
+export function MemberPointUsageListCard(props: { data: MemberPointUsageListCardData }) {
+  const { data } = props;
+  return (
+    <section className="member-card member-point-usage">
+      <header className="member-pu__head">
+        <div className="member-pu__head-icon"><Coins size={22} weight="duotone" /></div>
+        <div>
+          <span>积分账户</span>
+          <strong>我的积分</strong>
+        </div>
+        {data.membershipLabel && <em>{data.membershipLabel}</em>}
+      </header>
+      <div className="member-pu__metric">
+        <b>{String(data.balance)}</b>
+        <span>积分</span>
+      </div>
+
+      <div className="member-pu__section-title">
+        <strong>最近积分记录</strong>
+        <span>共 {data.total ?? data.items.length} 条</span>
+      </div>
+      {data.items.length > 0 ? (
+        <ul className="member-pu__list">
+          {data.items.map((u) => {
+            const isSpend = u.amount.startsWith('-');
+            const Icon = isSpend ? ArrowUpRight : ArrowDownRight;
+            return (
+              <li key={u.usageRecordRef} className="member-pu__row">
+                <span className={`member-pu__flow-icon member-pu__flow-icon--${isSpend ? 'spend' : 'income'}`}>
+                  <Icon size={16} weight="bold" />
+                </span>
+                <span className="member-pu__copy">
+                  <strong>{u.title}</strong>
+                  {u.usedAt && <small>{formatMemberDate(u.usedAt)}</small>}
+                </span>
+                <b className={pointAmountClass(u.amount)}>{u.amount}</b>
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <p className="member-pu__empty">暂无积分记录</p>
+      )}
+    </section>
+  );
+}
+
+export default MemberPointUsageListCard;

package/src/client/cards/view.ts

@@ -0,0 +1,39 @@
+/**
+ * member 展示纯函数（0.4.0 D6：状态文案/金额色/图标映射，可单测；券面函数 0.4.0 净删——promotion 承接）。
+ */
+/** 积分流水金额类：负支出 → 红（--tbox-primary），正收入 → 绿（--tbox-success） */
+export function pointAmountClass(amount: string): 'member-pu__amount--spend' | 'member-pu__amount--income' {
+  return amount.startsWith('-') ? 'member-pu__amount--spend' : 'member-pu__amount--income';
+}
+
+export function formatMemberDate(value?: string): string {
+  if (!value) return '';
+  const match = /^(\d{4})-(\d{2})-(\d{2})/u.exec(value);
+  return match ? `${match[1]}.${match[2]}.${match[3]}` : value;
+}
+
+export function enrollmentStateText(state: string): string {
+  switch (state) {
+    case 'active':
+      return '入会成功';
+    case 'pending_confirmation':
+      return '厂商确认中';
+    case 'confirmation_timeout':
+      return '确认超时';
+    default:
+      return '未完成';
+  }
+}
+
+export function enrollmentTone(state: string): 'success' | 'warning' | 'neutral' {
+  if (state === 'active') return 'success';
+  if (state === 'pending_confirmation') return 'warning';
+  return 'neutral';
+}
+
+export function memberStateText(state: string, authState?: string): string {
+  if (state === 'active') return '已入会';
+  if (state === 'closed') return '已注销';
+  if (state === 'unknown') return authState === 'unauthenticated' ? '未登录' : '状态待确认';
+  return '未入会';
+}

package/src/client/components/ImageWithFallback.tsx

@@ -0,0 +1,38 @@
+/**
+ * 图片 + 加载失败占位（0.4.0 D6：模块自持 ~20 行，禁跨模块依赖/基元封顶不破）。
+ * 源：POC shopping-guide 占位语义。src 缺省或加载失败 → 图标占位。
+ */
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { ImageSquare } from '@phosphor-icons/react';
+
+export function ImageWithFallback(props: {
+  src?: string;
+  alt: string;
+  className?: string;
+  /** 占位区尺寸（px，图标随比例缩小） */
+  size?: number;
+  loading?: 'eager' | 'lazy';
+  /** 业务域可传入更贴合场景的正式图标；缺省仍使用通用图片占位。 */
+  fallback?: ReactNode;
+}) {
+  const { src, alt, className, size = 40, loading = 'lazy', fallback } = props;
+  const [failed, setFailed] = useState(false);
+  if (!src || failed) {
+    return (
+      <div className={`img-fallback ${className ?? ''}`.trim()} aria-label={alt} role="img">
+        {fallback ?? <ImageSquare weight="duotone" size={Math.round(size * 0.45)} />}
+      </div>
+    );
+  }
+  return (
+    <img
+      className={className}
+      src={src}
+      alt={alt}
+      loading={loading}
+      referrerPolicy="no-referrer"
+      onError={() => setFailed(true)}
+    />
+  );
+}

package/src/client/index.ts

@@ -1,26 +1,28 @@
 /**
  * module-member 客户端入口（与服务端 serverModule 对称）。
  */
+import './styles/member.css'; // 0.4.0 D1：模块自持 CSS（副作用 import，首行保证先行加载）
+
 import type { CardComponent } from '@tbox.cn/app-contracts';
 import type { ClientContext, ClientModule } from '@tbox.cn/app-sdk/client';
 import {
   MemberInfoCard,
   MemberCardSummaryCard,
-  MemberCouponListCard,
-  MemberCouponDetailCard,
   MemberPointUsageListCard,
   MemberEnrollmentFormCard,
   MemberEnrollmentStatusCard,
+  MemberEnrollmentCtaCard,
+  MemberLoginCtaCard,
 } from './cards';
 
 const cards = {
   'member-info': MemberInfoCard as CardComponent,
   'member-card-summary': MemberCardSummaryCard as CardComponent,
-  'member-coupon-list': MemberCouponListCard as CardComponent,
-  'member-coupon-detail': MemberCouponDetailCard as CardComponent,
   'member-point-usage-list': MemberPointUsageListCard as CardComponent,
   'member-enrollment-form': MemberEnrollmentFormCard as CardComponent,
   'member-enrollment-status': MemberEnrollmentStatusCard as CardComponent,
+  'member-enrollment-cta': MemberEnrollmentCtaCard as CardComponent,
+  'member-login-cta': MemberLoginCtaCard as CardComponent,
 } as const;
 
 export const clientModule = {