detail.tsx 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import OHeader from '@/components/o-header'
  2. import { Cell, CellGroup, Grid, GridItem, Image, Picker, Popup, Tag } from 'vant'
  3. import { defineComponent, onMounted, reactive } from 'vue'
  4. import styles from './index.module.less'
  5. import iconStudent from '@/common/images/icon_student.png'
  6. import request from '@/helpers/request'
  7. export default defineComponent({
  8. name: 'practice-detail',
  9. setup() {
  10. const state = reactive({
  11. subjectStatus: false,
  12. subjectList: [],
  13. isClick: false,
  14. list: [] as any,
  15. listState: {
  16. dataShow: true, // 判断是否有数据
  17. loading: false,
  18. finished: false,
  19. refreshing: false,
  20. height: 0 // 页面头部高度,为了处理下拉刷新用的
  21. },
  22. params: {
  23. type: null,
  24. page: 1,
  25. rows: 20
  26. }
  27. })
  28. // 获取声部
  29. const getSubjects = async () => {
  30. try {
  31. const { data } = await request.post('/api-school/subjectBasicConfig/page', {
  32. data: {
  33. page: 1,
  34. rows: 50
  35. }
  36. })
  37. state.subjectList = data.rows || []
  38. } catch {
  39. //
  40. }
  41. }
  42. // api-school/schoolWeekSalaryRecord/detailInfo/trainingPage
  43. const getList = async () => {
  44. try {
  45. if (state.isClick) return
  46. state.isClick = true
  47. const res = await request.post(
  48. '/api-school/schoolWeekSalaryRecord/detailInfo/trainingPage',
  49. {
  50. data: {
  51. ...state.params
  52. }
  53. }
  54. )
  55. state.listState.loading = false
  56. state.listState.refreshing = false
  57. const result = res.data || {}
  58. // 处理重复请求数据
  59. if (state.list.length > 0 && result.current === 1) {
  60. return
  61. }
  62. state.list = state.list.concat(result.rows || [])
  63. state.listState.finished = result.current >= result.pages
  64. state.params.page = result.current + 1
  65. state.listState.dataShow = state.list.length > 0
  66. state.isClick = false
  67. } catch {
  68. state.listState.dataShow = false
  69. state.listState.finished = true
  70. state.listState.refreshing = false
  71. state.isClick = false
  72. }
  73. }
  74. onMounted(() => {
  75. getSubjects()
  76. })
  77. return () => (
  78. <>
  79. <OHeader />
  80. <div class={styles.item}>
  81. <Cell center>
  82. {{
  83. title: () => (
  84. <div class={styles.itemTitle}>
  85. <div class={styles.titleLine}></div>
  86. <span>练习奖励</span>
  87. </div>
  88. )
  89. }}
  90. </Cell>
  91. <Grid class={styles.grid} columnNum={3} border={false}>
  92. <GridItem class={styles.gridBorderRight}>
  93. <div class={styles.gridItem}>
  94. <div class={styles.gridItemTop}>
  95. <span class={styles.topNum} style={{ color: '#333' }}>
  96. 0
  97. </span>
  98. 元/人
  99. </div>
  100. <div>奖励标准</div>
  101. </div>
  102. </GridItem>
  103. <GridItem class={styles.gridBorderRight}>
  104. <div class={styles.gridItem}>
  105. <div class={styles.gridItemTop}>
  106. <span class={styles.topNum} style={{ color: '#333' }}>
  107. 0
  108. </span>
  109. </div>
  110. <div>练习达标人数</div>
  111. </div>
  112. </GridItem>
  113. <GridItem>
  114. <div class={styles.gridItem}>
  115. <div class={styles.gridItemTop}>
  116. <span class={styles.topNum}>0</span>元
  117. </div>
  118. <div>奖励金额</div>
  119. </div>
  120. </GridItem>
  121. </Grid>
  122. </div>
  123. <div class={styles.searchGroup}>
  124. <span
  125. class={[styles.searchItem, state.subjectStatus && styles['searchItem--active']]}
  126. onClick={() => {
  127. state.subjectStatus = !state.subjectStatus
  128. }}
  129. >
  130. <div>全部声部</div>
  131. </span>
  132. </div>
  133. {/* {form.listState.dataShow ? (
  134. <OFullRefresh
  135. v-model:modelValue={form.listState.refreshing}
  136. onRefresh={onRefresh}
  137. style={{
  138. minHeight: `calc(100vh - ${form.listState.height}px)`
  139. }}
  140. >
  141. <List
  142. // v-model:loading={form.listState.loading}
  143. finished={form.listState.finished}
  144. finishedText=" "
  145. class={[styles.liveList]}
  146. onLoad={getList}
  147. immediateCheck={false}
  148. ></List> */}
  149. <CellGroup inset class={styles.cellGroup}>
  150. <Cell center>
  151. {{
  152. icon: () => <Image src={iconStudent} class={styles.img} />,
  153. title: () => (
  154. <div class={styles.userInfo}>
  155. <div class={styles.userName}>测试</div>
  156. <div class={styles.subjectNames}>
  157. <Tag type="primary">长笛</Tag>
  158. </div>
  159. </div>
  160. ),
  161. value: () => (
  162. <div class={styles.mins}>
  163. <div class={styles.nums}>
  164. <span>70</span> 分钟
  165. </div>
  166. <div class={styles.text}>练习时长</div>
  167. </div>
  168. )
  169. }}
  170. </Cell>
  171. </CellGroup>
  172. <Popup v-model:show={state.subjectStatus} position="bottom" round>
  173. <Picker
  174. columns={state.subjectList}
  175. onCancel={() => (state.subjectStatus = false)}
  176. onConfirm={(val: any) => {}}
  177. columnsFieldNames={{ text: 'subjectName', value: 'subjectId' }}
  178. />
  179. </Popup>
  180. </>
  181. )
  182. }
  183. })