项目制作

app/(tabs)/box.tsx

@@ -2,16 +2,16 @@ import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
-  ActivityIndicator,
-  FlatList,
-  ImageBackground,
-  RefreshControl,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
+    ActivityIndicator,
+    FlatList,
+    ImageBackground,
+    RefreshControl,
+    StatusBar,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -169,12 +169,20 @@ export default function BoxScreen() {
 
   const renderHeader = () => (
     <View>
-      {/* 顶部主图 */}
-      <Image
-        source={{ uri: Images.box.awardMainImg }}
-        style={styles.mainImage}
-        contentFit="contain"
-      />
+      {/* 占位空间 - 给顶部搜索栏留出空间 */}
+      <View style={{ height: 53 }} />
+
+      {/* 顶部主图 - 绝对定位，叠在背景上 */}
+      <View style={styles.mainImageContainer}>
+        <Image
+          source={{ uri: Images.box.awardMainImg }}
+          style={styles.mainImage}
+          contentFit="contain"
+        />
+      </View>
+
+      {/* 占位空间 - 主图高度 */}
+      <View style={{ height: 300 }} />
 
       {/* 弹幕区域 */}
       {barrageList.length > 0 && (
@@ -253,7 +261,7 @@ export default function BoxScreen() {
     <View style={styles.container}>
       <StatusBar barStyle="light-content" />
       <ImageBackground
-        source={{ uri: Images.common.awardBg }}
+        source={{ uri: Images.common.indexBg }}
         style={styles.background}
         resizeMode="cover"
       >
@@ -316,6 +324,8 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   header: {
+    position: 'relative',
+    zIndex: 11,
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 15,
@@ -346,10 +356,18 @@ const styles = StyleSheet.create({
     fontSize: 12,
     padding: 0,
   },
-  mainImage: {
+  mainImageContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    zIndex: 2,
     width: '100%',
     height: 395,
   },
+  mainImage: {
+    width: '100%',
+    height: '100%',
+  },
   typeSection: {
     flexDirection: 'row',
     alignItems: 'center',

app/(tabs)/mine.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { MenuCell } from '@/components/mine/MenuCell';
 import { Images } from '@/constants/images';
 import { getMagicIndex } from '@/services/award';
 import { getParamConfig, getUserInfo, UserInfo } from '@/services/user';
@@ -33,6 +34,7 @@ export default function MineScreen() {
   const [inviteShow, setInviteShow] = useState(false);
   const [showCredit, setShowCredit] = useState(false);
   const [filingInfo, setFilingInfo] = useState<{ state: number; data: string } | null>(null);
+  const [showWallet, setShowWallet] = useState(false);
 
   const loadData = useCallback(async () => {
     try {
@@ -56,6 +58,10 @@ export default function MineScreen() {
       if (filingConfig) {
         setFilingInfo({ state: filingConfig.state, data: filingConfig.data });
       }
+
+      // 获取钱包显示配置
+      const walletConfig = await getParamConfig('wallet_recharge_show');
+      setShowWallet(walletConfig?.state === 1);
     } catch (error) {
       console.error('获取数据失败:', error);
     }
@@ -88,6 +94,39 @@ export default function MineScreen() {
     }
   };
 
+  const handleMenuItemPress = (type: string) => {
+    if (!userInfo && type !== '4_4') {
+      router.push('/login' as any);
+      return;
+    }
+
+    switch (type) {
+      case '1_1': // 钱包
+        router.push('/wallet' as any);
+        break;
+      case '2_0': // 全部订单
+        router.push('/orders' as any);
+        break;
+      case '6_1': // 兑换码
+        Alert.alert('提示', '兑换码功能');
+        break;
+      case '4_4': // 联系客服
+        Alert.alert('联系客服', '客服时间：10:00 ~ 18:00');
+        break;
+      case '4_3': // 地址
+        router.push('/address' as any);
+        break;
+      case '4_9': // 意见反馈
+        Alert.alert('提示', '意见反馈功能');
+        break;
+      case '4_5': // 设置
+        Alert.alert('提示', '设置功能');
+        break;
+      default:
+        break;
+    }
+  };
+
   const showNumber = (key: keyof IndexData) => {
     if (!indexData) return '-';
     const val = indexData[key];
@@ -247,6 +286,11 @@ export default function MineScreen() {
             </View>
           </ImageBackground>
 
+          {/* 菜单列表 */}
+          <View style={styles.menuSection}>
+            <MenuCell onItemPress={handleMenuItemPress} showWallet={showWallet} />
+          </View>
+
           {/* 备案信息 */}
           {filingInfo && filingInfo.state !== 0 && (
             <View style={styles.filingBox}>
@@ -428,4 +472,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: 'center',
   },
+  menuSection: {
+    backgroundColor: '#fff',
+    marginHorizontal: 8,
+    marginTop: 10,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
 });

components/mine/MenuCell.tsx

@@ -0,0 +1,122 @@
+import { Image } from 'expo-image';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { Images } from '@/constants/images';
+
+interface MenuItem {
+  icon: string;
+  title: string;
+  type: string;
+  tip?: string;
+}
+
+interface MenuCellProps {
+  onItemPress: (type: string) => void;
+  showWallet?: boolean;
+}
+
+export function MenuCell({ onItemPress, showWallet = false }: MenuCellProps) {
+  const menuList: MenuItem[] = [
+    ...(showWallet
+      ? [
+          {
+            icon: Images.mine.wallet || '',
+            title: '钱包',
+            type: '1_1',
+          },
+        ]
+      : []),
+    {
+      icon: Images.mine.kaixinOrders || '',
+      title: '全部订单',
+      type: '2_0',
+    },
+    {
+      icon: Images.mine.exchangeIcon || '',
+      title: '兑换码',
+      tip: '10:00 ~ 18:00',
+      type: '6_1',
+    },
+    {
+      icon: Images.mine.customerService || '',
+      title: '联系客服',
+      tip: '10:00 ~ 18:00',
+      type: '4_4',
+    },
+    {
+      icon: Images.mine.address || '',
+      title: '地址',
+      type: '4_3',
+    },
+    {
+      icon: Images.mine.opinion || '',
+      title: '意见反馈',
+      type: '4_9',
+    },
+    {
+      icon: Images.mine.setting || '',
+      title: '设置',
+      type: '4_5',
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      {menuList.map((item, index) => (
+        <TouchableOpacity
+          key={index}
+          style={styles.menuItem}
+          onPress={() => onItemPress(item.type)}
+          activeOpacity={0.7}
+        >
+          <View style={styles.content}>
+            <Image source={{ uri: item.icon }} style={styles.icon} contentFit="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+          </View>
+          <View style={styles.arrow}>
+            <Text style={styles.arrowText}>›</Text>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 6,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 55,
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0.5,
+    borderBottomColor: 'rgba(221,221,221,0.5)',
+    paddingHorizontal: 15,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '350',
+    color: '#000',
+  },
+  arrow: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowText: {
+    fontSize: 20,
+    color: '#444',
+  },
+});

constants/images.ts

@@ -155,8 +155,15 @@ export const Images = {
     kaixinintegral: `${CDN_BASE}/mine/kaixinintegral.png`,
     message: `${CDN_BASE}/mine/message.png`,
     kaixinorder: `${CDN_BASE}/mine/kaixinorder.png`,
+    kaixinOrders: `${CDN_BASE}/mine/kaixinOrders.png`,
     order1: `${CDN_BASE}/mine/order1.png`,
     order2: `${CDN_BASE}/mine/order2.png`,
+    wallet: `${CDN_BASE}/mine/wallet.png`,
+    exchangeIcon: `${CDN_BASE}/mine/exchangeIcon.png`,
+    customerService: `${CDN_BASE}/mine/customerService.png`,
+    address: `${CDN_BASE}/mine/address.png`,
+    opinion: `${CDN_BASE}/mine/opinion.png`,
+    setting: `${CDN_BASE}/mine/setting.png`,
   },
   // 地址相关
   address: {