增加编辑空间内动态功能；增加长文本折叠功能

components/SpacePost/index.jsx

@@ -34,6 +34,55 @@ export default function SpacePost({ data }) {
   );
   const [showVideo, setShowVideo] = useState(false);
 
+  //是否查看全文
+  const [isFullTextBtnShow, setIsFullTextBtnShow] = useState(false);
+  const [isTextCollapsed, setIsTextCollapsed] = useState(true);
+  const [numberOfLines, setNumberOfLines] = useState(
+    data.text_visible_range ? data.text_visible_range : 0
+  );
+  const [textInit, setTextInit] = useState(true);
+  const handleOnTextLayout = (event) => {
+    if (!textInit) return;
+    const line = event.nativeEvent.lines.length;
+    if (line > 5 && data.is_zone_moment_unlocked === 1) {
+      setNumberOfLines(5);
+      setIsFullTextBtnShow(true);
+    }
+    if (line > 5 && data.is_zone_moment_unlocked === 0) {
+      if (data.text_visible_range <= 5)
+        setNumberOfLines(data.text_visible_range);
+      if (data.text_visible_range > 5) {
+        setNumberOfLines(5);
+        setIsFullTextBtnShow(true);
+      }
+    }
+    if (line <= 5 && data.is_zone_moment_unlocked === 1) {
+      setNumberOfLines(0);
+      if (line <= 5 && data.is_zone_moment_unlocked === 0) {
+        if (data.text_visible_range <= 5)
+          setNumberOfLines(data.text_visible_range);
+        if (data.text_visible_range > 5) setNumberOfLines(0);
+      }
+    }
+    setTextInit(false);
+  };
+
+  const onPressFullTextBtn = () => {
+    if (isTextCollapsed) {
+      setIsTextCollapsed(false);
+      setNumberOfLines(
+        data.is_zone_moment_unlocked === 0 ? data.text_visible_range : 0
+      );
+    } else {
+      setIsTextCollapsed(true);
+      setNumberOfLines(
+        data.is_zone_moment_unlocked === 0 && data.text_visible_range <= 5
+          ? data.text_visible_range
+          : 5
+      );
+    }
+  };
+
   //判断是否是发帖人
   const [isCreator, setIsCreator] = useState(false);
   useEffect(() => {
@@ -188,13 +237,20 @@ export default function SpacePost({ data }) {
                   renderText: renderLink,
                 },
               ]}
-              numberOfLines={
+              numberOfLines={numberOfLines}
-                data.is_zone_moment_unlocked === 0 ? data.text_visible_range : 0
-              }
               ellipsizeMode="tail"
+              onTextLayout={handleOnTextLayout}
             >
               {data?.text}
             </ParsedText>
+            {isFullTextBtnShow && (
+              <Text
+                onPress={onPressFullTextBtn}
+                style={tailwind("text-[#3B69B8] text-base font-medium mb-2")}
+              >
+                {isTextCollapsed ? "全文" : "收起"}
+              </Text>
+            )}
             {/* 媒体展示 */}
             <View style={tailwind("pr-10 mb-1")}>
               {data.media_component.video_ids?.length === 0 ||
@@ -618,7 +674,7 @@ function ImageDisplay({
               transition={100}
               cachePolicy="disk"
             />
-            {isCreator && visibleRange < index + 1 && (
+            {isCreator && visibleRange < index + 1 && data.c_type === 1 && (
               <View
                 style={{
                   marginLeft: 2,
@@ -734,6 +790,12 @@ function OperationModal({ visible, setVisible, data }) {
     setVisible(false);
   };
 
+  //编辑
+  const handleEdit = () => {
+    setVisible(false);
+    navigation.navigate("EditSpacePost", { data: data });
+  };
+
   //删除
   const handleDelete = async () => {
     const apiUrl = process.env.EXPO_PUBLIC_API_URL;
@@ -824,6 +886,7 @@ function OperationModal({ visible, setVisible, data }) {
   //判断是否展示删除、拉黑、举报功能
   const [display, setDisPlay] = useState({
     delete: false,
+    edit: false,
     top: false,
     block: true,
     feedback: true,
@@ -833,7 +896,7 @@ function OperationModal({ visible, setVisible, data }) {
       const account = await get("account");
       if (account.mid === data.mid || account.role === 1 || account.role === 2)
         setDisPlay((prev) => {
-          return { ...prev, delete: true, top: true };
+          return { ...prev, delete: true, top: true, edit: true };
         });
       if (account.mid === data.mid)
         setDisPlay((prev) => {
@@ -918,6 +981,23 @@ function OperationModal({ visible, setVisible, data }) {
               ></View>
             </View>
           )}
+          {display.edit && (
+            <View style={tailwind("flex flex-col w-full items-center")}>
+              <TouchableOpacity
+                onPress={handleEdit}
+                style={tailwind("flex flex-col w-full py-2 items-center")}
+              >
+                <Text style={tailwind("text-base text-white font-medium")}>
+                  编辑
+                </Text>
+              </TouchableOpacity>
+              <View
+                style={tailwind(
+                  "h-[1px] w-full rounded-full mx-4 bg-[#FFFFFF26]"
+                )}
+              ></View>
+            </View>
+          )}
           {display.delete && (
             <View style={tailwind("flex flex-col w-full items-center")}>
               <TouchableOpacity

screeens/CreateImagePost/index.jsx

@@ -157,6 +157,7 @@ export default function CreateImagePost({ navigation, route }) {
           body: JSON.stringify(body),
         }
       );
+      console.log(response);
       const data = await response.json();
       if (data.ret === -1) {
         Toast.show({

screeens/CreateVideoPost/index.jsx

@@ -320,7 +320,7 @@ export default function CreateVideoPost({ navigation, route }) {
                 >
                   <View style={tailwind("flex flex-row items-center")}>
                     <Text style={tailwind("text-white text-base font-medium")}>
-                      价格：
+                      价格：¥
                     </Text>
                     <TextInput
                       placeholder="¥1～3000"

screeens/EditSpacePost/index.jsx

@@ -4,6 +4,9 @@ import {
   TextInput,
   ScrollView,
   ActivityIndicator,
+  Modal,
+  KeyboardAvoidingView,
+  TouchableOpacity,
 } from "react-native";
 import React, { useState, useEffect, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
@@ -15,6 +18,7 @@ import baseRequest from "../../utils/baseRequest";
 import { generateSignature } from "../../utils/crypto";
 import { Image } from "expo-image";
 import { Icon } from "@rneui/themed";
+import { Button, Switch } from "@rneui/themed";
 
 export default function EditSpacePost({ navigation, route }) {
   const data = route.params.data;
@@ -25,6 +29,88 @@ export default function EditSpacePost({ navigation, route }) {
   const [content, setContent] = useState(data.text);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  //付费设置弹窗是否展示
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  //价格
+  const [price, setPrice] = useState((data?.price / 100)?.toString());
+
+  //可预览文案行数
+  const [textVisibleRange, setTextVisibleRange] = useState(
+    data?.text_visible_range?.toString()
+  );
+
+  //可预览图片张数
+  const [imageVisibleRange, setImageVisibleRange] = useState(
+    data?.media_visible_range?.toString()
+  );
+
+  //是否模糊封面
+  const [blurCover, setBlurCover] = useState(
+    data?.is_blurring_cover === 1 ? true : false
+  );
+
+  //是否铁粉免费查看
+  const [isFreeForIronfan, setIsFreeForIronfan] = useState(
+    data?.is_ironfan_visible === 1 ? true : false
+  );
+
+  //保存付费设置
+  const handleSavePaymentSetting = () => {
+    if (parseFloat(price) === 0) {
+      Toast.show({
+        type: "error",
+        text1: "不可改为免费动态",
+        topOffset: 60,
+      });
+      return;
+    }
+    if (parseFloat(price) < 0) {
+      Toast.show({
+        type: "error",
+        text1: "请输入正确区间的价格",
+        topOffset: 60,
+      });
+      return;
+    }
+    if (parseFloat(price) > 0 && parseInt(parseFloat(price) * 100, 10) < 100) {
+      Toast.show({
+        type: "error",
+        text1: "请输入正确区间的价格",
+        topOffset: 60,
+      });
+      return;
+    }
+    if (parseInt(parseFloat(price) * 100, 10) > 300000) {
+      Toast.show({
+        type: "error",
+        text1: "请输入正确区间的价格",
+        topOffset: 60,
+      });
+      return;
+    }
+    if (parseInt(textVisibleRange, 10) < 1) {
+      Toast.show({
+        type: "error",
+        text1: "请输入正确区间的可预览文案行数",
+        topOffset: 60,
+      });
+      return;
+    }
+    if (
+      parseInt(imageVisibleRange, 10) < 0 ||
+      parseInt(imageVisibleRange, 10) > 3
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "请输入正确区间的可预览图片张数",
+        topOffset: 60,
+      });
+      return;
+    }
+    setIsModalVisible(false);
+  };
+
   //保存新添加的媒体
   const [newMeidaAssets, setNewMediaAssets] = useState([]);
   //展示旧媒体组件
@@ -112,7 +198,7 @@ export default function EditSpacePost({ navigation, route }) {
     if (
       data.c_type === 1 &&
       data.m_type === 1 &&
-      oldMediaAssets.length + newMeidaAssets.length <= data.media_visible_range
+      oldMediaAssets.length + newMeidaAssets.length <= imageVisibleRange
     ) {
       Toast.show({
         type: "error",
@@ -142,6 +228,14 @@ export default function EditSpacePost({ navigation, route }) {
         m_type: data.m_type,
         text: content,
         media_component: media,
+        text_visible_range: textVisibleRange
+          ? parseInt(textVisibleRange, 10)
+          : 999,
+        media_visible_range: imageVisibleRange
+          ? parseInt(imageVisibleRange, 10)
+          : 1,
+        is_blurring_cover: blurCover ? 1 : 0,
+        is_ironfan_visible: isFreeForIronfan ? 1 : 0,
       };
       const signature = await generateSignature(body);
       const _response = await fetch(
@@ -202,6 +296,7 @@ export default function EditSpacePost({ navigation, route }) {
       }}
     >
       <View style={tailwind("p-4")}>
+        {data?.status === 3 && (
           <View style={tailwind("mb-4")}>
             <Text style={tailwind("text-base font-medium text-[#F53030] mb-2")}>
               违规详情
@@ -229,6 +324,7 @@ export default function EditSpacePost({ navigation, route }) {
               )}
             </View>
           </View>
+        )}
         <Text style={tailwind("text-base font-medium text-white")}>
           动态内容
         </Text>
@@ -254,6 +350,350 @@ export default function EditSpacePost({ navigation, route }) {
           type={data.m_type === 1 ? "image" : "video"}
           setAssets={setNewMediaAssets}
         />
+        {data.c_type === 1 && (
+          <Button
+            color="#FF669E"
+            radius="999"
+            size="md"
+            onPress={() => setIsModalVisible(!isModalVisible)}
+            titleStyle={tailwind("text-base")}
+            containerStyle={tailwind("mt-4 w-28")}
+          >
+            付费设置
+          </Button>
+        )}
+        {data.m_type === 1 && (
+          <Modal
+            visible={isModalVisible}
+            transparent={true}
+            statusBarTranslucent
+            animationType="slide"
+          >
+            <TouchableOpacity
+              activeOpacity={1}
+              style={{
+                paddingBottom: insets.bottom,
+                paddingLeft: insets.left,
+                paddingRight: insets.right,
+                ...tailwind("flex flex-1 bg-[#00000080] px-4"),
+              }}
+              onPress={handleSavePaymentSetting}
+            >
+              <KeyboardAvoidingView
+                style={tailwind("flex-1")}
+                behavior="padding"
+              >
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={{
+                    gap: 8,
+                    ...tailwind(
+                      "flex flex-col mt-auto mb-2 bg-[#17161A] rounded-3xl"
+                    ),
+                  }}
+                >
+                  <View
+                    style={{
+                      gap: 8,
+                      ...tailwind("flex flex-col px-6 pt-6 pb-2"),
+                    }}
+                  >
+                    <View style={tailwind("flex flex-row items-center")}>
+                      <Text
+                        style={tailwind("text-white text-base font-medium")}
+                      >
+                        价格：¥
+                      </Text>
+                      <TextInput
+                        placeholder="¥1～3000"
+                        placeholderTextColor="#FFFFFF80"
+                        keyboardType="numeric"
+                        underlineColorAndroid="transparent"
+                        onChangeText={(value) => setPrice(value)}
+                        value={price}
+                        style={tailwind(
+                          "flex-1 bg-[#FFFFFF1A] text-white rounded-2xl px-4 h-8 mx-2"
+                        )}
+                      />
+                      <Text
+                        onPress={() => setPrice("0")}
+                        style={tailwind("text-[#FF669E] text-base font-medium")}
+                      >
+                        免费
+                      </Text>
+                    </View>
+                    {parseFloat(price) > 0 && (
+                      <>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            可预览文案：
+                          </Text>
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            前
+                          </Text>
+                          <TextInput
+                            placeholder="1~10"
+                            placeholderTextColor="#FFFFFF80"
+                            keyboardType="numeric"
+                            underlineColorAndroid="transparent"
+                            onChangeText={(value) => setTextVisibleRange(value)}
+                            value={textVisibleRange}
+                            style={tailwind(
+                              "bg-[#FFFFFF1A] text-white rounded-2xl px-4 mx-2 h-8"
+                            )}
+                          />
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            行
+                          </Text>
+                          <Text
+                            onPress={() => setTextVisibleRange("999")}
+                            style={tailwind(
+                              "text-[#FF669E] text-base font-medium ml-auto"
+                            )}
+                          >
+                            全部可见
+                          </Text>
+                        </View>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            可预览图片：
+                          </Text>
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            前
+                          </Text>
+                          <TextInput
+                            placeholder="0~3"
+                            placeholderTextColor="#FFFFFF80"
+                            keyboardType="numeric"
+                            underlineColorAndroid="transparent"
+                            onChangeText={(value) =>
+                              setImageVisibleRange(value)
+                            }
+                            value={imageVisibleRange}
+                            style={tailwind(
+                              "bg-[#FFFFFF1A] text-white rounded-2xl px-4 mx-2 h-8"
+                            )}
+                          />
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            张
+                          </Text>
+                          <Text
+                            onPress={() => setImageVisibleRange("0")}
+                            style={tailwind(
+                              "text-[#FF669E] text-base font-medium ml-auto"
+                            )}
+                          >
+                            不可预览
+                          </Text>
+                        </View>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            铁粉免费查看：
+                          </Text>
+                          <Switch
+                            value={isFreeForIronfan}
+                            onValueChange={(value) =>
+                              setIsFreeForIronfan(value)
+                            }
+                            thumbColor="#ffffff"
+                            trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
+                          />
+                        </View>
+                      </>
+                    )}
+                  </View>
+                  <TouchableOpacity
+                    onPress={handleSavePaymentSetting}
+                    style={{
+                      height: 52,
+                      ...tailwind(
+                        "flex justify-center items-center border-t border-[#FFFFFF14]"
+                      ),
+                    }}
+                  >
+                    <Text style={tailwind("text-white text-base font-medium")}>
+                      保存
+                    </Text>
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              </KeyboardAvoidingView>
+            </TouchableOpacity>
+            <Toast />
+          </Modal>
+        )}
+        {data.m_type === 2 && (
+          <Modal
+            visible={isModalVisible}
+            transparent={true}
+            statusBarTranslucent
+            animationType="slide"
+          >
+            <TouchableOpacity
+              activeOpacity={1}
+              style={{
+                paddingBottom: insets.bottom,
+                paddingLeft: insets.left,
+                paddingRight: insets.right,
+                ...tailwind("flex flex-1 bg-[#00000080] px-4"),
+              }}
+              onPress={handleSavePaymentSetting}
+            >
+              <KeyboardAvoidingView
+                style={tailwind("flex-1")}
+                behavior="padding"
+              >
+                <TouchableOpacity
+                  activeOpacity={1}
+                  style={{
+                    gap: 8,
+                    ...tailwind(
+                      "flex flex-col mt-auto mb-2 bg-[#17161A] rounded-3xl"
+                    ),
+                  }}
+                >
+                  <View
+                    style={{
+                      gap: 8,
+                      ...tailwind("flex flex-col px-6 pt-6 pb-2"),
+                    }}
+                  >
+                    <View style={tailwind("flex flex-row items-center")}>
+                      <Text
+                        style={tailwind("text-white text-base font-medium")}
+                      >
+                        价格：¥
+                      </Text>
+                      <TextInput
+                        placeholder="¥1～3000"
+                        placeholderTextColor="#FFFFFF80"
+                        keyboardType="numeric"
+                        underlineColorAndroid="transparent"
+                        onChangeText={(value) => setPrice(value)}
+                        value={price}
+                        style={tailwind(
+                          "flex-1 bg-[#FFFFFF1A] text-white rounded-2xl px-4 h-8 mx-2"
+                        )}
+                      />
+                      <Text
+                        onPress={() => setPrice("0")}
+                        style={tailwind("text-[#FF669E] text-base font-medium")}
+                      >
+                        免费
+                      </Text>
+                    </View>
+                    {parseFloat(price) > 0 && (
+                      <>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            可预览文案：
+                          </Text>
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            前
+                          </Text>
+                          <TextInput
+                            placeholder="1~10"
+                            placeholderTextColor="#FFFFFF80"
+                            keyboardType="numeric"
+                            underlineColorAndroid="transparent"
+                            onChangeText={(value) => setTextVisibleRange(value)}
+                            value={textVisibleRange}
+                            style={tailwind(
+                              "bg-[#FFFFFF1A] text-white rounded-2xl px-4 mx-2 h-8"
+                            )}
+                          />
+                          <Text
+                            style={tailwind("text-white text-base font-medium")}
+                          >
+                            行
+                          </Text>
+                          <Text
+                            onPress={() => setTextVisibleRange("999")}
+                            style={tailwind(
+                              "text-[#FF669E] text-base font-medium ml-auto"
+                            )}
+                          >
+                            全部可见
+                          </Text>
+                        </View>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            封面模糊：
+                          </Text>
+                          <Switch
+                            value={blurCover}
+                            onValueChange={(value) => setBlurCover(value)}
+                            thumbColor="#ffffff"
+                            trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
+                          />
+                        </View>
+                        <View style={tailwind("flex flex-row items-center")}>
+                          <Text
+                            style={tailwind(
+                              "text-white text-base font-medium mr-2"
+                            )}
+                          >
+                            铁粉免费查看：
+                          </Text>
+                          <Switch
+                            value={isFreeForIronfan}
+                            onValueChange={(value) =>
+                              setIsFreeForIronfan(value)
+                            }
+                            thumbColor="#ffffff"
+                            trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
+                          />
+                        </View>
+                      </>
+                    )}
+                  </View>
+                  <TouchableOpacity
+                    onPress={handleSavePaymentSetting}
+                    style={{
+                      height: 52,
+                      ...tailwind(
+                        "flex justify-center items-center border-t border-[#FFFFFF14]"
+                      ),
+                    }}
+                  >
+                    <Text style={tailwind("text-white text-base font-medium")}>
+                      保存
+                    </Text>
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              </KeyboardAvoidingView>
+            </TouchableOpacity>
+          </Modal>
+        )}
       </View>
     </ScrollView>
   );