tiefen_space_app/screeens/SpaceSetting/SpacePaymentSetting/index.jsx

404 lines
13 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
View,
Text,
ScrollView,
ActivityIndicator,
TextInput,
} 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 SpacePaymentSetting({ navigation, route }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const data = route.params.data;
const [isSubmitting, setIsSubmitting] = useState(false);
//解锁空间价格
const [spacePrice, setSpacePrice] = useState(
(data?.admission_price / 100).toString()
);
//铁粉价格
const [ironFanPrice, setIronFanPrice] = useState(
(data?.ironfanship_price / 100).toString()
);
//启用超粉功能
const [isSuperFanOn, setIsSuperFanOn] = useState(
data?.is_superfanship_enabled === 1 ? true : false
);
//超粉价格
const [superFanPrice, setSuperFanPrice] = useState(
(data?.superfanship_price / 100).toString()
);
//超粉单次开通有效期
const [superFanExpiration, setSuperFanExpiration] = useState(
data?.superfanship_valid_period
);
//是否开通超粉送微信
const [unlockWechat, setUnlockWechat] = useState(
data?.is_superfanship_give_wechat === 1 ? true : false
);
const handleSubmit = async () => {
if (!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 (
isSuperFanOn &&
superFanExpiration !== 0 &&
superFanExpiration !== 1 &&
superFanExpiration !== 2 &&
superFanExpiration !== 3 &&
superFanExpiration !== 4
) {
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 = {
id: data.id,
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/update?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;
}
Toast.show({
type: "success",
text1: "修改成功,请重进空间刷新查看",
topOffset: 60,
});
navigation.goBack();
} catch (error) {
console.error(error);
} finally {
setIsSubmitting(false);
}
};
return (
<ScrollView
style={{
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex-1"),
}}
>
<View style={tailwind("p-4")}>
<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>
);
}