bluenote/src/pages/member/components/member-rights/index.tsx

import { View, Image, Text } from "@tarojs/components";
import style from './index.module.less'
import { TModelAppConfig } from '@/types/index'
import { VIP_LEVEL } from '@/config/index'
import { APP_NAME_TEXT } from '@/config'
interface Props {
  appConfig: TModelAppConfig;
  vip: string
}

export default ({appConfig, vip}: Props) => {
  // 有对应的 vip 则返回vip 否则返回免费用户
  const vipMetadata = appConfig?.vips?.find((item)=> {
    if(vip){
      return item.id === vip
    }else{
      return item.id === VIP_LEVEL.FREE
    }
  })?.metadata

  const isFree = vip === VIP_LEVEL.FREE
  
  if(!vipMetadata){
    return <></>
  }

  const renderKnowledgeRights = ()=> {
    if(!isFree){
      return <>
        <Text className="text-12 text-black leading-18 whitespace-nowrap">{vipMetadata.maxDocSize/1024}G知识库</Text>
        <Text className="text-12 text-black leading-18">文件上传容量</Text>
      </>  
    }
    return <>
      <Text className="text-12 text-black leading-18">不支持知识库</Text>
      <Text className="text-12 text-black leading-18">文件上传</Text>
    </>
  }
  return (
    <View className="flex flex-col w-full gap-24">
    <View className="flex flex-wrap justify-between items-center  w-full">
      <View className={`flex flex-col gap-8 ${style.rightItem}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/158/META-H8UKVHWU-KIGP3BIL7M5AYC6XHNUA2-PLOMWI2M-R91.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          <Text className="text-12 text-black leading-18">最多创作</Text>
          <Text className="text-12 text-black leading-18">{vipMetadata.maxCharacterNum === -1 ? 30: vipMetadata.maxCharacterNum}个{APP_NAME_TEXT}</Text>
        </View>
      </View>
      
      <View className={`flex flex-col gap-8 ${style.rightItem}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/93/META-H8UKVHWU-KIGP3BIL7M5AYC6XHNUA2-PLOMWI2M-S91.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          <Text className="text-12 text-black leading-18">{vipMetadata.cloneVoiceChatDuration / 60}分钟/天</Text>
          <Text className="text-12 text-black leading-18">克隆音色对话</Text>
        </View>
      </View>
      
      <View className={`flex flex-col gap-8 ${style.rightItem} ${vipMetadata.customBgImage ? '' : style.disabled}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/33/META-H8UK0IWU-LIGPDI0B88LDCAMAO6LN3-TLOMWI2M-D71.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          <Text className="text-12 text-black leading-18">自定义背景</Text>
          <Text className="text-12 text-black leading-18">图片上传</Text>
        </View>
      </View>
    </View>
    
    <View className="flex flex-wrap justify-between items-center w-full">
      <View className={`flex flex-col gap-8 ${style.rightItem} ${!isFree? '' : style.disabled}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/61/META-H8UKVHWU-KIGP3BIL7M5AYC6XHNUA2-QLOMWI2M-T91.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          {renderKnowledgeRights()}
        </View>
      </View>
      
      <View className={`flex flex-col gap-8 ${style.rightItem} ${style.rightItem} ${vipMetadata.viewChatHistory ? '' : style.disabled}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/128/META-H8UKVHWU-KIGP3BIL7M5AYC6XHNUA2-ULOMWI2M-U91.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          <Text className="text-12 text-black leading-18">支持查看</Text>
          <Text className="text-12 text-black leading-18">AI 对话记录</Text>
        </View>
      </View>
      
      <View className={`flex flex-col gap-8 ${style.rightItem} ${vipMetadata.viewVisitStats ? '' : style.disabled}`}>
        <View className="w-48 h-48">
          <Image src='https://cdn.wehome.cn/cmn/png/32/META-H8UK0IWU-LIGPDI0B88LDCAMAO6LN3-VLOMWI2M-E71.png' mode="widthFix" className="w-48 h-48"></Image>
        </View>
        <View className="flex flex-col text-center">
          <Text className="text-12 text-black leading-18">支持查看</Text>
          <Text className="text-12 text-black leading-18">访问数据</Text>
        </View>
      </View>
    </View>
    </View>
  );
};