ykt-team-wxapp/pages/team/homepage.vue

<template>
  <view v-if="member" class="flex p-15 bg-whtie shadow-lg">
    <view class="flex-grow w-0 mr-10 leading-normal">
      <view class="flex items-center">
        <view class="mr-5 flex-shrink-0 text-xl text-dark font-semibold">{{ member.anotherName }}</view>
        <view class="w-0 flex-grow truncate text-base text-gray">{{ memberJob[member.userid] }}</view>
      </view>
      <view class="flex">
        <view class="flex-shrink-0 text-base text-gray">机构部门：</view>
        <view class="flex-shrink-0 text-base text-dark">{{ deptNames }}</view>
      </view>
      <view class="flex">
        <view class="flex-shrink-0 text-base text-gray">执业机构：</view>
        <view class="flex-shrink-0 text-base text-dark">{{ corpNames }}</view>
      </view>
    </view>
    <image class="avatar" :src="member.avatar"></image>
  </view>
  <view v-if="member" class="p-15 mt-12 leading-normal bg-white shadow-lg">
    <view class="flex items-center" @click="expand = !expand">
      <image class="flex-shrink-0 mr-10 section-icon" src="https://picsum.photos/300/300"></image>
      <view class="w-0 flex-grow text-lg font-semibold">个人简介</view>
      <uni-icons v-if="member.memberTroduce" :type="expand ? 'up' : 'down'" size="16"></uni-icons>
    </view>
    <view class="mt-10 text-dark text-base" :class="expand ? '' : 'line-clamp-4'">
      {{ member.memberTroduce || '暂无简介' }}
    </view>
    <view class="mt-20 flex items-center">
      <image class="flex-shrink-0 mr-10 section-icon" src="https://picsum.photos/300/300"></image>
      <view class="w-0 flex-grow text-lg font-semibold">门诊时间</view>
    </view>
    <view class="mt-10 text-dark text-base">
      {{ member.outpatientTime || '暂无门诊时间' }}
    </view>
    <view class="mt-20 flex items-center">
      <image class="flex-shrink-0 mr-10 section-icon" src="https://picsum.photos/300/300"></image>
      <view class="w-0 flex-grow text-lg font-semibold">对外联系电话</view>
    </view>
    <view class="mt-10 text-dark" :class="member.callNumber ? 'text-primary' : 'text-gray'" @click="callNumber()">
      {{ member.callNumber || '暂无联系电话' }}
    </view>
    <view class="mt-20 flex items-center">
      <image class="flex-shrink-0 mr-10 section-icon" src="https://picsum.photos/300/300"></image>
      <view class="w-0 flex-grow text-lg font-semibold">便民服务</view>
    </view>
    <view class="mt-10 flex">
      <view class="px-15 py-5 text-base text-white bg-primary rounded-sm">预约挂号</view>
      <view class="px-15 py-5 ml-15 text-base text-white bg-primary rounded-sm">在线咨询</view>
    </view>
  </view>
  <view v-if="qrcode" class="p-15 mt-12 leading-normal bg-white shadow-lg">
    <view class="text-lg font-semibold text-center text-dark">
      点击下方二维码，加我为好友
    </view>
    <view class="mt-12 border-primary qrcode p-15 mx-auto rounded" @click="previewImage()">
      <image :src="qrcode" class="h-full w-full"></image>
    </view>
  </view>
  <view class="safe-bottom-padding"></view>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useJob from '@/hooks/useJob';
import api from '@/utils/api';
import { toast } from '@/utils/widget';

const corpId = ref('');
const userid = ref('');
const showQrcode = ref(false);
const qrcode = ref('')
const member = ref(null);
const expand = ref(false);
const { memberJob, memberList } = useJob();

const corpNames = computed(() => {
  const corpNames = member.value && Array.isArray(member.value.corpNames) ? member.value.corpNames : [];
  return corpNames.join('、');
})
const deptNames = computed(() => {
  const deptNames = member.value && Array.isArray(member.value.deptNames) ? member.value.deptNames : [];
  return deptNames.join('、');
})

function callNumber() {
  if (member.value && member.value.callNumber) {
    uni.makePhoneCall({
      phoneNumber: member.value.callNumber
    })
  }
}

function previewImage() {
  uni.previewImage({
    urls: [qrcode.value]
  })
}

async function getMember() {
  const res = await api('getCorpMemberHomepageInfo', { userid: userid.value, corpId: corpId.value });
  if (res && res.success) {
    member.value = res.data;
    if (showQrcode.value && !qrcode.value) {
      getQrcode();
    }
  } else {
    toast(res.message || '获取医生信息失败')
  }
}

async function getQrcode() {
  const res = await api('addContactWay', { corpUserId: userid.value, corpId: corpId.value });
  if (res && res.data) {
    qrcode.value = res.data;
  }
}

onLoad((options) => {
  corpId.value = options.corpId;
  userid.value = options.userid;
  showQrcode.value = options.showQrcode === 'YES';
});

onShow(() => {
  if (corpId.value && userid.value) {
    getMember()
  }
})

watch(member, n => {
  if (n) {
    memberList.value = [n];
  }
}, { immediate: true })

</script>
<style>
page {
  overflow: auto;
}

.avatar {
  width: 120rpx;
  height: 128rpx;
}

.section-icon {
  width: 48rpx;
  height: 48rpx;
}

.mt-20 {
  margin-top: 40rpx;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.qrcode {
  width: 560rpx;
  height: 560rpx;
}
</style>