修改单位管理界面

pages/sys/workbench/unitManagement/unitManagement.vue

@@ -3,7 +3,7 @@
     <!-- 顶部单位信息栏 -->
     <view class="unit-header-container">
       <view class="unit-header">
-        <image class="header-icon" src="/static/ic_enterprise.png" mode="aspectFit" />
+        <image class="header-icon" src="/static/ic_enterprise.png" mode="aspectFit"/>
         <view class="unit-title">南川区******单位（共189人）</view>
       </view>
     </view>
@@ -20,7 +20,7 @@
               <view class="card-subtitle">入职/审核</view>
             </view>
             <view class="card-icon">
-              <image src="/static/ic_review.png" mode="aspectFit" />
+              <image src="/static/ic_review.png" mode="aspectFit"/>
             </view>
           </view>
         </view>
@@ -33,7 +33,7 @@
               <view class="card-subtitle">权限/离职</view>
             </view>
             <view class="card-icon">
-              <image src="/static/ic_resign.png" mode="aspectFit" />
+              <image src="/static/ic_resign.png" mode="aspectFit"/>
             </view>
           </view>
         </view>
@@ -41,14 +41,14 @@
 
       <!-- 右侧邀请新员工卡片 -->
       <view class="right-card" @click="showInviteDialog">
-        <image class="card-bg" src="/static/ic_unitBg.png" mode="aspectFill" />
+        <image class="card-bg" src="/static/ic_unitBg.png" mode="aspectFill"/>
         <view class="card-content">
           <view class="card-text">
             <view class="card-title">邀请新员工</view>
             <view class="card-subtitle">入职/邀请</view>
           </view>
           <view class="card-icon">
-            <image src="/static/ic_Invite_employees.png" mode="aspectFit" />
+            <image src="/static/ic_Invite_employees.png" mode="aspectFit"/>
           </view>
         </view>
       </view>
@@ -58,21 +58,21 @@
     <view class="invite-dialog" v-if="showDialog">
       <view class="dialog-content">
         <!-- 盾牌背景图 -->
-        <image class="shield-bg" src="/static/ic_shield.png" mode="aspectFit" />
+        <image class="shield-bg" src="/static/ic_shield.png" mode="aspectFit"/>
 
         <!-- 手机插画部分 -->
         <view class="phone-illustration">
-          <image class="phone-image" src="/static/121221.png" mode="aspectFit" />
+          <image class="phone-image" src="/static/121221.png" mode="aspectFit"/>
         </view>
 
-        <!-- 二维码部分 -->
-        <view class="qr-code-container">
-          <image class="qr-code" src="/static/ic_qrcode.png" mode="aspectFit" />
+        <!-- 二维码部分修改为动态生成 -->
+        <view class="qr-code-container" :style="{'--qr-size': qrSize + 'rpx'}">
+          <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
         </view>
 
         <!-- 关闭按钮 -->
         <view class="close-btn" @click="hideInviteDialog">
-          <image src="/static/ic_close.png" mode="aspectFit" />
+          <image src="/static/ic_close.png" mode="aspectFit"/>
         </view>
       </view>
     </view>
@@ -80,10 +80,15 @@
 </template>
 
 <script>
+// 引入二维码生成库
+import uQRCode from 'uqrcodejs';
+
 export default {
   data() {
     return {
-      showDialog: false
+      showDialog: false,
+      qrSize: 400, // 与CSS中保持一致
+
     }
   },
   methods: {
@@ -92,11 +97,6 @@ export default {
         url: '/pages/employee/review'
       });
     },
-    goToInviteEmployee() {
-      uni.navigateTo({
-        url: '/pages/employee/invite'
-      });
-    },
     goToEmployeeManagement() {
       uni.navigateTo({
         url: '/pages/employee/management'
@@ -104,9 +104,29 @@ export default {
     },
     showInviteDialog() {
       this.showDialog = true;
+      this.$nextTick( () => {
+         this.makeQRCode();
+      });
     },
     hideInviteDialog() {
       this.showDialog = false;
+    },
+// 修改后的makeQRCode方法
+    makeQRCode() {
+      // 获取uQRCode实例
+      var qr = new uQRCode();
+      // 设置二维码内容
+      qr.data = "https://uqrcode.cn/doc";
+      // 设置二维码大小，必须与canvas设置的宽高一致
+      qr.size = 200;
+      // 调用制作二维码方法
+      qr.make();
+      // 获取canvas上下文
+      var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
+      // 设置uQRCode实例的canvas上下文
+      qr.canvasContext = canvasContext;
+      // 调用绘制方法将二维码图案绘制到canvas上
+      qr.drawCanvas();
     }
   }
 }
@@ -116,7 +136,7 @@ export default {
 .unit-management {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 95vh;
   background-color: #f5f5f5;
   padding: 20rpx;
 }
@@ -256,7 +276,6 @@ export default {
   width: 70%;
   background-color: #2186FF;
   border-radius: 20rpx;
-  padding: 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -286,19 +305,26 @@ export default {
   height: 100%;
 }
 
+/* 修复：统一用动态尺寸，移除固定宽高，优化居中 */
 .qr-code-container {
-  width: 300rpx;
-  height: 300rpx;
+  /* 容器尺寸略大于二维码，留出白边 */
+  width:380rpx;
+  height: 380rpx;
   background-color: white;
-  padding: 20rpx;
   border-radius: 10rpx;
-  margin-bottom: 40rpx;
+  margin-top: 50rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
   z-index: 1;
 }
 
-.qr-code {
-  width: 100%;
-  height: 100%;
+/* 修复：移除固定宽高，让动态绑定生效 */
+.qr-code-canvas {
+  display: block;
+  /* 这里不写固定值，完全由:style绑定控制 */
 }
 
 .close-btn {