sourcecode/front/project/h5/routes/textbook/detail/page.js

import React, { Component } from 'react';
import './index.less';
import { Drawer } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Switch from '../../../components/Switch';
import Icon from '../../../components/Icon';
import { SpecialRadioGroup } from '../../../components/Radio';
import Button from '../../../components/Button';

class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  render() {
    const { show } = this.state;
    return (
      <div className="detail">
        <div className="detail-title">1.幼儿吞药</div>
        <div className="detail-desc">
          幼兒容易將藥丸吞食，故許多藥局將藥丸放在一個幼兒不容易打開的盒子裡，但之後幼兒誤
          吞藥丸的比例變高了，since_____ ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
        </div>
        <div className="detail-switch">
          显示答案
          <Switch size="small" checked={show} onClick={() => this.setState({ show: !show })} />
        </div>
        <div hidden={!show} className="detail-result">
          :吞藥丸的比例變高了，since_____
          ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
          ==>大人將盒子放在幼兒容易拿到的地方(感覺跟一題打火機放在幼兒容易拿到的地方相似)
        </div>
      </div>
    );
  }
}

export default class extends Page {
  init() {}

  renderView() {
    const { filter } = this.state;
    console.log(filter);
    return (
      <Drawer
        style={{ minHeight: document.documentElement.clientHeight }}
        position="right"
        open={filter}
        sidebar={this.renderFilter()}
        onOpenChange={isOpen => this.setState({ filter: isOpen })}
      >
        <div className="title">【逻辑】0515 起逻辑机经整理</div>
        <div className="detail-list">
          <Detail />
          <Detail />
        </div>
        <div className="fixed">
          <div className="prev">
            <Icon type="left" />
            Previous
          </div>
          <div className="next">
            Next
            <Icon type="right" />
          </div>
          <div className="page">
            <span>跳转至</span>第<span>15</span>页
            <Assets name="down_down3" />
          </div>
        </div>
        <div hidden={filter} className="filter-switch">
          <Assets name="setting" onClick={() => this.setState({ filter: true })} />
        </div>
      </Drawer>
    );
  }

  renderFilter() {
    return (
      <div className="filter">
        <div className="body">
          <div className="item">
            <div className="label">机经质量</div>
            <div className="value">
              <SpecialRadioGroup
                list={[{ key: '1', label: '完整' }, { key: '2', label: '较完整' }, { key: '3', label: '残缺' }]}
              />
            </div>
          </div>
          <div className="item">
            <div className="label left">更新时间</div>
            <div className="value right">
              由远到近 <Assets className="arrow" name="down_down3" />
            </div>
          </div>
          <div className="item">
            <div className="label left">看考古</div>
            <div className="value right">
              <Switch />
            </div>
          </div>
        </div>
        <div className="footer">
          <Button radius width={90}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}