dukang/apps/mini-user/src/pages/redeem-success/index.tsx

import { useMemo, useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';
import { request, toast } from '../../lib/api';

const LAST_REDEEM_RESULT_KEY = 'lastRedeemResult';

type RedeemRecord = {
  id: string;
  redeemNo: string;
  amount: number;
  storeId: string;
  storeName: string;
  createdAt: string;
};

function formatMoney(amount: number) {
  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function StarRating({
  label,
  value,
  onChange,
}: {
  label: string;
  value: number;
  onChange: (score: number) => void;
}) {
  return (
    <View className="redeem-rating-row">
      <Text className="redeem-rating-label">{label}</Text>
      <View className="redeem-star-row">
        {[1, 2, 3, 4, 5].map((score) => (
          <Text
            key={score}
            className={`redeem-star-btn${score <= value ? ' redeem-star-btn--active' : ''}`}
            onClick={() => onChange(score)}
          >
            ★
          </Text>
        ))}
      </View>
    </View>
  );
}

export default function RedeemSuccessPage() {
  const router = useRouter();
  const [serviceScore, setServiceScore] = useState(5);
  const [envScore, setEnvScore] = useState(5);
  const [loading, setLoading] = useState(false);

  const record = useMemo<RedeemRecord | null>(() => {
    try {
      const cached = Taro.getStorageSync(LAST_REDEEM_RESULT_KEY);
      return cached ? (JSON.parse(String(cached)) as RedeemRecord) : null;
    } catch {
      return null;
    }
  }, []);

  const amount = Number(record?.amount ?? router.params.amount ?? 0);
  const storeName = record?.storeName || '门店';
  const redeemNo = record?.redeemNo || '—';
  const redeemedAt = record?.createdAt
    ? new Date(record.createdAt).toLocaleString('zh-CN')
    : new Date().toLocaleString('zh-CN');

  function clearCache() {
    try {
      Taro.removeStorageSync(LAST_REDEEM_RESULT_KEY);
    } catch {
      /* ignore */
    }
  }

  function goBenefit() {
    clearCache();
    Taro.switchTab({ url: '/pages/benefit/index' });
  }

  function goHome() {
    clearCache();
    Taro.switchTab({ url: '/pages/home/index' });
  }

  async function submitRatingAndFinish() {
    setLoading(true);
    try {
      if (record?.id) {
        await request('/redeem/ratings', {
          method: 'POST',
          data: {
            redeemRecordId: record.id,
            serviceScore,
            envScore,
          },
        });
        toast('评价已提交', 'success');
      }
    } catch {
      /* 评价失败不阻塞返回 */
    } finally {
      setLoading(false);
      goBenefit();
    }
  }

  return (
    <PageShell variant="sub" className="redeem-success-page">
      <SubPageHeader title="核销成功" onBack={goBenefit} />
      <View className="sub-page-body">
        <View className="redeem-success-icon">
          <Text>✓</Text>
        </View>
        <Text className="redeem-success-title">核销成功</Text>
        <Text className="redeem-success-amount">¥ {formatMoney(amount)}</Text>
        <Text className="redeem-success-desc">已在 {storeName} 完成核销</Text>

        <View className="redeem-success-details">
          <View className="redeem-success-detail-row">
            <Text>核销门店</Text>
            <Text>{storeName}</Text>
          </View>
          <View className="redeem-success-detail-row">
            <Text>核销时间</Text>
            <Text>{redeemedAt}</Text>
          </View>
          <View className="redeem-success-detail-row">
            <Text>核销单号</Text>
            <Text className="redeem-success-mono">{redeemNo}</Text>
          </View>
        </View>

        <View className="redeem-success-rating">
          <Text className="redeem-success-rating-title">为门店服务评分</Text>
          <StarRating label="服务态度" value={serviceScore} onChange={setServiceScore} />
          <StarRating label="用餐环境" value={envScore} onChange={setEnvScore} />
        </View>

        <View
          className={`redeem-submit${loading ? ' redeem-submit--disabled' : ''}`}
          onClick={() => {
            if (!loading) void submitRatingAndFinish();
          }}
        >
          <Text>{loading ? '提交中…' : '提交评价并返回'}</Text>
        </View>
        <View className="redeem-cancel-btn" onClick={goHome}>
          <Text>回到首页</Text>
        </View>
      </View>
    </PageShell>
  );
}