无限赏规则页面修复

app/award-detail/components/RuleModal.tsx

@@ -1,6 +1,7 @@
 import { Image } from 'expo-image';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import {
+    Dimensions,
     ImageBackground,
     Modal,
     ScrollView,
@@ -13,6 +14,8 @@ import {
 import { Images } from '@/constants/images';
 import { getParamConfig } from '@/services/user';
 
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
 export interface RuleModalRef {
   show: () => void;
   close: () => void;
@@ -32,9 +35,16 @@ export const RuleModal = forwardRef<RuleModalRef>((_, ref) => {
 
   const loadRules = async () => {
     try {
-      const res = await getParamConfig('show_rule');
-      // 去除HTML标签
-      const text = res?.data?.replace(/<[^>]+>/g, '') || '平台发货零门槛，全国统一运费15元/单，满五件享快递包邮服务，默认5个工作日内完成发货。';
+      const res = await getParamConfig('baoxiang_rule');
+      // 增强清洗：移除 style/script，去除 HTML 标签，并压缩多余空行
+      const rawData = res?.data || '';
+      const text = rawData
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+        .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/\n\s*\n/g, '\n') // 将多个空行压缩为一个
+        .trim() || '平台发货零门槛，全国统一运费15元/单，满五件享快递包邮服务，默认5个工作日内完成发货。';
       setRules(text);
     } catch (error) {
       console.error('加载规则失败:', error);
@@ -50,11 +60,6 @@ export const RuleModal = forwardRef<RuleModalRef>((_, ref) => {
     <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
       <View style={styles.overlay}>
         <View style={styles.container}>
-          {/* 关闭按钮 */}
-          <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
-            <Image source={{ uri: Images.common.closeBut }} style={styles.closeIcon} contentFit="contain" />
-          </TouchableOpacity>
-
           {/* 内容区域 */}
           <ImageBackground
             source={{ uri: Images.mine.dialogContentBg }}
@@ -66,6 +71,11 @@ export const RuleModal = forwardRef<RuleModalRef>((_, ref) => {
               <Text style={styles.ruleText}>{rules}</Text>
             </ScrollView>
           </ImageBackground>
+
+          {/* 关闭按钮移至下方 */}
+          <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
+            <Image source={{ uri: Images.common.closeBut }} style={styles.closeIcon} contentFit="contain" />
+          </TouchableOpacity>
         </View>
       </View>
     </Modal>
@@ -80,27 +90,28 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   container: {
-    width: '90%',
+    width: '100%',
     alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentBg: {
+    width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_WIDTH * 0.85 * 1.25,
+    paddingTop: 85,
+    paddingHorizontal: 35,
+    paddingBottom: 50,
+    justifyContent: 'flex-start',
   },
   closeBtn: {
-    position: 'absolute',
-    right: 15,
-    top: 20,
-    zIndex: 10,
-    width: 35,
-    height: 35,
+    marginTop: 20,
+    width: 45,
+    height: 45,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   closeIcon: {
-    width: 35,
-    height: 35,
-  },
-  contentBg: {
-    width: '100%',
-    height: 400,
-    paddingTop: 75,
-    paddingHorizontal: 30,
-    paddingBottom: 30,
+    width: 45,
+    height: 45,
   },
   title: {
     fontSize: 18,
@@ -114,7 +125,7 @@ const styles = StyleSheet.create({
   },
   ruleText: {
     fontSize: 14,
-    color: '#666',
-    lineHeight: 24,
+    color: '#333',
+    lineHeight: 20, // 降低行间距
   },
 });

app/award-detail/swipe.tsx

@@ -1,9 +1,10 @@
 import { Image } from 'expo-image';
 import { useLocalSearchParams, useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
     ActivityIndicator,
     Dimensions,
+    ImageBackground,
     ScrollView,
     StatusBar,
     StyleSheet,
@@ -13,6 +14,9 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { RecordModal, RecordModalRef } from '@/app/award-detail/components/RecordModal';
+import { RuleModal, RuleModalRef } from '@/app/award-detail/components/RuleModal';
+import { Images } from '@/constants/images';
 import { getPoolDetail } from '@/services/award';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
@@ -54,6 +58,9 @@ export default function AwardDetailSwipeScreen() {
   const [products, setProducts] = useState<ProductItem[]>([]);
   const [currentIndex, setCurrentIndex] = useState(parseInt(index || '0', 10));
   
+  const ruleRef = useRef<RuleModalRef>(null);
+  const recordRef = useRef<RecordModalRef>(null);
+
   console.log(`[DEBUG-SWIPE] Init. PoolId: ${poolId}, ParamIndex: ${index}, StateIndex: ${currentIndex}`);
 
   const loadData = useCallback(async () => {
@@ -129,6 +136,27 @@ export default function AwardDetailSwipeScreen() {
       </View>
 
       <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+        <View style={styles.detailWrapper}>
+        {/* 侧边按钮 - 规则 */}
+        <TouchableOpacity style={[styles.positionBut, styles.positionRule]} onPress={() => ruleRef.current?.show()}>
+          <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.positionButBg} resizeMode="contain">
+            <Text style={styles.positionButText}>规则</Text>
+          </ImageBackground>
+        </TouchableOpacity>
+
+        {/* 侧边按钮 - 记录 */}
+        <TouchableOpacity style={[styles.positionBut, styles.positionRecord]} onPress={() => recordRef.current?.show()}>
+          <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.positionButBg} resizeMode="contain">
+            <Text style={styles.positionButText}>记录</Text>
+          </ImageBackground>
+        </TouchableOpacity>
+
+        {/* 侧边按钮 - 仓库 */}
+        <TouchableOpacity style={[styles.positionBut, styles.positionStore]} onPress={() => router.push('/store' as any)}>
+          <ImageBackground source={{ uri: Images.box.detail.positionBgRight }} style={styles.positionButBg} resizeMode="contain">
+            <Text style={styles.positionButTextR}>仓库</Text>
+          </ImageBackground>
+        </TouchableOpacity>
         {/* 商品图片区域 */}
         <View style={styles.imageSection}>
           <Image
@@ -244,8 +272,12 @@ export default function AwardDetailSwipeScreen() {
           )}
         </View>
 
-        <View style={{ height: 50 }} />
+    </View>
       </ScrollView>
+
+      {/* 弹窗组件 */}
+      <RuleModal ref={ruleRef} />
+      <RecordModal ref={recordRef} poolId={poolId as string} />
     </View>
   );
 }
@@ -311,6 +343,57 @@ const styles = StyleSheet.create({
   },
   arrowText: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
 
+  detailWrapper: {
+    position: 'relative',
+  },
+
+  // 侧边悬浮按钮
+  positionBut: {
+    position: 'absolute',
+    left: 0,
+    zIndex: 100,
+    width: 35,
+    height: 35,
+  },
+  positionRule: {
+    top: 256,
+    left: 0,
+  },
+  positionRecord: {
+    top: 300,
+    left: 0,
+  },
+  positionStore: {
+    top: 256,
+    right: 0,
+  },
+  positionButBg: {
+    width: 35,
+    height: 34,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  positionButText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: 'bold',
+    transform: [{ rotate: '14deg' }],
+    marginTop: -2,
+    textShadowColor: 'rgba(0,0,0,0.5)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 1,
+  },
+  positionButTextR: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: 'bold',
+    transform: [{ rotate: '-16deg' }],
+    marginTop: -2,
+    textShadowColor: 'rgba(0,0,0,0.5)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 1,
+  },
+
   // 价格区域
   priceSection: {
     backgroundColor: '#fff',