From ab52ffe7aeeb842cf55d52c39068d6ecae11ffaa Mon Sep 17 00:00:00 2001
From: Dawn_Ocean <1785590531@qq.com>
Date: Mon, 8 Apr 2024 14:56:51 +0800
Subject: [PATCH] add pic display in ticketnote

---
 mock/ticketInfo.json                          |  6 ++--
 .../DetailFramework/DetailFramework.tsx       |  3 +-
 src/components/NoteCard/NoteCard.tsx          | 34 ++++++++++++++++---
 src/components/NoteList/NoteList.tsx          |  4 ++-
 src/pages/TicketDetail/TicketDetail.tsx       |  1 +
 src/pages/TicketDetail/TicketNote.ts          |  1 +
 src/service/ticketsInfo.ts                    |  2 ++
 7 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/mock/ticketInfo.json b/mock/ticketInfo.json
index 8d752c4..6c3253c 100644
--- a/mock/ticketInfo.json
+++ b/mock/ticketInfo.json
@@ -55,9 +55,9 @@
       "content": "清灰换硅脂",
       "createdTime": "2024-03-07T20:30:15.780486",
       "pic": [
-        "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
-        "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
-        "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+        "https://storage.360buyimg.com/mtd/home/111543234387022.jpg",
+        "https://storage.360buyimg.com/mtd/home/221543234387016.jpg",
+        "https://storage.360buyimg.com/mtd/home/331543234387025.jpg"
       ]
     }
   ],
diff --git a/src/components/DetailFramework/DetailFramework.tsx b/src/components/DetailFramework/DetailFramework.tsx
index 1925d50..57fe40f 100644
--- a/src/components/DetailFramework/DetailFramework.tsx
+++ b/src/components/DetailFramework/DetailFramework.tsx
@@ -160,12 +160,13 @@ export default class DetailFramework extends Component<
       notelist: this.props.isInfoShow['notelist'] ? (
         this.props.isInfoShow['showAllNotes'] ? (
           <View style={{ padding: '20rpx' }}>
-            <NoteList noteList={this.state.notes} />
+            <NoteList noteList={this.state.notes} showPic />
           </View>
         ) : (
           <View style={{ padding: '20rpx' }}>
             <NoteList
               noteList={[this.state.notes[this.state.notes.length - 1]]}
+              showPic={false}
             />
           </View>
         )
diff --git a/src/components/NoteCard/NoteCard.tsx b/src/components/NoteCard/NoteCard.tsx
index 680acb4..3979053 100644
--- a/src/components/NoteCard/NoteCard.tsx
+++ b/src/components/NoteCard/NoteCard.tsx
@@ -7,15 +7,18 @@ import './NoteCard.scss';
 
 interface NoteCardProps {
   note: TicketNote;
+  showPic: boolean;
 }
 
 export default class NoteCard extends Component<NoteCardProps, {}> {
   props: Readonly<NoteCardProps> = {
     note: new TicketNote(),
+    showPic: true,
   };
 
   render(): ReactNode {
-    var message = '';
+    let message = '';
+    let pic: string[] = [];
     const note = this.props.note;
     const td = pt.get().ticketDetail;
     const createMessage = td.comment.createTicketMessage;
@@ -28,15 +31,35 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
         break;
       case 1:
         message = note.content;
+        pic = note.pic;
         break;
       case 2:
         message = prefix + modifyMessage.get(note.content as StatusStr) || '';
         break;
     }
 
+    const notePicRenderer = (
+      <View>
+        <View className='at-row' style={{ marginLeft: '30rpx' }}>
+          {pic.map((url, idx) => (
+            <View className='at-col at-col-4' key={idx}>
+              <Image
+                style='width: 160rpx; height: 160rpx;'
+                src={url}
+                mode='aspectFit'
+              />
+            </View>
+          ))}
+        </View>
+      </View>
+    );
+
     return (
-      <View className='at-row at-row__align--center'>
-        <View className='at-col at-col-1 at-col--auto'>
+      <View className='at-row at-row__align--start'>
+        <View
+          className='at-col at-col-1 at-col--auto'
+          style={{ marginTop: '80rpx' }}
+        >
           <Image
             style='width: 70rpx; height: 70rpx; border-radius: 35px;'
             src={note.avatar}
@@ -55,7 +78,10 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
           <View className='at-article__info'>
             {note.createdTime.format(timeFormat)}
           </View>
-          <View className='at-article__h3'>{message}</View>
+          <View className='at-article__h3' style={{ marginBottom: '20rpx' }}>
+            {message}
+          </View>
+          {this.props.showPic ? notePicRenderer : null}
         </View>
       </View>
     );
diff --git a/src/components/NoteList/NoteList.tsx b/src/components/NoteList/NoteList.tsx
index ebd6c2b..dd707c0 100644
--- a/src/components/NoteList/NoteList.tsx
+++ b/src/components/NoteList/NoteList.tsx
@@ -7,11 +7,13 @@ import pt from '@/plain-text';
 
 interface NoteListProps {
   noteList: Array<TicketNote>;
+  showPic: boolean;
 }
 
 export default class NoteList extends Component<NoteListProps, {}> {
   props: Readonly<NoteListProps> = {
     noteList: [],
+    showPic: true,
   };
   render(): ReactNode {
     return (
@@ -23,7 +25,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
         />
         {this.props.noteList.map((note, idx) => (
           <View key={idx}>
-            <NoteCard note={note} />
+            <NoteCard note={note} showPic={this.props.showPic} />
           </View>
         ))}
       </View>
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index a7ad567..960d2f6 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -601,6 +601,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       current: true,
       notelist: true,
       showAllNotes: true,
+      pic: true,
     };
 
     return (
diff --git a/src/pages/TicketDetail/TicketNote.ts b/src/pages/TicketDetail/TicketNote.ts
index c5cdc7b..fc6884b 100644
--- a/src/pages/TicketDetail/TicketNote.ts
+++ b/src/pages/TicketDetail/TicketNote.ts
@@ -19,6 +19,7 @@ export class TicketNote {
   type: 0 | 1 | 2;
   content: string;
   createdTime: moment.Moment;
+  pic: string[];
 }
 
 export class ShowElements {
diff --git a/src/service/ticketsInfo.ts b/src/service/ticketsInfo.ts
index 1af903b..8fa87a4 100644
--- a/src/service/ticketsInfo.ts
+++ b/src/service/ticketsInfo.ts
@@ -56,6 +56,7 @@ export function getTicketInfo(that: DetailFramework, id: number) {
             type: 0 | 1 | 2;
             content: string;
             createdTime: string;
+            pic: string[];
           }) => {
             notes.push({
               avatar: item.avatar,
@@ -64,6 +65,7 @@ export function getTicketInfo(that: DetailFramework, id: number) {
               type: item.type,
               content: item.content,
               createdTime: moment(item.createdTime as string),
+              pic: item.pic,
             });
           },
         );