更新显示

src/components/m-image-preview/index.tsx

@@ -69,9 +69,10 @@ export default defineComponent({
       showLoadingToast({ message: '下载中...', forbidClick: true });
       try {
         const res = await promisefiyPostMessage({
-          api: 'savePicture',
+          api: 'saveFile',
           content: {
-            img
+            img,
+            type: checkFile(img, 'image') ? 'image' : 'video'
           }
         });
         if (res?.content?.status === 'success') {
@@ -131,7 +132,11 @@ export default defineComponent({
           <Icon
             name={iconPreviewDownload}
             class="van-image-preview__close-icon van-image-preview__close-icon--top-right van-haptics-feedback"
-            onClick={onSave}
+            onClick={() => {
+              console.log(forms.index, 'index', props.images[forms.index - 1]);
+
+              onSave(props.images[forms.index - 1]);
+            }}
           />
         ) : (
           ''

src/views/mass-message/components/contacts.tsx

@@ -1,13 +1,53 @@
 import { Cell, Checkbox, CheckboxGroup, Icon, Image, Sticky } from 'vant';
 import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
 import styles from '../index.module.less';
-// import badge1 from '../images/badge-1.png';
+import badge1 from '../images/badge-1.png';
+import badge2 from '../images/badge-2.png';
+import badge3 from '../images/badge-3.png';
+import badge4 from '../images/badge-4.png';
+import badge5 from '../images/badge-5.png';
+import badge6 from '../images/badge-6.png';
+import badge7 from '../images/badge-7.png';
+import badge8 from '../images/badge-8.png';
 import MSearch from '@/components/m-search';
 import activeButtonIcon from '@/common/images/icon-check-active.png';
 import inactiveButtonIcon from '@/common/images/icon-check.png';
 import iconStudent from '@/common/images/icon-student-default.png';
 import iconTeacher from '@/common/images/icon-teacher-default.png';
 import request from '@/helpers/request';
+import MEmpty from '@/components/m-empty';
+
+export const formatterImage = (type: string) => {
+  let image: any = badge3;
+  switch (type) {
+    case 'SCHOOLMASTER':
+      image = badge5;
+      break;
+    case 'ORCHESTRA_LEADER':
+      image = badge1;
+      break;
+    case 'SCHOOL_LEADER':
+      image = badge6;
+      break;
+    case 'SCHOOL_TEACHER':
+      image = badge7;
+      break;
+    case 'ORCHESTRA_MANAGER':
+      image = badge4;
+      break;
+    case 'ORCHESTRA_TEACHER':
+      image = badge2;
+      break;
+    case 'MAINTENANCE_TECHNICIAN':
+      image = badge8;
+      break;
+    case 'STUDENT':
+      image = badge3;
+      break;
+  }
+  return image;
+};
+
 export default defineComponent({
   name: 'contacts-modal',
   props: {
@@ -34,7 +74,8 @@ export default defineComponent({
     const forms = reactive({
       height: props.height,
       list: [],
-      check: [] as any
+      check: [] as any,
+      dataShow: true
     });
 
     const onToggle = (index: number) => {
@@ -48,6 +89,7 @@ export default defineComponent({
             id: item.id,
             value: item.friendNickname,
             text: item.memo,
+            roleType: item.roleType,
             avatar:
               item.friend.avatar || item.friend.userType === 'TEACHER'
                 ? iconTeacher
@@ -90,6 +132,8 @@ export default defineComponent({
         forms.list = data || [];
       } catch {
         //
+      } finally {
+        forms.dataShow = forms.list.length > 0 ? true : false;
       }
     };
 
@@ -108,56 +152,73 @@ export default defineComponent({
           <MSearch placeholder="请输入群聊名称" />
         </Sticky>
         <CheckboxGroup v-model={forms.check}>
-          {forms.list.map((item: any, index: number) => (
-            <Cell
-              center
-              onClick={() => onToggle(index)}
-              class={styles.popupCell}>
-              {{
-                icon: () => (
-                  <Image
-                    src={
-                      item.friend.avatar || item.friend.userType === 'TEACHER'
-                        ? iconTeacher
-                        : iconStudent
-                    }
-                    class={styles.imgLogo}
-                    fit="contain"
-                  />
-                ),
-                title: () => (
-                  <div class={styles.infos}>
-                    <div class={styles.infoTitle}>
-                      {item.friendNickname}
-                      {/* <img src={badge1} class={styles.iconBadge} /> */}
-                    </div>
-                    <div class={styles.infoContent}>{item.memo}</div>
-                  </div>
-                ),
-                'right-icon': () => (
-                  <Checkbox
-                    name={item.id}
-                    ref={e => (checkboxRefs.value[index] = e)}
-                    onClick={(e: MouseEvent) => {
-                      e.stopPropagation();
-                    }}
-                    v-slots={{
-                      icon: (props: any) => (
-                        <Icon
-                          class={styles.boxStyle}
-                          name={
-                            props.checked
-                              ? activeButtonIcon
-                              : inactiveButtonIcon
-                          }
+          {forms.dataShow ? (
+            forms.list.map((item: any, index: number) => (
+              <Cell
+                center
+                onClick={() => onToggle(index)}
+                class={styles.popupCell}>
+                {{
+                  icon: () => (
+                    <Image
+                      src={
+                        item.friend.avatar || item.friend.userType === 'TEACHER'
+                          ? iconTeacher
+                          : iconStudent
+                      }
+                      class={styles.imgLogo}
+                      fit="contain"
+                    />
+                  ),
+                  title: () => (
+                    <div class={styles.infos}>
+                      <div class={styles.infoTitle}>
+                        {item.friendNickname}
+                        <img
+                          src={formatterImage(item.roleType)}
+                          class={[
+                            styles.iconBadge,
+                            item.roleType === 'SCHOOL_LEADER'
+                              ? styles.iconBadge2
+                              : ''
+                          ]}
                         />
-                      )
-                    }}
-                  />
-                )
+                      </div>
+                      <div class={styles.infoContent}>{item.memo}</div>
+                    </div>
+                  ),
+                  'right-icon': () => (
+                    <Checkbox
+                      name={item.id}
+                      ref={e => (checkboxRefs.value[index] = e)}
+                      onClick={(e: MouseEvent) => {
+                        e.stopPropagation();
+                      }}
+                      v-slots={{
+                        icon: (props: any) => (
+                          <Icon
+                            class={styles.boxStyle}
+                            name={
+                              props.checked
+                                ? activeButtonIcon
+                                : inactiveButtonIcon
+                            }
+                          />
+                        )
+                      }}
+                    />
+                  )
+                }}
+              </Cell>
+            ))
+          ) : (
+            <MEmpty
+              style={{
+                minHeight: `calc(100vh - ${props.headerHeight}px - ${forms.height}px - ${props.bottomHeight}px - 100px)`
               }}
-            </Cell>
-          ))}
+              description="暂无数据"
+            />
+          )}
         </CheckboxGroup>
       </div>
     );

src/views/mass-message/components/group-chat.tsx

@@ -1,11 +1,17 @@
 import { Cell, Checkbox, CheckboxGroup, Icon, Image, Sticky } from 'vant';
 import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
 import styles from '../index.module.less';
-import class1 from '../images/1.png';
+import class1 from '../images/ic_group_list_mussic_team_stu.png';
+import class2 from '../images/ic_group_list_vip.png';
+import class3 from '../images/icon_repertoire_play.png';
+import class4 from '../images/icon_training.png';
+import class5 from '../images/icon-edu.png';
+
 import MSearch from '@/components/m-search';
 import activeButtonIcon from '@/common/images/icon-check-active.png';
 import inactiveButtonIcon from '@/common/images/icon-check.png';
 import request from '@/helpers/request';
+import MEmpty from '@/components/m-empty';
 export default defineComponent({
   name: 'group-chat',
   props: {
@@ -32,9 +38,24 @@ export default defineComponent({
     const forms = reactive({
       height: props.height,
       list: [],
-      check: [] as any
+      check: [] as any,
+      dataShow: true
     });
 
+    const formatterImage = (type: string) => {
+      if (type === 'TRAINING') {
+        return class4;
+      } else if (type === 'REPERTOIRE_PLAY') {
+        return class3;
+      } else if (type === 'VIP' || type === 'COMM') {
+        return class2;
+      } else if (type === 'SCHOOL') {
+        return class5;
+      } else {
+        return class1;
+      }
+    };
+
     const onToggle = (index: number) => {
       //
       checkboxRefs.value[index].toggle();
@@ -46,7 +67,7 @@ export default defineComponent({
             id: item.id,
             value: item.name,
             text: item.tags,
-            avatar: class1
+            avatar: formatterImage(item.type)
           });
         }
       });
@@ -87,6 +108,8 @@ export default defineComponent({
         forms.list = data || [];
       } catch {
         //
+      } finally {
+        forms.dataShow = forms.list.length > 0 ? true : false;
       }
     };
 
@@ -105,45 +128,58 @@ export default defineComponent({
           <MSearch placeholder="请输入群聊名称" />
         </Sticky>
         <CheckboxGroup v-model={forms.check}>
-          {forms.list.map((item: any, index: number) => (
-            <Cell
-              center
-              onClick={() => onToggle(index)}
-              class={styles.popupCell}>
-              {{
-                icon: () => (
-                  <Image src={class1} class={styles.imgLogo} fit="contain" />
-                ),
-                title: () => (
-                  <div class={styles.infos}>
-                    <div class={styles.infoTitle}>{item.name}</div>
-                    <div class={styles.infoContent}>{item.tags}</div>
-                  </div>
-                ),
-                'right-icon': () => (
-                  <Checkbox
-                    name={item.id}
-                    ref={e => (checkboxRefs.value[index] = e)}
-                    onClick={(e: MouseEvent) => {
-                      e.stopPropagation();
-                    }}
-                    v-slots={{
-                      icon: (props: any) => (
-                        <Icon
-                          class={styles.boxStyle}
-                          name={
-                            props.checked
-                              ? activeButtonIcon
-                              : inactiveButtonIcon
-                          }
-                        />
-                      )
-                    }}
-                  />
-                )
+          {forms.dataShow ? (
+            forms.list.map((item: any, index: number) => (
+              <Cell
+                center
+                onClick={() => onToggle(index)}
+                class={styles.popupCell}>
+                {{
+                  icon: () => (
+                    <Image
+                      src={formatterImage(item.type)}
+                      class={styles.imgLogo}
+                      fit="contain"
+                    />
+                  ),
+                  title: () => (
+                    <div class={styles.infos}>
+                      <div class={styles.infoTitle}>{item.name}</div>
+                      <div class={styles.infoContent}>{item.tags}</div>
+                    </div>
+                  ),
+                  'right-icon': () => (
+                    <Checkbox
+                      name={item.id}
+                      ref={e => (checkboxRefs.value[index] = e)}
+                      onClick={(e: MouseEvent) => {
+                        e.stopPropagation();
+                      }}
+                      v-slots={{
+                        icon: (props: any) => (
+                          <Icon
+                            class={styles.boxStyle}
+                            name={
+                              props.checked
+                                ? activeButtonIcon
+                                : inactiveButtonIcon
+                            }
+                          />
+                        )
+                      }}
+                    />
+                  )
+                }}
+              </Cell>
+            ))
+          ) : (
+            <MEmpty
+              style={{
+                minHeight: `calc(100vh - ${props.headerHeight}px - ${forms.height}px - ${props.bottomHeight}px - 100px)`
               }}
-            </Cell>
-          ))}
+              description="暂无数据"
+            />
+          )}
         </CheckboxGroup>
       </div>
     );

src/views/mass-message/index.module.less

@@ -52,9 +52,14 @@
 
     .iconBadge {
       width: 56px;
-      height: 18px;
+      height: 20px;
       margin-left: 4px;
     }
+
+    .iconBadge2 {
+      width: 41px;
+      height: 20px;
+    }
   }
 
   .iconClose {

src/views/mass-message/index.tsx

@@ -26,6 +26,7 @@ import iconUsers from './images/icon-users.png';
 import MSticky from '@/components/m-sticky';
 import request from '@/helpers/request';
 import { useRouter } from 'vue-router';
+import { formatterImage } from './components/contacts';
 
 export default defineComponent({
   name: 'mass-message',
@@ -200,7 +201,17 @@ export default defineComponent({
                   <div class={styles.infos}>
                     <div class={styles.infoTitle}>
                       {item.receiveName}
-                      {/* <img src={badge1} class={styles.iconBadge} /> */}
+                      {item.roleType && (
+                        <img
+                          src={formatterImage(item.roleType)}
+                          class={[
+                            styles.iconBadge,
+                            item.roleType === 'SCHOOL_LEADER'
+                              ? styles.iconBadge2
+                              : ''
+                          ]}
+                        />
+                      )}
                     </div>
                     <div class={styles.infoContent}>{item.receiveText}</div>
                   </div>
@@ -240,6 +251,7 @@ export default defineComponent({
                   receiveId: item.id,
                   receiveName: item.value,
                   receiveText: item.text,
+                  roleType: item.roleType,
                   avatar: item.avatar
                 });
               });
@@ -250,10 +262,11 @@ export default defineComponent({
                   receiveId: item.id,
                   receiveName: item.value,
                   receiveText: item.text,
+                  roleType: item.roleType,
                   avatar: item.avatar
                 });
               });
-
+              console.log(tempList);
               forms.receives = tempList;
             }}
           />

src/views/test/index.tsx

@@ -1,52 +1,62 @@
-import MEmpty from '@/components/m-empty';
-import MFullRefresh from '@/components/m-full-refresh';
-import MHeader from '@/components/m-header';
-import MSearch from '@/components/m-search';
-import MSticky from '@/components/m-sticky';
+// import MEmpty from '@/components/m-empty';
+// import MFullRefresh from '@/components/m-full-refresh';
+// import MHeader from '@/components/m-header';
+// import MSearch from '@/components/m-search';
+// import MSticky from '@/components/m-sticky';
 
-import {
-  Cell,
-  CellGroup,
-  showLoadingToast,
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonParagraph
-} from 'vant';
-import { defineComponent, reactive, ref } from 'vue';
+// import {
+//   Cell,
+//   CellGroup,
+//   showLoadingToast,
+//   Skeleton,
+//   SkeletonAvatar,
+//   SkeletonParagraph
+// } from 'vant';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'test-page',
   setup() {
-    const refreshing = ref(false);
-    const loading = ref(true);
-    const forms = reactive({
-      search: '',
-      files: [] as any
-    });
-    const getData = () => {
-      refreshing.value = true;
-      setTimeout(() => {
-        refreshing.value = false;
-      }, 2000);
-    };
+    // const refreshing = ref(false);
+    // const loading = ref(true);
+    // const forms = reactive({
+    //   search: '',
+    //   files: [] as any
+    // });
+    // const getData = () => {
+    //   refreshing.value = true;
+    //   setTimeout(() => {
+    //     refreshing.value = false;
+    //   }, 2000);
+    // };
 
-    const onClick = () => {
-      showLoadingToast({
-        message: '',
-        forbidClick: true
-      });
-    };
+    // const onClick = () => {
+    //   showLoadingToast({
+    //     message: '',
+    //     forbidClick: true
+    //   });
+    // };
 
-    setTimeout(() => {
-      loading.value = false;
-    }, 1000);
+    // setTimeout(() => {
+    //   loading.value = false;
+    // }, 1000);
     return () => (
       <>
-        <MSticky>
+        <video
+          data-v-6bd957c9=""
+          id="video"
+          preload="auto"
+          autoplay="autoplay"
+          loop="loop"
+          playsinline="true"
+          webkit-playsinline="true"
+          x5-playsinline=""
+          class="vjs-content"
+          src="blob:https://h5.ule.com/07387f43-cc39-46a2-9220-dc94740cf78f"></video>
+        {/* <MSticky>
           <MHeader />
           <MSearch v-model:modelValue={forms.search} />
-        </MSticky>
-
+        </MSticky> */}
         {/* <Field style={{ marginTop: '12px' }} label="上传图片">
           {{
             input: () => (
@@ -54,7 +64,7 @@ export default defineComponent({
             )
           }}
         </Field> */}
-        <MFullRefresh
+        {/* <MFullRefresh
           v-model:modelValue={refreshing.value}
           onRefresh={getData}
           style={{
@@ -145,8 +155,7 @@ export default defineComponent({
               )
             }}
           </Skeleton>
-        </MFullRefresh>
-
+        </MFullRefresh> */}
         {/* <Button type="primary" onClick={onClick}>
           提交
         </Button> */}