orchestra-app/src/views/exercise-record/modals/student-item.tsx

import { defineComponent, reactive, ref, watch } from 'vue'
import styles from './student-item.module.less'
import defaultIcon from '@/school/images/student-icon.png'
import msgIcon from '@/school/images/msg-icon.png'
import sendmsgIcon from '@/school/images/sendmsg-icon.png'
import phoneIcon from '@/school/images/phone-icon.png'
import { postMessage } from '@/helpers/native-message'
import { Icon, ActionSheet, showToast, Image, Cell } from 'vant'
import { useRouter } from 'vue-router'
const myForms = ref({}) as any
export default defineComponent({
  props: ['item', 'forms'],
  name: 'student-item',
  setup(props) {
    const router = useRouter()
    const showContact = ref(false)
    const startContact = () => {
      showContact.value = true
    }
    const closeSheet = () => {
      showContact.value = false
    }

    watch(
      () => props.forms,
      (val) => {
        myForms.value = val
      },
      {
        deep: true
      }
    )
    const postMsg = async () => {
      try {
        await postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'single', // single 单人 multi 多人
            id: props.item.imUserId
          }
        })
        closeSheet()
      } catch (e) {
        showToast('发起聊天失败')
        closeSheet()
      }
    }

    const callPhone = async () => {
      try {
        await postMessage({
          api: 'callPhone',
          content: {
            phone: props.item.phone
          }
        })
        closeSheet()
      } catch (e) {
        showToast('发起聊天失败')
        closeSheet()
      }
    }
    const gotoDetail = () => {
      console.log(myForms.value.practiceMonth, myForms.value.practiceMonthName)
      console.log(props.item)
      router.push({
        path: '/exercis-detail',
        query: {
          id: props.item.userId,
          practiceMonth: myForms.value.practiceMonth,
          practiceMonthName: myForms.value.practiceMonthName
        }
      })
    }
    return () => (
      <>
        <Cell isLink class={styles.recordItem} center onClick={gotoDetail}>
          {{
            icon: () => (
              <div class={styles.imgContainer}>
                <Image
                  class={styles.img}
                  src={props.item.avatar ? props.item.avatar : defaultIcon}
                  alt=""
                />
                {props.item.memberFlag ? <i class={styles.iconMember}></i> : ''}
              </div>
            ),
            title: () => (
              <div class={styles.userInfo}>
                <div class={styles.userItem}>
                  <p class={styles.topText} style="font-weight: bold;">
                    {props.item.nickname}
                  </p>
                  <p class={styles.bottomText}>
                    {props.item.subjectNames ? props.item.subjectNames : '暂无声部'}
                  </p>
                </div>
                <div class={styles.userItem}>
                  <p class={styles.topText}>
                    <span>{props.item.trainingTime ? props.item.trainingTime : 0}</span>分钟
                  </p>
                  <p class={styles.bottomText}>练习时长</p>
                </div>
                <div class={styles.userItem}>
                  <p class={styles.topText}>
                    <span>{props.item.trainingDays ? props.item.trainingDays : 0}</span>天
                  </p>
                  <p class={styles.bottomText}>练习天数</p>
                </div>
              </div>
            )
          }}
        </Cell>
        {/* <div>
          <div class={styles.itemWrap} onClick={gotoDetail}>
            <div class={styles.itemTop}>
              <div class={styles.itemTopLeft}>
                <div class={styles.headIcon}>
                  <img src={props.item.avatar ? props.item.avatar : defaultIcon} alt="" />
                </div>
                <p class={styles.name}>{props.item.nickname}</p>

                <div class={styles.tag}>
                  {props.item.subjectNames ? props.item.subjectNames : '暂无声部'}
                </div>
              </div>
              <div class={styles.itemTopRight}>
                <div
                  class={styles.msgIcon}
                  onClick={(e: any) => {
                    e.stopPropagation()
                    e.preventDefault()
                    startContact()
                  }}
                >
                  <img src={msgIcon} alt="" />
                </div>
              </div>
            </div>
            <div class={styles.itemBottom}>
              <div class={styles.itemBottomLeft}>
                <p class={styles.msgMain}>
                  {props.item.practiceDays ? props.item.practiceDays : 0} <span>天</span>
                </p>
                <p class={styles.msgsub}>练习天数</p>
              </div>
              <div class={styles.itemBottomRight}>
                <p class={styles.msgMain}>
                  {props.item.practiceTimes ? props.item.practiceTimes : 0}
                  <span>分钟</span>
                </p>
                <p class={styles.msgsub}>练习时长</p>
                <Icon class={styles.arrow} name="arrow"></Icon>
              </div>
            </div>
          </div>
        </div> */}
        <ActionSheet
          class="bottomSheet"
          v-model:show={showContact.value}
          v-slots={{
            description: () => (
              <div class={styles.bottomTitle}>
                <div class={styles.bottomTitleLeft}>
                  <span></span>
                  <p>联系方式</p>
                </div>
                <div
                  class={styles.bottomTitleRight}
                  onClick={(e: any) => {
                    e.stopPropagation()
                    e.preventDefault()
                    closeSheet()
                  }}
                >
                  <Icon class={styles.cross} name="cross"></Icon>
                </div>
              </div>
            )
          }}
        >
          <div class={styles.bottomConent}>
            <div
              class={styles.bottomConentLeft}
              onClick={(e: any) => {
                e.stopPropagation()
                e.preventDefault()
                postMsg()
              }}
            >
              <div class={styles.bottomImgWrap}>
                <img src={sendmsgIcon} alt="" />
              </div>
              <p>发送消息</p>
            </div>
            <div
              class={styles.bottomConentRight}
              onClick={(e: any) => {
                e.stopPropagation()
                e.preventDefault()
                callPhone()
              }}
            >
              <div class={styles.bottomImgWrap}>
                <img src={phoneIcon} alt="" />
              </div>
              <p>拨打电话</p>
            </div>
          </div>
        </ActionSheet>
      </>
    )
  }
})