miniapp/src/components/IssueCard/index.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { View, ScrollView, RichText, Image, Text } from '@tarojs/components';
import { APPLY_READY, getIssueStatus } from '@/utils/biz';
import icon from '@/assets/icons/marker.png';
import style from './style.module.less';

export const colors = [
  ['rgba(130, 176, 254, 0.08)', 'rgba(52, 121, 237, 1)'], // 未交办
  ['rgba(51, 218, 156, 0.08)', 'rgba(26, 117, 101, 1)'], // 已交办
  ['rgba(251, 157, 75, 0.08)', 'rgba(232, 116, 16, 1)'], // 已办结
  ['rgba(255, 245, 245, 1)', 'rgba(255, 76, 76, 1)'], // 已逾期
  ['transparent', 'rgba(159, 159, 159, 1)'], // 已打回
  ['rgba(255, 245, 245, 1)', 'rgba(255, 76, 76, 1)'], // 逾期办结
]

export default (props) => {

  const { issue, applyInfo, onClick, color, stText } = props;
  const detail = issue || applyInfo;

  const [
    content,
    createDate,
    styleColor,
    statusTxt,
  ] = React.useMemo(() => {
    if (!detail) return [];
console.log(detail)
    // detail 有可能是申请信息
    const { value: bizStatus = 0, label: statusText } = getIssueStatus({
      ...detail || {},
      processNode: detail?.processNode || detail?.applyType,
      processStatus: detail?.processStatus || detail?.verifyStatus || APPLY_READY,
    });

    return [
      (detail.issueContent || detail.content || '').replace('\r\n', '<br>').replace('\n', '<br>'),
      dayjs(detail.createDate).format('YYYY-MM-DD HH:mm'),
      colors[color ?? bizStatus],
      statusText,
    ];
  }, [detail, color, stText]);
  // console.log('issue', issue)
  // console.log('detail', detail)

  const [bg1, bg2] = styleColor || [];

  return (
    <View className={style['issue-card-wrapper']} onClick={onClick}>
      <View className={style['issue-card-header']}>
        <View>
          <View>ID:{detail?.issueId}</View>
          <View>问题清单</View>
        </View>
        <View>
          <View>{detail?.typeName ? detail?.typeName : ' '}</View>
          <View>{createDate}</View>
        </View>
      </View>
      <View className={style['issue-card-body']} style={{ backgroundColor: bg1 }}>
        <ScrollView scrollY style={{ height: '100%' }}>
          <RichText nodes={content} />
        </ScrollView>
      </View>
      <View className={style['issue-card-footer']}>
        <View>
          <Image src={icon} />
          <Text style={{ 'verticalAlign': 'middle' }}>{detail?.issueAddr || detail?.addr || ''}</Text>
        </View>
        <View style={{ color: bg2 }}>{statusTxt}</View>
      </View>
    </View>
  )
}