xcx_ggw/src/pages/My/index.tsx

import React, {useState} from 'react'

import { View, Image, Text } from '@tarojs/components'

import './index.scss'

const stepList = new Array(8).fill(0)

const RankList: React.FC = () => {

    // 当前选中的Menu下标
    const [MenuIndex, setMenuIndex] = useState(0)


    // 渲染排名等级
    const RenderThree = (rank: number) => {
        if (rank < 4) {
            return <Image  style={{width: 26, height: 29}} src={require(`../../assets/My/rank${rank}.png`)} />
        } else {
            return rank
        }

    }

    // 渲染做题记录

    const RenderTopicRecord = () => {
        return (
            <View className='topic'>
                <View className='topic-item'>
                    <View className='date'>2020/4/18</View>

                </View>
            </View>
        )
    }


    // 渲染排行榜
    const RenderRank = () => {
        return (
            <React.Fragment>
                <View className='rank-item'>
                        <View className='rank-count'>
                            {RenderThree(2)}
                        </View>
                        <Image className='user-ava'  src={require('../../assets/My/ava.jpg')} />
                        <View className='user-name over1'>22222222222222222</View>
                        <View className='success-rate'>正确率：<Text>80%</Text></View>
                        <View className='date'>用时:<Text>10s</Text></View>
                </View>
                <View className='rank'>
                    {
                        stepList.map( (item, index) =>  (
                            <View className='rank-item' key={index}>
                                <View className='rank-count'>
                                    {RenderThree(index + 1)}
                                </View>
                                <Image className='user-ava'  src={require('../../assets/My/ava.jpg')} />
                                <View className='user-name over1'>22222222222222222</View>
                                <View className='success-rate'>正确率：<Text>80%</Text></View>
                                <View className='date'>用时:<Text>10s</Text></View>
                            </View>
                        ))
                    }
                    
                </View>
            </React.Fragment>
        )
    }

    return (
        <View className='RankList'>
            <View className='self'>
                <View className='menu'>
                    <View className={[MenuIndex === 0 ? 'active' : ''].join('')} onClick={() => setMenuIndex(0)}> 排行榜 </View>
                    <View className={[MenuIndex === 1 ? 'active' : ''].join('')} onClick={() => setMenuIndex(1)}> 做题记录 </View>
                </View>
                <View className='line'></View>
            </View>

            {/* 排行榜 */}
            {
                MenuIndex === 0 ? RenderRank() : RenderTopicRecord()
            }

            
        </View>
    )
}

const My: React.FC = () => {

    const RenderTopicResult = () => {
        // return <Image className='star' src={require('../../assets/My/star0.png')} />
        return (
            <View className='clock'>
                <Image style={{width: 8, height: 9}} src={require('../../assets/My/clock.png')} />
                <Text>未解锁</Text>
            </View>
        )
    }

    return (
        <View className='My'>
            <View className='header'></View>
            <View className='user'>
                <Image className='user-ava' src={require('../../assets/My/ava.jpg')} />
                <Text>小明</Text>
            </View>
            {/* 闯关进度 */}
            <View className='customs-step'>
                {
                    stepList.map( (item, index) => (
                        <View className='step' style={{marginRight: [3, 7].includes(index)?  0 : 27}} key={index} >
                            <Image style={{width: 21, height: 27}} src={require(`../../assets/My/${index + 1 }.png`)} />
                            {
                                RenderTopicResult()
                            }
                        </View>
                    ))
                }
            </View>
            {/* 卡片 */}
            <View className='card'>
                <Image className='card-btn' src={require('../../assets/My/card-btn.png')} />
            </View>
            {/* 排行榜 */}
            <RankList />
        </View>
    )
}

export default My