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

<template>
  <view v-if="member" class="flex flex-col h-full items-center justify-center">
    <view class="business-card">
      <view class="flex">
        <image class="mr-10 avatar" :src="member.avatar || '/static/default-avatar.png'"></image>
        <view class="w-0 flex-grow leading-normal">
          <view class="flex items-center">
            <view class="mr-5 text-lg font-semibold text-dark">{{ member.anotherName }}</view>
            <view class="text-base text-warning">@企业微信</view>
          </view>
          <view class="truncate text-base text-dark">{{ memberJob[member.userid] }}</view>
        </view>
      </view>
      <view class="mt-12 border-primary qrcode p-15 mx-auto rounded" @click="previewImage()">
        <image v-if="qrcode" class="h-full w-full" :src="qrcode"></image>
      </view>
    </view>
  </view>
</template>
<script setup>
import { 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 qrcode = ref('')
const member = ref(null);
const { memberJob, memberList } = useJob();

function previewImage() {
  if (!qrcode.value) return;
  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 (!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;
});

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

watch(member, n => {
  memberList.value = [n].filter(Boolean)
}, { immedate: true })

</script>
<style scoped>
.business-card {
  width: 600rpx;
}

.avatar {
  width: 80rpx;
  height: 96rpx;
}

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