ykt-wxapp/pages/case/patient-invite.vue

<template>
  <view class="page">
    <view class="content">
      <view class="code-row">
        <text class="code-text">{{ displayTeamCode }}</text>
        <view class="help" @click="showHelp">
          <uni-icons type="help-filled" size="18" color="#5d8aff"></uni-icons>
        </view>
      </view>

      <view class="qr-card">
        <image class="qr-image" :src="qrImageUrl" mode="aspectFit" @click="previewQr" />
      </view>

      <view class="tips">
        <text class="tips-title">微信扫一扫上面的二维码</text>
        <text class="tips-sub">进入团队首页，即可发起线上咨询、建档授权等服务</text>
      </view>
    </view>

    <view class="footer">
      <button class="footer-btn outline" @click="saveQr">保存图片</button>

      <!-- #ifdef MP-WEIXIN -->
      <button class="footer-btn primary" open-type="share">分享到微信</button>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <button class="footer-btn primary" @click="shareFallback">分享到微信</button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';

const teamCode = ref('133****3356');
const qrImageUrl = ref('');

const displayTeamCode = computed(() => `${teamCode.value}服务团队码`);

const buildQrUrl = (text) => {
  // 仅用于演示UI：实际项目建议由后端返回可扫码的二维码图片地址
  const encoded = encodeURIComponent(text);
  return `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encoded}`;
};

onLoad((query) => {
  if (query?.teamCode) teamCode.value = String(query.teamCode);
  if (query?.qrUrl) {
    qrImageUrl.value = String(query.qrUrl);
  } else {
    qrImageUrl.value = buildQrUrl(`TEAM_CODE:${teamCode.value}`);
  }
});

const showHelp = () => {
  uni.showModal({
    title: '服务团队码',
    content: '患者微信扫一扫二维码进入团队首页，可发起线上咨询、建档授权等服务。',
    showCancel: false
  });
};

const previewQr = () => {
  if (!qrImageUrl.value) return;
  uni.previewImage({ urls: [qrImageUrl.value] });
};

const saveQr = () => {
  if (!qrImageUrl.value) {
    uni.showToast({ title: '二维码生成中，请稍后', icon: 'none' });
    return;
  }

  uni.showLoading({ title: '保存中...' });
  uni.downloadFile({
    url: qrImageUrl.value,
    success: (res) => {
      const filePath = res.tempFilePath;
      uni.saveImageToPhotosAlbum({
        filePath,
        success: () => {
          uni.hideLoading();
          uni.showToast({ title: '已保存到相册', icon: 'success' });
        },
        fail: () => {
          uni.hideLoading();
          uni.showModal({
            title: '保存失败',
            content: '请在系统设置中允许保存到相册后重试。',
            confirmText: '去设置',
            cancelText: '取消',
            success: (r) => {
              if (r.confirm) {
                uni.openSetting?.({});
              }
            }
          });
        }
      });
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({ title: '下载二维码失败', icon: 'none' });
    }
  });
};

const shareFallback = () => {
  uni.showToast({ title: '请使用右上角菜单分享', icon: 'none' });
};

onShareAppMessage(() => {
  return {
    title: '邀请您加入服务团队',
    path: `/pages/case/patient-invite?teamCode=${encodeURIComponent(teamCode.value)}`
  };
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.content {
  padding: 22px 16px 0;
}

.code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.code-text {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.help {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-card {
  margin: 18px auto 0;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-image {
  width: 260px;
  height: 260px;
}

.tips {
  margin-top: 16px;
  text-align: center;
  padding: 0 16px;
}

.tips-title {
  display: block;
  font-size: 14px;
  color: #3a3a3a;
  margin-bottom: 6px;
}

.tips-sub {
  display: block;
  font-size: 12px;
  color: #999;
  line-height: 18px;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.footer-btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  font-size: 15px;
}

.footer-btn::after {
  border: none;
}

.footer-btn.outline {
  background: #fff;
  color: #5d8aff;
  border: 1px solid #5d8aff;
}

.footer-btn.primary {
  background: #5d8aff;
  color: #fff;
}
</style>