miniapp/src/pages/check/loc/edit/components/QuSelect/index.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { Popup, Cell, Icon } from '@antmjs/vantui';
import RatioView from '@/components/RatioView';
import style from './style.module.less';

const Bar = (props) => {
  const {cursor, total, onClick} =  props;

  const handleClick = (e) => {
    if (onClick) {
      onClick(e);
    }
  }

  return (
    <View className={style['qu-board-title']} onClick={handleClick}>
      <Icon name="weapp-nav" size={60} color="var(--main-bg-color)" />
      <Text>{cursor + 1}</Text>
      <Text> / </Text>
      <Text>{total}</Text>
    </View>
  )
}


export default (props) => {
  const { value = 0, list, onChange } = props;

  const [show, setShow] = React.useState(false);

  const handleClick = (e, inx) => {
    e.stopPropagation();
    setShow(false);

    if (onChange) {
      onChange(inx);
    }
  }
  
  return (
    <View className={style['qu-board-bar']}>
      <Bar cursor={value} total={list?.length} onClick={() => setShow(true)} />
      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
        <View className={style['qu-board-wrapper']}>
          <Bar cursor={value} total={list?.length} />
          <View className={style['qu-board-bd']}>
            {
              list?.map((it, inx) => {
                const cls = [
                  style['qu-board-bd-item'],
                  it?.finished ? style['qu-board-bd-active'] : false,
                ].filter(Boolean).join(' ')

                return (
                  <RatioView key={inx}>
                    <View className={cls} onClick={e => handleClick(e, inx)}>{inx + 1}</View>
                  </RatioView>
                )
              })
            }
          </View>
        </View>
      </Popup>
    </View>
  )
}