index.jsx 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import React from 'react';
  2. import Taro from '@tarojs/taro';
  3. import dayjs from 'dayjs';
  4. import { View, ScrollView, RichText, Image, Text } from '@tarojs/components';
  5. import { APPLY_READY, getIssueStatus } from '@/utils/biz';
  6. import icon from '@/assets/icons/marker.png';
  7. import style from './style.module.less';
  8. export const colors = [
  9. ['rgba(130, 176, 254, 0.08)', 'rgba(52, 121, 237, 1)'], // 未交办
  10. ['rgba(51, 218, 156, 0.08)', 'rgba(26, 117, 101, 1)'], // 已交办
  11. ['rgba(251, 157, 75, 0.08)', 'rgba(232, 116, 16, 1)'], // 已办结
  12. ['rgba(255, 245, 245, 1)', 'rgba(255, 76, 76, 1)'], // 已逾期
  13. ['transparent', 'rgba(159, 159, 159, 1)'], // 已打回
  14. ['rgba(255, 245, 245, 1)', 'rgba(255, 76, 76, 1)'], // 逾期办结
  15. ]
  16. export default (props) => {
  17. const { issue, applyInfo, onClick, color, stText } = props;
  18. const detail = issue || applyInfo;
  19. const [
  20. content,
  21. createDate,
  22. styleColor,
  23. statusTxt,
  24. ] = React.useMemo(() => {
  25. if (!detail) return [];
  26. console.log(detail)
  27. // detail 有可能是申请信息
  28. const { value: bizStatus = 0, label: statusText } = getIssueStatus({
  29. ...detail || {},
  30. processNode: detail?.processNode || detail?.applyType,
  31. processStatus: detail?.processStatus || detail?.verifyStatus || APPLY_READY,
  32. });
  33. return [
  34. (detail.issueContent || detail.content || '').replace('\r\n', '<br>').replace('\n', '<br>'),
  35. dayjs(detail.createDate).format('YYYY-MM-DD HH:mm'),
  36. colors[color ?? bizStatus],
  37. statusText,
  38. ];
  39. }, [detail, color, stText]);
  40. // console.log('issue', issue)
  41. // console.log('detail', detail)
  42. const [bg1, bg2] = styleColor || [];
  43. return (
  44. <View className={style['issue-card-wrapper']} onClick={onClick}>
  45. <View className={style['issue-card-header']}>
  46. <View>
  47. <View>ID:{detail?.issueId}</View>
  48. <View>问题清单</View>
  49. </View>
  50. <View>
  51. <View>{detail?.typeName ? detail?.typeName : ' '}</View>
  52. <View>{createDate}</View>
  53. </View>
  54. </View>
  55. <View className={style['issue-card-body']} style={{ backgroundColor: bg1 }}>
  56. <ScrollView scrollY style={{ height: '100%' }}>
  57. <RichText nodes={content} />
  58. </ScrollView>
  59. </View>
  60. <View className={style['issue-card-footer']}>
  61. <View>
  62. <Image src={icon} />
  63. <Text style={{ 'verticalAlign': 'middle' }}>{detail?.issueAddr || detail?.addr || ''}</Text>
  64. </View>
  65. <View style={{ color: bg2 }}>{statusTxt}</View>
  66. </View>
  67. </View>
  68. )
  69. }