用户端调整

2.首页商品详情增加点击区域
3.浓香型 酱香型 点击增加提示：暂未开放
5.首页餐券2字更换为“好客权益”
6.门店页面地址筛选功能 （三级菜单，省市区）
7.好客权益：去使用点击交互调整为核销页面，单张好客权益点击核销页面带参数和金额
7.核销金额限制为可用余额最大数，不是500
9.收货地址电话号码增加校验，长度限制，地址或者未填提示，地区调整为省市区三级菜单
10.微信授权位置调整在手机验证码下侧

apps/h5-user/src/pages/BenefitPage.tsx

@@ -34,6 +34,15 @@ function usagePercent(coupon: CouponItem) {
   return Math.min(100, Math.round((Number(coupon.usedAmount) / total) * 100));
 }
 
+function buildRedeemUrl(coupon?: CouponItem) {
+  if (!coupon) return '/redeem';
+  const params = new URLSearchParams({
+    couponId: coupon.id,
+    amount: String(coupon.balance),
+  });
+  return `/redeem?${params.toString()}`;
+}
+
 export default function BenefitPage() {
   const navigate = useNavigate();
   const listRef = useRef<HTMLElement>(null);
@@ -71,6 +80,10 @@ export default function BenefitPage() {
     listRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
 
+  function goRedeem(coupon?: CouponItem) {
+    navigate(buildRedeemUrl(coupon));
+  }
+
   return (
     <div className="benefit-page">
       <header className="benefit-header">
@@ -110,8 +123,8 @@ export default function BenefitPage() {
         </section>
 
         <section className="benefit-action">
-          <button type="button" className="benefit-use-btn" onClick={() => navigate('/stores')}>
-            <span className="material-symbols-outlined filled">storefront</span>
+          <button type="button" className="benefit-use-btn" onClick={() => goRedeem()}>
+            <span className="material-symbols-outlined filled">qr_code_2</span>
             去使用
           </button>
         </section>
@@ -136,7 +149,21 @@ export default function BenefitPage() {
         {visible.length > 0 ? (
           <div className="benefit-list">
             {visible.map((c) => (
-              <article key={c.id} className="benefit-card">
+              <article
+                key={c.id}
+                className={`benefit-card${tab === 'available' && c.balance > 0 ? ' benefit-card--clickable' : ''}`}
+                role={tab === 'available' && c.balance > 0 ? 'button' : undefined}
+                tabIndex={tab === 'available' && c.balance > 0 ? 0 : undefined}
+                onClick={() => {
+                  if (tab === 'available' && c.balance > 0) goRedeem(c);
+                }}
+                onKeyDown={(e) => {
+                  if (tab === 'available' && c.balance > 0 && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    goRedeem(c);
+                  }
+                }}
+              >
                 <div className="benefit-card-inner">
                   <div className="benefit-card-value">
                     <span className="benefit-card-value-label">好客权益</span>
@@ -167,16 +194,25 @@ export default function BenefitPage() {
                       </div>
                     </div>
                     <div className="benefit-card-foot">
-                      <Link to={`/benefit/${c.id}`} className="benefit-card-no">
+                      <Link
+                        to={`/benefit/${c.id}`}
+                        className="benefit-card-no"
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {formatCouponNo(c.couponNo)}
                       </Link>
-                      <button
-                        type="button"
-                        className="benefit-card-redeem"
-                        onClick={() => navigate('/redeem')}
-                      >
-                        立即核销
-                      </button>
+                      {tab === 'available' && c.balance > 0 && (
+                        <button
+                          type="button"
+                          className="benefit-card-redeem"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            goRedeem(c);
+                          }}
+                        >
+                          立即核销
+                        </button>
+                      )}
                     </div>
                   </div>
                 </div>