orchestra-app/src/school/orchestra/compontent/information.tsx

import OSticky from '@/components/o-sticky'
import { Button, Grid, GridItem, Icon, Image, Popover, Popup } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './information.module.less'
import iconSaveImage from '../images/icon-save-image.png'
import iconWechat from '../images/icon-wechat.png'
import OQrcode from '@/components/o-qrcode'

export default defineComponent({
  name: 'detail-information',
  setup() {
    const state = reactive({
      showPopover: false,
      actions: [
        { text: '全部乐团', color: 'var(--van-primary-color)' },
        { text: '交付团' },
        { text: '晋升团' }
      ],
      oPopover: false,
      check: [],
      checkboxRefs: [] as any,
      showQrcode: false
    })
    return () => (
      <>
        <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
          <Popover
            v-model:show={state.showPopover}
            actions={state.actions}
            showArrow={false}
            placement="bottom-start"
            offset={[0, 12]}
            style={{ zIndex: '9999' }}
          >
            {{
              reference: () => (
                <div class={styles.searchBand}>
                  全部乐团 <Icon name={state.showPopover ? 'arrow-up' : 'arrow-down'} />
                </div>
              )
            }}
          </Popover>
          <Popover
            v-model:show={state.oPopover}
            actions={state.actions}
            showArrow={false}
            placement="bottom"
            offset={[0, 12]}
            style={{ zIndex: '9999' }}
          >
            {{
              reference: () => (
                <div class={styles.searchBand} style="margin-left: 16px">
                  武汉小学2022预备团 <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
                </div>
              )
            }}
          </Popover>
        </div>

        <Grid border={false} class={styles.gridContainer}>
          <GridItem>
            <p class={[styles.title, styles.red]}>
              92<span>名</span>
            </p>
            <p class={styles.name}>在读学生</p>
          </GridItem>
          <GridItem>
            <p class={[styles.title, styles.red]}>92%</p>
            <p class={styles.name}>到课率</p>
          </GridItem>
          <GridItem>
            <p class={[styles.title, styles.red]}>92%</p>
            <p class={styles.name}>作业提交率</p>
          </GridItem>
          <GridItem>
            <p class={[styles.title, styles.red]}>92%</p>
            <p class={styles.name}>练习合格率</p>
          </GridItem>
        </Grid>

        {[1, 2, 3, 4, 5, 6].map((val: any) => (
          <div class={[styles.gridContainer, styles.gridClass]}>
            <div class={styles.className}>
              <i class={styles.line}></i>
              长笛班
            </div>
            <Grid border={false} columnNum={3}>
              <GridItem>
                <p class={styles.title}>18</p>
                <p class={styles.name}>在读学生</p>
              </GridItem>
              <GridItem>
                <p class={[styles.title, styles.teacher]}>张老师</p>
                <p class={styles.name}>伴学指导</p>
              </GridItem>
              <GridItem>
                <p class={styles.title}>10/16</p>
                <p class={styles.name}>课时</p>
              </GridItem>
            </Grid>
          </div>
        ))}

        <OSticky position="bottom">
          <div class={'btnGroup'}>
            <Button round block type="primary" onClick={() => (state.showQrcode = true)}>
              报名二维码
            </Button>
          </div>
        </OSticky>

        <Popup
          v-model:show={state.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}
          safeAreaInsetBottom={true}
        >
          <div class={styles.codeContainer}>
            <div class={styles.codeImg}>
              <div class={styles.codeContent}>
                <h2 class={styles.codeTitle}>乐团报名</h2>
                <div class={styles.codeName}>武汉小学2022上学期团武汉小学</div>

                <div class={styles.codeQr}>
                  <OQrcode text="http://ponline.dayaedu.com/" size={400} />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>
                </div>
                <div class={styles.codeTips}>二维码将在两小时后失效，请及时登记</div>
              </div>
            </div>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (state.showQrcode = false)}
              />

              <h3 class={styles.title}>
                <i></i>分享方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
                    text: () => <div class={styles.shareText}>保存图片</div>
                  }}
                </GridItem>
                <GridItem>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconWechat} />,
                    text: () => <div class={styles.shareText}>微信</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </>
    )
  }
})