对接访客邀请接口

property-uniapp-project/pageSubPack/visitor/qrcode-page.vue

@@ -1,72 +1,66 @@
 <template>
   <view class="qrcode-page">
-
     <view class="qrcode-wrap">
+      <!-- 显示后台返回的二维码图片 -->
       <view class="qrcode-box">
-        <!-- 调用uqrcode组件 -->
-        <uqrcode 
-          :value="qrcodeValue" 
-          :size="400" 
-          :logo="'http://47.104.199.163:9090/images/logo.png'"
-          :logoSize="0.2"
-          canvasId="visitor-qrcode"
-          @success="onQrcodeSuccess"
-        ></uqrcode>
-        <!-- 二维码边框装饰 -->
+        <image :src="qrcodeUrl" mode="widthFix" class="qrcode-img" />
+        
+        <!-- 四角装饰边框保留 -->
         <view class="qrcode-border border-top"></view>
         <view class="qrcode-border border-right"></view>
         <view class="qrcode-border border-bottom"></view>
         <view class="qrcode-border border-left"></view>
       </view>
 
-      <text class="qrcode-desc">桂花园（别墅）东门通行二维码</text>
+      <text class="qrcode-desc">{{houseName}}通行二维码</text>
       <text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
     </view>
 
     <view class="btn-wrap">
-      <button class="send-btn" @click="sendToFriend">发送给好友</button>
+      <button class="send-btn"  open-type="share" :image-url="qrcodeUrl">发送给好友</button>
     </view>
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-// import { navigateBack, showToast, share } from '@dcloudio/uni-app';
-// 引入本地uqrcode组件
-import uqrcode from '@/components/uqrcode/uqrcode.vue';
+import { onLoad } from '@dcloudio/uni-app';
 
-// 二维码内容（替换为实际的通行链接）
-const qrcodeValue = ref('https://your-domain.com/visitor/123456');
-// 生成的二维码临时图片地址
+// 直接接收图片URL
+const qrcodeUrl = ref('');
 const qrcodeImage = ref('');
+const houseName = ref('')
 
-// 二维码生成成功回调
-const onQrcodeSuccess = (tempFilePath) => {
-  qrcodeImage.value = tempFilePath;
-  uni.showToast({ title: '二维码生成成功', icon: 'success' });
-};
+onLoad((option) => {
+  if (option.qrcodeUrl) {
+    // 接收后台返回的二维码图片链接
+    qrcodeUrl.value = decodeURIComponent(option.qrcodeUrl);
+    qrcodeImage.value = qrcodeUrl.value;
+	houseName.value = option.villageName
+    console.log('最终二维码图片：', qrcodeUrl.value);
+  }
+});
 
 // 分享给好友
-const sendToFriend = () => {
-  if (!qrcodeImage.value) {
-    uni.showToast({ title: '二维码生成中...', icon: 'none' });
-    return;
-  }
-  
-  uni.share({
-    provider: 'weixin',
-    type: 0,
-    title: '访客通行二维码',
-    imageUrl: qrcodeImage.value,
-    success: () => uni.showToast({ title: '分享成功' }),
-    fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
-  });
-};
+// const sendToFriend = () => {
+//   if (!qrcodeImage.value) {
+//     uni.showToast({ title: '二维码生成中...', icon: 'none' });
+//     return;
+//   }
+
+//   uni.share({
+//     provider: 'weixin',
+//     type: 0,
+//     title: '访客通行二维码',
+//     imageUrl: qrcodeImage.value,
+//     success: () => uni.showToast({ title: '分享成功' }),
+//     fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
+//   });
+// };
 </script>
 
 <style scoped>
 .qrcode-page {
-  /* background-color: #f8f8f8; */
   min-height: 100vh;
 }
 .qrcode-wrap {
@@ -80,7 +74,12 @@ const sendToFriend = () => {
   width: 400rpx;
   height: 400rpx;
 }
-/* 二维码边框样式 */
+/* 图片铺满 */
+.qrcode-img {
+  width: 100%;
+  height: 100%;
+}
+/* 边框装饰 */
 .qrcode-border {
   position: absolute;
   width: 40rpx;
@@ -91,7 +90,7 @@ const sendToFriend = () => {
 .border-right { top: 0; right: 0; border-left: none; border-bottom: none; }
 .border-bottom { bottom: 0; right: 0; border-left: none; border-top: none; }
 .border-left { bottom: 0; left: 0; border-right: none; border-top: none; }
-/* 文字样式 */
+
 .qrcode-desc {
   font-size: 32rpx;
   font-weight: 600;
@@ -103,9 +102,8 @@ const sendToFriend = () => {
   color: #999;
   margin-top: 10rpx;
 }
-/* 按钮样式 */
 .btn-wrap {
-  margin: 80rpx 20rpx 20rpx;
+  margin: 80rpx 40rpx 20rpx;
 }
 .send-btn {
   background-color: #007aff;
@@ -114,6 +112,5 @@ const sendToFriend = () => {
   height: 88rpx;
   font-size: 28rpx;
   line-height: 88rpx;
-  
 }
 </style>