117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<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> |