client-s/src/compents/tab/index.jsx

import React, { useEffect, useState } from 'react'
import Taro from "@tarojs/taro";
import { Button, View } from '@tarojs/components'

import './index.scss'

// const getColor = (role) => {
//     switch (role) {
//         case roleList.landlord: return '#274291'
//         case roleList.adminuser: return '#274291'
//         // landlord: 'landlord',
//         case roleList.customer: return '#fed12f'
//     }
// }


const tab = (props) => {
    // formType="submit"

    const { value, pageState, formType, color, ...prop } = props

    const [state, setState] = useState(1)
    // console.log(props)
    useEffect(() => {

    }, [])
    //  &-on{
    //     color: #fed12f; style={{ backgroundColor:'#274291' ,color}}
    // }${props.className}
    return <View className='tab'>
        {value.length == 1 && <View className={`tab tab1 ${props.className}`} onClick={() => props.onClick('2')}>{value[0]}
        </View>}
        {value.length == 2 && <View className={`tab tab2 ${props.className}`} style={{ display: 'flex', }}>
            <View style={{ width: '50%' }} style={pageState == '2' ? { color: '#274291', width: '50%' } : { width: '50%' }} onClick={props.onClick[0]}>{value[0]}</View>
           { !formType? 
            <View formType={formType} style={{ width: '50%' }} style={pageState == '3' ? { color: '#274291', width: '50%' } : { width: '50%' }} onClick={props.onClick[1]}>{value[1]}</View>
            :<Button className='tab-btn' formType={formType} plain={true} style={{ width: '50%' }} style={pageState == '3' ? { color: '#274291', width: '50%',border:'none' } : { width: '50%',border:'none' }} onClick={props.onClick[1]}>{value[1]}</Button>}
        </View>}
    </View>
};

export default tab