|
|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <CustomNav title="二维码" leftType="back" :opacity="0" />
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="content">
|
|
|
+ <view class="qr-card">
|
|
|
+ <view class="user-info">
|
|
|
+ <view class="title-row">
|
|
|
+ <text class="card-title">个人身份码</text>
|
|
|
+ <view class="role-badge">{{ getRoleText(user.role) }}</view>
|
|
|
+ </view>
|
|
|
+ <text class="user-name">{{ user.nickname || '未知用户' }}</text>
|
|
|
+ <text class="qr-desc">扫码查看我的健康档案</text>
|
|
|
+ </view>
|
|
|
+ <view class="qr-container">
|
|
|
+ <canvas
|
|
|
+ canvas-id="qrcode"
|
|
|
+ class="qr-canvas"
|
|
|
+ v-if="qrData"
|
|
|
+ ></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { onShow } from '@dcloudio/uni-app'
|
|
|
+import CustomNav from '@/components/custom-nav.vue'
|
|
|
+// @ts-ignore
|
|
|
+import drawQrcode from 'weapp-qrcode'
|
|
|
+
|
|
|
+const user = ref<{ nickname?: string; role?: string | number; openid?: string; wx_openid?: string }>({})
|
|
|
+const qrData = ref('')
|
|
|
+
|
|
|
+const getRoleText = (role: string | number | undefined) => {
|
|
|
+ const roleMap: { [key: number]: string } = {
|
|
|
+ 2: '医生',
|
|
|
+ 3: '患者',
|
|
|
+ 4: '患者家属'
|
|
|
+ }
|
|
|
+ return roleMap[Number(role)] || '未知身份'
|
|
|
+}
|
|
|
+
|
|
|
+const loadUser = () => {
|
|
|
+ try {
|
|
|
+ const u = uni.getStorageSync('user_info')
|
|
|
+ console.log('Loaded user_info from storage:', u)
|
|
|
+ if (u) {
|
|
|
+ user.value = u
|
|
|
+ console.log('User data set:', user.value)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('Error loading user info:', e)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const generateQRCode = () => {
|
|
|
+ console.log('Generating QR code, user data:', user.value)
|
|
|
+ if (!user.value.wx_openid || !user.value.role) {
|
|
|
+ console.log('Missing wx_openid or role:', { wx_openid: user.value.wx_openid, role: user.value.role })
|
|
|
+ uni.showToast({ title: '用户信息不完整', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const data = JSON.stringify({
|
|
|
+ openid: user.value.wx_openid,
|
|
|
+ role: user.value.role
|
|
|
+ })
|
|
|
+ console.log('QR data:', data)
|
|
|
+ qrData.value = data
|
|
|
+ // 使用 weapp-qrcode 生成二维码
|
|
|
+ drawQrcode({
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ canvasId: 'qrcode',
|
|
|
+ text: data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ loadUser()
|
|
|
+ generateQRCode()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-top: calc(var(--status-bar-height) + 44px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-card {
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 50rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 550rpx;
|
|
|
+ width: 85%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-card::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 8rpx;
|
|
|
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.user-info {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.title-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2c3e50;
|
|
|
+ text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.role-badge {
|
|
|
+ margin-left: auto;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: white;
|
|
|
+ padding: 6rpx 12rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.user-info::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -20rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 80rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
|
+ border-radius: 2rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-name {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2c3e50;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.qr-desc {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #95a5a6;
|
|
|
+ font-weight: 400;
|
|
|
+ display: block;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border: 2rpx solid #dee2e6;
|
|
|
+ box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.qr-canvas {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+</style>
|
mcbaiyun