Ver código fonte

修改发送消息

lex 2 anos atrás
pai
commit
6b58dc379f

+ 40 - 0
src/school/school-detail/index.module.less

@@ -191,3 +191,43 @@
   top: -9999px;
   left: -9999px;
 }
+
+.codeContainer {
+  .close {
+    position: absolute;
+    top: 12px;
+    right: 15px;
+  }
+  .codeBottom {
+    position: relative;
+    margin-top: 32px;
+    background: #ffffff;
+    border-radius: 20px 20px 0px 0px;
+    padding-bottom: 10px;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 22px;
+    padding: 15px 15px 0;
+    i {
+      display: inline-block;
+      margin-right: 6px;
+      width: 4px;
+      height: 12px;
+      background: #ff8057;
+      border-radius: 2px;
+    }
+  }
+  .shareImg {
+    width: 47px;
+    height: 47px;
+  }
+  .shareText {
+    padding-top: 6px;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+  }
+}

+ 70 - 3
src/school/school-detail/index.tsx

@@ -1,6 +1,6 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
-import { Tabs, Tab, showToast, Icon } from 'vant'
+import { Tabs, Tab, showToast, Icon, Popup, Grid, GridItem, Image } from 'vant'
 import { defineComponent, reactive, ref, onMounted, onDeactivated } from 'vue'
 import eidtIcon from './images/eidt-icon.png'
 import styles from './index.module.less'
@@ -10,6 +10,8 @@ import { useRouter } from 'vue-router'
 import { state as globalState } from '@/state'
 import TeacherItem from './modals/teacher-item'
 import { schoolSystem } from '@/constant/index'
+import iconCallPhone from '@common/images/icon-call-phone.png'
+import iconCallMessage from '@common/images/icon-call-message.png'
 import request from '@/helpers/request'
 import OEmpty from '@/components/o-empty'
 export default defineComponent({
@@ -20,7 +22,9 @@ export default defineComponent({
       list: [],
       info: {} as any,
       heightV: 0 as number,
-      scrollTop: 0 as number
+      scrollTop: 0 as number,
+      showMessage: false,
+      selectItem: {} as any
     })
     const getSchoolDetail = async () => {
       const schoolId = (globalState.user.data.schoolInfos || [])
@@ -138,7 +142,13 @@ export default defineComponent({
             {state.list.length > 0 ? (
               <div>
                 {state.list.map((item) => (
-                  <TeacherItem item={item}></TeacherItem>
+                  <TeacherItem
+                    item={item}
+                    onToMsg={(item: any) => {
+                      state.selectItem = item
+                      state.showMessage = true
+                    }}
+                  ></TeacherItem>
                 ))}
               </div>
             ) : (
@@ -146,6 +156,63 @@ export default defineComponent({
             )}
           </div>
         </div>
+
+        <Popup
+          v-model:show={state.showMessage}
+          position="bottom"
+          style={{ background: 'transparent' }}
+        >
+          <div class={styles.codeContainer}>
+            <div class={styles.codeBottom}>
+              <Icon
+                name="cross"
+                size={22}
+                class={styles.close}
+                color="#666"
+                onClick={() => (state.showMessage = false)}
+              />
+
+              <h3 class={styles.title}>
+                <i></i>联系方式
+              </h3>
+              <Grid columnNum={2} border={false}>
+                <GridItem
+                  onClick={() => {
+                    postMessage({
+                      api: 'joinChatGroup',
+                      content: {
+                        type: 'single', // single 单人 multi 多人
+                        id: state.selectItem.imUserId
+                      }
+                    })
+                    state.showMessage = false
+                  }}
+                >
+                  {{
+                    icon: () => <Image class={styles.shareImg} src={iconCallMessage} />,
+                    text: () => <div class={styles.shareText}>发送消息</div>
+                  }}
+                </GridItem>
+                <GridItem
+                  onClick={() => {
+                    postMessage({
+                      api: 'callPhone',
+                      content: {
+                        phone: state.selectItem.phone
+                      }
+                    })
+                    state.showMessage = false
+                  }}
+                >
+                  {{
+                    icon: () => <Image class={styles.shareImg} src={iconCallPhone} />,
+                    text: () => <div class={styles.shareText}>拨打电话</div>
+                  }}
+                </GridItem>
+              </Grid>
+            </div>
+          </div>
+        </Popup>
       </>
     )
   }

+ 22 - 16
src/school/school-detail/modals/teacher-item.tsx

@@ -9,26 +9,32 @@ import { attType } from '@/constant'
 
 export default defineComponent({
   props: ['item'],
+  emits: ['toMsg'],
   name: 'teacher-item',
-  setup(props) {
+  setup(props, { emit }) {
     const router = useRouter()
-    const gotoMsg = async () => {
-      try {
-        await postMessage({
-          api: 'joinChatGroup',
-          content: {
-            type: 'single', // single 单人 multi 多人
-            id: props.item.imUserId
-          }
-        })
-      } catch (e) {
-        showToast('发起聊天失败')
-      }
-    }
-    console.log(props.item)
+    // const gotoMsg = async () => {
+    //   try {
+    //     await postMessage({
+    //       api: 'joinChatGroup',
+    //       content: {
+    //         type: 'single', // single 单人 multi 多人
+    //         id: props.item.imUserId
+    //       }
+    //     })
+    //   } catch (e) {
+    //     showToast('发起聊天失败')
+    //   }
+    // }
+    // console.log(props.item)
     return () => (
       <>
-        <div class={styles.itemWrap} onClick={gotoMsg}>
+        <div
+          class={styles.itemWrap}
+          onClick={() => {
+            emit('toMsg', props.item)
+          }}
+        >
           <div class={styles.topWrap}>
             <div class={styles.itemLeft}>
               <div class={styles.headerWrap}>