116 lines
2.8 KiB
Vue
116 lines
2.8 KiB
Vue
<template>
|
||
<view class="qrcode-page">
|
||
<view class="qrcode-wrap">
|
||
<!-- 显示后台返回的二维码图片 -->
|
||
<view class="qrcode-box">
|
||
<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">{{houseName}}通行二维码</text>
|
||
<text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
|
||
</view>
|
||
|
||
<view class="btn-wrap">
|
||
<button class="send-btn" open-type="share" :image-url="qrcodeUrl">发送给好友</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
|
||
// 直接接收图片URL
|
||
const qrcodeUrl = ref('');
|
||
const qrcodeImage = ref('');
|
||
const houseName = ref('')
|
||
|
||
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' })
|
||
// });
|
||
// };
|
||
</script>
|
||
|
||
<style scoped>
|
||
.qrcode-page {
|
||
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-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/* 边框装饰 */
|
||
.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 40rpx 20rpx;
|
||
}
|
||
.send-btn {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
height: 88rpx;
|
||
font-size: 28rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
</style> |