first commit

2026-04-18 08:31:55 +08:00
commit eeb09abc04
989 changed files with 137562 additions and 0 deletions
--- a/property-uniapp-project/pages/visitor/qrcode-page.vue
+++ b/property-uniapp-project/pages/visitor/qrcode-page.vue
@@ -0,0 +1,117 @@
+<template>
+  <view class="qrcode-page">
+
+    <view class="qrcode-wrap">
+      <view class="qrcode-box">
+        <!-- 调用uqrcode组件 -->
+        <uqrcode 
+          :value="qrcodeValue" 
+          :size="400" 
+          :logo="'/static/logo.png'"
+          :logoSize="0.2"
+          canvasId="visitor-qrcode"
+          @success="onQrcodeSuccess"
+        ></uqrcode>
+        <!-- 二维码边框装饰 -->
+        <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-tips">分享此二维码给访客，可扫码开门，单次有效</text>
+    </view>
+
+    <view class="btn-wrap">
+      <button class="send-btn" @click="sendToFriend">发送给好友</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';
+
+// 二维码内容（替换为实际的通行链接）
+const qrcodeValue = ref('https://your-domain.com/visitor/123456');
+// 生成的二维码临时图片地址
+const qrcodeImage = ref('');
+
+// 二维码生成成功回调
+const onQrcodeSuccess = (tempFilePath) => {
+  qrcodeImage.value = tempFilePath;
+  uni.showToast({ title: '二维码生成成功', icon: 'success' });
+};
+
+// 分享给好友
+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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 60rpx;
+}
+.qrcode-box {
+  position: relative;
+  width: 400rpx;
+  height: 400rpx;
+}
+/* 二维码边框样式 */
+.qrcode-border {
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid #007aff;
+}
+.border-top { top: 0; left: 0; border-right: none; border-bottom: none; }
+.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;
+  margin-top: 30rpx;
+  color: #333;
+}
+.qrcode-tips {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 10rpx;
+}
+/* 按钮样式 */
+.btn-wrap {
+  margin: 80rpx 20rpx 20rpx;
+}
+.send-btn {
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 8rpx;
+  height: 88rpx;
+  font-size: 32rpx;
+}
+</style>