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 { getIssueStatus } from '@/utils/biz';
import icon from '@/assets/icons/marker.png';
import style from './style.module.less';

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)'], // 已打回
]

export default (props) => {

  const { detail, onClick } = props;

  const [
    content,
    createDate,
    styleColor,
    statusTxt,
  ] = React.useMemo(() => {
    if (!detail) return [];

    const {value : bizStatus = 0, label : statusText} = getIssueStatus(detail);

    return [
      (detail.content || '').replace('\r\n', '<br>').replace('\n', '<br>'),
      dayjs(detail.createDate).format('YYYY-MM-DD HH:mm'),
      colors[bizStatus],
      statusText,
    ];
  }, [detail]);
  
  return (
    <View className={style['issue-card-wrapper']} onClick={onClick}>
      <View className={style['issue-card-header']}>
        <View>问题:</View>
        <View>{createDate}</View>
      </View>
      <View className={style['issue-card-body']} style={{ backgroundColor: styleColor[0] }}>
        <ScrollView scrollY style={{ height: '100%' }}>
          <RichText nodes={content} />
        </ScrollView>
      </View>
      <View className={style['issue-card-footer']}>
        <View>
          <Image src={icon} />
          <Text>{detail?.addr || ''}</Text>
        </View>
        <View style={{ color: styleColor[1] }}>{statusTxt}</View>
      </View>
    </View>
  )
}