tiefen_space_app/screeens/EditStreamerProfile/index.jsx

677 lines
26 KiB
JavaScript
Raw Permalink 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,
TouchableOpacity,
TextInput,
KeyboardAvoidingView,
Platform,
ActivityIndicator,
} from "react-native";
import React, { useState, useMemo, useCallback, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Divider, Button, CheckBox } from "@rneui/themed";
import { Image } from "expo-image";
import { Formik } from "formik";
import Picker from "../../components/Picker";
import Toast from "react-native-toast-message";
import { get } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
export default function EditStreamerProfile({ navigation, route }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
//控制填写微信的输入框是否出现1不出现0出现
const [wechatInputShow, setWechatInputShow] = useState(1);
//保存主播标签
const [tags, setTags] = useState([]);
//点击标签
const handlePressTag = (tag, isChecked) => {
if (isChecked) {
setTags(tags.filter((item) => item !== tag));
} else {
if (tags.length >= 3) {
Toast.show({
type: "error",
text1: "最多只能选择3个标签",
topOffset: 60,
});
return;
}
setTags([...tags, tag]);
}
};
//标签组件
const TagItem = ({ tag, label }) => {
const isChecked = tags.includes(tag);
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => handlePressTag(tag, isChecked)}
style={
isChecked
? tailwind("border border-[#FF669E] rounded-full px-2 py-1 m-1")
: tailwind("border border-gray-400 rounded-full px-2 py-1 m-1")
}
>
<Text
style={
isChecked
? tailwind("text-[#FF669E] text-sm font-medium")
: tailwind("text-[#FFFFFF80] text-sm font-medium")
}
>
{label}
</Text>
</TouchableOpacity>
);
};
//生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
const generateItems = useCallback((min, max) => {
const items = [];
for (let i = min; i <= max; i++) {
items.push({ label: i.toString(), value: i.toString() });
}
return items;
}, []);
const ages = useMemo(() => generateItems(18, 60), []);
const heights = useMemo(() => generateItems(140, 200), []);
const weights = useMemo(() => generateItems(35, 100), []);
const constellations = [
{ label: "白羊座", value: "白羊座" },
{ label: "金牛座", value: "金牛座" },
{ label: "双子座", value: "双子座" },
{ label: "巨蟹座", value: "巨蟹座" },
{ label: "狮子座", value: "狮子座" },
{ label: "处女座", value: "处女座" },
{ label: "天秤座", value: "天秤座" },
{ label: "天蝎座", value: "天蝎座" },
{ label: "射手座", value: "射手座" },
{ label: "摩羯座", value: "摩羯座" },
{ label: "水瓶座", value: "水瓶座" },
{ label: "双鱼座", value: "双鱼座" },
];
const provinces = [
{ label: "北京市", value: "北京市" },
{ label: "天津市", value: "天津市" },
{ label: "河北省", value: "河北省" },
{ label: "山西省", value: "山西省" },
{ label: "内蒙古自治区", value: "内蒙古自治区" },
{ label: "辽宁省", value: "辽宁省" },
{ label: "吉林省", value: "吉林省" },
{ label: "黑龙江省", value: "黑龙江省" },
{ label: "上海市", value: "上海市" },
{ label: "江苏省", value: "江苏省" },
{ label: "浙江省", value: "浙江省" },
{ label: "安徽省", value: "安徽省" },
{ label: "福建省", value: "福建省" },
{ label: "江西省", value: "江西省" },
{ label: "山东省", value: "山东省" },
{ label: "河南省", value: "河南省" },
{ label: "湖北省", value: "湖北省" },
{ label: "湖南省", value: "湖南省" },
{ label: "广东省", value: "广东省" },
{ label: "广西壮族自治区", value: "广西壮族自治区" },
{ label: "海南省", value: "海南省" },
{ label: "重庆市", value: "重庆市" },
{ label: "四川省", value: "四川省" },
{ label: "贵州省", value: "贵州省" },
{ label: "云南省", value: "云南省" },
{ label: "西藏自治区", value: "西藏自治区" },
{ label: "陕西省", value: "陕西省" },
{ label: "甘肃省", value: "甘肃省" },
{ label: "青海省", value: "青海省" },
{ label: "宁夏回族自治区", value: "宁夏回族自治区" },
{ label: "新疆维吾尔自治区", value: "新疆维吾尔自治区" },
{ label: "台湾省", value: "台湾省" },
{ label: "香港特别行政区", value: "香港特别行政区" },
{ label: "澳门特别行政区", value: "澳门特别行政区" },
];
//基本资料
const [data, setData] = useState({ tag: {} });
//正在加载数据
const [isLoading, setIsloading] = useState(true);
useEffect(() => {
const getData = async () => {
const account = await get("account");
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
const base = await baseRequest();
const signature = await generateSignature({
mid: account?.mid,
...base,
});
try {
//获取主播数据
const streamerResponse = await fetch(
`${apiUrl}/api/streamer/list_by_mid?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: account?.mid,
...base,
}),
}
);
const streamerData = await streamerResponse.json();
if (streamerData.ret === -1) {
Toast.show({
type: "error",
text1: streamerData.msg,
topOffset: 60,
});
return;
}
//获取所有的标签
const signature2 = await generateSignature({
...base,
});
const response = await fetch(
`${apiUrl}/api/streamer_tag/list?signature=${signature2}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
...base,
}),
}
);
const tagData = await response.json();
if (tagData.ret === -1) {
Toast.show({
type: "error",
text1: tagData.msg,
topOffset: 60,
});
return;
}
setData({ ...account, ...streamerData.data, tag: tagData.data });
setWechatInputShow(streamerData.data.streamer.wechat_lock_type);
setTags(streamerData.data.streamer.tag);
setIsloading(false);
} catch (error) {
console.error(error);
}
};
getData();
}, []);
//正在提交状态
const [isSubmitting, setIsSubmitting] = useState(false);
//loading时展示加载中
if (isLoading) {
return (
<ActivityIndicator style={tailwind("mt-32")} size="large" color="white" />
);
}
return (
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={insets.bottom + 60}
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex-1"),
}}
>
<ScrollView style={tailwind("px-4 py-4")}>
<Formik
initialValues={{
gender: data?.streamer?.gender?.toString(),
wechat_add_way: data?.streamer?.wechat_lock_type?.toString(),
wechat: data?.streamer?.wechat_contact?.toString(),
price: (data?.streamer?.wechat_coin_price / 10)?.toString(),
info: data?.streamer?.bio?.toString(),
age: data?.streamer?.age?.toString(),
height: data?.streamer?.height?.toString(),
weight: data?.streamer?.weight?.toString(),
constellation: data?.streamer?.constellation?.toString(),
location: data?.streamer?.city?.toString(),
auto_response_message:
data?.streamer?.auto_response_message?.toString(),
}}
enableReinitialize
onSubmit={async (values) => {
if (
!values.gender ||
!values.wechat_add_way ||
!values.price ||
!values.info ||
!values.age ||
!values.height ||
!values.weight ||
!values.constellation ||
!values.location ||
!values.auto_response_message ||
tags.length === 0
) {
Toast.show({
type: "error",
text1: "请完善信息后提交",
topOffset: 60,
});
return;
}
const price = parseInt(values.price, 10);
if (isNaN(price) || price < 1) {
Toast.show({
type: "error",
text1: "请输入有效的微信价格大于等于1的整数",
topOffset: 60,
});
return;
}
if (values.wechat_add_way === "0" && !values.wechat) {
Toast.show({
type: "error",
text1: "请填写微信号",
topOffset: 60,
});
return;
}
setIsSubmitting(true);
const account = await get("account");
//获取环境变量
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
//上传表单
const base = await baseRequest();
const signature = await generateSignature({
mid: account?.mid,
gender: parseInt(values.gender, 10),
wechat_contact: values.wechat,
bio: values.info,
age: parseInt(values.age, 10),
height: parseInt(values.height, 10),
weight: parseInt(values.weight, 10),
constellation: values.constellation,
city: values.location,
tag: tags,
wechat_lock_type: parseInt(values.wechat_add_way, 10),
wechat_coin_price: parseInt(values.price, 10) * 10,
auto_response_message: values.auto_response_message,
...base,
});
try {
const response = await fetch(
`${apiUrl}/api/streamer/update?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: account?.mid,
gender: parseInt(values.gender, 10),
wechat_contact: values.wechat,
bio: values.info,
age: parseInt(values.age, 10),
height: parseInt(values.height, 10),
weight: parseInt(values.weight, 10),
constellation: values.constellation,
city: values.location,
tag: tags,
wechat_lock_type: parseInt(values.wechat_add_way, 10),
wechat_coin_price: parseInt(values.price, 10) * 10,
auto_response_message: values.auto_response_message,
...base,
}),
}
);
const streamerData = await response.json();
if (streamerData.ret === -1) {
Toast.show({
type: "error",
text1: streamerData.msg,
topOffset: 60,
});
return;
}
//提交成功后弹窗提示并返回上级
Toast.show({
type: "success",
text1: "更改成功",
topOffset: 60,
});
navigation.goBack();
} catch (error) {
console.error(error);
} finally {
setIsSubmitting(false);
}
}}
>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<>
<View style={tailwind("my-2 bg-[#FFFFFF1A] p-2 rounded-2xl")}>
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
头像(需在我的修改)
</Text>
<Image
style={tailwind("w-12 h-12 rounded-full")}
source={data?.avatar?.images[0]?.urls[0]}
placeholder={blurhash}
contentFit="cover"
transition={1000}
cachePolicy="disk"
/>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
昵称(需在我的修改)
</Text>
<Text style={tailwind("text-base text-white font-medium")}>
{data?.name}
</Text>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
性别
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={[
{
label: "女",
value: "1",
},
{ label: "男", value: "0" },
]}
value={values.gender}
onChange={handleChange("gender")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-col justify-between")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
添加标签
</Text>
<View style={tailwind("flex-row flex-wrap")}>
{Object.entries(data?.tag).map(([tag, label]) => {
return <TagItem key={tag} tag={label} label={label} />;
})}
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-col justify-between")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
添加微信方式
</Text>
<View
style={tailwind("flex-row items-center justify-around")}
>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
setWechatInputShow(1);
setFieldValue("wechat_add_way", "1");
}}
style={tailwind("flex-row items-center")}
>
<CheckBox
checked={values.wechat_add_way === "1"}
onPress={() => {
setWechatInputShow(1);
setFieldValue("wechat_add_way", "1");
}}
iconType="material-community"
checkedIcon="checkbox-marked"
uncheckedIcon="checkbox-blank-outline"
checkedColor="#FF669E"
containerStyle={tailwind("p-0 m-0 bg-transparent")}
size={18}
/>
<Text
style={tailwind("text-base text-white font-medium")}
>
主动添加对方
</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
setWechatInputShow(0);
setFieldValue("wechat_add_way", "0");
}}
style={tailwind("flex-row items-center")}
>
<CheckBox
checked={values.wechat_add_way === "0"}
onPress={() => {
setWechatInputShow(0);
setFieldValue("wechat_add_way", "0");
}}
iconType="material-community"
checkedIcon="checkbox-marked"
uncheckedIcon="checkbox-blank-outline"
checkedColor="#FF669E"
containerStyle={tailwind("p-0 m-0 bg-transparent")}
size={18}
/>
<Text
style={tailwind("text-base text-white font-medium")}
>
向对方展示微信
</Text>
</TouchableOpacity>
</View>
</View>
<Divider style={tailwind("my-2")} />
{wechatInputShow === 0 && (
<>
<View
style={tailwind("flex-row justify-between items-center")}
>
<Text
style={tailwind("text-base text-white font-medium")}
>
<Text style={tailwind("text-[#F53030]")}>*</Text>
微信号
</Text>
<View
style={tailwind(
"flex-row flex-1 justify-end items-center"
)}
>
<TextInput
placeholder="对方付费购买后展示"
placeholderTextColor="#FFFFFF80"
style={tailwind("text-white flex-1")}
underlineColorAndroid="transparent"
textAlign="right"
maxLength={20}
onChangeText={handleChange("wechat")}
value={values.wechat}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
</>
)}
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
加微信价格
</Text>
<View
style={tailwind("flex-row flex-1 justify-end items-center")}
>
<TextInput
placeholder="请输入心仪价格"
placeholderTextColor="#FFFFFF80"
keyboardType="numeric"
style={tailwind("text-white flex-1")}
underlineColorAndroid="transparent"
textAlign="right"
onChangeText={handleChange("price")}
value={values.price}
/>
<Text
style={tailwind("text-base text-white font-medium ml-1")}
>
</Text>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-col")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
个性签名
</Text>
<View style={tailwind("flex-row items-center")}>
<TextInput
multiline
scrollEnabled={false}
placeholder="点此输入,文案将在“主页”展示"
placeholderTextColor="#FFFFFF80"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="top"
onChangeText={handleChange("info")}
value={values.info}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
年龄
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={ages}
value={values.age}
onChange={handleChange("age")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
身高cm
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={heights}
value={values.height}
onChange={handleChange("height")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
体重kg
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={weights}
value={values.weight}
onChange={handleChange("weight")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={constellations}
value={values.constellation}
onChange={handleChange("constellation")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-row justify-between items-center")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
</Text>
<View style={tailwind("w-1/2")}>
<Picker
items={provinces}
value={values.location}
onChange={handleChange("location")}
/>
</View>
</View>
<Divider style={tailwind("my-2")} />
<View style={tailwind("flex-col")}>
<Text style={tailwind("text-base text-white font-medium")}>
<Text style={tailwind("text-[#F53030]")}>*</Text>
私信自动回复
</Text>
<View style={tailwind("flex-row items-center")}>
<TextInput
multiline
scrollEnabled={false}
placeholder="文案将自动发送给点开私信的用户"
placeholderTextColor="#FFFFFF80"
style={tailwind("text-white")}
underlineColorAndroid="transparent"
textAlign="top"
onChangeText={handleChange("auto_response_message")}
value={values.auto_response_message}
/>
</View>
</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={(e) => {
handleSubmit(e);
}}
titleStyle={tailwind("text-base")}
containerStyle={{
marginBottom: insets.bottom + 60,
...tailwind("mt-4"),
}}
>
{isSubmitting && (
<ActivityIndicator size="small" color="white" />
)}
{isSubmitting ? "正在提交..." : "确认修改"}
</Button>
</>
)}
</Formik>
</ScrollView>
</KeyboardAvoidingView>
);
}