123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- import OHeader from '@/components/o-header'
- import { Cell, CellGroup, Grid, GridItem, Image, Picker, Popup, Tag } from 'vant'
- import { defineComponent, onMounted, reactive } from 'vue'
- import styles from './index.module.less'
- import iconStudent from '@/common/images/icon_student.png'
- import request from '@/helpers/request'
- export default defineComponent({
- name: 'practice-detail',
- setup() {
- const state = reactive({
- subjectStatus: false,
- subjectList: [],
- isClick: false,
- list: [] as any,
- listState: {
- dataShow: true, // 判断是否有数据
- loading: false,
- finished: false,
- refreshing: false,
- height: 0 // 页面头部高度,为了处理下拉刷新用的
- },
- params: {
- type: null,
- page: 1,
- rows: 20
- }
- })
- // 获取声部
- const getSubjects = async () => {
- try {
- const { data } = await request.post('/api-school/subjectBasicConfig/page', {
- data: {
- page: 1,
- rows: 50
- }
- })
- state.subjectList = data.rows || []
- } catch {
- //
- }
- }
- // api-school/schoolWeekSalaryRecord/detailInfo/trainingPage
- const getList = async () => {
- try {
- if (state.isClick) return
- state.isClick = true
- const res = await request.post(
- '/api-school/schoolWeekSalaryRecord/detailInfo/trainingPage',
- {
- data: {
- ...state.params
- }
- }
- )
- state.listState.loading = false
- state.listState.refreshing = false
- const result = res.data || {}
- // 处理重复请求数据
- if (state.list.length > 0 && result.current === 1) {
- return
- }
- state.list = state.list.concat(result.rows || [])
- state.listState.finished = result.current >= result.pages
- state.params.page = result.current + 1
- state.listState.dataShow = state.list.length > 0
- state.isClick = false
- } catch {
- state.listState.dataShow = false
- state.listState.finished = true
- state.listState.refreshing = false
- state.isClick = false
- }
- }
- onMounted(() => {
- getSubjects()
- })
- return () => (
- <>
- <OHeader />
- <div class={styles.item}>
- <Cell center>
- {{
- title: () => (
- <div class={styles.itemTitle}>
- <div class={styles.titleLine}></div>
- <span>练习奖励</span>
- </div>
- )
- }}
- </Cell>
- <Grid class={styles.grid} columnNum={3} border={false}>
- <GridItem class={styles.gridBorderRight}>
- <div class={styles.gridItem}>
- <div class={styles.gridItemTop}>
- <span class={styles.topNum} style={{ color: '#333' }}>
- 0
- </span>
- 元/人
- </div>
- <div>奖励标准</div>
- </div>
- </GridItem>
- <GridItem class={styles.gridBorderRight}>
- <div class={styles.gridItem}>
- <div class={styles.gridItemTop}>
- <span class={styles.topNum} style={{ color: '#333' }}>
- 0
- </span>
- 人
- </div>
- <div>练习达标人数</div>
- </div>
- </GridItem>
- <GridItem>
- <div class={styles.gridItem}>
- <div class={styles.gridItemTop}>
- <span class={styles.topNum}>0</span>元
- </div>
- <div>奖励金额</div>
- </div>
- </GridItem>
- </Grid>
- </div>
- <div class={styles.searchGroup}>
- <span
- class={[styles.searchItem, state.subjectStatus && styles['searchItem--active']]}
- onClick={() => {
- state.subjectStatus = !state.subjectStatus
- }}
- >
- <div>全部声部</div>
- </span>
- </div>
- {/* {form.listState.dataShow ? (
- <OFullRefresh
- v-model:modelValue={form.listState.refreshing}
- onRefresh={onRefresh}
- style={{
- minHeight: `calc(100vh - ${form.listState.height}px)`
- }}
- >
- <List
- // v-model:loading={form.listState.loading}
- finished={form.listState.finished}
- finishedText=" "
- class={[styles.liveList]}
- onLoad={getList}
- immediateCheck={false}
- ></List> */}
- <CellGroup inset class={styles.cellGroup}>
- <Cell center>
- {{
- icon: () => <Image src={iconStudent} class={styles.img} />,
- title: () => (
- <div class={styles.userInfo}>
- <div class={styles.userName}>测试</div>
- <div class={styles.subjectNames}>
- <Tag type="primary">长笛</Tag>
- </div>
- </div>
- ),
- value: () => (
- <div class={styles.mins}>
- <div class={styles.nums}>
- <span>70</span> 分钟
- </div>
- <div class={styles.text}>练习时长</div>
- </div>
- )
- }}
- </Cell>
- </CellGroup>
- <Popup v-model:show={state.subjectStatus} position="bottom" round>
- <Picker
- columns={state.subjectList}
- onCancel={() => (state.subjectStatus = false)}
- onConfirm={(val: any) => {}}
- columnsFieldNames={{ text: 'subjectName', value: 'subjectId' }}
- />
- </Popup>
- </>
- )
- }
- })
|