小程序端核销权益输入框限制

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { View, Text } from '@tarojs/components';
 import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
 import PageShell from '../../components/PageShell';
@@ -35,17 +35,18 @@ function usagePercent(coupon: CouponItem) {
 
 export default function BenefitPage() {
   const metrics = useNavBarMetrics();
-  const loggedIn = isLoggedIn();
+  const [loggedIn, setLoggedIn] = useState(() => isLoggedIn());
   const [summary, setSummary] = useState<BenefitSummary | null>(null);
   const [coupons, setCoupons] = useState<CouponItem[]>([]);
   const [tab, setTab] = useState<'available' | 'history'>('available');
 
-  useDidShow(() => {
-    syncTabBarSelected(2);
-  });
+  const resetGuestState = useCallback(() => {
+    setSummary(null);
+    setCoupons([]);
+  }, []);
 
   const loadBenefit = useCallback(() => {
-    if (!loggedIn) return Promise.resolve();
+    if (!isLoggedIn()) return Promise.resolve();
     return Promise.all([
       request<BenefitSummary>('/benefit/summary'),
       request<CouponItem[]>('/benefit/coupons'),
@@ -55,13 +56,27 @@ export default function BenefitPage() {
         setCoupons(Array.isArray(list) ? list : []);
       })
       .catch((e) => toast(e instanceof Error ? e.message : '加载失败'));
-  }, [loggedIn]);
+  }, []);
 
-  useEffect(() => {
+  useDidShow(() => {
+    syncTabBarSelected(2);
+    const loggedInNow = isLoggedIn();
+    setLoggedIn(loggedInNow);
+    if (loggedInNow) {
       void loadBenefit();
-  }, [loadBenefit]);
+    } else {
+      resetGuestState();
+    }
+  });
 
   usePullDownRefresh(() => {
+    const loggedInNow = isLoggedIn();
+    setLoggedIn(loggedInNow);
+    if (!loggedInNow) {
+      resetGuestState();
+      Taro.stopPullDownRefresh();
+      return;
+    }
     void loadBenefit().finally(() => Taro.stopPullDownRefresh());
   });
 

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

@@ -17,7 +17,12 @@ function formatMoney(amount: number) {
   return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
 
-/** 核销金额输入：最多两位小数；去掉前导 0；禁止非法字符 */
+/**
+ * 核销金额输入清洗：
+ * - 只保留数字与一个小数点
+ * - 小数最多 2 位（再输入会被截断）
+ * - 去掉多余前导 0
+ */
 function sanitizeRedeemAmountInput(raw: string): string {
   let next = String(raw ?? '').replace(/[^\d.]/g, '');
   if (!next) return '';
@@ -28,19 +33,18 @@ function sanitizeRedeemAmountInput(raw: string): string {
     const decRaw = next
       .slice(firstDot + 1)
       .replace(/\D/g, '')
-      .replace(/\./g, '')
       .slice(0, 2);
     const intPart = intRaw.replace(/^0+(?=\d)/, '') || '0';
-    // 正在输入小数点或小数位时保留点
-    if (decRaw.length > 0 || next.endsWith('.')) {
+    if (next.endsWith('.') && decRaw.length === 0) {
+      return `${intPart}.`;
+    }
+    if (decRaw.length > 0) {
       return `${intPart}.${decRaw}`;
     }
     return intPart;
   }
 
-  // 纯整数：忽略前导 0（保留单个 0）
-  next = next.replace(/^0+(?=\d)/, '');
-  return next;
+  return next.replace(/^0+(?=\d)/, '');
 }
 
 export default function RedeemPage() {
@@ -50,6 +54,8 @@ export default function RedeemPage() {
   const [balance, setBalance] = useState(0);
   const [couponBalance, setCouponBalance] = useState<number | null>(null);
   const [amount, setAmount] = useState(() => sanitizeRedeemAmountInput(initialAmount));
+  /** 原生 input 在截断小数后偶发不同步，强制 remount 对齐受控值 */
+  const [inputKey, setInputKey] = useState(0);
   const [loading, setLoading] = useState(false);
 
   const redeemableMax = couponId ? (couponBalance ?? 0) : balance;
@@ -80,10 +86,16 @@ export default function RedeemPage() {
   function fillMaxAmount() {
     if (redeemableMax < MIN_REDEEM_AMOUNT) return;
     setAmount(sanitizeRedeemAmountInput(redeemableMax.toFixed(2)));
+    setInputKey((k) => k + 1);
   }
 
   function onAmountChange(raw: string) {
-    setAmount(sanitizeRedeemAmountInput(raw));
+    const next = sanitizeRedeemAmountInput(raw);
+    setAmount(next);
+    // 用户试图输入超过两位小数 / 非法字符时，强制刷新原生框显示
+    if (next !== raw) {
+      setInputKey((k) => k + 1);
+    }
   }
 
   async function submit() {
@@ -130,11 +142,13 @@ export default function RedeemPage() {
         </View>
         <View className="redeem-input-wrap">
           <Input
+            key={inputKey}
             className="redeem-input"
             type="digit"
             placeholder="输入核销金额"
             placeholderClass="redeem-input-placeholder"
             value={amount}
+            maxlength={12}
             onInput={(e) => onAmountChange(e.detail.value)}
             onBlur={(e) => onAmountChange(e.detail.value)}
             style={{ textAlign: 'center' }}
@@ -150,7 +164,7 @@ export default function RedeemPage() {
         </View>
         <View className="redeem-tips">
           <Text className="redeem-tips-text">
-            核销金额最低 0.01 元，且不超过可用权益余额。核销码有效期 3 分钟，请到店出示给收银员扫码。
+            核销金额最低 0.01 元，小数最多两位。不超过可用权益余额。核销码有效期 3 分钟，请到店出示给收银员扫码。
           </Text>
         </View>
         <View