小程序二维码功能

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

@@ -11,11 +11,20 @@ type BenefitSummary = {
   maxRedeemAmount: number;
 };
 
+function formatMoney(amount: number) {
+  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
 export default function RedeemPage() {
   const router = useRouter();
+  const couponId = router.params.couponId;
   const initialAmount = router.params.amount ?? '';
   const [balance, setBalance] = useState(0);
+  const [couponBalance, setCouponBalance] = useState<number | null>(null);
   const [amount, setAmount] = useState(initialAmount);
+  const [loading, setLoading] = useState(false);
+
+  const redeemableMax = couponId ? (couponBalance ?? 0) : balance;
 
   useEffect(() => {
     if (!isLoggedIn()) {
@@ -27,19 +36,52 @@ export default function RedeemPage() {
       .catch(() => {});
   }, []);
 
-  function submit() {
-    const value = Number(amount);
+  useEffect(() => {
+    if (!couponId) {
+      setCouponBalance(null);
+      return;
+    }
+    request<Array<{ id: string; balance: number }>>('/benefit/coupons')
+      .then((list) => {
+        const found = list.find((c) => String(c.id) === couponId);
+        if (found) setCouponBalance(Number(found.balance));
+      })
+      .catch(() => {});
+  }, [couponId]);
+
+  function fillMaxAmount() {
+    if (redeemableMax <= 0) return;
+    setAmount(String(redeemableMax));
+  }
+
+  async function submit() {
+    const value = Math.round(Number(amount) * 100) / 100;
     if (!(value > 0)) {
       toast('请输入核销金额');
       return;
     }
-    if (value > balance && balance > 0) {
-      toast('超出可用余额');
+    if (value > redeemableMax) {
+      toast(couponId ? '核销金额不能超过该权益可用余额' : '超出可用余额');
       return;
     }
-    Taro.navigateTo({
-      url: `/pages/redeem-code/index?amount=${value}`,
-    });
+
+    setLoading(true);
+    try {
+      const body: { amount: number; couponId?: string } = { amount: value };
+      if (couponId) body.couponId = couponId;
+
+      const data = await request<{ token: string; amount: number }>('/redeem/tokens', {
+        method: 'POST',
+        data: body,
+      });
+      Taro.navigateTo({
+        url: `/pages/redeem-code/index?token=${encodeURIComponent(data.token)}&amount=${data.amount}`,
+      });
+    } catch (e) {
+      toast(e instanceof Error ? e.message : '生成失败');
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -47,8 +89,12 @@ export default function RedeemPage() {
       <SubPageHeader title="权益核销" />
       <View className="sub-page-body">
         <View className="redeem-hero">
-          <Text className="redeem-hero-label">可用余额</Text>
-          <Text className="redeem-hero-amount">¥{balance.toFixed(2)}</Text>
+          <Text className="redeem-hero-label">
+            {couponId ? '当前权益可用余额' : '可用余额'}
+          </Text>
+          <Text className="redeem-hero-amount">
+            ¥{redeemableMax > 0 ? formatMoney(redeemableMax) : '--'}
+          </Text>
         </View>
         <View className="redeem-input-wrap">
           <Input
@@ -59,11 +105,22 @@ export default function RedeemPage() {
             onInput={(e) => setAmount(e.detail.value)}
           />
         </View>
+        <View className="redeem-amount-foot">
+          <Text className="redeem-tips" style={{ margin: 0 }}>
+            最高可核销 ¥{formatMoney(redeemableMax)}
+          </Text>
+          <Text className="redeem-fill-max" onClick={fillMaxAmount}>
+            全部核销
+          </Text>
+        </View>
         <Text className="redeem-tips">
           直接核销：金额须大于 0 且不超过全部可用权益余额。核销码有效期 3 分钟，请到店出示。
         </Text>
-        <View className="redeem-submit" onClick={submit}>
-          <Text>生成核销码</Text>
+        <View
+          className={`redeem-submit${loading || redeemableMax <= 0 ? ' redeem-submit--disabled' : ''}`}
+          onClick={loading || redeemableMax <= 0 ? undefined : submit}
+        >
+          <Text>{loading ? '生成中...' : '生成核销码'}</Text>
         </View>
       </View>
     </PageShell>