修复祈福一番赏规则弹框

app/award-detail/components/RuleModal.tsx

@@ -1,4 +1,3 @@
-import { Image } from 'expo-image';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import {
     Dimensions,
@@ -72,9 +71,9 @@ export const RuleModal = forwardRef<RuleModalRef>((_, ref) => {
             </ScrollView>
           </ImageBackground>
 
-          {/* 关闭按钮移至下方 */}
+          {/* 关闭按钮 - 移到下方 */}
           <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
-            <Image source={{ uri: Images.common.closeBut }} style={styles.closeIcon} contentFit="contain" />
+            <ImageBackground source={{ uri: Images.common.closeBut }} style={styles.closeIcon} resizeMode="contain" />
           </TouchableOpacity>
         </View>
       </View>
@@ -101,17 +100,18 @@ const styles = StyleSheet.create({
     paddingHorizontal: 35,
     paddingBottom: 50,
     justifyContent: 'flex-start',
+    marginBottom: 30, // 给下方按钮留出空间
   },
   closeBtn: {
-    marginTop: 20,
     width: 45,
     height: 45,
     justifyContent: 'center',
     alignItems: 'center',
+    zIndex: 10,
   },
   closeIcon: {
-    width: 45,
-    height: 45,
+    width: '100%',
+    height: '100%',
   },
   title: {
     fontSize: 18,

app/weal/components/WishRuleModal.tsx

@@ -1,38 +1,73 @@
 import { Images } from '@/constants/images';
-import { Image } from 'expo-image';
+import { getParamConfig } from '@/services/user';
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
-import { ImageBackground, Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Dimensions, ImageBackground, Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
 export interface WishRuleModalRef {
     show: () => void;
     close: () => void;
 }
 
+// 简单的HTML标签清理函数
+const stripHtmlTags = (html: string): string => {
+    if (!html) return '';
+    return html
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+        .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+        .replace(/<[^>]+>/g, '\n')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/\n\s*\n/g, '\n\n') // Merge multiple newlines
+        .trim();
+};
+
 export const WishRuleModal = forwardRef<WishRuleModalRef, {}>((props, ref) => {
     const [visible, setVisible] = useState(false);
+    const [content, setContent] = useState('');
 
     useImperativeHandle(ref, () => ({
-        show: () => setVisible(true),
+        show: () => {
+            setVisible(true);
+            loadRule();
+        },
         close: () => setVisible(false),
     }));
 
+    const loadRule = async () => {
+        try {
+            const res = await getParamConfig('wish_rule');
+            if (res && res.data) {
+                setContent(stripHtmlTags(res.data));
+            }
+        } catch (error) {
+            console.error('加载祈愿规则失败:', error);
+        }
+    };
+
     if (!visible) return null;
 
     return (
         <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
             <View style={styles.overlay}>
-                <View style={styles.contentContainer}>
-                    <ImageBackground style={styles.content} source={{ uri: Images.welfare.welfareDialogBg }} resizeMode="contain">
-                        <View style={styles.titleBox}>
-                            <Image style={styles.title} source={{ uri: Images.welfare.qijiWelfareDollRule }} resizeMode="contain" />
-                        </View>
-                        <View style={styles.closeBox}>
-                            <TouchableOpacity onPress={() => setVisible(false)}>
-                                <Image style={styles.close} source={{ uri: Images.common.closeBut }} />
-                            </TouchableOpacity>
-                        </View>
-                        <Image source={{ uri: Images.welfare.catchDollRule }} style={styles.ruleImage} contentFit="contain" />
+                <View style={styles.windowSection}>
+                    <ImageBackground style={styles.main} source={{ uri: Images.common.windBg }} resizeMode="stretch">
+                        <ScrollView 
+                            style={styles.scrollView}
+                            contentContainerStyle={styles.scrollContent}
+                            showsVerticalScrollIndicator={false}
+                        >
+                            <Text style={styles.text}>{content || '暂无规则内容'}</Text>
+                        </ScrollView>
                     </ImageBackground>
+
+                    {/* 关闭按钮 - 移到底部 */}
+                    <TouchableOpacity style={styles.closeBtn} onPress={() => setVisible(false)}>
+                        <ImageBackground source={{ uri: Images.common.closeBut }} style={styles.closeIcon} resizeMode="contain" />
+                    </TouchableOpacity>
                 </View>
             </View>
         </Modal>
@@ -48,40 +83,37 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
-    contentContainer: {
-        width: 300,
-        height: 400,
+    windowSection: {
+        width: SCREEN_WIDTH,
         alignItems: 'center',
-        justifyContent: 'center',
     },
-    content: {
-        width: '100%',
-        height: '100%',
+    main: {
+        width: 360, // 720rpx
+        height: 302, // 604rpx
+        paddingTop: 90, // 180rpx
+        paddingHorizontal: 30, // 60rpx
         alignItems: 'center',
-        justifyContent: 'center',
-    },
-    titleBox: {
-        position: 'absolute',
-        top: -20,
         zIndex: 1,
+        marginBottom: 20, // Space between modal and close button
+    },
+    scrollView: {
+        width: '100%',
+        height: 190, // 380rpx
     },
-    title: {
-        width: 200,
-        height: 50,
+    scrollContent: {
+        paddingBottom: 20,
     },
-    closeBox: {
-        position: 'absolute',
-        top: 0,
-        right: -10,
-        zIndex: 2,
+    text: {
+        fontSize: 14,
+        color: '#8B4513',
+        lineHeight: 22,
     },
-    close: {
-        width: 30,
-        height: 30,
+    closeBtn: {
+        width: 35,
+        height: 35,
     },
-    ruleImage: {
-        width: 260,
-        height: 300,
-        marginTop: 20,
+    closeIcon: {
+        width: '100%',
+        height: '100%',
     },
 });

components/award-detail-yfs/RuleModal.tsx

@@ -1,6 +1,6 @@
 import { Images } from '@/constants/images';
 import { getParamConfig } from '@/services/user';
-import { Image, ImageBackground } from 'expo-image';
+import { ImageBackground } from 'expo-image';
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import { ActivityIndicator, Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { WebView } from 'react-native-webview';
@@ -58,12 +58,6 @@ export const RuleModal = forwardRef<RuleModalRef, {}>((props, ref) => {
     <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
        <View style={styles.overlay}>
           <View style={styles.container}>
-             <View style={styles.header}>
-                 <TouchableOpacity style={styles.closeBtn} onPress={() => setVisible(false)}>
-                      <Image source={{ uri: Images.common.closeBut }} style={styles.closeIcon} />
-                 </TouchableOpacity>
-             </View>
-             
              <ImageBackground 
                 source={{ uri: Images.mine.dialogContentBg }} 
                 style={styles.bg}
@@ -82,6 +76,11 @@ export const RuleModal = forwardRef<RuleModalRef, {}>((props, ref) => {
                      )}
                  </View>
              </ImageBackground>
+
+             {/* Close Button Moved to Bottom */}
+             <TouchableOpacity style={styles.closeBtn} onPress={() => setVisible(false)}>
+                  <ImageBackground source={{ uri: Images.common.closeBut }} style={styles.closeIcon} resizeMode="contain" />
+             </TouchableOpacity>
           </View>
        </View>
     </Modal>
@@ -99,26 +98,13 @@ const styles = StyleSheet.create({
     width: width * 0.9,
     alignItems: 'center',
   },
-  header: {
-    width: '100%',
-    alignItems: 'flex-end',
-    marginBottom: -20, // Overlap
-    zIndex: 10,
-    paddingRight: 20,
-  },
-  closeBtn: {
-      padding: 10,
-  },
-  closeIcon: {
-      width: 30,
-      height: 30,
-  },
   bg: {
       width: '100%',
       height: 400, // Adjust height
       paddingTop: 60,
       paddingHorizontal: 30,
       paddingBottom: 30,
+      marginBottom: 30, // Space for button
   },
   content: {
       flex: 1,
@@ -127,5 +113,16 @@ const styles = StyleSheet.create({
   webview: {
       flex: 1,
       backgroundColor: 'transparent',
+  },
+  closeBtn: {
+      width: 45,
+      height: 45,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 10,
+  },
+  closeIcon: {
+      width: '100%',
+      height: '100%',
   }
 });