information.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. import OSticky from '@/components/o-sticky'
  2. import { Button, DatePicker, Grid, GridItem, Icon, Image, List, Picker, Popover, Popup } from 'vant'
  3. import { defineComponent, nextTick, onMounted, reactive } from 'vue'
  4. import styles from './information.module.less'
  5. import iconSaveImage from '../images/icon-save-image.png'
  6. import iconWechat from '../images/icon-wechat.png'
  7. import OQrcode from '@/components/o-qrcode'
  8. import request from '@/helpers/request'
  9. import { useRoute } from 'vue-router'
  10. import { CountUp } from 'countup.js'
  11. import OEmpty from '@/components/o-empty'
  12. import dayjs from 'dayjs'
  13. export default defineComponent({
  14. name: 'detail-information',
  15. setup() {
  16. const route = useRoute()
  17. const state = reactive({
  18. timeShow: false,
  19. currentData: [dayjs().year() + ''],
  20. actionText: '上学期',
  21. actionType: 'up',
  22. actionTerm: [
  23. { text: '上学期', color: 'var(--van-primary-color)', value: 'up' },
  24. { text: '下学期', value: 'down' }
  25. ],
  26. oPopover: false,
  27. check: [],
  28. checkboxRefs: [] as any,
  29. showQrcode: false,
  30. qrcodeUrl: '',
  31. isLoading: false,
  32. list: [] as any,
  33. listState: {
  34. dataShow: true, // 判断是否有数据
  35. loading: false,
  36. finished: false
  37. },
  38. params: {
  39. startTime: dayjs().year() - 1 + '-09-01 00:00:00',
  40. endTime: dayjs().year() + '-03-01 00:00:00',
  41. page: 1,
  42. rows: 20
  43. },
  44. orchestraInfo: {} as any // 乐团详情
  45. })
  46. // 选择学期
  47. const onSelect = (val: any) => {
  48. console.log(val)
  49. state.actionTerm.forEach((item: any) => {
  50. item.color = null
  51. })
  52. val.color = 'var(--van-primary-color)'
  53. state.actionText = val.text
  54. state.actionType = val.value
  55. if (val.value === 'up') {
  56. state.params.startTime = Number(state.currentData[0]) - 1 + '-09-01 00:00:00'
  57. state.params.endTime = state.currentData[0] + '-03-01 00:00:00'
  58. } else if (val.value === 'down') {
  59. console.log(dayjs().add(1, 'year'), 'dayjs().add(1, ')
  60. state.params.startTime = state.currentData[0] + '-03-01 00:00:00'
  61. state.params.endTime = Number(state.currentData[0]) + '-09-01 00:00:00'
  62. }
  63. onSearch()
  64. }
  65. const onConfirmDate = (date: any) => {
  66. state.currentData = date.selectedValues
  67. if (state.actionType == 'up') {
  68. state.params.startTime = Number(date.selectedValues[0]) - 1 + '-09-01 00:00:00'
  69. state.params.endTime = date.selectedValues[0] + '-03-01 00:00:00'
  70. } else if (state.actionType == 'down') {
  71. state.params.startTime = date.selectedValues[0] + '-03-01 00:00:00'
  72. state.params.endTime = Number(date.selectedValues[0]) + '-09-01 00:00:00'
  73. }
  74. state.timeShow = false
  75. onSearch()
  76. }
  77. const getDetails = async () => {
  78. try {
  79. const { data } = await request.get('/api-school/orchestra/detail/' + route.query.id)
  80. state.orchestraInfo = data || {}
  81. } catch {
  82. //
  83. }
  84. }
  85. // 班级列表
  86. const getList = async () => {
  87. try {
  88. if (state.isLoading) return
  89. state.isLoading = true
  90. const res = await request.post('/api-school/classGroup/page', {
  91. data: {
  92. ...state.params,
  93. orchestraId: route.query.id
  94. }
  95. })
  96. state.listState.loading = false
  97. const result = res.data || {}
  98. // 处理重复请求数据
  99. if (state.list.length > 0 && result.current === 1) {
  100. return
  101. }
  102. const rows = result.rows || []
  103. state.list = state.list.concat(rows)
  104. state.listState.finished = result.current >= result.pages
  105. state.params.page = result.current + 1
  106. state.listState.dataShow = state.list.length > 0
  107. state.isLoading = false
  108. } catch {
  109. state.listState.dataShow = false
  110. state.listState.finished = true
  111. state.isLoading = false
  112. }
  113. }
  114. const onSearch = () => {
  115. state.params.page = 1
  116. state.list = []
  117. state.listState.dataShow = true // 判断是否有数据
  118. state.listState.loading = false
  119. state.listState.finished = false
  120. getList()
  121. }
  122. const initNumCountUp = () => {
  123. nextTick(() => {
  124. // 在读学生
  125. new CountUp('currentStudentNum', Math.random() * 1000).start()
  126. new CountUp('time1', Math.random() * 100).start()
  127. new CountUp('time2', Math.random() * 100).start()
  128. new CountUp('time3', Math.random() * 100).start()
  129. })
  130. }
  131. onMounted(() => {
  132. getDetails()
  133. getList()
  134. initNumCountUp()
  135. })
  136. return () => (
  137. <>
  138. <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
  139. <div class={styles.searchBand} onClick={() => (state.timeShow = true)}>
  140. {state.currentData[0]}年 <Icon name={state.timeShow ? 'arrow-up' : 'arrow-down'} />
  141. </div>
  142. <Popover
  143. v-model:show={state.oPopover}
  144. actions={state.actionTerm}
  145. showArrow={false}
  146. placement="bottom"
  147. offset={[0, 12]}
  148. style={{ zIndex: '9999' }}
  149. onSelect={onSelect}
  150. >
  151. {{
  152. reference: () => (
  153. <div class={styles.searchBand} style="margin-left: 16px">
  154. {state.actionText} <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
  155. </div>
  156. )
  157. }}
  158. </Popover>
  159. </div>
  160. <Grid border={false} class={styles.gridContainer}>
  161. <GridItem>
  162. <p class={[styles.title, styles.red]}>
  163. <span id="currentStudentNum">0</span>
  164. <i>名</i>
  165. </p>
  166. <p class={styles.name}>在读学生</p>
  167. </GridItem>
  168. <GridItem>
  169. <p class={[styles.title, styles.red]}>
  170. <span id="time1">0</span>%
  171. </p>
  172. <p class={styles.name}>到课率</p>
  173. </GridItem>
  174. <GridItem>
  175. <p class={[styles.title, styles.red]}>
  176. <span id="time2">0</span>%
  177. </p>
  178. <p class={styles.name}>作业提交率</p>
  179. </GridItem>
  180. <GridItem>
  181. <p class={[styles.title, styles.red]}>
  182. <span id="time3">0</span>%
  183. </p>
  184. <p class={styles.name}>练习合格率</p>
  185. </GridItem>
  186. </Grid>
  187. {state.listState.dataShow ? (
  188. <List
  189. v-model:loading={state.listState.loading}
  190. finished={state.listState.finished}
  191. finishedText=" "
  192. class={[styles.liveList]}
  193. onLoad={getList}
  194. immediateCheck={false}
  195. >
  196. {state.list.map((item: any) => (
  197. <div class={[styles.gridContainer, styles.gridClass]}>
  198. <div class={styles.className}>
  199. <i class={styles.line}></i>
  200. {item.name}
  201. </div>
  202. <Grid border={false} columnNum={3}>
  203. <GridItem>
  204. <p class={styles.title}>{item.preStudentNum || 0}</p>
  205. <p class={styles.name}>在读学生</p>
  206. </GridItem>
  207. <GridItem>
  208. <p class={[styles.title, styles.teacher]}>{item.teacherName || '-'}</p>
  209. <p class={styles.name}>伴学指导</p>
  210. </GridItem>
  211. <GridItem>
  212. <p class={styles.title}>
  213. {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
  214. </p>
  215. <p class={styles.name}>课时</p>
  216. </GridItem>
  217. </Grid>
  218. </div>
  219. ))}
  220. </List>
  221. ) : (
  222. <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无班级" />
  223. )}
  224. {/* */}
  225. {state.orchestraInfo.type === 'DELIVERY' &&
  226. ['REGISTER', 'DOING', 'DONE'].includes(state.orchestraInfo.status) && (
  227. <OSticky position="bottom">
  228. <div class={'btnGroup'}>
  229. <Button
  230. round
  231. block
  232. type="primary"
  233. onClick={() => {
  234. state.showQrcode = true
  235. state.qrcodeUrl =
  236. window.location.origin + '/orchestra-student/#/preApply?id=' + route.query.id
  237. }}
  238. >
  239. 报名二维码
  240. </Button>
  241. </div>
  242. </OSticky>
  243. )}
  244. <Popup
  245. v-model:show={state.showQrcode}
  246. position="bottom"
  247. style={{ background: 'transparent' }}
  248. safeAreaInsetBottom={true}
  249. >
  250. <div class={styles.codeContainer}>
  251. <div class={styles.codeImg}>
  252. <div class={styles.codeContent}>
  253. <h2 class={styles.codeTitle}>乐团报名</h2>
  254. <div class={[styles.codeName, 'van-ellipsis']}>{state.orchestraInfo.name}</div>
  255. <div class={styles.codeQr}>
  256. <OQrcode text={state.qrcodeUrl} size={'400'} />
  257. </div>
  258. <div style={{ textAlign: 'center' }}>
  259. <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>
  260. </div>
  261. <div class={styles.codeTips}>二维码将在两小时后失效,请及时登记</div>
  262. </div>
  263. </div>
  264. <div class={styles.codeBottom}>
  265. <Icon
  266. name="cross"
  267. size={22}
  268. class={styles.close}
  269. color="#666"
  270. onClick={() => (state.showQrcode = false)}
  271. />
  272. <h3 class={styles.title}>
  273. <i></i>分享方式
  274. </h3>
  275. <Grid columnNum={2} border={false}>
  276. <GridItem>
  277. {{
  278. icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
  279. text: () => <div class={styles.shareText}>保存图片</div>
  280. }}
  281. </GridItem>
  282. <GridItem>
  283. {{
  284. icon: () => <Image class={styles.shareImg} src={iconWechat} />,
  285. text: () => <div class={styles.shareText}>微信</div>
  286. }}
  287. </GridItem>
  288. </Grid>
  289. </div>
  290. </div>
  291. </Popup>
  292. <Popup v-model:show={state.timeShow} position="bottom" round>
  293. <DatePicker
  294. v-model={state.currentData}
  295. columnsType={['year']}
  296. onConfirm={onConfirmDate}
  297. onCancel={() => (state.timeShow = false)}
  298. />
  299. </Popup>
  300. </>
  301. )
  302. }
  303. })