feat: first commit

src/components/message-card/index.less

@@ -0,0 +1,85 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.message-card {
+  position: relative;
+  width: 100%;
+  .flex-row();
+  padding: 20px 32px;
+  box-sizing: border-box;
+  background: #FFF;
+
+  &::after {
+    content: "";
+    height: 2px;
+    background: #00000026;
+    position: absolute;
+    top: 0;
+    left: calc(32px + 90px + 24px);
+    right: 0;
+  }
+
+  &:first-child {
+    &::after {
+      height: 0;
+    }
+  }
+
+  &__avatar-container {
+    position: relative;
+  }
+
+  &__avatar {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+  }
+
+  &__unread {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: calc(32px - 8px);
+    height: 32px;
+    border-radius: 32px;
+    padding: 4px 8px;
+    font-size: 24px;
+    font-weight: 400;
+    color: #FFFFFF;
+    text-align: center;
+    background: #EB5953;
+    transform: translate3d(20%, -50%, 0);
+  }
+
+  &__body-container {
+    flex: 1;
+    .flex-column();
+    align-items: flex-start;
+    margin-left: 24px;
+  }
+
+  &__name {
+    font-size: 32px;
+    line-height: 48px;
+    font-weight: 400;
+    color: #000000;
+  }
+
+  &__content {
+    max-width: 78vw;
+    font-size: 28px;
+    line-height: 40px;
+    font-weight: 400;
+    color: #8D8E99;
+    margin-top: 4px;
+    .noWrap();
+  }
+
+  &__time {
+    font-size: 20px;
+    line-height: 32px;
+    font-weight: 400;
+    color: #8D8E99;
+    margin-top: 6px;
+  }
+}

src/components/message-card/index.tsx

@@ -0,0 +1,42 @@
+import { Image } from '@tarojs/components';
+
+import { useCallback } from 'react';
+
+import { PageUrl } from '@/constants/app';
+import { MainMessage } from '@/types/message';
+import { navigateTo } from '@/utils/route';
+import { formatTime } from '@/utils/time';
+
+import './index.less';
+
+interface IProps {
+  data: MainMessage;
+}
+
+const PREFIX = 'message-card';
+
+function MessageCard(props: IProps) {
+  const { data } = props;
+
+  const handleClick = useCallback(() => navigateTo(PageUrl.MessageChat, { chatId: data.chatId }), [data]);
+
+  return (
+    <div className={PREFIX} onClick={handleClick}>
+      <div className={`${PREFIX}__avatar-container`}>
+        <Image
+          mode="aspectFit"
+          className={`${PREFIX}__avatar`}
+          src={data.toUserAvatarUrl || require('@/statics/png/default_avatar.png')}
+        />
+        {!!data.unReadMsgCount && <div className={`${PREFIX}__unread`}>{Math.min(data.unReadMsgCount, 999)}</div>}
+      </div>
+      <div className={`${PREFIX}__body-container`}>
+        <div className={`${PREFIX}__name`}>{data.toUserName}</div>
+        <div className={`${PREFIX}__content`}>{data.lastContactMsgContent}</div>
+        <div className={`${PREFIX}__time`}>{formatTime(data.lastContactTime, 'MM-DD')}</div>
+      </div>
+    </div>
+  );
+}
+
+export default MessageCard;