微信小程序上传

apps/mini-user/src/components/CouponBadge.tsx

@@ -0,0 +1,16 @@
+import { Text } from '@tarojs/components';
+
+type CouponBadgeProps = {
+  amount: number | string;
+  label?: string;
+};
+
+/** Taro 友好版权益角标（对齐 shared-ui CouponBadge） */
+export default function CouponBadge({ amount, label = '好客权益' }: CouponBadgeProps) {
+  return (
+    <Text className="coupon-badge">
+      ¥{amount}
+      {label}
+    </Text>
+  );
+}

apps/mini-user/src/components/TabMainHeader.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { View, Text } from '@tarojs/components';
+
+type TabMainHeaderProps = {
+  title: string;
+  extra?: ReactNode;
+};
+
+export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
+  return (
+    <View className="tab-main-header">
+      <Text className="tab-main-header__title">{title}</Text>
+      {extra ? <View className="tab-main-header__extra">{extra}</View> : null}
+    </View>
+  );
+}

apps/mini-user/src/components/UserTabBar.css

@@ -0,0 +1,44 @@
+.u-tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
+  background: var(--color-card, #fff);
+  border-top: 1px solid rgba(226, 190, 188, 0.3);
+  box-shadow: var(--shadow-tabbar, 0 -4px 20px rgba(0, 0, 0, 0.06));
+  box-sizing: border-box;
+}
+
+.u-tabbar__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 8px;
+  color: var(--color-subtle-gray, #999);
+}
+
+.u-tabbar__item--active {
+  color: var(--color-heritage-red, #a61d24);
+}
+
+.u-tabbar__icon {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+.u-tabbar__label {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+}

apps/mini-user/src/components/UserTabBar.tsx

@@ -0,0 +1,86 @@
+import { View, Text, Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './UserTabBar.css';
+
+import iconHome from '../assets/tabbar/home.png';
+import iconHomeActive from '../assets/tabbar/home-active.png';
+import iconStore from '../assets/tabbar/store.png';
+import iconStoreActive from '../assets/tabbar/store-active.png';
+import iconBenefit from '../assets/tabbar/benefit.png';
+import iconBenefitActive from '../assets/tabbar/benefit-active.png';
+import iconMine from '../assets/tabbar/mine.png';
+import iconMineActive from '../assets/tabbar/mine-active.png';
+
+export const USER_TABS = [
+  {
+    pagePath: '/pages/home/index',
+    text: '首页',
+    icon: iconHome,
+    iconActive: iconHomeActive,
+  },
+  {
+    pagePath: '/pages/stores/index',
+    text: '门店',
+    icon: iconStore,
+    iconActive: iconStoreActive,
+  },
+  {
+    pagePath: '/pages/benefit/index',
+    text: '好客权益',
+    icon: iconBenefit,
+    iconActive: iconBenefitActive,
+  },
+  {
+    pagePath: '/pages/mine/index',
+    text: '我的',
+    icon: iconMine,
+    iconActive: iconMineActive,
+  },
+] as const;
+
+type UserTabBarProps = {
+  selected: number;
+};
+
+/** C 端底栏：本地 PNG 图标（weapp 无法加载 Material 字体） */
+export default function UserTabBar({ selected }: UserTabBarProps) {
+  return (
+    <View className="u-tabbar">
+      {USER_TABS.map((tab, index) => {
+        const active = selected === index;
+        return (
+          <View
+            key={tab.pagePath}
+            className={`u-tabbar__item${active ? ' u-tabbar__item--active' : ''}`}
+            onClick={() => {
+              if (!active) Taro.switchTab({ url: tab.pagePath });
+            }}
+          >
+            <Image
+              className="u-tabbar__icon"
+              src={active ? tab.iconActive : tab.icon}
+              mode="aspectFit"
+            />
+            <Text className="u-tabbar__label">{tab.text}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/** weapp custom-tab-bar 选中态同步；H5 无 getTabBar 时忽略 */
+export function syncTabBarSelected(index: number) {
+  try {
+    const page = Taro.getCurrentInstance().page as
+      | { getTabBar?: () => { setSelected?: (i: number) => void } }
+      | undefined;
+    page?.getTabBar?.()?.setSelected?.(index);
+  } catch {
+    /* ignore */
+  }
+}
+
+export function shouldRenderPageTabBar(): boolean {
+  return process.env.TARO_ENV === 'h5';
+}