506 lines
17 KiB
JavaScript
506 lines
17 KiB
JavaScript
import {
|
||
View,
|
||
Text,
|
||
TextInput,
|
||
ScrollView,
|
||
ActivityIndicator,
|
||
KeyboardAvoidingView,
|
||
TouchableOpacity,
|
||
Platform,
|
||
} from "react-native";
|
||
import React, { useState, useEffect, useMemo, useRef } from "react";
|
||
import { Button, CheckBox, Switch } from "@rneui/themed";
|
||
import { useTailwind } from "tailwind-rn";
|
||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
import Toast from "react-native-toast-message";
|
||
import requireAPI from "../../../utils/requireAPI";
|
||
import { get } from "../../../utils/storeInfo";
|
||
import { getStreamerInfo } from "../../../api/space";
|
||
const superSingles = [
|
||
{ key: 0, index: 0, text: "永久" },
|
||
{ key: 4, index: 1, text: "按年生效" },
|
||
{ key: 3, index: 2, text: "按半年生效" },
|
||
{ key: 2, index: 3, text: "按季度生效" },
|
||
{ key: 1, index: 4, text: "按月生效" },
|
||
];
|
||
// const superSingles = [
|
||
// { key: 0, text: "永久" },
|
||
// { key: 1, text: "按年生效" },
|
||
// { key: 2, text: "按半年生效" },
|
||
// { key: 3, text: "按季度生效" },
|
||
// { key: 4, text: "按月生效" },
|
||
// ];
|
||
const ListItemWithCheckbox = ({
|
||
superSingle,
|
||
superSinglesContr,
|
||
setSuperSinglesContr,
|
||
superSingleCheckeds,
|
||
setSuperSingleCheckeds,
|
||
index,
|
||
}) => {
|
||
const tailwind = useTailwind();
|
||
return (
|
||
<View style={tailwind("mt-4")}>
|
||
<View>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<CheckBox
|
||
checked={superSingleCheckeds.includes(index)}
|
||
onPress={(e) => {
|
||
e.stopPropagation();
|
||
const newSuperSinglesContr = [...superSinglesContr];
|
||
newSuperSinglesContr[index].enable =
|
||
!superSingleCheckeds.includes(index);
|
||
// newSuperSinglesContr[index].price = "0";
|
||
// newSuperSinglesContr[index].wechatFree = false;
|
||
setSuperSinglesContr(newSuperSinglesContr);
|
||
if (superSingleCheckeds.includes(index)) {
|
||
setSuperSingleCheckeds(() => {
|
||
const newSuperSingleCheckeds = [...superSingleCheckeds];
|
||
newSuperSingleCheckeds.splice(
|
||
newSuperSingleCheckeds.indexOf(index),
|
||
1
|
||
);
|
||
return newSuperSingleCheckeds;
|
||
});
|
||
} else {
|
||
setSuperSingleCheckeds(superSingleCheckeds.concat(index));
|
||
}
|
||
}}
|
||
// checkedIcon="dot-circle-o"
|
||
// uncheckedIcon="circle-o"
|
||
iconType="ionicon"
|
||
checkedIcon="checkmark-circle"
|
||
uncheckedIcon="ellipse-outline"
|
||
checkedColor="#FF669E"
|
||
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
||
size={24}
|
||
></CheckBox>
|
||
<Text style={tailwind("ml-1 text-white")}>{superSingle.text}</Text>
|
||
</View>
|
||
<View
|
||
// className={`mt-2 px-4 h-12 py-3 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center ${
|
||
// superSingleCheckeds != index
|
||
// ? "mt-0 px-0 py-0 hidden"
|
||
// : ""
|
||
// }`}
|
||
style={tailwind(
|
||
`mt-2 px-4 h-12 py-3 rounded-lg bg-[#FFFFFF1A] flex-row justify-between items-center ${
|
||
!superSingleCheckeds.includes(index) ? "mt-0 p-0 hidden" : ""
|
||
}`
|
||
)}
|
||
>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<Text style={tailwind("mr-2 text-[#FFFFFF80] text-sm")}>¥</Text>
|
||
<TextInput
|
||
placeholderTextColor="#FFFFFF80"
|
||
underlineColorAndroid="transparent"
|
||
keyboardType="numeric"
|
||
value={superSinglesContr[index].price}
|
||
onChangeText={(value) => {
|
||
const newSuperSinglesContr = [...superSinglesContr];
|
||
newSuperSinglesContr[index].price = value;
|
||
setSuperSinglesContr(newSuperSinglesContr);
|
||
}}
|
||
style={{
|
||
...tailwind("text-xl text-white"),
|
||
// maxWidth: 200,
|
||
minWidth: 150,
|
||
}}
|
||
/>
|
||
</View>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<Text style={tailwind("text-[#FFFFFF80] mr-2")}>|</Text>
|
||
<CheckBox
|
||
block
|
||
checked={superSinglesContr[index].wechatFree}
|
||
onPress={() => {
|
||
const newSuperSinglesContr = [...superSinglesContr];
|
||
newSuperSinglesContr[index].wechatFree =
|
||
!newSuperSinglesContr[index].wechatFree;
|
||
setSuperSinglesContr(newSuperSinglesContr);
|
||
}}
|
||
iconType="ionicon"
|
||
checkedIcon="checkmark-circle"
|
||
uncheckedIcon="ellipse-outline"
|
||
checkedColor="#FF669E"
|
||
containerStyle={tailwind("p-0 m-0 bg-transparent")}
|
||
size={20}
|
||
></CheckBox>
|
||
<Text style={tailwind("ml-1 text-sm text-white")}>赠送微信</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default function SpacePaymentSetting({ navigation, route }) {
|
||
const tailwind = useTailwind();
|
||
const insets = useSafeAreaInsets();
|
||
const [openSuper, setOpenSuper] = useState(true);
|
||
const [spacePrice, setSpacePrice] = useState("");
|
||
const [spacePriceAble, setSpacePriceAble] = useState(false);
|
||
const [ironFanPrice, setIronFanPrice] = useState("");
|
||
const [tiefenPriceAble, setTiefenPriceAble] = useState(false);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [superSingleCheckeds, setSuperSingleCheckeds] = useState([]);
|
||
|
||
const [superSinglesContr, setSuperSinglesContr] = useState([
|
||
{ enable: false, price: "0", wechatFree: false, key: 0 },
|
||
{ enable: false, price: "0", wechatFree: false, key: 4 },
|
||
{ enable: false, price: "0", wechatFree: false, key: 3 },
|
||
{ enable: false, price: "0", wechatFree: false, key: 2 },
|
||
{ enable: false, price: "0", wechatFree: false, key: 1 },
|
||
]);
|
||
const [spacePriceInfo, setSpacePriceInfo] = useState(null);
|
||
const spacePriceRef = useRef(null);
|
||
const ironFanPriceRef = useRef(null);
|
||
useEffect(() => {
|
||
const account = get("account");
|
||
getStreamerInfo(Number(account.mid)).then((res) => {
|
||
// 新版本
|
||
const priceList = res.superfan_price_list ?? [
|
||
{
|
||
enable: false,
|
||
price: "0",
|
||
is_superfanship_give_wechat: false,
|
||
key: 0,
|
||
},
|
||
{
|
||
enable: false,
|
||
price: "0",
|
||
is_superfanship_give_wechat: false,
|
||
key: 4,
|
||
},
|
||
{
|
||
enable: false,
|
||
price: "0",
|
||
is_superfanship_give_wechat: false,
|
||
key: 3,
|
||
},
|
||
{
|
||
enable: false,
|
||
price: "0",
|
||
is_superfanship_give_wechat: false,
|
||
key: 2,
|
||
},
|
||
{
|
||
enable: false,
|
||
price: "0",
|
||
is_superfanship_give_wechat: false,
|
||
key: 1,
|
||
},
|
||
];
|
||
const haveChecked = priceList
|
||
.map((it, index) => ({ ...it, index }))
|
||
.filter((it) => it.enable);
|
||
// if (haveChecked.length > 0) {
|
||
// setSuperSingleChecked(haveChecked[0].period);
|
||
// }
|
||
setSuperSingleCheckeds(
|
||
priceList
|
||
.map((it, index) => ({ ...it, index }))
|
||
.filter((it) => it.enable)
|
||
.map((it) => superSingles[it.index].index)
|
||
);
|
||
setOpenSuper(!!res.is_superfanship_enabled);
|
||
setSuperSinglesContr(
|
||
priceList.map((it, index) => ({
|
||
enable: !!it.enable,
|
||
price: (it.price / 100).toString(),
|
||
wechatFree: !!it.is_superfanship_give_wechat,
|
||
key: index ? 5 - index : index,
|
||
}))
|
||
);
|
||
setSpacePriceInfo(res);
|
||
});
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!spacePriceInfo) return;
|
||
const { admission_price, ironfanship_price } = spacePriceInfo;
|
||
if (admission_price > -1) {
|
||
setSpacePrice((admission_price / 100).toString());
|
||
}
|
||
if (ironfanship_price > 0) {
|
||
setIronFanPrice((ironfanship_price / 100).toString());
|
||
}
|
||
}, [spacePriceInfo]);
|
||
const listItemWithCheckboxMemo = useMemo(() => {
|
||
return superSingles.map((item, index) => (
|
||
<View key={item.key}>
|
||
<ListItemWithCheckbox
|
||
superSingle={item}
|
||
superSinglesContr={superSinglesContr}
|
||
setSuperSinglesContr={setSuperSinglesContr}
|
||
// superSingleCheckeds={superSingleChecked}
|
||
superSingleCheckeds={superSingleCheckeds}
|
||
setSuperSingleCheckeds={setSuperSingleCheckeds}
|
||
index={index}
|
||
/>
|
||
</View>
|
||
));
|
||
}, [superSingleCheckeds, superSinglesContr]);
|
||
const handleSubmit = async () => {
|
||
const superSingle = [...superSinglesContr];
|
||
const openSuperEveryFalse = Object.values(superSingle).every(
|
||
(it) => !it.enable
|
||
);
|
||
if (!spacePrice || !ironFanPrice || (openSuper && openSuperEveryFalse)) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: "请完善档位内容后提交",
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
const _spacePrice = parseInt(spacePrice * 100, 10);
|
||
if (isNaN(_spacePrice) || _spacePrice < 0 || _spacePrice > 388800) {
|
||
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;
|
||
}
|
||
let isPrice = false;
|
||
if (openSuper) {
|
||
Object.values(superSingle).forEach((it) => {
|
||
if (it.enable) {
|
||
const superFanPrice = it.price;
|
||
if (!superFanPrice) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: "请填写超粉价格",
|
||
topOffset: 60,
|
||
});
|
||
isPrice = true;
|
||
return;
|
||
} else {
|
||
const _superFanPrice = parseInt(superFanPrice * 100, 10);
|
||
if (
|
||
openSuper &&
|
||
(isNaN(_superFanPrice) ||
|
||
_superFanPrice < 100 ||
|
||
_superFanPrice > 388800)
|
||
) {
|
||
isPrice = true;
|
||
Toast.show({
|
||
type: "error",
|
||
text1: "请输入有效的超粉价格",
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
if (openSuper && _superFanPrice <= _ironFanPrice) {
|
||
isPrice = true;
|
||
Toast.show({
|
||
type: "error",
|
||
text1: "请输入大于铁粉价格的超粉价格",
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
if (isPrice) return;
|
||
|
||
if (isSubmitting) return;
|
||
const superfan_price_list = superSinglesContr.map((it, index) => ({
|
||
period: it.key,
|
||
enable: it.enable ? 1 : 0,
|
||
price: parseInt(it.price * 100, 10),
|
||
is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
|
||
}));
|
||
setIsSubmitting(true);
|
||
try {
|
||
const body = {
|
||
id: parseInt(route.params.data.id, 10),
|
||
admission_price: parseInt(spacePrice * 100, 10),
|
||
ironfanship_price: parseInt(ironFanPrice * 100, 10),
|
||
is_superfanship_enabled: openSuper ? 1 : 0,
|
||
superfan_price_list,
|
||
};
|
||
const _data = await requireAPI(
|
||
"POST",
|
||
"/api/zone/update",
|
||
{
|
||
body,
|
||
},
|
||
true
|
||
);
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
icon: "error",
|
||
content: _data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
// Toast.show({
|
||
// icon: "success",
|
||
// content: "修改成功，请重进空间刷新查看",
|
||
// position: "top",
|
||
// });
|
||
navigation.goBack();
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
return (
|
||
<KeyboardAvoidingView
|
||
style={tailwind("flex-1 p-4")}
|
||
behavior={Platform.OS == "ios" ? "padding" : "height"}
|
||
keyboardVerticalOffset={insets.bottom + 60}
|
||
>
|
||
{/* 内容 */}
|
||
<ScrollView
|
||
style={{
|
||
paddingBottom: insets.bottom,
|
||
paddingLeft: insets.left,
|
||
paddingRight: insets.right,
|
||
}}
|
||
>
|
||
<View style={tailwind("mt-4")}>
|
||
<View style={tailwind("flex flex-row justify-between items-center")}>
|
||
<View style={tailwind("flex-row text-sm")}>
|
||
<Text style={tailwind("text-white")}>解锁空间价格</Text>
|
||
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
||
</View>
|
||
<Text style={tailwind("text-white text-xs")}>
|
||
（成为空间成员，可查看免费帖）
|
||
</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
spacePriceRef.current && spacePriceRef.current.focus();
|
||
}}
|
||
style={tailwind(
|
||
"mt-2 px-4 py-3 h-12 rounded-lg bg-[#FFFFFF1A] flex-row justify-between items-center"
|
||
)}
|
||
>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<Text style={tailwind("text-[#FFFFFF80] text-sm mr-1")}>¥</Text>
|
||
<TextInput
|
||
ref={spacePriceRef}
|
||
focusable={spacePriceAble}
|
||
value={spacePrice}
|
||
onChangeText={setSpacePrice}
|
||
keyboardType="numeric"
|
||
placeholder="0~3888，仅支持整数"
|
||
placeholderTextColor="#FFFFFF80"
|
||
underlineColorAndroid="transparent"
|
||
style={{
|
||
...tailwind("text-xl text-white"),
|
||
// maxWidth: 250,
|
||
minWidth: 150,
|
||
}}
|
||
/>
|
||
</View>
|
||
<View>
|
||
<Text style={tailwind("text-[#FFFFFF80] text-xs")}>点击编辑</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={tailwind("my-4")}>
|
||
<View style={tailwind("flex flex-row justify-between items-center")}>
|
||
<View style={tailwind("flex-row text-sm")}>
|
||
<Text style={tailwind("text-white")}>铁粉价格</Text>
|
||
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
||
</View>
|
||
<Text style={tailwind("text-white text-xs")}>
|
||
（累计消费达成后解锁铁粉权益）
|
||
</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
ironFanPriceRef.current && ironFanPriceRef.current.focus();
|
||
}}
|
||
style={tailwind(
|
||
"mt-2 px-4 py-3 h-12 rounded-lg bg-[#FFFFFF1A] flex-row justify-between items-center"
|
||
)}
|
||
>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<Text style={tailwind("text-[#FFFFFF80] text-sm mr-1")}>¥</Text>
|
||
<TextInput
|
||
ref={ironFanPriceRef}
|
||
value={ironFanPrice}
|
||
onChangeText={setIronFanPrice}
|
||
keyboardType="numeric"
|
||
placeholder="1~3888，仅支持整数"
|
||
placeholderTextColor="#FFFFFF80"
|
||
underlineColorAndroid="transparent"
|
||
style={{
|
||
...tailwind("text-xl text-white"),
|
||
// maxWidth: 250,
|
||
minWidth: 150,
|
||
}}
|
||
/>
|
||
</View>
|
||
<View>
|
||
<Text style={tailwind("text-[#FFFFFF80] text-xs")}>点击编辑</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={tailwind("my-4 flex-row justify-between items-center")}>
|
||
<View style={tailwind("text-sm")}>
|
||
<Text style={tailwind("text-white")}>超粉功能</Text>
|
||
</View>
|
||
<View style={tailwind("flex-row items-center")}>
|
||
<Text style={tailwind("text-white text-xs mr-2")}>是否启用</Text>
|
||
<View>
|
||
<Switch
|
||
value={openSuper}
|
||
onValueChange={(value) => setOpenSuper(value)}
|
||
thumbColor="#ffffff"
|
||
trackColor={{ true: "#FF669E", false: "#FFFFFF1A" }}
|
||
/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{openSuper && (
|
||
<View style={tailwind("mt-4")}>
|
||
<View style={tailwind("flex-row justify-between items-center")}>
|
||
<View style={tailwind("flex-row items-center text-sm")}>
|
||
<Text style={tailwind("text-white")}>超粉单次开通类型</Text>
|
||
<Text style={tailwind("text-[#F53030]")}>*</Text>
|
||
</View>
|
||
<Text style={tailwind("text-white text-xs")}>
|
||
（付费后解锁对应期限超粉权益）
|
||
</Text>
|
||
</View>
|
||
<View>{listItemWithCheckboxMemo}</View>
|
||
</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-16"), marginBottom: insets.bottom }}
|
||
>
|
||
{isSubmitting && <ActivityIndicator size="small" color="white" />}
|
||
{isSubmitting ? "正在保存..." : "保存设置"}
|
||
</Button>
|
||
</ScrollView>
|
||
</KeyboardAvoidingView>
|
||
);
|
||
}
|