66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
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>
|
||
);
|
||
}
|