66 lines
1.8 KiB
React
66 lines
1.8 KiB
React
|
import { View, Text } from "react-native";
|
|||
|
|
import React from "react";
|
|||
|
|
import { useTailwind } from "tailwind-rn";
|
|||
|
|
import { Image } from "expo-image";
|
|||
|
|
import Level from "../Level";
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
comment参数格式：
|
|||
|
|
{
|
|||
|
|
name: "色批1号",
|
|||
|
|
head: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
|
|||
|
|
level: "23",
|
|||
|
|
content: ["身材好", "声音好听", "态度好"],
|
|||
|
|
type: "good",
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export default function ServiceComment({ comment }) {
|
|||
|
|
const tailwind = useTailwind();
|
|||
|
|
//计算标签颜色
|
|||
|
|
const handleColor = (item) => {
|
|||
|
|
switch (item) {
|
|||
|
|
case "身材好":
|
|||
|
|
return "#ef4444";
|
|||
|
|
case "声音好听":
|
|||
|
|
return "#facc15";
|
|||
|
|
case "态度好":
|
|||
|
|
return "#e879f9";
|
|||
|
|
case "缘分未到":
|
|||
|
|
return "#9ca3af";
|
|||
|
|
default:
|
|||
|
|
return "#a3e635";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
<View style={tailwind("flex-row items-center justify-between mt-2")}>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
<Image
|
|||
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
|||
|
|
source={comment.head}
|
|||
|
|
contentFit="cover"
|
|||
|
|
transition={1000}
|
|||
|
|
cachePolicy="disk"
|
|||
|
|
/>
|
|||
|
|
<View style={tailwind("flex justify-around h-12")}>
|
|||
|
|
<Text style={tailwind("text-sm")}>{comment.name}</Text>
|
|||
|
|
<Level level={comment.level} />
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<View style={tailwind("flex-row items-center")}>
|
|||
|
|
{comment.content.map((item, index) => (
|
|||
|
|
<View
|
|||
|
|
key={index}
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: handleColor(item),
|
|||
|
|
...tailwind("py-1 px-2 ml-1 rounded-full"),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Text style={tailwind("text-sm text-white")}>{item}</Text>
|
|||
|
|
</View>
|
|||
|
|
))}
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
);
|
|||
|
|
}
|