399 lines
14 KiB
React
399 lines
14 KiB
React
|
import {
|
|||
|
|
View,
|
|||
|
|
Text,
|
|||
|
|
ScrollView,
|
|||
|
|
ActivityIndicator,
|
|||
|
|
TextInput,
|
|||
|
|
KeyboardAvoidingView,
|
|||
|
|
Platform,
|
|||
|
|
} from "react-native";
|
|||
|
|
import React, { useState } from "react";
|
|||
|
|
import { useTailwind } from "tailwind-rn";
|
|||
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|||
|
|
import Toast from "react-native-toast-message";
|
|||
|
|
import baseRequest from "../../utils/baseRequest";
|
|||
|
|
import { generateSignature } from "../../utils/crypto";
|
|||
|
|
import { Button, Divider, CheckBox, Switch } from "@rneui/themed";
|
|||
|
|
|
|||
|
|
export default function CreateSpace({ navigation, route }) {
|
|||
|
|
const tailwind = useTailwind();
|
|||
|
|
const insets = useSafeAreaInsets();
|
|||
|
|
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
//空间介绍
|
|||
|
|
const [spaceIntro, setSpaceIntro] = useState();
|
|||
|
|
|
|||
|
|
//解锁空间价格
|
|||
|
|
const [spacePrice, setSpacePrice] = useState();
|
|||
|
|
|
|||
|
|
//铁粉价格
|
|||
|
|
const [ironFanPrice, setIronFanPrice] = useState();
|
|||
|
|
|
|||
|
|
//启用超粉功能
|
|||
|
|
const [isSuperFanOn, setIsSuperFanOn] = useState(true);
|
|||
|
|
|
|||
|
|
//超粉价格
|
|||
|
|
const [superFanPrice, setSuperFanPrice] = useState();
|
|||
|
|
|
|||
|
|
//超粉单次开通有效期
|
|||
|
|
const [superFanExpiration, setSuperFanExpiration] = useState(0);
|
|||
|
|
|
|||
|
|
//是否开通超粉送微信
|
|||
|
|
const [unlockWechat, setUnlockWechat] = useState(false);
|
|||
|
|
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
if (!spaceIntro || !spacePrice || !ironFanPrice) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请完善内容后提交",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (isSuperFanOn && !superFanPrice) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请填写超粉价格",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const _spacePrice = parseInt(spacePrice * 100, 10);
|
|||
|
|
if (isNaN(_spacePrice) || _spacePrice < 0) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请输入有效的解锁空间价格",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const _ironFanPrice = parseInt(ironFanPrice * 100, 10);
|
|||
|
|
if (isNaN(_ironFanPrice) || _ironFanPrice < 100 || _ironFanPrice > 388800) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请输入有效的铁粉价格",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const _superFanPrice = parseInt(superFanPrice * 100, 10);
|
|||
|
|
if (
|
|||
|
|
isSuperFanOn &&
|
|||
|
|
(isNaN(_superFanPrice) || _superFanPrice < 100 || _superFanPrice > 388800)
|
|||
|
|
) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: "请输入有效的超粉价格",
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isSubmitting) return;
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
|
|||
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const base = await baseRequest();
|
|||
|
|
const body = {
|
|||
|
|
profile: spaceIntro,
|
|||
|
|
admission_price: parseInt(spacePrice * 100, 10),
|
|||
|
|
ironfanship_price: parseInt(ironFanPrice * 100, 10),
|
|||
|
|
is_superfanship_enabled: isSuperFanOn ? 1 : 0,
|
|||
|
|
superfanship_price: parseInt(superFanPrice * 100, 10),
|
|||
|
|
superfanship_valid_period: superFanExpiration,
|
|||
|
|
is_superfanship_give_wechat: unlockWechat ? 1 : 0,
|
|||
|
|
...base,
|
|||
|
|
};
|
|||
|
|
const signature = await generateSignature(body);
|
|||
|
|
const _response = await fetch(
|
|||
|
|
`${apiUrl}/api/zone/create?signature=${signature}`,
|
|||
|
|
{
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(body),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
const _data = await _response.json();
|
|||
|
|
if (_data.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
type: "error",
|
|||
|
|
text1: _data.msg,
|
|||
|
|
topOffset: 60,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
navigation.goBack();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<KeyboardAvoidingView
|
|||
|
|
style={tailwind("flex-1")}
|
|||
|
|
behavior={Platform.OS == "ios" ? "padding" : "height"}
|
|||
|
|
keyboardVerticalOffset={insets.bottom + 60}
|
|||
|
|
>
|
|||
|
|
<ScrollView
|
|||
|
|
style={{
|
|||
|
|
paddingBottom: insets.bottom,
|
|||
|
|
paddingLeft: insets.left,
|
|||
|
|
paddingRight: insets.right,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<View style={tailwind("p-4")}>
|
|||
|
|
<Text style={tailwind("text-base font-medium text-white")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>空间介绍
|
|||
|
|
</Text>
|
|||
|
|
<TextInput
|
|||
|
|
value={spaceIntro}
|
|||
|
|
onChangeText={(value) => setSpaceIntro(value)}
|
|||
|
|
placeholder="介绍下你的空间吧～"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
multiline
|
|||
|
|
textAlignVertical="top"
|
|||
|
|
style={tailwind(
|
|||
|
|
"h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
<View style={tailwind("flex flex-row items-center justify-between")}>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base font-medium text-white mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>解锁空间价格
|
|||
|
|
</Text>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-sm font-medium text-[#FFFFFF80] mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
¥0~3888，仅支持整数
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<TextInput
|
|||
|
|
value={spacePrice}
|
|||
|
|
onChangeText={(value) => setSpacePrice(value)}
|
|||
|
|
keyboardType="numeric"
|
|||
|
|
placeholder="解锁后可查看空间内免费动态"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="top"
|
|||
|
|
/>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View style={tailwind("flex flex-row items-center justify-between")}>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base font-medium text-white mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>铁粉价格
|
|||
|
|
</Text>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-sm font-medium text-[#FFFFFF80] mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
¥1~3888，仅支持整数
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<TextInput
|
|||
|
|
value={ironFanPrice}
|
|||
|
|
onChangeText={(value) => setIronFanPrice(value)}
|
|||
|
|
keyboardType="numeric"
|
|||
|
|
placeholder="解锁后可查看空间内铁粉专享动态"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="top"
|
|||
|
|
/>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View
|
|||
|
|
style={tailwind(
|
|||
|
|
"flex flex-row items-center justify-between mt-4 mb-1"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-base font-medium text-white")}>
|
|||
|
|
<Text style={tailwind("text-[#F53030]")}>*</Text>启用超粉功能
|
|||
|
|
</Text>
|
|||
|
|
<Switch
|
|||
|
|
value={isSuperFanOn}
|
|||
|
|
onValueChange={(value) => setIsSuperFanOn(value)}
|
|||
|
|
thumbColor="#ffffff"
|
|||
|
|
trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
|
|||
|
|
style={tailwind("mx-1")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
{isSuperFanOn && (
|
|||
|
|
<View>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex flex-row items-center justify-between")}
|
|||
|
|
>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base font-medium text-white mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
超粉价格
|
|||
|
|
</Text>
|
|||
|
|
<Text
|
|||
|
|
style={tailwind(
|
|||
|
|
"text-sm font-medium text-[#FFFFFF80] mt-4 mb-1"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
¥1~3888，仅支持整数
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<TextInput
|
|||
|
|
value={superFanPrice}
|
|||
|
|
onChangeText={(value) => setSuperFanPrice(value)}
|
|||
|
|
keyboardType="numeric"
|
|||
|
|
placeholder="最高身份，可查看空间所有动态"
|
|||
|
|
placeholderTextColor="#FFFFFF80"
|
|||
|
|
style={tailwind("text-white")}
|
|||
|
|
underlineColorAndroid="transparent"
|
|||
|
|
textAlign="top"
|
|||
|
|
/>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<Text
|
|||
|
|
style={tailwind("text-base font-medium text-white mt-4 mb-1")}
|
|||
|
|
>
|
|||
|
|
超粉单次开通有效期
|
|||
|
|
</Text>
|
|||
|
|
<View style={tailwind("flex flex-row flex-wrap")}>
|
|||
|
|
<View style={tailwind("flex flex-row basis-1/3 items-center")}>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={superFanExpiration === 0}
|
|||
|
|
onPress={() => setSuperFanExpiration(0)}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
onPress={() => setSuperFanExpiration(0)}
|
|||
|
|
style={tailwind("text-base font-medium text-white")}
|
|||
|
|
>
|
|||
|
|
永久
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={tailwind("flex flex-row basis-1/3 items-center")}>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={superFanExpiration === 4}
|
|||
|
|
onPress={() => setSuperFanExpiration(4)}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
onPress={() => setSuperFanExpiration(4)}
|
|||
|
|
style={tailwind("text-base font-medium text-white")}
|
|||
|
|
>
|
|||
|
|
年度
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={tailwind("flex flex-row basis-1/3 items-center")}>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={superFanExpiration === 3}
|
|||
|
|
onPress={() => setSuperFanExpiration(3)}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
onPress={() => setSuperFanExpiration(3)}
|
|||
|
|
style={tailwind("text-base font-medium text-white")}
|
|||
|
|
>
|
|||
|
|
半年
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex flex-row basis-1/3 items-center mt-2")}
|
|||
|
|
>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={superFanExpiration === 2}
|
|||
|
|
onPress={() => setSuperFanExpiration(2)}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
onPress={() => setSuperFanExpiration(2)}
|
|||
|
|
style={tailwind("text-base font-medium text-white")}
|
|||
|
|
>
|
|||
|
|
季度
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View
|
|||
|
|
style={tailwind("flex flex-row basis-1/3 items-center mt-2")}
|
|||
|
|
>
|
|||
|
|
<CheckBox
|
|||
|
|
checked={superFanExpiration === 1}
|
|||
|
|
onPress={() => setSuperFanExpiration(1)}
|
|||
|
|
iconType="material-community"
|
|||
|
|
checkedIcon="checkbox-marked"
|
|||
|
|
uncheckedIcon="checkbox-blank-outline"
|
|||
|
|
checkedColor="#FF669E"
|
|||
|
|
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
|||
|
|
size={18}
|
|||
|
|
/>
|
|||
|
|
<Text
|
|||
|
|
onPress={() => setSuperFanExpiration(1)}
|
|||
|
|
style={tailwind("text-base font-medium text-white")}
|
|||
|
|
>
|
|||
|
|
月度
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
<View
|
|||
|
|
style={tailwind(
|
|||
|
|
"flex flex-row items-center justify-between mt-4 mb-1"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-base font-medium text-white")}>
|
|||
|
|
开通超粉赠送微信
|
|||
|
|
</Text>
|
|||
|
|
<Switch
|
|||
|
|
value={unlockWechat}
|
|||
|
|
onValueChange={(value) => setUnlockWechat(value)}
|
|||
|
|
thumbColor="#ffffff"
|
|||
|
|
trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
|
|||
|
|
style={tailwind("mx-1")}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<Divider style={tailwind("my-2")} />
|
|||
|
|
</View>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
color="#FF669E"
|
|||
|
|
radius="999"
|
|||
|
|
size="md"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
disabledStyle={tailwind("bg-[#FFFFFF80]")}
|
|||
|
|
disabledTitleStyle={tailwind("text-white")}
|
|||
|
|
onPress={handleSubmit}
|
|||
|
|
titleStyle={tailwind("text-base")}
|
|||
|
|
containerStyle={tailwind("mt-4")}
|
|||
|
|
>
|
|||
|
|
{isSubmitting && <ActivityIndicator size="small" color="white" />}
|
|||
|
|
{isSubmitting ? "正在开通..." : "立即开通"}
|
|||
|
|
</Button>
|
|||
|
|
</View>
|
|||
|
|
</ScrollView>
|
|||
|
|
</KeyboardAvoidingView>
|
|||
|
|
);
|
|||
|
|
}
|